@lynx-js/react-webpack-plugin 0.7.3 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @lynx-js/react-webpack-plugin
 
+## 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
+
+- Remove element api calls alog by default, and only enable it when `__ALOG_ELEMENT_API__` is defined to `true` or environment variable `REACT_ALOG_ELEMENT_API` is set to `true`. ([#2192](https://github.com/lynx-family/lynx-stack/pull/2192))
+
 ## 0.7.3
 
 ### 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,17 +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);
@@ -166,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react-webpack-plugin",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "A webpack plugin for ReactLynx",
   "keywords": [
     "webpack",
@@ -37,14 +37,14 @@
     "@lynx-js/webpack-runtime-globals": "0.0.6"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.52.15",
-    "@rspack/core": "1.6.6",
-    "css-loader": "^7.1.2",
-    "swc-loader": "^0.2.6",
-    "webpack": "^5.102.0",
+    "@microsoft/api-extractor": "7.57.6",
+    "@rspack/core": "1.7.7",
+    "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.115.1",
-    "@lynx-js/template-webpack-plugin": "0.10.0",
+    "@lynx-js/react": "0.117.0",
+    "@lynx-js/template-webpack-plugin": "0.10.6",
     "@lynx-js/test-tools": "0.0.0",
     "@lynx-js/vitest-setup": "0.0.0"
   },