@lynx-js/react-webpack-plugin-canary 0.9.4 → 0.9.5-canary-20260629-f332136e

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @lynx-js/react-webpack-plugin
 
+## 0.9.5-canary-20260629122428-f332136ea2b83004f69231bee7b17b4254101f9f
+
+### Patch Changes
+
+- Support enabling preact devtools in production via the `REACT_DEVTOOL` environment variable. ([#2880](https://github.com/lynx-family/lynx-stack/pull/2880))
+
+  By default `@lynx-js/preact-devtools` is aliased away in production builds. Setting the `REACT_DEVTOOL` environment variable now:
+  1. keeps a user-imported `@lynx-js/preact-devtools` from being stripped;
+  2. defines `__REACT_DEVTOOL__`, which gates the dev-only runtime hooks devtools depends on (such as `injectLepusMethods`) so they also run in production;
+  3. keeps function/class names during minification (`keep_fnames`/`keep_classnames`), which devtools needs to resolve component names (`type.name`) and to reconstruct the hook tree (it matches minified stack frames by function name).
+
+  `@lynx-js/react/debug` remains development-only.
+
 ## 0.9.4
 
 ### Patch Changes
@@ -50,7 +63,6 @@
 ### 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.
 
@@ -59,7 +71,6 @@
 - 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.
 
@@ -139,16 +150,16 @@
   type InlineChunkConfig =
     | boolean
     | InlineChunkTest
-    | { enable?: boolean | 'auto'; test: InlineChunkTest };
+    | { enable?: boolean | "auto"; test: InlineChunkTest };
   ```
 
   ```ts
-  import { defineConfig } from '@lynx-js/rspeedy';
+  import { defineConfig } from "@lynx-js/rspeedy";
 
   export default defineConfig({
     output: {
       inlineScripts: ({ name, size }) => {
-        return name.includes('foo') && size < 1000;
+        return name.includes("foo") && size < 1000;
       },
     },
   });
@@ -203,7 +214,6 @@
 - feat: fully support MTS ([#569](https://github.com/lynx-family/lynx-stack/pull/569))
 
   Now use support the following usage
-
   - mainthread event
   - mainthread ref
   - runOnMainThread/runOnBackground
@@ -232,7 +242,7 @@
 - Shake `useImperativeHandle` on the main-thread by default. ([#153](https://github.com/lynx-family/lynx-stack/pull/153))
 
   ```js
-  import { forwardRef, useImperativeHandle } from '@lynx-js/react';
+  import { forwardRef, useImperativeHandle } from "@lynx-js/react";
 
   export default forwardRef(function App(_, ref) {
     useImperativeHandle(ref, () => {
@@ -240,7 +250,7 @@
       return {
         name() {
           // This should be considered as background only
-          console.info('This should not exist in main-thread');
+          console.info("This should not exist in main-thread");
         },
       };
     });
@@ -300,14 +310,14 @@
 - e8039f2: Add `defineDCE` in plugin options. Often used to define custom macros.
 
   ```js
-  import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
-  import { defineConfig } from '@lynx-js/rspeedy';
+  import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
+  import { defineConfig } from "@lynx-js/rspeedy";
 
   export default defineConfig({
     plugins: [
       pluginReactLynx({
         defineDCE: {
-          __SOME_FALSE_DEFINE__: 'false',
+          __SOME_FALSE_DEFINE__: "false",
         },
       }),
     ],
@@ -319,20 +329,20 @@
   For example, `import` initialized by dead code will be removed:
 
   ```js
-  import { foo } from 'bar';
+  import { foo } from "bar";
 
   if (__SOME_FALSE_DEFINE__) {
     foo();
-    console.log('dead code');
+    console.log("dead code");
   } else {
-    console.log('reachable code');
+    console.log("reachable code");
   }
   ```
 
   will be transformed to:
 
   ```js
-  console.log('reachable code');
+  console.log("reachable code");
   ```
 
 ## 0.6.0
@@ -342,14 +352,14 @@
 - a30c83d: Add `compat.removeComponentAttrRegex`.
 
   ```js
-  import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
-  import { defineConfig } from '@lynx-js/rspeedy';
+  import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
+  import { defineConfig } from "@lynx-js/rspeedy";
 
   export default defineConfig({
     plugins: [
       pluginReactLynx({
         compat: {
-          removeComponentAttrRegex: 'YOUR REGEX',
+          removeComponentAttrRegex: "YOUR REGEX",
         },
       }),
     ],

package/lib/ReactWebpackPlugin.js

@@ -68,6 +68,37 @@ export function mergeElementTemplatesFromModule(elementTemplates, module) {
         mergeElementTemplate(elementTemplates, templateId, compiledTemplate);
     }
 }
+/**
+ * Collect element templates for a single encoded bundle, scoped to the modules
+ * that belong to it. Iterating every module in the compilation would pull other
+ * bundles' modules — including dynamic components — into the result, duplicating
+ * their templates (e.g. a lazy component's template leaking into the main
+ * bundle). An entrypoint's chunk group contains only its initial chunks, so
+ * async (dynamic component) modules stay out of the main bundle, and each lazy
+ * bundle keeps just its own templates.
+ *
+ * @internal
+ */
+export function collectElementTemplatesForEntries(entryNames, getChunkGroup, getChunkModules) {
+    const elementTemplates = {};
+    const visited = new Set();
+    for (const entryName of entryNames) {
+        const chunkGroup = getChunkGroup(entryName);
+        if (chunkGroup === undefined) {
+            continue;
+        }
+        for (const chunk of chunkGroup.chunks) {
+            for (const module of getChunkModules(chunk)) {
+                if (visited.has(module)) {
+                    continue;
+                }
+                visited.add(module);
+                mergeElementTemplatesFromModule(elementTemplates, module);
+            }
+        }
+    }
+    return elementTemplates;
+}
 /**
  * ReactWebpackPlugin allows using ReactLynx with webpack
  *
@@ -166,6 +197,12 @@ class ReactWebpackPlugin {
             || compiler.options.mode === 'development';
         new DefinePlugin({
             __DEV__: isDev,
+            // Whether preact devtools is enabled. Enabled by default in development;
+            // in production it can be enabled by environment variable `REACT_DEVTOOL`
+            // (which also keeps `@lynx-js/preact-devtools` from being stripped). This
+            // gates the dev-only runtime hooks that devtools depends on
+            // (e.g. `injectLepusMethods`).
+            __REACT_DEVTOOL__: JSON.stringify(isDev || Boolean(process.env['REACT_DEVTOOL'])),
             // 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']
@@ -283,10 +320,8 @@ class ReactWebpackPlugin {
                 ?.replaceAll(`-react__main-thread`, ''));
             if (options.experimental_useElementTemplate) {
                 hooks.beforeEncode.tap(`${this.constructor.name}.ElementTemplate`, (args) => {
-                    const elementTemplates = {};
-                    for (const module of compilation.modules) {
-                        mergeElementTemplatesFromModule(elementTemplates, module);
-                    }
+                    const { chunkGraph } = compilation;
+                    const elementTemplates = collectElementTemplatesForEntries(args.entryNames, (name) => compilation.namedChunkGroups.get(name), (chunk) => chunkGraph.getChunkModules(chunk));
                     args.encodeData.sourceContent.config['enableUnifyFixedBehavior'] =
                         true;
                     args.encodeData.elementTemplate = elementTemplates;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react-webpack-plugin-canary",
-  "version": "0.9.4",
+  "version": "0.9.5-canary-20260629-f332136e",
   "description": "A webpack plugin for ReactLynx",
   "keywords": [
     "webpack",
@@ -45,9 +45,9 @@
     "css-loader": "^7.1.4",
     "swc-loader": "^0.2.7",
     "@lynx-js/css-extract-webpack-plugin": "npm:@lynx-js/css-extract-webpack-plugin-canary@0.8.0",
-    "@lynx-js/react": "npm:@lynx-js/react-canary@0.121.2",
+    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.12.1",
     "@lynx-js/test-tools": "0.0.0",
-    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.12.0"
+    "@lynx-js/react": "npm:@lynx-js/react-canary@0.122.1-canary-20260629-f332136e"
   },
   "peerDependencies": {
     "@lynx-js/template-webpack-plugin": "*"