Changeset 11447

Timestamp:

01/17/2022 04:03:27 AM (4 years ago)

Author:

dd32

Message:

Rosetta: PTE management: Compress projecting listing when adding to localStorage.

The JSON being cached is currently ~6.2MB, most browsers enforce an absolute maximum size of 5MB for localStorage.
This compresses the JSON down to ~1.6MB which should be small enough for quite some time.

See #6022.

Location:

sites/trunk/global.wordpress.org/public_html/wp-content/mu-plugins/roles

Files:

• js/rosetta-roles.js (modified) (3 diffs)
• rosetta-roles.php (modified) (1 diff)

sites/trunk/global.wordpress.org/public_html/wp-content/mu-plugins/roles/js/rosetta-roles.js

@@ -463 +463 @@
     };
 
+    projects.getProjects = function() {
+        return projects.getLocalProjects().then(
+            function( localProjects ) {
+                return localProjects;
+            },
+            function() {
+                return projects.getRemoteProjects().then( function( remoteProjects ) {
+                    if ( projects.hasStorage() ) {
+                        projects.storeLocalProjects( remoteProjects );
+                    }
+
+                    return remoteProjects;
+                } );
+            }
+        );
+    };
+
     projects.getRemoteProjects = function() {
         return wp.ajax.post( 'rosetta-get-projects' );
@@ -468 +485 @@
 
     projects.getLocalProjects = function() {
+        if ( ! projects.hasStorage() ) {
+            return Promise.reject();
+        }
+
         var lastUpdated = window.localStorage.getItem( 'projectsLastUpdated' );
         if ( ! lastUpdated || 'undefined' === lastUpdated ) {
-            return false;
+            return Promise.reject();
         }
 
         if ( lastUpdated < projects.settings.lastUpdated ) {
-            return false;
+            return Promise.reject();
         }
 
         var json = window.localStorage.getItem( 'projects' );
         if ( ! json ) {
-            return false;
-        }
-
-        return JSON.parse( json );
+            return Promise.reject();
+        }
+
+        if ( '[' === json.substring( 0, 1 ) ) {
+            return Promise.resolve( JSON.parse( json ) );
+        }
+
+        // decompress
+        return projects.decompress( json ).then( function( data ) {
+            return JSON.parse( data );
+        } );
     };
 
     projects.storeLocalProjects = function( data ) {
         window.localStorage.setItem( 'projectsLastUpdated', projects.settings.lastUpdated );
-        window.localStorage.setItem( 'projects', JSON.stringify( data ) );
+
+        projects.compress( JSON.stringify( data ) ).then( function( data ) {
+            window.localStorage.setItem( 'projects', data );
+        } ).catch( function() {
+            console.log( "Caching projects locally failed." );
+        } );
+    };
+
+    projects.compress = async function( data ) {
+        if ( 'undefined' === typeof CompressionStream ) {
+            return Promise.reject();
+        }
+
+        var stream = new CompressionStream( 'gzip' ),
+            streamWriter = stream.writable.getWriter();
+
+        streamWriter.write(
+            new TextEncoder().encode( data )
+        );
+        streamWriter.close();
+
+        return new Response( stream.readable ).arrayBuffer().then( function( buffer ) {
+            // Base64 encode it, so it can be stored in localStorage
+            return btoa(
+                new Uint8Array( buffer )
+                    .reduce( ( data, byte ) => data + String.fromCharCode( byte ), '' )
+            );
+        } );        
+    };
+
+    projects.decompress = async function( data ) {
+        if ( 'undefined' === typeof DecompressionStream ) {
+            return Promise.reject();
+        }
+
+        // Base64 decode
+        var buffer = Uint8Array.from( atob( data ), c => c.charCodeAt(0) ),
+            stream = new DecompressionStream( 'gzip' ),
+            streamWriter = stream.writable.getWriter();
+
+        streamWriter.write( buffer );
+        streamWriter.close();
+
+        return new Response( stream.readable ).arrayBuffer().then( function( arrayBuffer ) {
+            return new TextDecoder().decode( arrayBuffer );
+        } );
     };
 
@@ -503 +576 @@
         });
 
-        var data = null;
-
-        if ( projects.hasStorage() ) {
-            data = projects.getLocalProjects();
-        }
-
-        if ( data && data.length ) {
-            projects.initFrame( data );
-            return;
-        }
-
-        projects.getRemoteProjects().done( function( response ) {
+        projects.getProjects().then( function( response ) {
             projects.initFrame( response );
-            if ( projects.hasStorage() ) {
-                projects.storeLocalProjects( response );
-            }
-        });
+        } );
     };
 

sites/trunk/global.wordpress.org/public_html/wp-content/mu-plugins/roles/rosetta-roles.php

@@ -122 +122 @@
     public static function enqueue_scripts() {
         wp_enqueue_script( 'string_score', plugins_url( '/js/string_score.min.js', __FILE__ ), array(), '0.1.22', true );
-        wp_enqueue_script( 'rosetta-roles', plugins_url( '/js/rosetta-roles.js', __FILE__ ), array( 'jquery', 'wp-backbone', 'string_score' ), '11', true );
+        wp_enqueue_script( 'rosetta-roles', plugins_url( '/js/rosetta-roles.js', __FILE__ ), array( 'jquery', 'wp-backbone', 'string_score' ), 12, true );
     }