@pushwoosh/frontend-builder-engine 4.3.0 → 5.0.0

package/README.md

@@ -62,6 +62,25 @@ an uppercase `@LICENSE` comment is not extracted. To fall back to terser for one
 ENGINE_MINIFIER=terser npm run build
 ```
 
+### React Compiler (opt-in)
+
+`babel-plugin-react-compiler` ships with the engine and is off by default: a project switches it on in
+its `pushwoosh.config.js`, so micro-frontends move to it one at a time.
+
+```js
+module.exports = {
+  reactCompiler: true,
+  // or compiler options, e.g. compile only components marked with 'use memo':
+  // reactCompiler: { compilationMode: 'annotation' },
+};
+```
+
+The plugin runs first in `lib/babel.application.config.js` with `target: '19'`, so it needs no
+`react-compiler-runtime` package: the memo cache comes from `react/compiler-runtime` of the project's own
+React 19, bundled into `index.mjs` while `react` itself stays external. Components the compiler cannot
+handle are left as they are (the default `panicThreshold: 'none'`). The option affects application
+builds only; `lib:build` does not read it.
+
 ## Migration from v3
 
 v3 is deprecated: its `dist/index.js` is not an ES module, and the platform loads native ES modules

package/lib/babel.application.config.js

@@ -12,6 +12,16 @@ const fromEngine = (name) => require.resolve(name);
 const runtimeVersion = require('@babel/runtime/package.json').version;
 
 const { BROWSER_TARGETS } = require('./browser-targets');
+const { loadPushwooshConfig } = require('./helpers');
+
+// Opt-in per project (pushwoosh.config.js `reactCompiler`); the compiler has to run before every other plugin.
+const reactCompilerPlugins = (option) => {
+  if (!option) {
+    return [];
+  }
+
+  return [[fromEngine('babel-plugin-react-compiler'), { target: '19', ...(typeof option === 'object' ? option : {}) }]];
+};
 
 module.exports = (api) => {
   api.cache(true);
@@ -30,6 +40,7 @@ module.exports = (api) => {
       fromEngine('@babel/preset-typescript')
     ],
     plugins: [
+      ...reactCompilerPlugins(loadPushwooshConfig().reactCompiler),
       [
         fromEngine('@babel/plugin-transform-runtime'),
         {

package/lib/eslint.config.mjs

@@ -1,15 +1,30 @@
 // @ts-check
 
 import eslint from '@eslint/js';
+import eslintReact from '@eslint-react/eslint-plugin';
 import stylistic from '@stylistic/eslint-plugin';
-import importPlugin from 'eslint-plugin-import';
-import reactPlugin from 'eslint-plugin-react';
+import { importX } from 'eslint-plugin-import-x';
 import hooksPlugin from 'eslint-plugin-react-hooks';
 import tseslint from 'typescript-eslint';
 
+// Keeps the `import/` and `react/` rule prefixes so eslint-disable comments in consumers survive the plugin swap.
+/** @type {(config: import('eslint').Linter.Config, from: string, to: string) => import('eslint').Linter.Config} */
+const renamePlugin = (config, from, to) => ({
+  ...config,
+  plugins: { [to]: config.plugins?.[from] ?? {} },
+  rules: Object.fromEntries(Object.entries(config.rules ?? {}).map(([rule, level]) => [rule.replace(`${from}/`, `${to}/`), level])),
+});
+
+// eslint-plugin-react-hooks stays the source of truth for hooks and React Compiler rules.
+const reactRecommended = eslintReact.configs['recommended-typescript'];
+const reactConfig = renamePlugin({
+  ...reactRecommended,
+  rules: Object.fromEntries(Object.entries(reactRecommended.rules ?? {}).filter(([rule]) => !(rule.replace('@eslint-react/', '') in hooksPlugin.rules))),
+}, '@eslint-react', 'react');
+
 export default tseslint.config(
   eslint.configs.recommended,
-  importPlugin.flatConfigs.recommended,
+  renamePlugin(importX.flatConfigs.recommended, 'import-x', 'import'),
   ...tseslint.configs.recommended,
   stylistic.configs.customize({
     indent: 2,
@@ -22,28 +37,22 @@ export default tseslint.config(
     commaDangle: 'always-multiline',
     arrowParens: 'always',
   }),
-  reactPlugin.configs.flat.recommended,
-  reactPlugin.configs.flat['jsx-runtime'],
+  reactConfig,
   {
     plugins: {
       '@stylistic': stylistic,
       'react-hooks': hooksPlugin,
     },
-    settings: {
-      react: {
-        version: 'detect',
-      },
-    },
     rules: {
       ...hooksPlugin.configs.recommended.rules,
       'react-hooks/incompatible-library': 'error',
-      'react/display-name': 'off',
       'react/no-array-index-key': 'error',
-      'react/jsx-max-props-per-line': [
+      'react/dom-no-unknown-property': 'error',
+      'react/dom-no-unsafe-target-blank': 'error',
+      '@stylistic/jsx-max-props-per-line': [
         'error',
         {
-          when: 'always',
-          maximum: 3,
+          maximum: { single: 3, multi: 1 },
         },
       ],
       'max-len': [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/frontend-builder-engine",
-  "version": "4.3.0",
+  "version": "5.0.0",
   "description": "Pushwoosh frontend builder engine",
   "main": "./lib/pushwoosh-frontend-builder-engine.js",
   "publishConfig": {
@@ -27,22 +27,23 @@
     "@babel/preset-typescript": "^7.24.1",
     "@babel/runtime": "^7.29.7",
     "@babel/types": "^7.24.0",
-    "@eslint/js": "^9.13.0",
+    "@eslint-react/eslint-plugin": "^5.28.8",
+    "@eslint/js": "^10.0.1",
     "@stylistic/eslint-plugin": "^5.3.1",
     "@svgr/webpack": "^8.1.0",
     "@swc/core": "1.16.18",
     "@types/eslint__js": "^8.42.3",
     "@types/webpack-env": "^1.18.4",
     "babel-loader": "^10.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-styled-components": "^2.1.4",
     "babel-plugin-transform-imports": "^2.0.0",
     "commander": "^12.0.0",
     "css-loader": "^7.1.2",
     "dotenv": "^16.4.5",
-    "eslint": "^9.13.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint": "^10.14.0",
+    "eslint-plugin-import-x": "^4.17.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "html-webpack-plugin": "^5.6.0",
     "knip": "^6.35.1",
@@ -51,7 +52,7 @@
     "ts-loader": "^9.5.1",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.65.0",
+    "typescript-eslint": "^8.72.1",
     "webpack": "^5.94.0",
     "webpack-bundle-analyzer": "^5.1.1",
     "webpack-cli": "^6.0.1",