From d1186b0e3f8f8e541c7107c7a558259a084c0887 Mon Sep 17 00:00:00 2001
From: divyakarippath <divya.v.karippath@gmail.com>
Date: Tue, 19 May 2020 13:54:11 -0700
Subject: [PATCH] fix: use loadjs to support CSS bundles (#1647)

---
 packages/subapp-web/lib/init.js            |  6 +--
 packages/subapp-web/package.json           |  2 +-
 packages/subapp-web/src/subapp-web.js      | 51 +++++++++++-----------
 packages/subapp-web/test/spec/init.spec.js |  4 +-
 4 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/packages/subapp-web/lib/init.js b/packages/subapp-web/lib/init.js
index e62487871..ed6f5ea7a 100644
--- a/packages/subapp-web/lib/init.js
+++ b/packages/subapp-web/lib/init.js
@@ -11,8 +11,8 @@ module.exports = function setup(setupContext) {
   const distDir = process.env.NODE_ENV === "production" ? "../dist/min" : "../dist/dev";
   const clientJs = Fs.readFileSync(Path.join(__dirname, distDir, "subapp-web.js")).toString();
   const cdnJs = Fs.readFileSync(Path.join(__dirname, distDir, "cdn-map.js")).toString();
-  const littleLoader = Fs.readFileSync(
-    require.resolve("little-loader/dist/little-loader.min.js"),
+  const loadJs = Fs.readFileSync(
+    require.resolve("loadjs/dist/loadjs.min.js"),
     "utf8"
   );
 
@@ -37,7 +37,7 @@ module.exports = function setup(setupContext) {
   const webSubAppJs = `<script id="bundleAssets" type="application/json">
 ${JSON.stringify(bundleAssets)}
 </script>
-<script>/*LL*/${littleLoader}/*LL*/
+<script>/*LJ*/${loadJs}/*LJ*/
 ${clientJs}
 ${cdnJs}
 </script>
diff --git a/packages/subapp-web/package.json b/packages/subapp-web/package.json
index 91c971a67..83e9fc550 100644
--- a/packages/subapp-web/package.json
+++ b/packages/subapp-web/package.json
@@ -28,7 +28,7 @@
     "@babel/runtime": "^7.8.3",
     "history": "^4.9.0",
     "jsesc": "^2.5.2",
-    "little-loader": "^0.2.0",
+    "loadjs": "^4.2.0",
     "lodash": "^4.17.15",
     "optional-require": "^1.0.0",
     "request": "^2.88.0",
diff --git a/packages/subapp-web/src/subapp-web.js b/packages/subapp-web/src/subapp-web.js
index ad9a0ea07..bc947dd4d 100644
--- a/packages/subapp-web/src/subapp-web.js
+++ b/packages/subapp-web/src/subapp-web.js
@@ -316,15 +316,14 @@
           const chunkIds = ba.entryPoints[name];
           return chunkIds.reduce((a2, id) => {
             // chunk could have multiple assets
-            return [].concat(ba.jsChunksById[id]).reduce((a3, asset) => {
-              return asset
-                ? a3.concat({
-                    name,
-                    id,
-                    asset
-                  })
-                : a3;
-            }, a2);
+            const assets = ba.jsChunksById[id];
+            return assets
+              ? a2.concat({
+                  name,
+                  id,
+                  assets: [].concat(assets)
+                })
+              : a2;
           }, a);
         }, [])
         .filter(({ id }) => {
@@ -337,22 +336,24 @@
 
           return false;
         });
-      assetsToLoad.forEach(({ name, id, asset }) => {
-        window._lload(`${ba.basePath}${asset}`, {
-          callback: err => {
-            if (err) {
-              console.error(`load asset ${name} (id: ${id}) failed`, err);
-            } else {
-              console.log(`loaded asset for ${name} (id: ${id}) - ${asset}`);
-              runtimeInfo.bundles[id]++;
-            }
-
-            loaded.push(asset);
-
-            if (loaded.length === assetsToLoad.length) {
-              console.log("all assets loaded", assetsToLoad);
-              done();
-            }
+      assetsToLoad.forEach(({ name, id, assets }) => {
+        const new_assets = assets.map(asset => `${ba.basePath}${asset}`);
+        const afterLoad = () => {
+          loaded.push(assets);
+          if (loaded.length === assetsToLoad.length) {
+            console.log("all assets loaded", assetsToLoad);
+            done();
+          }
+        };
+        loadjs(new_assets, id, {
+          success: () => {
+            console.log(`loaded asset for ${name} (id: ${id}) - ${assets}`);
+            runtimeInfo.bundles[id]++;
+            afterLoad();
+          },
+          error: () => {
+            console.error(`load asset ${name} (id: ${id}) failed`, err);
+            afterLoad();
           }
         });
       });
diff --git a/packages/subapp-web/test/spec/init.spec.js b/packages/subapp-web/test/spec/init.spec.js
index 7c583f874..4acb87daa 100644
--- a/packages/subapp-web/test/spec/init.spec.js
+++ b/packages/subapp-web/test/spec/init.spec.js
@@ -11,7 +11,7 @@ describe("init", function() {
     delete process.env.APP_SRC_DIR;
   });
 
-  it("should return assets as JSON script and little loader", () => {
+  it("should return assets as JSON script and loadJs", () => {
     // point subapp-util to look for subapps under a test dir
     process.env.APP_SRC_DIR = "test/subapps";
 
@@ -27,6 +27,6 @@ describe("init", function() {
     const initJs = initToken.process(context);
     expect(context.user.assets).to.be.ok;
     expect(initJs).contains(`<script id="bundleAssets" type="application/json">`);
-    expect(initJs).contains(`<script>/*LL*/`);
+    expect(initJs).contains(`<script>/*LJ*/`);
   });
 });