feat(loading): Cache all loaded assets with BuiltinHelper

- Add `cache` method to BuiltinHelper, to store retrieved assets
- Cache assets retrieved with other helpers with BuiltinHelper
- Flatten the BuiltinHelper cache structure, so only the md5 is needed to retrieve an asset. A collision between two types would be interesting but unlikely
- Add a synchronous `get` method to ScratchStorage that passes through to the BuiltinHelper for cached assets
- Fix WebHelper, so it sets the dataFormat on the Asset it returns

Author: Ray Schamp

src/Asset.js

@@ -14,6 +14,14 @@ class Asset {
 
         /** @type {string} */
         this.assetId = assetId;
+
+        this.setData(data, dataFormat);
+
+        /** @type {Asset[]} */
+        this.dependencies = [];
+    }
+
+    setData (data, dataFormat) {
         if (data && !dataFormat) {
             throw new Error('Data provided without specifying its format');
         }
@@ -23,9 +31,6 @@ class Asset {
 
         /** @type {Buffer} */
         this.data = data;
-
-        /** @type {Asset[]} */
-        this.dependencies = [];
     }
 
     /**
@@ -41,12 +46,8 @@ class Asset {
      * @returns {string} - A data URI representing the asset's data.
      */
     encodeDataURI (contentType) {
-        return [
-            'data:',
-            contentType || this.assetType.contentType,
-            ';base64,',
-            this.data.toString('base64')
-        ].join('');
+        contentType = contentType || this.assetType.contentType;
+        return `data:${contentType};base64,${this.data.toString('base64')}`;
     }
 }
 

src/BuiltinHelper.js

@@ -54,22 +54,9 @@ class BuiltinHelper extends Helper {
          */
         this.assets = {};
 
-        const numAssets = BuiltinAssets.length;
-        for (let assetIndex = 0; assetIndex < numAssets; ++assetIndex) {
-            const assetRecord = BuiltinAssets[assetIndex];
-            const typeName = assetRecord.type.name;
-
-            /** @type {AssetIdMap} */
-            const typeBucket = this.assets[typeName] = this.assets[typeName] || {};
-
-            if (!assetRecord.id) {
-                const hash = crypto.createHash('md5');
-                hash.update(assetRecord.data);
-                assetRecord.id = hash.digest('hex');
-            }
-
-            typeBucket[assetRecord.id] = assetRecord;
-        }
+        BuiltinAssets.forEach(
+            assetRecord => this.cache(assetRecord.type, assetRecord.format, assetRecord.data, assetRecord.id)
+        );
     }
 
     /**
@@ -83,23 +70,42 @@ class BuiltinHelper extends Helper {
         }
     }
 
+    get (assetId) {
+        let asset = null;
+        if (this.assets.hasOwnProperty(assetId)) {
+            /** @type{BuiltinAssetRecord} */
+            const assetRecord = this.assets[assetId];
+            asset = new Asset(assetRecord.type, assetRecord.id, assetRecord.format, assetRecord.data);
+        }
+        return asset;
+    }
+
+    cache (assetType, dataFormat, data, id) {
+        if (!dataFormat) throw new Error('Data cached without specifying its format');
+        if (id) {
+            if (this.assets.hasOwnProperty(id)) return id;
+        } else {
+            const hash = crypto.createHash('md5');
+            hash.update(data);
+            id = hash.digest('hex');
+        }
+        this.assets[id] = {
+            type: assetType,
+            format: dataFormat,
+            id: id,
+            data: data
+        };
+        return id;
+    }
+
     /**
      * Fetch an asset but don't process dependencies.
      * @param {AssetType} assetType - The type of asset to fetch.
      * @param {string} assetId - The ID of the asset to fetch: a project ID, MD5, etc.
      * @return {Promise.<Asset>} A promise for the contents of the asset.
      */
     load (assetType, assetId) {
-        let asset = null;
-        if (this.assets.hasOwnProperty(assetType.name)) {
-            const typeBucket = this.assets[assetType.name];
-            if (typeBucket.hasOwnProperty(assetId)) {
-                /** @type{BuiltinAssetRecord} */
-                const assetRecord = typeBucket[assetId];
-                asset = new Asset(assetRecord.type, assetRecord.id, assetRecord.format, assetRecord.data);
-            }
-        }
-        return Promise.resolve(asset);
+        return Promise.resolve(this.get(assetId));
     }
 }
 

src/ScratchStorage.js

@@ -49,6 +49,10 @@ class ScratchStorage {
         return AssetType;
     }
 
+    get (assetId) {
+        return this.builtinHelper.get(assetId);
+    }
+
     /**
      * Register a web-based source for assets. Sources will be checked in order of registration.
      * @param {Array.<AssetType>} types - The types of asset provided by this source.
@@ -100,13 +104,21 @@ class ScratchStorage {
         return new Promise((fulfill, reject) => {
             const tryNextHelper = () => {
                 if (helperIndex < helpers.length) {
-                    helpers[helperIndex++].load(assetType, assetId)
+                    const helper = helpers[helperIndex++];
+                    helper.load(assetType, assetId)
                         .then(
                             asset => {
                                 if (asset === null) {
                                     tryNextHelper();
                                 } else {
                                     // TODO? this.localHelper.cache(assetType, assetId, asset);
+                                    if (helper !== this.builtinHelper) {
+                                        asset.assetId = this.builtinHelper.cache(
+                                            assetType,
+                                            asset.dataFormat,
+                                            asset.data
+                                        );
+                                    }
                                     // Note that other attempts may have caused errors, effectively suppressed here.
                                     fulfill(asset);
                                 }

src/WebHelper.js

@@ -77,7 +77,7 @@ class WebHelper extends Helper {
                                 }
                                 tryNextSource();
                             } else {
-                                asset.data = response.body;
+                                asset.setData(response.body, assetType.runtimeFormat);
                                 fulfill(asset);
                             }
                         },