Create ScratchStorage instance & give it to the VM

There are a handful of places where the GUI code could use the storage
module directly; converting those is for a later change.

package.json

@@ -57,6 +57,7 @@
     "scratch-audio": "latest",
     "scratch-blocks": "latest",
     "scratch-render": "latest",
+    "scratch-storage": "latest",
     "scratch-vm": "latest",
     "style-loader": "0.13.2",
     "svg-to-image": "1.1.3",

src/containers/stage.jsx

@@ -1,10 +1,11 @@
 const bindAll = require('lodash.bindall');
+const AudioEngine = require('scratch-audio');
 const React = require('react');
 const Renderer = require('scratch-render');
-const AudioEngine = require('scratch-audio');
 const VM = require('scratch-vm');
 
 const StageComponent = require('../components/stage/stage.jsx');
+const Storage = require('../lib/storage');
 
 class Stage extends React.Component {
     constructor (props) {
@@ -32,10 +33,12 @@ class Stage extends React.Component {
         this.attachRectEvents();
         this.attachMouseEvents(this.canvas);
         this.updateRect();
-        this.renderer = new Renderer(this.canvas);
-        this.props.vm.attachRenderer(this.renderer);
         this.audioEngine = new AudioEngine();
         this.props.vm.attachAudioEngine(this.audioEngine);
+        this.renderer = new Renderer(this.canvas);
+        this.props.vm.attachRenderer(this.renderer);
+        this.storage = new Storage();
+        this.props.vm.attachStorage(this.storage);
     }
     shouldComponentUpdate () {
         return false;

src/lib/storage.js

@@ -0,0 +1,30 @@
+const ScratchStorage = require('scratch-storage');
+const AssetType = ScratchStorage.AssetType;
+
+const PROJECT_SERVER = 'https://cdn.projects.scratch.mit.edu';
+const ASSET_SERVER = 'https://cdn.assets.scratch.mit.edu';
+
+/**
+ * Wrapper for ScratchStorage which adds default web sources.
+ * @todo make this more configurable
+ */
+class Storage extends ScratchStorage {
+    constructor () {
+        super();
+        this.addWebSource(
+            [AssetType.Project],
+            projectAsset => {
+                const [projectId, revision] = projectAsset.assetId.split('.');
+                return revision ?
+                    `${PROJECT_SERVER}/internalapi/project/${projectId}/get/${revision}` :
+                    `${PROJECT_SERVER}/internalapi/project/${projectId}/get/`;
+            }
+        );
+        this.addWebSource(
+            [AssetType.ImageVector, AssetType.ImageBitmap, AssetType.Sound],
+            asset => `${ASSET_SERVER}/internalapi/asset/${asset.assetId}.${asset.assetType.runtimeFormat}/get/`
+        );
+    }
+}
+
+module.exports = Storage;