@lynx-js/react-webpack-plugin 0.7.4 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @lynx-js/react-webpack-plugin
 
+## 0.9.0
+
+### Minor Changes
+
+- Add `removeCall` for shake function calls. Its initial default value matches the hooks that were previously in `removeCallParams`, and `removeCallParams` now defaults to empty. ([#2423](https://github.com/lynx-family/lynx-stack/pull/2423))
+
+  `removeCall` removes matched runtime hook calls entirely, replacing them with `undefined` in expression positions and dropping them in statement positions. `removeCallParams` keeps the existing behavior of preserving the call while stripping its arguments.
+
+## 0.8.0
+
+### Minor Changes
+
+- feat: add `globalPropsMode` option to `PluginReactLynxOptions` ([#2346](https://github.com/lynx-family/lynx-stack/pull/2346))
+
+  - When configured to `"event"`, `updateGlobalProps` will only trigger a global event and skip the `runWithForce` flow.
+  - Defaults to `"reactive"`, which means `updateGlobalProps` will trigger re-render automatically.
+
+### Patch Changes
+
+- Fix sourcemap misalignment when wrapping lazy bundle main-thread chunks. ([#2361](https://github.com/lynx-family/lynx-stack/pull/2361))
+
+  The lazy bundle IIFE wrapper is now injected in `processAssets` at `PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE + 1` by walking chunk groups instead of patching assets in `beforeEncode`.
+
+  - With `experimental_isLazyBundle: true`, the wrapper is applied to lazy-bundle chunk groups.
+  - Without lazy bundle mode, the wrapper is applied to async main-thread chunk groups generated by dynamic import.
+
+  Injecting the wrapper in this stage keeps the emitted JS stable after optimization while still running before `DEV_TOOLING` sourcemap finalization, so the generated `.js` and `.js.map` stay aligned.
+
+- Set `__DEV__` and `__PROFILE__` to `true` on `NODE_ENV === 'development'`. ([#2324](https://github.com/lynx-family/lynx-stack/pull/2324))
+
 ## 0.7.4
 
 ### Patch Changes

package/lib/ReactWebpackPlugin.d.ts

@@ -15,6 +15,10 @@ interface ReactWebpackPluginOptions {
      * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.firstScreenSyncTiming}
      */
     firstScreenSyncTiming?: 'immediately' | 'jsReady';
+    /**
+     * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.globalPropsMode}
+     */
+    globalPropsMode?: 'reactive' | 'event';
     /**
      * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableSSR}
      */

package/lib/ReactWebpackPlugin.js

@@ -73,6 +73,7 @@ class ReactWebpackPlugin {
         .freeze({
         disableCreateSelectorQueryIncompatibleWarning: false,
         firstScreenSyncTiming: 'immediately',
+        globalPropsMode: 'reactive',
         enableSSR: false,
         mainThreadChunks: [],
         extractStr: false,
@@ -100,19 +101,22 @@ class ReactWebpackPlugin {
             // Use undefined for variables that must be provided during bundling, or null if they are optional.
             DEBUG: null,
         }).apply(compiler);
+        const isDev = process.env['NODE_ENV'] === 'development'
+            || compiler.options.mode === 'development';
         new DefinePlugin({
-            __DEV__: JSON.stringify(compiler.options.mode === 'development'),
+            __DEV__: isDev,
             // We enable profile by default in development.
             // It can also be disabled by environment variable `REACT_PROFILE=false`
             __PROFILE__: JSON.stringify(process.env['REACT_PROFILE']
                 ?? options.profile
-                ?? compiler.options.mode === 'development'),
+                ?? isDev),
             // User can enable ALog by environment variable `REACT_ALOG=true`
             __ALOG__: JSON.stringify(Boolean(process.env['REACT_ALOG'])),
             // User can enable ALog of element API calls by environment variable `REACT_ALOG_ELEMENT_API=true`
             __ALOG_ELEMENT_API__: JSON.stringify(Boolean(process.env['REACT_ALOG_ELEMENT_API'])),
             __EXTRACT_STR__: JSON.stringify(Boolean(options.extractStr)),
             __FIRST_SCREEN_SYNC_TIMING__: JSON.stringify(options.firstScreenSyncTiming),
+            __GLOBAL_PROPS_MODE__: JSON.stringify(options.globalPropsMode),
             __ENABLE_SSR__: JSON.stringify(options.enableSSR),
             __DISABLE_CREATE_SELECTOR_QUERY_INCOMPATIBLE_WARNING__: JSON.stringify(options.disableCreateSelectorQueryIncompatibleWarning),
         }).apply(compiler);
@@ -168,26 +172,50 @@ class ReactWebpackPlugin {
                 }
                 return args;
             });
-            // Inject `module.exports` for async main-thread chunks
-            hooks.beforeEncode.tap(this.constructor.name, (args) => {
-                const { encodeData } = args;
-                // A lazy bundle may not have main-thread code
-                if (!encodeData.lepusCode.root) {
-                    return args;
-                }
-                if (encodeData.sourceContent.appType === 'card') {
-                    return args;
-                }
-                // We inject `module.exports` for each async template.
-                compilation.updateAsset(encodeData.lepusCode.root.name, (old) => new ConcatSource(`\
-(function (globDynamicComponentEntry) {
-  const module = { exports: {} }
-  const exports = module.exports;
-`, old, `
-  ;return module.exports
-})`));
-                return args;
-            });
+            if (compiler.options.plugins.some((p) => p instanceof LynxTemplatePlugin)) {
+                compilation.hooks.processAssets.tap({
+                    name: this.constructor.name,
+                    // This wrapper must be injected after size/minify optimizations have
+                    // produced stable JS, but before devtool plugins finalize sourcemaps and
+                    // later encode hooks consume the wrapped asset.
+                    //
+                    // - Too early (<= OPTIMIZE_SIZE): the wrapper is added before the
+                    //   minimizer runs. For lazy bundles, the minimizer can treat the wrapped
+                    //   content as removable and collapse the emitted asset down to empty code.
+                    // - Too late (>= DEV_TOOLING): SourceMapDevToolPlugin emits `.map` assets
+                    //   and rewrites JS with `sourceMappingURL` in DEV_TOOLING. If we prepend
+                    //   wrapper lines after that point, the generated JS shifts but mappings do
+                    //   not.
+                    //
+                    // OPTIMIZE_SIZE + 1 is the safe window where both the emitted code and its
+                    // sourcemap stay aligned.
+                    stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE
+                        + 1,
+                }, () => {
+                    compilation.chunkGroups.forEach(chunkGroup => {
+                        const isDynamicImport = !chunkGroup.isInitial()
+                            && chunkGroup.origins.every(origin => origin.module?.layer === LAYERS.MAIN_THREAD);
+                        chunkGroup.chunks.forEach(chunk => {
+                            for (const file of chunk.files) {
+                                if (!file.endsWith('.js')) {
+                                    continue;
+                                }
+                                const shouldInjectWrapper = isDynamicImport
+                                    || (options.experimental_isLazyBundle
+                                        && options.mainThreadChunks?.includes(file));
+                                if (!shouldInjectWrapper) {
+                                    continue;
+                                }
+                                const asset = compilation.getAsset(file);
+                                if (!asset) {
+                                    continue;
+                                }
+                                compilation.updateAsset(file, old => new ConcatSource(`(function (globDynamicComponentEntry) {\n`, `  const module = { exports: {} }\n`, `  const exports = module.exports;\n`, old, `\n  ;return module.exports\n})`));
+                            }
+                        });
+                    });
+                });
+            }
             // The react-transform will add `-react__${LAYER}` to the webpackChunkName.
             // We replace it with an empty string here to make sure main-thread & background chunk match.
             hooks.asyncChunkName.tap(this.constructor.name, (chunkName) => chunkName

package/lib/loaders/options.js

@@ -135,6 +135,8 @@ export function getMainThreadTransformOptions(inputSourceMap) {
             // so never pass true to shake to rust
             pkgName: [
                 'react',
+                'preact/hooks',
+                'preact/compat',
                 PUBLIC_RUNTIME_PKG,
                 `${PUBLIC_RUNTIME_PKG}/legacy-react-runtime`,
                 RUNTIME_PKG,
@@ -154,14 +156,15 @@ export function getMainThreadTransformOptions(inputSourceMap) {
                 'defaultProps',
                 ...(shake?.retainProp ?? []),
             ],
-            removeCallParams: [
+            removeCall: [
                 'useEffect',
                 'useLayoutEffect',
                 '__runInJS',
                 'useLynxGlobalEventListener',
                 'useImperativeHandle',
-                ...(shake?.removeCallParams ?? []),
+                ...(shake?.removeCall ?? []),
             ],
+            removeCallParams: shake?.removeCallParams ?? [],
         },
         worklet: {
             ...commonOptions.worklet,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react-webpack-plugin",
-  "version": "0.7.4",
+  "version": "0.9.0",
   "description": "A webpack plugin for ReactLynx",
   "keywords": [
     "webpack",
@@ -37,15 +37,15 @@
     "@lynx-js/webpack-runtime-globals": "0.0.6"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.56.3",
-    "@rspack/core": "1.7.6",
+    "@microsoft/api-extractor": "7.58.2",
+    "@rspack/core": "1.7.9",
     "css-loader": "^7.1.4",
     "swc-loader": "^0.2.7",
     "webpack": "^5.105.2",
     "@lynx-js/css-extract-webpack-plugin": "0.7.0",
-    "@lynx-js/react": "0.116.3",
-    "@lynx-js/template-webpack-plugin": "0.10.3",
+    "@lynx-js/react": "0.118.0",
     "@lynx-js/test-tools": "0.0.0",
+    "@lynx-js/template-webpack-plugin": "0.10.8",
     "@lynx-js/vitest-setup": "0.0.0"
   },
   "peerDependencies": {