@pushwoosh/frontend-builder-engine 3.3.0 → 4.1.0

package/README.md

@@ -39,6 +39,43 @@ 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. 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 is deprecated: its `dist/index.js` is not an ES module, and the platform loads native ES modules
+only since root-config dropped its module loader (DEV-992), so a v3 build no longer starts there —
+its `import()` fails with `ReferenceError: System is not defined` and the app slot stays empty.
+Hotfixes for v3 go to the `v3` branch only. Moving a micro-frontend to v4:
+
+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, and
+   `microfrontend-dev.yml` prints the `index.mjs` override, both whenever `dist` has it.
+4. `pushwoosh.config.js` (`applicationExternals`, `applicationWebpack`) needs no changes, unless
+   `applicationWebpack` sets `output.libraryTarget`/`output.library` or adds a public-path plugin of
+   its own — drop those.
+
+Every name in `defaultExternals` resolves through the root-config import map and must point at an
+ES module (`.mjs`) there; all of them do since DEV-987/DEV-988.
+
 ### Library commands (reusable packages)
 
 ```bash
@@ -59,3 +96,8 @@ 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`, hotfixes for the deprecated v3 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`, and re-run
+`npm deprecate @pushwoosh/frontend-builder-engine@3.x "…"`: a deprecation covers only the versions
+published before it.

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/eslint.config.mjs

@@ -36,7 +36,7 @@ export default tseslint.config(
     },
     rules: {
       ...hooksPlugin.configs.recommended.rules,
-      'react-hooks/set-state-in-effect': 'off',
+      'react-hooks/set-state-in-effect': 'error',
       'react-hooks/refs': 'off',
       'react-hooks/incompatible-library': 'error',
       'react/display-name': 'off',

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.1.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",