Add renderJavaScriptLoader function, use loader on background also

MetaMask · Sep 12, 2023 · 46604aa · 46604aa
1 parent b07fc30
commit 46604aa
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 52 deletions.
diff --git a/app/background.html b/app/background.html
@@ -4,23 +4,7 @@
     <meta charset="utf-8">
   </head>
   <body>
-    <script src="./snow.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./use-snow.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./globalthis.js" type="text/javascript" charset="utf-8"></script>
-    <script src="./sentry-install.js" type="text/javascript" charset="utf-8"></script>
-    {{@if(it.applyLavaMoat)}}
-      <script src="./runtime-lavamoat.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./policy-load.js" type="text/javascript" charset="utf-8"></script>
-    {{#else}}
-      <script src="./lockdown-install.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-run.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./lockdown-more.js" type="text/javascript" charset="utf-8"></script>
-      <script src="./runtime-cjs.js" type="text/javascript" charset="utf-8"></script>
-    {{/if}}
-    {{@each(it.jsBundles) => val}}
-      <script src="{{val}}" type="text/javascript" charset="utf-8"></script>
-    {{/each}}
+    <script src="./load-background.js" type="text/javascript" charset="utf-8"></script>
     <script src="./chromereload.js" type="text/javascript" charset="utf-8"></script>
   </body>
 </html>
diff --git a/app/popup.html b/app/popup.html
@@ -15,4 +15,4 @@
     <div id="popover-content"></div>
     <script src="./load-app.js" type="text/javascript" charset="utf-8"></script>
   </body>
-</html>
+</html>
diff --git a/app/scripts/load-app.js b/app/scripts/load-app.js
@@ -2,20 +2,25 @@
 'use strict';
 
 setTimeout(() => {
-  const scriptsToLoad = [/*SCRIPTS*/];
+  // eslint-disable-next-line spaced-comment
+  const scriptsToLoad = [
+    /* SCRIPTS */
+  ];
 
   const loadScript = (src) => {
     const script = document.createElement('script');
     script.type = 'text/javascript';
     script.async = true;
-    script.onload = () => {
-      if (scriptsToLoad.length) {
-        loadScript(scriptsToLoad.shift());
-      }
-    };
+    script.onload = loadNext;
     script.src = src;
     document.body.appendChild(script);
   };
 
-  loadScript(scriptsToLoad.shift());
+  loadNext();
+
+  function loadNext() {
+    if (scriptsToLoad.length) {
+      loadScript(scriptsToLoad.shift());
+    }
+  }
 }, 13);
diff --git a/development/build/scripts.js b/development/build/scripts.js
@@ -714,26 +714,27 @@ function createFactoredBuild({
           case 'ui': {
             renderHtmlFile({
               htmlName: 'popup',
-              groupSet,
-              commonSet,
               browserPlatforms,
               applyLavaMoat,
             });
             renderHtmlFile({
               htmlName: 'notification',
-              groupSet,
-              commonSet,
               browserPlatforms,
               applyLavaMoat,
               isMMI: buildType === 'mmi',
             });
             renderHtmlFile({
               htmlName: 'home',
+              browserPlatforms,
+              applyLavaMoat,
+              isMMI: buildType === 'mmi',
+            });
+            renderJavaScriptLoader({
               groupSet,
               commonSet,
               browserPlatforms,
               applyLavaMoat,
-              isMMI: buildType === 'mmi',
+              destinationFileName: 'load-app.js',
             });
             break;
           }
@@ -745,6 +746,13 @@ function createFactoredBuild({
               browserPlatforms,
               applyLavaMoat,
             });
+            renderJavaScriptLoader({
+              groupSet,
+              commonSet,
+              browserPlatforms,
+              applyLavaMoat,
+              destinationFileName: 'load-background.js',
+            });
             if (process.env.ENABLE_MV3) {
               const jsBundles = [
                 ...commonSet.values(),
@@ -1210,28 +1218,23 @@ async function setEnvironmentVariables({
   });
 }
 
-function renderHtmlFile({
-  htmlName,
+function renderJavaScriptLoader({
   groupSet,
   commonSet,
   browserPlatforms,
   applyLavaMoat,
-  isMMI,
+  destinationFileName,
 }) {
   if (applyLavaMoat === undefined) {
     throw new Error(
       'build/scripts/renderHtmlFile - must specify "applyLavaMoat" option',
     );
   }
-  const htmlFilePath = `./app/${htmlName}.html`;
-  const htmlTemplate = readFileSync(htmlFilePath, 'utf8');
+
   const jsBundles = [...commonSet.values(), ...groupSet.values()].map(
     (label) => `./${label}.js`,
   );
 
-  const appLoadFilePath = './app/scripts/load-app.js';
-  const appLoadContents = readFileSync(appLoadFilePath, 'utf8');
-
   const securityScripts = applyLavaMoat
     ? ['./runtime-lavamoat.js', './lockdown-more.js', './policy-load.js']
     : [
@@ -1250,25 +1253,40 @@ function renderHtmlFile({
     ...jsBundles,
   ];
 
-  const htmlOutput = Sqrl.render(htmlTemplate, {
-    isMMI,
-    jsBundles,
+  console.log(
+    `Asked to create ${destinationFileName} with scripts: `,
+    requiredScripts,
+  );
+
+  browserPlatforms.forEach((platform) => {
+    const appLoadFilePath = './app/scripts/load-app.js';
+    const appLoadContents = readFileSync(appLoadFilePath, 'utf8');
+
+    const scriptDest = `./dist/${platform}/${destinationFileName}`;
+    const scriptOutput = appLoadContents.replace(
+      '/* SCRIPTS */',
+      `...${JSON.stringify(requiredScripts)}`,
+    );
+
+    console.log(`WRITING ${scriptDest}`);
+    writeFileSync(scriptDest, scriptOutput);
   });
+}
+
+function renderHtmlFile({ htmlName, browserPlatforms, applyLavaMoat, isMMI }) {
+  if (applyLavaMoat === undefined) {
+    throw new Error(
+      'build/scripts/renderHtmlFile - must specify "applyLavaMoat" option',
+    );
+  }
+  const htmlFilePath = `./app/${htmlName}.html`;
+  const htmlTemplate = readFileSync(htmlFilePath, 'utf8');
+
+  const htmlOutput = Sqrl.render(htmlTemplate, { isMMI });
   browserPlatforms.forEach((platform) => {
     const dest = `./dist/${platform}/${htmlName}.html`;
     // we dont have a way of creating async events atm
     writeFileSync(dest, htmlOutput);
-
-    if (htmlName === 'home') {
-      const scriptDest = `./dist/${platform}/load-app.js`;
-      const scriptOutput = appLoadContents.replace(
-        '[/*SCRIPTS*/]',
-        JSON.stringify(requiredScripts),
-      );
-
-      console.log(`WRITING ${scriptDest}`);
-      writeFileSync(scriptDest, scriptOutput);
-    }
   });
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,4 +15,4 @@ @@
         <div id="popover-content"></div>
         <script src="./load-app.js" type="text/javascript" charset="utf-8"></script>
       </body>
-    </html>
+    </html>