refactor(mc-scripts): drop support for dynamic runtime base path (cdn…

…Url) and improve changeset

.changeset/fair-poets-watch.md

@@ -4,8 +4,22 @@
 '@commercetools-frontend/mc-scripts': minor
 ---
 
-Enable opt-in support for experimental bundler (using [Vite.js](https://vitejs.dev/)). To enable it, set the environment variable `ENABLE_EXPERIMENTAL_VITE_BUNDLER="true"` in your dotenv file.
+Enable opt-in support for using [Vite.js](https://vitejs.dev/) bundler. To enable it, set the environment variable `ENABLE_EXPERIMENTAL_VITE_BUNDLER="true"` in your dotenv file.
 
-All the CLI commands are fully compatible with the new bundler, so you can continue using them as before.
+# Why Vite
 
-If you want to know more about how Vite works and what are the benefits, read the document [Why Vite](https://vitejs.dev/guide/why.html).
+Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects.
+
+You can learn more about the rationale behind the project in the [Why Vite](https://vitejs.dev/guide/why.html) documentation.
+
+# Native ES Modules support
+
+Vite is optimized for using native [ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) via `<script type="module">` tags and ES Modules dynamic import.
+
+# CLI compatibility
+
+All the `mc-scripts` CLI commands are fully compatible with the new bundler, so you can continue using them as before.
+
+## Unsupported features
+
+The `cdnUrl` value is not supported at the moment when using Vite.

packages/mc-html-template/src/index.js

@@ -2,4 +2,3 @@ exports.compileHtml = require('./compile-html');
 exports.generateTemplate = require('./generate-template');
 exports.processHeaders = require('./process-headers');
 exports.replaceHtmlPlaceholders = require('./utils/replace-html-placeholders');
-exports.htmlScripts = require('./load-html-scripts');

packages/mc-scripts/package.json

@@ -76,7 +76,6 @@
     "thread-loader": "3.0.4",
     "url": "^0.11.0",
     "vite": "2.9.1",
-    "vite-plugin-dynamic-publicpath": "1.1.2",
     "webpack": "5.72.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-dev-server": "4.8.1",

packages/mc-scripts/src/bin/cli.js

@@ -71,16 +71,24 @@ const applicationDirectory = fs.realpathSync(process.cwd());
         process.env.BABEL_ENV = 'production';
         process.env.NODE_ENV = 'production';
 
+        const shouldAlsoCompile = !flags['build-only'];
         const shouldUseExperimentalBundler =
           process.env.ENABLE_EXPERIMENTAL_VITE_BUNDLER === 'true';
-        const shouldAlsoCompile = !flags['build-only'];
+        if (shouldUseExperimentalBundler) {
+          console.log('Experimental Vite bundler enabled! 🚀');
+          console.warn(
+            'NOTE that the "cdnURL" value is not supported at the moment when using Vite.'
+          );
+          console.log('');
+        }
 
         proxyCommand(command, {
           noExit: shouldAlsoCompile,
           fileName: shouldUseExperimentalBundler ? 'build-vite' : 'build',
         });
 
         if (shouldAlsoCompile) {
+          console.log('');
           proxyCommand('compile-html');
         }
 
@@ -112,6 +120,10 @@ const applicationDirectory = fs.realpathSync(process.cwd());
 
         const shouldUseExperimentalBundler =
           process.env.ENABLE_EXPERIMENTAL_VITE_BUNDLER === 'true';
+        if (shouldUseExperimentalBundler) {
+          console.log('Experimental Vite bundler enabled');
+          console.log('');
+        }
 
         proxyCommand(command, {
           fileName: shouldUseExperimentalBundler ? 'start-vite' : 'start',

packages/mc-scripts/src/commands/build-vite.js

@@ -4,10 +4,8 @@ const path = require('path');
 const { build } = require('vite');
 const pluginGraphql = require('@rollup/plugin-graphql');
 const pluginReact = require('@vitejs/plugin-react').default;
-const { useDynamicPublicPath } = require('vite-plugin-dynamic-publicpath');
 const {
   generateTemplate,
-  htmlScripts,
 } = require('@commercetools-frontend/mc-html-template');
 const {
   packageLocation: applicationStaticAssetsPath,
@@ -16,37 +14,6 @@ const paths = require('../config/paths');
 
 const DEFAULT_PORT = parseInt(process.env.HTTP_PORT, 10) || 3001;
 
-const pluginCustomApplication = () => {
-  return {
-    name: 'custom-application',
-    /**
-     * @type {import('vite').IndexHtmlTransformHook}
-     */
-    transformIndexHtml(rawHtml, _ctx) {
-      // Ensure to use the `cdnUrl` value when loading the entry point.
-      // NOTE: with Webpack this is done by setting the `__webpack_public_path__`.
-      const html = rawHtml.replace(
-        new RegExp(`<script type="module"(.*) src="(.*)">`, 'g'),
-        `<script type="module"$1 src="__CDN_URL__$2">`
-      );
-
-      return {
-        html,
-        tags: [
-          {
-            tag: 'script',
-            // Inject the functions to dynamically change the public path.
-            // This is also used for the `cdnUrl` and is the equivalent
-            // of Webpack's `__webpack_public_path__`.
-            children: htmlScripts.publicPath,
-            injectTo: 'body',
-          },
-        ],
-      };
-    },
-  };
-};
-
 const execute = async () => {
   // Ensure the `/public` folder exists.
   fs.mkdirSync(paths.appBuild, { recursive: true });
@@ -67,7 +34,6 @@ const execute = async () => {
   await build({
     configFile: false,
     root: paths.appRoot,
-    base: '', // <-- Very important, otherwise asset URLs start with `/`.
     define: {
       'process.env.DEBUG': JSON.stringify(false),
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
@@ -94,15 +60,6 @@ const execute = async () => {
           plugins: ['@emotion/babel-plugin'],
         },
       }),
-      pluginCustomApplication(),
-      // This plugin allows to change the public path on runtime.
-      // This is the equivalent of Webpack's `__webpack_public_path__`.
-      // See original issue: https://github.com/vitejs/vite/issues/3522#issuecomment-874377284
-      useDynamicPublicPath({
-        dynamicImportHandler: 'window.__dynamicImportHandler__',
-        dynamicImportPreload: 'window.__dynamicImportPreload__',
-        assetsBase: '.',
-      }),
     ],
   });
 

yarn.lock

@@ -3055,7 +3055,6 @@ __metadata:
     thread-loader: 3.0.4
     url: ^0.11.0
     vite: 2.9.1
-    vite-plugin-dynamic-publicpath: 1.1.2
     webpack: 5.72.0
     webpack-bundle-analyzer: 4.5.0
     webpack-dev-server: 4.8.1
@@ -16335,13 +16334,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-module-lexer@npm:^0.6.0":
-  version: 0.6.0
-  resolution: "es-module-lexer@npm:0.6.0"
-  checksum: ef04832d0f118e07c5aafc3824f274df380e9f86915a2d665884d9498f580b1f5607bc633504460a6c6247b7689aaa774b024d6733de28614d1fab72991a6fc3
-  languageName: node
-  linkType: hard
-
 "es-module-lexer@npm:^0.9.0":
   version: 0.9.3
   resolution: "es-module-lexer@npm:0.9.3"
@@ -34519,15 +34511,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-dynamic-publicpath@npm:1.1.2":
-  version: 1.1.2
-  resolution: "vite-plugin-dynamic-publicpath@npm:1.1.2"
-  dependencies:
-    es-module-lexer: ^0.6.0
-  checksum: c631149bb006af3e5a6c00ef4cf891b33cc1e6d7839a5b940f671e798a8382196c5fe3a4782f047f7f37a65a76691a8e3c2eab62117be0a685f2287a32a47771
-  languageName: node
-  linkType: hard
-
 "vite@npm:2.9.1":
   version: 2.9.1
   resolution: "vite@npm:2.9.1"