@flatjs/evolve 1.8.1-next.66 → 1.8.1-next.67

package/dist/types/types-dev-server.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/types/types-entry-map.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/types/types-federation.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/types/types-loader-options.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/types/types-modular-import.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/types/types-multi-html.d.ts

@@ -1,3 +1,4 @@
+import { type HtmlPluginConfigTokenType } from '../helpers/get-html-plugin-config.js';
 export declare type EvolveMultiCdnEnvType = 'me' | 'dev' | 'uat' | 'inte' | 'inte2' | 'inte3' | 'inte4' | 'rc' | 'prod' | 'ntv';
 export type EvolveMultiCDNConfig = {
     [key in EvolveMultiCdnEnvType]?: string[];
@@ -40,16 +41,16 @@ export declare type MultiHtmlCDNEntryItem = {
      * Allow us customized inline scripts into compiled html template.
      * @default []
      */
-    inlineScripts?: string[];
+    inlineScripts?: HtmlPluginConfigTokenType<string[]>;
     /**
      * The customized html tags should be inject to `<header />`
      */
-    headBeforeHtmlTags?: string[];
+    headBeforeHtmlTags?: HtmlPluginConfigTokenType<string[]>;
     /**
      * The ordered styles will be injected start of html head.
      * @default []
      */
-    headBeforeStyles?: string[];
+    headBeforeStyles?: HtmlPluginConfigTokenType<string[]>;
     /**
      * The ordered scripts will be injected before html head.
      * @default [
@@ -59,12 +60,12 @@ export declare type MultiHtmlCDNEntryItem = {
      * `https://unpkg.com/react-router-dom@5.2.0/umd/react-router-dom.min.js`
      * ]
      */
-    headBeforeScripts?: string[];
+    headBeforeScripts?: HtmlPluginConfigTokenType<string[]>;
     /**
      * The ordered scripts will be injected end of html body.
      * @default []
      */
-    bodyAfterScripts?: string[];
+    bodyAfterScripts?: HtmlPluginConfigTokenType<string[]>;
     /**
      * Give `env` list to exclude from `multi-cdn` plugin.
      * Normally for `me`, `dev`,`uat`, `ntv` env we should use relative assets path instead cdn.

package/dist/types/types-multi-html.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/types/types-options.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/types/types-plugin-options.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/types/types-webpack.d.ts

@@ -40,7 +40,7 @@ export interface FlatEvolveWebpackOptions extends Pick<Configuration, 'performan
     minimizer?: false | {
         terserOptions?: TerserMinimizerOptions;
         /**
-         * @default true
+         * @default false
          */
         imageMin?: boolean;
     };

package/dist/types/types-webpack.js

@@ -1 +1 @@
-export{};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flatjs/evolve",
-  "version": "1.8.1-next.66",
+  "version": "1.8.1-next.67",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "serve": "yarn ts-node-esm ./tests/dev-server/dev-server.ts",
-    "build": "rimraf dist && tsc -p ./tsconfig.build.json && npm run minify",
+    "build": "rimraf dist && tsc -p ./tsconfig.build.json",
     "?build-release": "When https://github.com/atlassian/changesets/issues/432 has a solution we can remove this trick",
     "build-release": "yarn build && rimraf ./_release && yarn pack && mkdir ./_release && tar zxvf ./package.tgz --directory ./_release && rm ./package.tgz",
     "minify": "node ../../scripts/minify.mjs --dest=dist",
@@ -40,12 +40,13 @@
     "@armit/file-utility": "^0.0.26",
     "@armit/git": "^0.0.31",
     "@armit/package": "^0.0.41",
+    "@armit/worker-threads": "^0.0.3",
     "@babel/core": "7.22.5",
-    "@flatjs/common": "1.8.1-next.29",
-    "@flatjs/evolve-preset-babel": "1.8.1-next.14",
-    "@flatjs/forge-postcss-plugin-pixel": "1.8.1-next.29",
-    "@flatjs/graph": "1.8.1-next.35",
-    "@flatjs/mock": "1.8.1-next.54",
+    "@flatjs/common": "1.8.1-next.30",
+    "@flatjs/evolve-preset-babel": "1.8.1-next.15",
+    "@flatjs/forge-postcss-plugin-pixel": "1.8.1-next.30",
+    "@flatjs/graph": "1.8.1-next.36",
+    "@flatjs/mock": "1.8.1-next.55",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
     "@types/babel__core": "7.20.1",
     "babel-loader": "9.1.2",
@@ -62,9 +63,9 @@
     "image-minimizer-webpack-plugin": "3.8.3",
     "less": "4.1.3",
     "less-loader": "11.1.3",
+    "listr": "0.14.3",
     "lodash": "4.17.21",
     "mini-css-extract-plugin": "2.7.6",
-    "ora": "6.3.1",
     "postcss": "8.4.24",
     "postcss-loader": "7.3.3",
     "react-refresh": "0.14.0",
@@ -72,17 +73,18 @@
     "terser-webpack-plugin": "5.3.9",
     "tsconfig-paths-webpack-plugin": "4.0.1",
     "type-fest": "^3.12.0",
-    "webpack": "5.88.0",
+    "webpack": "5.88.1",
     "webpack-bundle-analyzer": "4.9.0",
     "webpack-dev-server": "4.15.1",
     "webpack-sources": "3.2.3"
   },
   "devDependencies": {
     "@armit/eslint-config-bases": "^0.0.21",
-    "@flatjs/testing": "1.8.1-next.30",
-    "@swc/core": "1.3.66",
+    "@flatjs/testing": "1.8.1-next.31",
+    "@swc/core": "1.3.67",
     "@types/express": "4.17.17",
-    "@types/node": "20.3.1",
+    "@types/listr": "0.14.4",
+    "@types/node": "20.3.2",
     "@vitest/coverage-istanbul": "0.32.2",
     "@vitest/ui": "0.32.2",
     "eslint": "8.43.0",

package/templates/html-plugin/index-dev.html

@@ -17,48 +17,41 @@
     />
     <title><%= title %></title>
 
-    <% if (headBeforeHtmlTags) { %> 
-      <% for (let index = 0; index < headBeforeHtmlTags.length; index++) { %> 
-        <%= headBeforeHtmlTags[index] %> 
-      <% } %> 
-    <% } %> 
-
-    <% if (inlineScripts) { %>
-      <script>
-        <% for (let index = 0; index < inlineScripts.length; index++) { %>
-          <%= inlineScripts[index] %>
-        <% } %>
-      </script>
-    <% } %> 
-  
-    <% if (viewport) { %>
-      <script><%= viewport %></script>
-    <% } %> 
-    
-    <% if (favicon) { %>
-      <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
-      <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
-    <% } %> 
-    
-    <% if (headBeforeStyles) { %> 
-      <% for (let index = 0; index < headBeforeStyles.length; index++) { %>
-        <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
-      <% } %> 
-    <% } %>
-    
-    <% if (headBeforeScripts) { %> 
-      <% for (let index = 0; index < headBeforeScripts.length; index++) { %>
-        <script  crossorigin="anonymous" src="<%= headBeforeScripts[index]%>"></script>
+    <% if (headBeforeHtmlTags) { %> <% for (let index = 0; index <
+    headBeforeHtmlTags.length; index++) { %> <%= headBeforeHtmlTags[index] %> <%
+    } %> <% } %> <% if (inlineScripts) { %>
+    <script>
+      <% for (let index = 0; index < inlineScripts.length; index++) { %>
+        <%= inlineScripts[index] %>
       <% } %>
-    <% } %>
+    </script>
+    <% } %> <% if (viewport) { %>
+    <script>
+      <%= viewport %>
+    </script>
+    <% } %> <% if (favicon) { %>
+    <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
+    <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
+    <% } %> <% if (headBeforeStyles) { %> <% for (let index = 0; index <
+    headBeforeStyles.length; index++) { %>
+    <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
+    <% } %> <% } %> <% if (headBeforeScripts) { %> <% for (let index = 0; index
+    < headBeforeScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= headBeforeScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </head>
 
   <body>
     <div id="app"></div>
-    <% if (bodyAfterScripts) { %> 
-      <% for (let index = 0; index < bodyAfterScripts.length; index++) { %>
-        <script crossorigin="anonymous" src="<%= bodyAfterScripts[index]%>"></script>
-      <% } %> 
-    <% } %>
+    <% if (bodyAfterScripts) { %> <% for (let index = 0; index <
+    bodyAfterScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= bodyAfterScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </body>
 </html>

package/templates/html-plugin/index-inte.html

@@ -17,48 +17,41 @@
     />
     <title><%= title %></title>
 
-    <% if (headBeforeHtmlTags) { %> 
-      <% for (let index = 0; index < headBeforeHtmlTags.length; index++) { %> 
-        <%= headBeforeHtmlTags[index] %> 
-      <% } %> 
-    <% } %> 
-
-    <% if (inlineScripts) { %>
-      <script>
-        <% for (let index = 0; index < inlineScripts.length; index++) { %>
-          <%= inlineScripts[index] %>
-        <% } %>
-      </script>
-    <% } %> 
-  
-    <% if (viewport) { %>
-      <script><%= viewport %></script>
-    <% } %> 
-    
-    <% if (favicon) { %>
-      <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
-      <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
-    <% } %> 
-    
-    <% if (headBeforeStyles) { %> 
-      <% for (let index = 0; index < headBeforeStyles.length; index++) { %>
-        <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
-      <% } %> 
-    <% } %>
-    
-    <% if (headBeforeScripts) { %> 
-      <% for (let index = 0; index < headBeforeScripts.length; index++) { %>
-        <script  crossorigin="anonymous" src="<%= headBeforeScripts[index]%>"></script>
+    <% if (headBeforeHtmlTags) { %> <% for (let index = 0; index <
+    headBeforeHtmlTags.length; index++) { %> <%= headBeforeHtmlTags[index] %> <%
+    } %> <% } %> <% if (inlineScripts) { %>
+    <script>
+      <% for (let index = 0; index < inlineScripts.length; index++) { %>
+        <%= inlineScripts[index] %>
       <% } %>
-    <% } %>
+    </script>
+    <% } %> <% if (viewport) { %>
+    <script>
+      <%= viewport %>
+    </script>
+    <% } %> <% if (favicon) { %>
+    <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
+    <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
+    <% } %> <% if (headBeforeStyles) { %> <% for (let index = 0; index <
+    headBeforeStyles.length; index++) { %>
+    <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
+    <% } %> <% } %> <% if (headBeforeScripts) { %> <% for (let index = 0; index
+    < headBeforeScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= headBeforeScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </head>
 
   <body>
     <div id="app"></div>
-    <% if (bodyAfterScripts) { %> 
-      <% for (let index = 0; index < bodyAfterScripts.length; index++) { %>
-        <script crossorigin="anonymous" src="<%= bodyAfterScripts[index]%>"></script>
-      <% } %> 
-    <% } %>
+    <% if (bodyAfterScripts) { %> <% for (let index = 0; index <
+    bodyAfterScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= bodyAfterScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </body>
 </html>

package/templates/html-plugin/index-inte2.html

@@ -17,48 +17,41 @@
     />
     <title><%= title %></title>
 
-    <% if (headBeforeHtmlTags) { %> 
-      <% for (let index = 0; index < headBeforeHtmlTags.length; index++) { %> 
-        <%= headBeforeHtmlTags[index] %> 
-      <% } %> 
-    <% } %> 
-
-    <% if (inlineScripts) { %>
-      <script>
-        <% for (let index = 0; index < inlineScripts.length; index++) { %>
-          <%= inlineScripts[index] %>
-        <% } %>
-      </script>
-    <% } %> 
-  
-    <% if (viewport) { %>
-      <script><%= viewport %></script>
-    <% } %> 
-    
-    <% if (favicon) { %>
-      <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
-      <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
-    <% } %> 
-    
-    <% if (headBeforeStyles) { %> 
-      <% for (let index = 0; index < headBeforeStyles.length; index++) { %>
-        <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
-      <% } %> 
-    <% } %>
-    
-    <% if (headBeforeScripts) { %> 
-      <% for (let index = 0; index < headBeforeScripts.length; index++) { %>
-        <script  crossorigin="anonymous" src="<%= headBeforeScripts[index]%>"></script>
+    <% if (headBeforeHtmlTags) { %> <% for (let index = 0; index <
+    headBeforeHtmlTags.length; index++) { %> <%= headBeforeHtmlTags[index] %> <%
+    } %> <% } %> <% if (inlineScripts) { %>
+    <script>
+      <% for (let index = 0; index < inlineScripts.length; index++) { %>
+        <%= inlineScripts[index] %>
       <% } %>
-    <% } %>
+    </script>
+    <% } %> <% if (viewport) { %>
+    <script>
+      <%= viewport %>
+    </script>
+    <% } %> <% if (favicon) { %>
+    <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
+    <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
+    <% } %> <% if (headBeforeStyles) { %> <% for (let index = 0; index <
+    headBeforeStyles.length; index++) { %>
+    <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
+    <% } %> <% } %> <% if (headBeforeScripts) { %> <% for (let index = 0; index
+    < headBeforeScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= headBeforeScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </head>
 
   <body>
     <div id="app"></div>
-    <% if (bodyAfterScripts) { %> 
-      <% for (let index = 0; index < bodyAfterScripts.length; index++) { %>
-        <script crossorigin="anonymous" src="<%= bodyAfterScripts[index]%>"></script>
-      <% } %> 
-    <% } %>
+    <% if (bodyAfterScripts) { %> <% for (let index = 0; index <
+    bodyAfterScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= bodyAfterScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </body>
 </html>

package/templates/html-plugin/index-inte3.html

@@ -17,48 +17,41 @@
     />
     <title><%= title %></title>
 
-    <% if (headBeforeHtmlTags) { %> 
-      <% for (let index = 0; index < headBeforeHtmlTags.length; index++) { %> 
-        <%= headBeforeHtmlTags[index] %> 
-      <% } %> 
-    <% } %> 
-
-    <% if (inlineScripts) { %>
-      <script>
-        <% for (let index = 0; index < inlineScripts.length; index++) { %>
-          <%= inlineScripts[index] %>
-        <% } %>
-      </script>
-    <% } %> 
-  
-    <% if (viewport) { %>
-      <script><%= viewport %></script>
-    <% } %> 
-    
-    <% if (favicon) { %>
-      <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
-      <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
-    <% } %> 
-    
-    <% if (headBeforeStyles) { %> 
-      <% for (let index = 0; index < headBeforeStyles.length; index++) { %>
-        <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
-      <% } %> 
-    <% } %>
-    
-    <% if (headBeforeScripts) { %> 
-      <% for (let index = 0; index < headBeforeScripts.length; index++) { %>
-        <script  crossorigin="anonymous" src="<%= headBeforeScripts[index]%>"></script>
+    <% if (headBeforeHtmlTags) { %> <% for (let index = 0; index <
+    headBeforeHtmlTags.length; index++) { %> <%= headBeforeHtmlTags[index] %> <%
+    } %> <% } %> <% if (inlineScripts) { %>
+    <script>
+      <% for (let index = 0; index < inlineScripts.length; index++) { %>
+        <%= inlineScripts[index] %>
       <% } %>
-    <% } %>
+    </script>
+    <% } %> <% if (viewport) { %>
+    <script>
+      <%= viewport %>
+    </script>
+    <% } %> <% if (favicon) { %>
+    <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
+    <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
+    <% } %> <% if (headBeforeStyles) { %> <% for (let index = 0; index <
+    headBeforeStyles.length; index++) { %>
+    <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
+    <% } %> <% } %> <% if (headBeforeScripts) { %> <% for (let index = 0; index
+    < headBeforeScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= headBeforeScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </head>
 
   <body>
     <div id="app"></div>
-    <% if (bodyAfterScripts) { %> 
-      <% for (let index = 0; index < bodyAfterScripts.length; index++) { %>
-        <script crossorigin="anonymous" src="<%= bodyAfterScripts[index]%>"></script>
-      <% } %> 
-    <% } %>
+    <% if (bodyAfterScripts) { %> <% for (let index = 0; index <
+    bodyAfterScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= bodyAfterScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </body>
 </html>

package/templates/html-plugin/index-inte4.html

@@ -17,48 +17,41 @@
     />
     <title><%= title %></title>
 
-    <% if (headBeforeHtmlTags) { %> 
-      <% for (let index = 0; index < headBeforeHtmlTags.length; index++) { %> 
-        <%= headBeforeHtmlTags[index] %> 
-      <% } %> 
-    <% } %> 
-
-    <% if (inlineScripts) { %>
-      <script>
-        <% for (let index = 0; index < inlineScripts.length; index++) { %>
-          <%= inlineScripts[index] %>
-        <% } %>
-      </script>
-    <% } %> 
-  
-    <% if (viewport) { %>
-      <script><%= viewport %></script>
-    <% } %> 
-    
-    <% if (favicon) { %>
-      <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
-      <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
-    <% } %> 
-    
-    <% if (headBeforeStyles) { %> 
-      <% for (let index = 0; index < headBeforeStyles.length; index++) { %>
-        <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
-      <% } %> 
-    <% } %>
-    
-    <% if (headBeforeScripts) { %> 
-      <% for (let index = 0; index < headBeforeScripts.length; index++) { %>
-        <script  crossorigin="anonymous" src="<%= headBeforeScripts[index]%>"></script>
+    <% if (headBeforeHtmlTags) { %> <% for (let index = 0; index <
+    headBeforeHtmlTags.length; index++) { %> <%= headBeforeHtmlTags[index] %> <%
+    } %> <% } %> <% if (inlineScripts) { %>
+    <script>
+      <% for (let index = 0; index < inlineScripts.length; index++) { %>
+        <%= inlineScripts[index] %>
       <% } %>
-    <% } %>
+    </script>
+    <% } %> <% if (viewport) { %>
+    <script>
+      <%= viewport %>
+    </script>
+    <% } %> <% if (favicon) { %>
+    <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
+    <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
+    <% } %> <% if (headBeforeStyles) { %> <% for (let index = 0; index <
+    headBeforeStyles.length; index++) { %>
+    <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
+    <% } %> <% } %> <% if (headBeforeScripts) { %> <% for (let index = 0; index
+    < headBeforeScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= headBeforeScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </head>
 
   <body>
     <div id="app"></div>
-    <% if (bodyAfterScripts) { %> 
-      <% for (let index = 0; index < bodyAfterScripts.length; index++) { %>
-        <script crossorigin="anonymous" src="<%= bodyAfterScripts[index]%>"></script>
-      <% } %> 
-    <% } %>
+    <% if (bodyAfterScripts) { %> <% for (let index = 0; index <
+    bodyAfterScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= bodyAfterScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </body>
 </html>

package/templates/html-plugin/index-me.html

@@ -17,48 +17,41 @@
     />
     <title><%= title %></title>
 
-    <% if (headBeforeHtmlTags) { %> 
-      <% for (let index = 0; index < headBeforeHtmlTags.length; index++) { %> 
-        <%= headBeforeHtmlTags[index] %> 
-      <% } %> 
-    <% } %> 
-
-    <% if (inlineScripts) { %>
-      <script>
-        <% for (let index = 0; index < inlineScripts.length; index++) { %>
-          <%= inlineScripts[index] %>
-        <% } %>
-      </script>
-    <% } %> 
-  
-    <% if (viewport) { %>
-      <script><%= viewport %></script>
-    <% } %> 
-    
-    <% if (favicon) { %>
-      <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
-      <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
-    <% } %> 
-    
-    <% if (headBeforeStyles) { %> 
-      <% for (let index = 0; index < headBeforeStyles.length; index++) { %>
-        <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
-      <% } %> 
-    <% } %>
-    
-    <% if (headBeforeScripts) { %> 
-      <% for (let index = 0; index < headBeforeScripts.length; index++) { %>
-        <script  crossorigin="anonymous" src="<%= headBeforeScripts[index]%>"></script>
+    <% if (headBeforeHtmlTags) { %> <% for (let index = 0; index <
+    headBeforeHtmlTags.length; index++) { %> <%= headBeforeHtmlTags[index] %> <%
+    } %> <% } %> <% if (inlineScripts) { %>
+    <script>
+      <% for (let index = 0; index < inlineScripts.length; index++) { %>
+        <%= inlineScripts[index] %>
       <% } %>
-    <% } %>
+    </script>
+    <% } %> <% if (viewport) { %>
+    <script>
+      <%= viewport %>
+    </script>
+    <% } %> <% if (favicon) { %>
+    <link rel="shortcut icon" href="<%= favicon %>" type="image/x-icon" />
+    <link rel="icon" href="<%= favicon %>" type="image/x-icon" />
+    <% } %> <% if (headBeforeStyles) { %> <% for (let index = 0; index <
+    headBeforeStyles.length; index++) { %>
+    <link href="<%= headBeforeStyles[index] %>" rel="stylesheet" />
+    <% } %> <% } %> <% if (headBeforeScripts) { %> <% for (let index = 0; index
+    < headBeforeScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= headBeforeScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </head>
 
   <body>
     <div id="app"></div>
-    <% if (bodyAfterScripts) { %> 
-      <% for (let index = 0; index < bodyAfterScripts.length; index++) { %>
-        <script crossorigin="anonymous" src="<%= bodyAfterScripts[index]%>"></script>
-      <% } %> 
-    <% } %>
+    <% if (bodyAfterScripts) { %> <% for (let index = 0; index <
+    bodyAfterScripts.length; index++) { %>
+    <script
+      crossorigin="anonymous"
+      src="<%= bodyAfterScripts[index]%>"
+    ></script>
+    <% } %> <% } %>
   </body>
 </html>