Merge pull request #1554 from ianmcnally/react-fix-url-for-assets-loa…

…ding Fix: reacts urlForAssets loading non js,css files
storybookjs · Aug 18, 2017 · 7ea6c54 · 7ea6c54
2 parents ecbbcc6 + 3ad18e8
commit 7ea6c54
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/app/react/src/server/iframe.html.js b/app/react/src/server/iframe.html.js
@@ -1,5 +1,7 @@
 import url from 'url';
 
+const getExtensionForFilename = filename => /.+\.(\w+)$/.exec(filename)[1];
+
 // assets.preview will be:
 // - undefined
 // - string e.g. 'static/preview.9adbb5ef965106be1cc3.bundle.js'
@@ -21,7 +23,6 @@ export const urlsFromAssets = assets => {
     css: [],
   };
 
-  const re = /.+\.(\w+)$/;
   Object.keys(assets)
     // Don't load the manager script in the iframe
     .filter(key => key !== 'manager')
@@ -30,9 +31,16 @@ export const urlsFromAssets = assets => {
       if (!Array.isArray(assetList)) {
         assetList = [assetList];
       }
-      assetList.filter(assetUrl => re.exec(assetUrl)[1] !== 'map').forEach(assetUrl => {
-        urls[re.exec(assetUrl)[1]].push(assetUrl);
-      });
+      assetList
+        .filter(assetUrl => {
+          const extension = getExtensionForFilename(assetUrl);
+          const isMap = extension === 'map';
+          const isSupportedExtension = Boolean(urls[extension]);
+          return isSupportedExtension && !isMap;
+        })
+        .forEach(assetUrl => {
+          urls[getExtensionForFilename(assetUrl)].push(assetUrl);
+        });
     });
 
   return urls;

diff --git a/app/react/src/server/iframe.html.test.js b/app/react/src/server/iframe.html.test.js
@@ -18,4 +18,14 @@ describe('server.urlsFromAssets', () => {
       css: ['static/preview.y.css'],
     });
   });
+
+  it('should not return non-js or non-css assets', () => {
+    const fixture = {
+      'some-thing.svg': 'some-thing.svg',
+    };
+    expect(urlsFromAssets(fixture)).toEqual({
+      js: [],
+      css: [],
+    });
+  });
 });
diff --git a/app/vue/src/server/iframe.html.js b/app/vue/src/server/iframe.html.js
@@ -1,5 +1,7 @@
 import url from 'url';
 
+const getExtensionForFilename = filename => /.+\.(\w+)$/.exec(filename)[1];
+
 // assets.preview will be:
 // - undefined
 // - string e.g. 'static/preview.9adbb5ef965106be1cc3.bundle.js'
@@ -21,17 +23,27 @@ const urlsFromAssets = assets => {
     css: [],
   };
 
-  const re = /.+\.(\w+)$/;
   Object.keys(assets)
     // Don't load the manager script in the iframe
     .filter(key => key !== 'manager')
     .forEach(key => {
-      const asset = assets[key];
+      let asset = assets[key];
       if (typeof asset === 'string') {
-        urls[re.exec(asset)[1]].push(asset);
+        urls[getExtensionForFilename(asset)].push(asset);
       } else {
-        const assetUrl = asset.find(u => re.exec(u)[1] !== 'map');
-        urls[re.exec(assetUrl)[1]].push(assetUrl);
+      if (!Array.isArray(asset)) {
+        asset = [asset];
+      }
+      asset
+        .filter(assetUrl => {
+          const extension = getExtensionForFilename(assetUrl);
+          const isMap = extension === 'map';
+          const isSupportedExtension = Boolean(urls[extension]);
+          return isSupportedExtension && !isMap;
+        })
+        .forEach(assetUrl => {
+          urls[getExtensionForFilename(assetUrl)].push(assetUrl);
+        });
       }
     });