diff --git a/app/react/src/server/iframe.html.js b/app/react/src/server/iframe.html.js
index 985130293994..f55190f401ce 100644
--- a/app/react/src/server/iframe.html.js
+++ b/app/react/src/server/iframe.html.js
@@ -11,31 +11,44 @@ import url from 'url';
const previewUrlsFromAssets = assets => {
if (!assets) {
return {
- js: 'static/preview.bundle.js',
+ js: ['static/preview.bundle.js'],
+ css: [],
};
}
- if (typeof assets.preview === 'string') {
- return {
- js: assets.preview,
- };
- }
-
- return {
- js: assets.preview.find(filename => filename.match(/\.js$/)),
- css: assets.preview.find(filename => filename.match(/\.css$/)),
+ const urls = {
+ js: [],
+ 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];
+ if (typeof asset === 'string') {
+ urls[re.exec(asset)[1]].push(asset);
+ } else {
+ const assetUrl = asset.find(u => re.exec(u)[1] !== 'map');
+ urls[re.exec(assetUrl)[1]].push(assetUrl);
+ }
+ });
+
+ return urls;
};
export default function(data) {
const { assets, headHtml, publicPath } = data;
- const previewUrls = previewUrlsFromAssets(assets);
+ const urls = urlsFromAssets(assets);
- let previewCssTag = '';
- if (previewUrls.css) {
- previewCssTag = ``;
- }
+ const cssTags = urls.css
+ .map(u => ``)
+ .join('\n');
+ const scriptTags = urls.js
+ .map(u => ``)
+ .join('\n');
return `
@@ -50,12 +63,12 @@ export default function(data) {
Storybook
${headHtml}
- ${previewCssTag}
+ ${cssTags}
-
+ ${scriptTags}