@pushwoosh/frontend-builder-engine 3.3.0 → 4.0.0

package/README.md

@@ -39,6 +39,48 @@ A project whose parcel entry sits outside the globs above (a file no other entry
 its own `knip.json` in the project root and a plain `knip` call — the shared config is passed with
 `--config` and cannot be extended per project.
 
+### Output format
+
+Since v4 an application builds as a native ES module: `dist/index.mjs` with `import … from "react"`
+for every external, no `System.register`. Externals resolve through the root-config `importmap`,
+chunks and assets resolve against `import.meta.url` (`publicPath: 'auto'`). The browser floor is
+Chrome/Edge 94, Firefox 108 (import maps), Safari/iOS 16.4. To see it from a project:
+
+```bash
+npx browserslist "$(node -p "require('@pushwoosh/frontend-builder-engine/lib/browser-targets').BROWSERSLIST_QUERY")"
+```
+
+## Migration from v3
+
+v3 builds SystemJS (`dist/index.js`); it stays published and is maintained on the `v3` branch, so a
+micro-frontend moves to v4 on its own schedule. Moving one:
+
+1. Bump `@pushwoosh/frontend-builder-engine` to `^4.0.0` in `devDependencies`.
+2. Replace `module.hot` with `import.meta.webpackHot` (same API):
+
+   ```ts
+   if (import.meta.webpackHot) {
+     import.meta.webpackHot.accept();
+   }
+   ```
+
+3. The build output is `dist/index.mjs` instead of `dist/index.js`. Nothing to change in CI: the
+   shared `frontend/microfrontend-release.yml` registers `index.mjs` in the import map when `dist`
+   has it. The manual dev stand (`microfrontend-dev.yml`) still prints an `index.js` override URL —
+   replace it with `index.mjs` by hand.
+4. `pushwoosh.config.js` (`applicationExternals`, `applicationWebpack`) needs no changes, unless
+   `applicationWebpack` sets `output.libraryTarget`/`output.library` or adds
+   `SystemJSPublicPathWebpackPlugin` itself — drop those.
+
+**Release order.** Every external becomes a native `import`, resolved by the browser's import map,
+not by SystemJS. Do not roll out the first v4 micro-frontend before:
+
+- root-config ships the SystemJS ↔ ESM bridge (DEV-984) — without it the first `index.mjs` in the map
+  breaks every v3 micro-frontend;
+- `@pushwoosh/http-client`, `@pushwoosh/session-store`, `@pushwoosh/rpc-gateway-*` and
+  `@pushwoosh/rpc-v2-http-api-data` are in the map as `.mjs` (DEV-987, DEV-988) — while they are
+  `.js` (System bundles), a v4 app that imports them fails to load.
+
 ### Library commands (reusable packages)
 
 ```bash
@@ -59,3 +101,6 @@ cd examples/library && npm install && npm start
 ### Release
 
 Releases are triggered by Git tags in CI. Tag with `v*` for stable, include `beta` for beta channel.
+v4 is released from `master`, v3.x fixes from the `v3` branch. CI publishes every non-beta tag as
+npm `latest`, so after a v3.x patch move `latest` back:
+`npm dist-tag add @pushwoosh/frontend-builder-engine@<newest 4.x> latest`.

package/lib/browser-targets.js

@@ -11,8 +11,10 @@
  * config file in babel, and the BROWSERSLIST variable short-circuits config
  * lookup in browserslist itself.
  *
- * This is an honest ES2022 baseline — these are exactly the versions where the
- * last ES2022 feature (class static initialization blocks) landed. Keep it in
+ * This is an ES2022 baseline — the versions where the last ES2022 feature
+ * (class static initialization blocks) landed — except Firefox, raised to 108
+ * because that is where import maps landed and apps ship as native ES modules
+ * resolved through the root-config import map. Keep it in
  * sync with `target`/`lib` in `lib/tsconfig.json`: library packages are emitted
  * at that target and are never re-transpiled, because babel-loader excludes
  * node_modules.
@@ -40,7 +42,7 @@
 const BROWSER_TARGETS = [
   'Chrome >= 94',
   'Edge >= 94',
-  'Firefox >= 93',
+  'Firefox >= 108',
   'Safari >= 16.4',
   'iOS >= 16.4',
 ];

package/lib/webpack-config/single-spa-defaults.js

@@ -1,7 +1,6 @@
 const path = require('path');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-const SystemJSPublicPathPlugin = require('systemjs-webpack-interop/SystemJSPublicPathWebpackPlugin');
 
 const { BROWSERSLIST_QUERY } = require('../browser-targets');
 
@@ -54,10 +53,6 @@ function singleSpaDefaults(opts) {
     new BundleAnalyzerPlugin({
       analyzerMode: isAnalyze ? 'server' : 'disabled',
     }),
-    new SystemJSPublicPathPlugin({
-      systemjsModuleName: `@${opts.orgName}/${opts.projectName}`,
-      rootDirectoryLevel: opts.rootDirectoryLevel,
-    }),
   ];
 
   // Add TypeScript checker (skip in analyze mode)
@@ -81,14 +76,24 @@ function singleSpaDefaults(opts) {
       process.cwd(),
       `src/${opts.orgName}-${opts.projectName}.tsx`,
     ),
+    experiments: {
+      outputModule: true,
+    },
     output: {
-      filename: `${opts.orgName}-${opts.projectName}.js`,
-      libraryTarget: 'system',
+      filename: 'index.mjs',
+      module: true,
+      chunkFormat: 'module',
+      library: {
+        type: 'module',
+      },
       path: path.resolve(process.cwd(), 'dist'),
       uniqueName: opts.projectName,
       devtoolNamespace: opts.projectName,
-      publicPath: '',
+      // Chunks and assets resolve against import.meta.url, wherever the import map points.
+      publicPath: 'auto',
     },
+    // Externals become native `import` statements resolved by the root-config import map.
+    externalsType: 'module',
     module: {
       rules: [
         {

package/lib/webpack.application.config.js

@@ -48,7 +48,6 @@ module.exports = (webpackConfigEnv, argv) => {
     webpackConfigEnv,
     argv,
     // orgPackagesAsExternal: false,
-    rootDirectoryLevel: 1,
     disableHtmlGeneration: true,
   });
 
@@ -62,7 +61,6 @@ module.exports = (webpackConfigEnv, argv) => {
       index: path.resolve(cwd, './src/index.tsx'),
     },
     output: {
-      filename: '[name].js',
       path: path.resolve(cwd, './dist'),
     },
     resolve: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/frontend-builder-engine",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "Pushwoosh frontend builder engine",
   "main": "./lib/pushwoosh-frontend-builder-engine.js",
   "publishConfig": {
@@ -46,7 +46,6 @@
     "html-webpack-plugin": "^5.6.0",
     "knip": "^6.35.1",
     "style-loader": "^4.0.0",
-    "systemjs-webpack-interop": "^2.3.7",
     "ts-loader": "^9.5.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^6.0.3",