handle css bundles for subapps

electrode-io · Jan 18, 2020 · 9d85e25 · 9d85e25
1 parent c24c68a
commit 9d85e25
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 24 deletions.
diff --git a/packages/subapp-web/lib/load.js b/packages/subapp-web/lib/load.js
@@ -75,7 +75,14 @@ module.exports = function setup(setupContext, token) {
       if (!webpackDev) {
         // if we have to inline the subapp's JS bundle, we load it for production mode
         const src = Fs.readFileSync(Path.resolve("dist/js", bundleAsset.name)).toString();
-        inlineSubAppJs = `<script>/*${name}*/${src}</script>`;
+        const ext = Path.extname(bundleAsset.name);
+        if (ext === ".js") {
+          inlineSubAppJs = `<script>/*${name}*/${src}</script>`;
+        } else if (ext === ".css") {
+          inlineSubAppJs = `<style id="${name}">${src}</style>`;
+        } else {
+          inlineSubAppJs = `<!-- UNKNOWN bundle extension ${name} -->`;
+        }
       } else {
         inlineSubAppJs = true;
       }
@@ -109,7 +116,16 @@ module.exports = function setup(setupContext, token) {
             cdnJsBundles[ep] &&
             []
               .concat(cdnJsBundles[ep])
-              .map(jsBundle => `<script src="${jsBundle}" async></script>`)
+              .map(jsBundle => {
+                const ext = Path.extname(jsBundle);
+                if (ext === ".js") {
+                  return `<script src="${jsBundle}" async></script>`;
+                } else if (ext === ".css") {
+                  return `<link rel="stylesheet" href="${jsBundle}">`;
+                } else {
+                  return `<!-- UNKNOWN bundle extension ${jsBundle} -->`;
+                }
+              })
               .join("\n")
           );
         }
@@ -160,6 +176,15 @@ module.exports = function setup(setupContext, token) {
           subAppServer,
           options
         };
+
+        const { bundles, scripts } = await prepareSubAppSplitBundles(context);
+        outputSpot.add(`${comment}`);
+        if (bundles.length > 0) {
+          outputSpot.add(`${scripts}
+<script>markBundlesLoaded(${JSON.stringify(bundles)});</script>
+`);
+        }
+
         if (options.serverSideRendering) {
           const lib = util.getFramework(ref);
           ssrContent = await lib.handleSSR(ref);
@@ -168,27 +193,23 @@ module.exports = function setup(setupContext, token) {
           ssrContent = `<!-- serverSideRendering flag is ${options.serverSideRendering} -->`;
         }
 
-        let markBundlesLoadedJs = "";
-        const { bundles, scripts } = await prepareSubAppSplitBundles(context);
-        outputSpot.add(`${comment}`);
-        if (bundles.length > 0) {
-          outputSpot.add(`${scripts}\n`);
-          markBundlesLoadedJs = `markBundlesLoaded(${JSON.stringify(bundles)});\n`;
-        }
-
         // If user specified an element ID for a DOM Node to host the SSR content then
         // add the div for the Node and the SSR content to it, and add JS to start the
         // sub app on load.
         if (options.elementId) {
-          outputSpot.add(`<div id="${options.elementId}">\n`);
-          outputSpot.add(ssrContent);
-          outputSpot.add(`\n</div><script>${markBundlesLoadedJs}startSubAppOnLoad({
-  name: "${name}",
-  elementId: "${options.elementId}",
-  serverSideRendering: ${Boolean(options.serverSideRendering)},
-  clientProps: ${clientProps},
-  initialState: ${initialStateStr || "{}"}
-})</script>\n`);
+          outputSpot.add(`<div id="${options.elementId}">
+ ${ssrContent}
+</div>
+<script>
+ startSubAppOnLoad({
+  name:"${name}",
+  elementId:"${options.elementId}",
+  serverSideRendering:${Boolean(options.serverSideRendering)},
+  clientProps:${clientProps},
+  initialState:${initialStateStr || "{}"}
+ })
+</script>
+`);
         } else {
           outputSpot.add("<!-- no elementId for starting subApp on load -->\n");
         }

diff --git a/packages/subapp-web/lib/util.js b/packages/subapp-web/lib/util.js
@@ -114,6 +114,8 @@ const utils = {
     for (const id in bundlesById) {
       const bundles = bundlesById[id];
       [].concat(bundles).forEach(bundleFile => {
+        if (!bundleFile) return;
+
         for (const mapName in CDN_ASSETS) {
           if (mapName.endsWith(bundleFile)) {
             cdnBundles[id] = CDN_ASSETS[mapName];
@@ -124,7 +126,7 @@ const utils = {
         if (!cdnBundles[id]) {
           cdnBundles[id] = basePath.concat(bundleFile);
         } else {
-          cdnBundles[id] = [].concat(cdnBundles[id], bundleFile);
+          cdnBundles[id] = [].concat(cdnBundles[id], basePath.concat(bundleFile));
         }
       });
     }
@@ -141,11 +143,13 @@ const utils = {
     // pack up entrypoints data from stats
     //
 
-    const { chunksById } = assets;
+    const {
+      chunksById: { js, css }
+    } = assets;
 
     const bundleBase = utils.getBundleBase(routeOptions);
-
-    return (CDN_JS_BUNDLES = utils.mapCdnAssets(chunksById.js, bundleBase, cdnAssetsFile));
+    const allChunks = _.mergeWith({}, js, css, (a, b) => (a && b ? [].concat(a, b) : a || b));
+    return (CDN_JS_BUNDLES = utils.mapCdnAssets(allChunks, bundleBase, cdnAssetsFile));
   },
 
   getChunksById(stats) {

diff --git a/samples/poc-subapp-pmin/archetype/config/index.js b/samples/poc-subapp-pmin/archetype/config/index.js
@@ -3,6 +3,7 @@ module.exports = {
     subapp: true,
     phantomjs: false,
     criticalCSS: false,
+    sass: true,
     reactLib: "preact"
   }
 };
diff --git a/samples/poc-subapp-pmin/package.json b/samples/poc-subapp-pmin/package.json
@@ -47,7 +47,8 @@
     "subapp-server": "../../packages/subapp-server"
   },
   "devDependencies": {
-    "electrode-archetype-react-app-dev": "^6.3.0"
+    "electrode-archetype-react-app-dev": "^6.3.0",
+    "tachyons-sass": "^4.9.5"
   },
   "fyn": {
     "dependencies": {

diff --git a/samples/poc-subapp-pmin/src/home/subapp-home.js b/samples/poc-subapp-pmin/src/home/subapp-home.js
@@ -1,5 +1,7 @@
 import { h, loadSubApp } from "subapp-pbundle"; /** @jsx h */
 
+import "tachyons-sass/tachyons.scss";
+
 const Home = () => {
   return (
     <div>