@flatjs/evolve 1.7.4 → 1.8.1-next.100

package/dist/types/types-modular-import.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Buildin plugin `babel-plugin-import` configurations
+ */
+export type ModularImportOption = {
+    /**
+     * @example `antd`, `lodash`, `material-ui`, `@flatjs`, `@dimjs`, `@fabric`, `@wine`
+     */
+    libraryName: string;
+    /**
+     * Set this option to false if your module does not have a default export.
+     * @default false
+     */
+    transformToDefaultImport?: boolean;
+    /**
+     * @default: `esm`
+     */
+    libraryDirectory?: string;
+    /**
+     * The value will append to `${libraryDirectory}/${transformedMethodName}/${fileName}`
+     * e.g. `@scope/app/esm/{moduleName}/index`
+     * @default ""
+     */
+    fileName?: string;
+    /**
+     * We can use customName to customize import file path.
+     * @example `esm/modal`
+     */
+    customName?: (transformedMethodName: string, file: any) => string;
+    /**
+     * @default: true
+     */
+    camel2DashComponentName?: boolean;
+    /**
+     * @default false
+     * @example (name) => `${name}/style/2x` | `boolean` }
+     */
+    style?: true | 'css' | ((name: string, file: Record<string, unknown>) => string | boolean);
+};

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

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

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

@@ -0,0 +1,75 @@
+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[];
+};
+/**
+ * Allow us customized to resolve current runtime environment.
+ */
+export type EvolveMultiCDNEnvResolver = (url: string) => EvolveMultiCdnEnvType | undefined;
+/**
+ * The html plugin configuration for each entry item
+ */
+export declare type MultiHtmlCDNEntryItem = {
+    /**
+     * The title to use for the generated HTML document
+     * @default ''
+     */
+    title?: string;
+    /**
+     * The favicon url to use for the generated HTML document
+     */
+    favicon?: string;
+    /**
+     * webpack relative or absolute path to the template.
+     * It must be an absolute path. `path.join(__dirname, `templates/index-{0}.html`)`
+     * @default join(evolveRoot, `/templates/html-plugin/index-{0}.html`)
+     */
+    templatePath?: string;
+    /**
+     * Indicates if we need to minify html.
+     * @default true
+     */
+    htmlMinify?: boolean;
+    /**
+     * Support inject viewport scripts in each modules
+     * It only available while `allowPx2rem` = true
+     * @default ''
+     */
+    viewport?: string;
+    /**
+     * Allow us customized inline scripts into compiled html template.
+     * @default []
+     */
+    inlineScripts?: HtmlPluginConfigTokenType<string[]>;
+    /**
+     * The customized html tags should be inject to `<header />`
+     */
+    headBeforeHtmlTags?: HtmlPluginConfigTokenType<string[]>;
+    /**
+     * The ordered styles will be injected start of html head.
+     * @default []
+     */
+    headBeforeStyles?: HtmlPluginConfigTokenType<string[]>;
+    /**
+     * The ordered scripts will be injected before html head.
+     * @default [
+     * `https://polyfill.io/v3/polyfill.min.js?features=Array.from%2CArray.isArray%2CArray.of%2CArray.prototype.entries%2CArray.prototype.every%2CArray.prototype.fill%2CArray.prototype.filter%2CArray.prototype.find%2CArray.prototype.findIndex%2CArray.prototype.flat%2CArray.prototype.forEach%2CArray.prototype.flatMap%2CArray.prototype.keys%2CArray.prototype.indexOf%2CArray.prototype.includes%2CArray.prototype.lastIndexOf%2CArray.prototype.map%2CArray.prototype.reduce%2CArray.prototype.reduceRight%2CArray.prototype.some%2CArray.prototype.sort%2CArray.prototype.values%2CArrayBuffer%2CBlob%2CDataView%2CDate.now%2CObject.assign%2CObject.create%2CObject.defineProperties%2CObject.defineProperty%2CObject.entries%2CObject.freeze%2CObject.fromEntries%2CObject.getOwnPropertySymbols%2CObject.getOwnPropertyNames%2CObject.getOwnPropertyDescriptors%2CObject.getOwnPropertyDescriptor%2CObject.getPrototypeOf%2CObject.is%2CObject.isExtensible%2CObject.isFrozen%2CObject.isSealed%2CObject.keys%2CObject.values%2CObject.setPrototypeOf%2CPromise%2CPromise.prototype.finally%2CReflect%2CReflect.apply%2CReflect.construct%2CReflect.defineProperty%2CReflect.deleteProperty%2CReflect.getPrototypeOf%2CReflect.getOwnPropertyDescriptor%2CReflect.get%2CReflect.ownKeys%2CReflect.isExtensible%2CReflect.has%2CReflect.preventExtensions%2CReflect.set%2CReflect.setPrototypeOf%2CSet%2CString.prototype.trimStart%2CString.prototype.trimEnd%2CString.prototype.trim%2CString.prototype.startsWith%2CString.prototype.repeat%2CString.prototype.replaceAll%2CString.prototype.padStart%2CString.prototype.padEnd%2CMap%2CObject.seal%2Cconsole.groupEnd%2Cconsole.group`,
+     * `https://unpkg.com/react@17.0.2/umd/react.production.min.js`,
+     * `https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js`,
+     * `https://unpkg.com/react-router-dom@5.2.0/umd/react-router-dom.min.js`
+     * ]
+     */
+    headBeforeScripts?: HtmlPluginConfigTokenType<string[]>;
+    /**
+     * The ordered scripts will be injected end of html body.
+     * @default []
+     */
+    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.
+     * @default ['dev', 'ntv']
+     */
+    excludeCdnEnvs?: EvolveMultiCdnEnvType[];
+};

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

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

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

@@ -0,0 +1,117 @@
+import { type VerifyPackagePattern } from '@armit/package';
+import { type FlatEvolveCI } from './types-ci.js';
+import { type FlatEvolveDevServerOptions } from './types-dev-server.js';
+import { type EvolveEntryMap } from './types-entry-map.js';
+import { type RuleSetLoaderOptions } from './types-loader-options.js';
+import { type EvolveMultiCDNEnvResolver, type EvolveMultiCDNConfig } from './types-multi-html.js';
+import { type EvolvePluginOptions } from './types-plugin-options.js';
+import { type FlatEvolveWebpackOptions } from './types-webpack.js';
+/**
+ * Detect locally installed dependencies that have correctly installed from `package.json` declared version `dependencies`
+ */
+export type PackageInstallChecker = {
+    /**
+     * @default false
+     */
+    enabled?: boolean;
+    /**
+     * Stop program if we have detect unexpected error.
+     * @default false
+     */
+    throwError?: boolean;
+    /**
+     * Flat indicates if we need to print all install module graph
+     * @default false
+     */
+    showAllInstalledGraph?: boolean;
+    /**
+     * Package module name, or module expression. [`^babel-`,`@dimjs/*`]
+     * @defalt ['@dimjs/*']
+     */
+    detectModules?: string[];
+};
+export interface FlatEvolveOptions {
+    /**
+     * The project workspace directory.
+     */
+    projectCwd: string;
+    /**
+     * The virtual path for current `project`
+     * e.g. `evolve/test`
+     */
+    projectVirtualPath: string;
+    /**
+     * The configurations of `webpack`
+     */
+    webpack?: FlatEvolveWebpackOptions;
+    /**
+     * The config options of all rule set loaders.
+     */
+    loaderOptions: RuleSetLoaderOptions;
+    /**
+     * The config opotions of all builtin webpack plugins.
+     */
+    pluginOptions: EvolvePluginOptions;
+    /**
+     * The configurations of `dev-server`.
+     */
+    devServer?: FlatEvolveDevServerOptions;
+    /**
+     * The plugin for `@flatjs/evolve-multi-html-cdn-plugin`
+     */
+    multiHtmlCdn: EvolveMultiCDNConfig;
+    /**
+     * Allow us customized to resolve current runtime environment.
+     * ignore resolver if return undefined, otherwise use it to match environment.
+     * NOTE: Don't using arrow function, because we will inject `envResolver` string to html.
+     * @example
+     * ```ts
+     * //
+     *  function envResolver(url) {
+     *    const env = /.*\.(qa|t)\.*\/.exec('//fex.qa.tcshuke.com/')[1];
+     *    switch(env) {
+     *      case 't':
+     *       return 'rc'
+     *      case 'qa':
+     *       return 'inte'
+     *    }
+     *   }
+     * ```
+     */
+    multiHtmlCdnEnvResolver?: EvolveMultiCDNEnvResolver;
+    /**
+     * The regexp patterns to filter dependencies(will be verified) from package.json
+     * @default {}
+     */
+    needVerifyPackages?: false | VerifyPackagePattern;
+    /**
+     * Detect locally installed dependencies that have correctly installed from `package.json`
+     */
+    packageInstallChecker?: false | PackageInstallChecker;
+    /**
+     * All webpack entries configuration
+     */
+    entryMap: EvolveEntryMap;
+    /**
+     * Visualize size of webpack output files with an interactive zoomable treemap.
+     */
+    analyzer?: Record<string, unknown>;
+    /**
+     * Maximum number of process to run at once for production build
+     * Exact number or a percent of CPUs available (for example "50%").
+     *
+     * If undefined, then all build processes will start in parallel.
+     * Setting this value to 1 will achieve sequential running.
+     * @default `50%`
+     */
+    maxProcesses?: number | string;
+    /**
+     * For `production` mode, the value indicates if we interrupt compilation process while received "warnings" while evolve `build`
+     * @default false
+     */
+    rejectWarnings?: boolean;
+    /**
+     * The faster builds, simplified ci pipeline configurations
+     */
+    ci?: FlatEvolveCI;
+}

package/dist/types/types-options.js

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

package/dist/types/types-plugin-options.d.ts

@@ -0,0 +1,7 @@
+export interface EvolvePluginOptions {
+    /**
+     * The DefinePlugin replaces variables in your code with other values or expressions at compile time.
+     * @default `__SENTRY_DEBUG__`,`process.env.FLAT_BUILD_DATE`, `process.env.FLAT_COMMIT_HASH`, `process.env.FLAT_BRANCH_NAME`
+     */
+    definePlugin?: Record<string, unknown>;
+}

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

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

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

@@ -0,0 +1,96 @@
+import { type RuleSetRule, type Configuration } from 'webpack';
+import { type WebpackPlugin } from '../create-webpack/types.js';
+import { type TerserMinimizerOptions } from '../minimizer/types.js';
+/**
+ * The webpack entry configuration.
+ */
+export interface WebpackEntryObject {
+    [index: string]: string | [string, ...string[]];
+}
+export interface FlatEvolveWebpackOptions extends Pick<Configuration, 'performance' | 'stats' | 'infrastructureLogging'> {
+    /**
+     * These options change how modules are resolved.
+     */
+    resolve?: Configuration['resolve'] & {
+        /**
+         * Only allow pass `key:value` alias `{'@xxx':'./src/xxx'}`
+         * Note: Usually you don't need to specify an alias, the framework will auto support `paths` alias of tsconfig.json
+         * less `@import` is also supported via `paths` of tsconfig.json only need to with prefix `~`
+         * @example
+         * ```less
+         * //@import '~@/utils/xxx.less'`
+         * //@import url('./child.less');`
+         * //@import url('~@/react/less/alias.less');
+         * //@import '~@/react/less/alias2.less';
+         * //@import '~@/utils/shared.less';
+         * ```
+         */
+        alias?: Record<string, string>;
+    };
+    /**
+     * @default
+     * ```json
+     *  {
+     *    vue: 'Vue',
+     *    react: 'React',
+     *    'react-dom': 'ReactDOM',
+     *  }
+     * ```
+     */
+    externals?: Record<string, string>;
+    /**
+     * output.publicPath defaults to 'auto' with web and web-worker targets
+     * @default 'auto'
+     */
+    publicPath?: string;
+    /**
+     *
+     * Note if we build `node` using webpack, in order to ignore built-in modules like path, fs, etc.
+     * maybe we need to use `webpack-node-externals'` to configuration `externals`
+     * Now webpack-dev-server have not follow webpack@5 `browserslist` changes
+     * Environment to build for. An array of environments to build for all of them when possible.
+     * @default  ['web', 'es5'],
+     */
+    target?: string | false | string[];
+    /**
+     * Minimizer(s) to use for minimizing the output. for `serve` mode, `minimize` always `false`.
+     * @default `terser` minimizer has been enabled fro `production`
+     */
+    minimizer?: false | {
+        terserOptions?: TerserMinimizerOptions;
+        /**
+         * @default false
+         */
+        imageMin?: boolean;
+    };
+    /**
+     * A developer tool to enhance debugging (false | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map).
+     * https://webpack.js.org/configuration/devtool/
+     * Only works on production mode , `source-map` Recommended choice for production builds with high quality SourceMaps.
+     * Note: the `sourceMap` only focus on javascript bundle,invalid for other `loaders` e.g. less-loader, css-loader.
+     * `hidden-source-map` produces the same sourcemaps as `source-map`, but doesn't include the `sourceMappingURL` comment at the bottom.
+     * @default `false`
+     */
+    sourceMap?: 'hidden-source-map' | 'source-map' | false;
+    /**
+     * The rule sets loaders config options
+     */
+    ruleSets?: Array<Omit<RuleSetRule, 'test'> & {
+        test?: string | RegExp | ((value: string) => boolean);
+    }>;
+    /**
+     * The plugins config options
+     */
+    plugins?: WebpackPlugin[];
+    /**
+     * `contentehash` bundle file name.
+     * @default true
+     */
+    enableBundleHashName?: boolean;
+    /**
+     * The output directory as absolute path, Note we must keep custom outputDir with prefix `public`
+     * e.g. `public/a/b`, `public/c/d`, don't support `a/b`.
+     * @default `public`
+     */
+    outputDir?: string | (() => string | Promise<string>);
+}

package/dist/types/types-webpack.js

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

package/index.js

@@ -1,4 +1 @@
-'use strict';
-
-module.exports = require('./cjs/index.js');
-module.exports.default = module.exports;
+export * from './dist/index.js';

package/package.json

@@ -1,77 +1,134 @@
 {
   "name": "@flatjs/evolve",
-  "version": "1.7.4",
-  "description": "the webpack based tools `evolve` of @flatjs",
-  "keywords": [
-    "shared",
-    "flatjs",
-    "common",
-    "utils"
-  ],
+  "version": "1.8.1-next.100",
   "license": "MIT",
-  "author": "tianyingchun",
-  "sideEffects": false,
-  "main": "index.js",
-  "typings": "index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
   "files": [
-    "cjs/",
+    "bin/",
+    "dist/",
     "templates/",
     "index.js",
-    "index.d.ts",
     "README.md",
+    "CHANGELOG.md",
     "package.json"
   ],
+  "scripts": {
+    "serve": "yarn ts-node-esm ./tests/dev-server/dev-server.ts",
+    "build": "rimraf dist && tsc -p ./tsconfig.build.json && npm run minify",
+    "?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",
+    "codegen": "graphql-codegen --config ./codegen.cjs",
+    "clean": "rimraf --no-glob ./dist ./coverage ./__data__ ./config/__data__ ./_release ./tsconfig.tsbuildinfo",
+    "lint": "eslint . --ext .ts,.mts,.tsx,.js,.jsx,.cjs,.mjs --cache --cache-location ../../.cache/eslint/evolve.eslintcache",
+    "test": "run-s test-unit",
+    "test-task": "vitest run",
+    "test-unit": "vitest run --passWithNoTests",
+    "test-watch": "vitest watch --ui",
+    "fix-all-files": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.mdx,.graphql --fix",
+    "typecheck": "tsc --project ./tsconfig.json --noEmit"
+  },
   "dependencies": {
-    "@babel/core": "^7.22.1",
-    "@flatjs/common": "^1.7.3",
-    "@flatjs/evolve-preset-babel": "^1.7.3",
-    "@flatjs/forge-plugin-postcss-pixel": "^1.7.2",
-    "@flatjs/mock": "^1.7.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
-    "babel-loader": "^9.1.2",
-    "babel-merge": "^3.0.0",
-    "babel-plugin-import": "^1.13.6",
-    "better-opn": "^3.0.2",
-    "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "chalk": "^4.1.2",
-    "css-loader": "^6.8.1",
-    "cssnano": "^6.0.1",
-    "cssnano-preset-default": "^6.0.1",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
-    "html-webpack-plugin": "^5.5.1",
-    "image-minimizer-webpack-plugin": "^3.8.2",
-    "imagemin": "^8.0.1",
-    "less": "^4.1.3",
-    "less-loader": "^11.1.1",
-    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.24",
-    "postcss-loader": "^7.3.2",
-    "react-refresh": "^0.14.0",
-    "svgo": "^3.0.2",
-    "terser-webpack-plugin": "^5.3.9",
-    "webpack": "^5.84.1",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-dev-server": "4.15.0",
-    "webpack-sources": "^3.2.3"
+    "@armit/config-loader": "^0.0.51",
+    "@armit/file-utility": "^0.0.28",
+    "@armit/git": "^0.0.36",
+    "@armit/package": "^0.0.45",
+    "@armit/worker-threads": "^0.0.5",
+    "@babel/core": "7.22.9",
+    "@flatjs/common": "1.8.1-next.35",
+    "@flatjs/evolve-preset-babel": "1.8.1-next.18",
+    "@flatjs/forge-postcss-plugin-pixel": "1.8.1-next.35",
+    "@flatjs/graph": "1.8.1-next.51",
+    "@flatjs/mock": "1.8.1-next.75",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
+    "@types/babel__core": "7.20.1",
+    "babel-loader": "9.1.3",
+    "babel-merge": "3.0.0",
+    "babel-plugin-import": "1.13.8",
+    "better-opn": "3.0.2",
+    "case-sensitive-paths-webpack-plugin": "2.4.0",
+    "css-loader": "6.8.1",
+    "cssnano": "6.0.1",
+    "express": "4.18.2",
+    "fork-ts-checker-webpack-plugin": "8.0.0",
+    "happy-dom": "10.6.3",
+    "html-webpack-plugin": "5.5.3",
+    "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",
+    "postcss": "8.4.27",
+    "postcss-loader": "7.3.3",
+    "react-refresh": "0.14.0",
+    "svgo": "3.0.2",
+    "tarjan-graph": "3.0.0",
+    "terser-webpack-plugin": "5.3.9",
+    "tsconfig-paths-webpack-plugin": "4.1.0",
+    "type-fest": "^4.1.0",
+    "webpack": "5.88.2",
+    "webpack-bundle-analyzer": "4.9.0",
+    "webpack-dev-server": "4.15.1",
+    "webpack-sources": "3.2.3"
   },
   "devDependencies": {
-    "@types/cssnano": "^5.0.0",
-    "@types/lodash": "^4.14.195",
-    "@types/webpack-sources": "^3.2.0",
-    "express": "^4.18.2",
-    "imagemin-gifsicle": "^7.0.0",
-    "imagemin-jpegtran": "^7.0.0",
-    "imagemin-pngquant": "^9.0.2",
-    "imagemin-svgo": "^10.0.1",
-    "sharp": "^0.32.1",
-    "type-fest": "^3.11.0"
+    "@armit/eslint-config-bases": "^0.0.23",
+    "@flatjs/testing": "1.8.1-next.37",
+    "@swc/core": "1.3.74",
+    "@types/express": "4.17.17",
+    "@types/listr": "0.14.4",
+    "@types/node": "20.4.6",
+    "@vitest/coverage-istanbul": "0.34.1",
+    "@vitest/ui": "0.34.1",
+    "eslint": "8.46.0",
+    "imagemin-gifsicle": "7.0.0",
+    "imagemin-jpegtran": "7.0.0",
+    "imagemin-pngquant": "9.0.2",
+    "imagemin-svgo": "10.0.1",
+    "npm-run-all": "4.1.5",
+    "prettier": "3.0.0",
+    "react": "18.2.0",
+    "rimraf": "5.0.1",
+    "swc-unplugin-ts": "1.0.2",
+    "ts-node": "10.9.1",
+    "vite-tsconfig-paths": "4.2.0",
+    "vitest": "0.34.1",
+    "vue-loader": "17.2.2"
+  },
+  "peerDependencies": {
+    "imagemin-gifsicle": ">=7.0.0",
+    "imagemin-jpegtran": ">=7.0.0",
+    "imagemin-pngquant": ">=9.0.2",
+    "imagemin-svgo": ">=10.0.1"
+  },
+  "peerDependenciesMeta": {
+    "imagemin-gifsicle": {
+      "optional": true
+    },
+    "imagemin-jpegtran": {
+      "optional": true
+    },
+    "imagemin-pngquant": {
+      "optional": true
+    },
+    "imagemin-svgo": {
+      "optional": true
+    }
   },
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   },
   "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "31f2691d491d5950475f930879d41a53f7944bb8"
-}
+    "access": "public",
+    "directory": "_release/package"
+  }
+}

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

@@ -16,65 +16,42 @@
       content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
     <title><%= title %></title>
-    <!-- / -->
-    <% if (inlineScripts) { %>
-    <!-- / -->
+
+    <% 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]%>
+        <%= inlineScripts[index] %>
       <% } %>
     </script>
-    <!-- / -->
-    <% } %>
-    <!-- / -->
-
-    <% if (viewport) { %>
-    <!-- / -->
+    <% } %> <% if (viewport) { %>
     <script>
       <%= viewport %>
     </script>
-    <!-- / -->
-    <% } %>
-
-    <!-- / -->
-    <% if (favicon) { %>
-    <!-- / -->
+    <% } %> <% 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++) { %>
+    <% } %> <% 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 (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>