@lynx-js/react-webpack-plugin-canary 0.9.0 → 0.9.1-canary-20260414-a9f8d054

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @lynx-js/react-webpack-plugin
 
+## 0.9.1-canary-20260414031205-a9f8d0548664ea32ebae2072c13f2cf6fee676eb
+
+### Patch Changes
+
+- Support rstest for testing library using a dedicated testing loader. ([#2328](https://github.com/lynx-family/lynx-stack/pull/2328))
+
+- Add `enableUiSourceMap` option to enable UI source map generation and debug-metadata asset emission. ([#2402](https://github.com/lynx-family/lynx-stack/pull/2402))
+
+- Updated dependencies [[`a9f8d05`](https://github.com/lynx-family/lynx-stack/commit/a9f8d0548664ea32ebae2072c13f2cf6fee676eb)]:
+  - @lynx-js/template-webpack-plugin@0.10.9-canary-20260414031205-a9f8d0548664ea32ebae2072c13f2cf6fee676eb
+
 ## 0.9.0
 
 ### Minor Changes
@@ -13,7 +24,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.
 
@@ -22,7 +32,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.
 
@@ -102,16 +111,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;
       },
     },
   });
@@ -166,7 +175,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
@@ -195,7 +203,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, () => {
@@ -203,7 +211,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");
         },
       };
     });
@@ -263,14 +271,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",
         },
       }),
     ],
@@ -282,20 +290,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
@@ -305,14 +313,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.d.ts

@@ -101,7 +101,7 @@ declare class ReactWebpackPlugin {
      *
      * @public
      */
-    static loaders: Record<keyof typeof LAYERS, string>;
+    static loaders: Record<keyof typeof LAYERS | 'TESTING', string>;
     constructor(options?: ReactWebpackPluginOptions | undefined);
     /**
      * `defaultOptions` is the default options that the {@link ReactWebpackPlugin} uses.

package/lib/ReactWebpackPlugin.js

@@ -60,6 +60,7 @@ class ReactWebpackPlugin {
     static { this.loaders = {
         BACKGROUND: require.resolve('../lib/loaders/background.js'),
         MAIN_THREAD: require.resolve('../lib/loaders/main-thread.js'),
+        TESTING: require.resolve('../lib/loaders/testing.js'),
     }; }
     constructor(options) {
         this.options = options;

package/lib/loaders/main-thread.js

@@ -2,6 +2,7 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 import { createRequire } from 'node:module';
+import { UI_SOURCE_MAP_RECORDS_BUILD_INFO } from '@lynx-js/template-webpack-plugin';
 import { getMainThreadTransformOptions } from './options.js';
 const mainThreadLoader = function (content, sourceMap) {
     const require = createRequire(import.meta.url);
@@ -75,6 +76,11 @@ const mainThreadLoader = function (content, sourceMap) {
             this.emitWarning(new Error(warning.text));
         }
     }
+    const currentModule = this._module;
+    const buildInfo = currentModule?.buildInfo;
+    if (buildInfo) {
+        buildInfo[UI_SOURCE_MAP_RECORDS_BUILD_INFO] = result.uiSourceMapRecords;
+    }
     this.callback(null, result.code + (this.hot
         // TODO: temporary fix LEPUS error `$RefreshReg$ is not defined`
         // should make react-refresh transform in `react-transform`.

package/lib/loaders/options.d.ts

@@ -1,5 +1,10 @@
 import type { LoaderContext } from '@rspack/core';
 import type { CompatVisitorConfig, DefineDceVisitorConfig, JsxTransformerConfig, ShakeVisitorConfig, TransformNodiffOptions } from '@lynx-js/react/transform';
+export declare const JSX_IMPORT_SOURCE: {
+    MAIN_THREAD: string;
+    BACKGROUND: string;
+};
+export declare const RUNTIME_PKG = "@lynx-js/react/internal";
 /**
  * The options of the ReactLynx plugin.
  * @public
@@ -17,6 +22,10 @@ export interface ReactLoaderOptions {
      * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.jsx}
      */
     jsx?: JsxTransformerConfig | undefined;
+    /**
+     * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableUiSourceMap}
+     */
+    enableUiSourceMap?: boolean | undefined;
     /**
      * Enable the Fast Refresh for ReactLynx.
      */

package/lib/loaders/options.js

@@ -3,12 +3,12 @@
 // LICENSE file in the root directory of this source tree.
 import path from 'node:path';
 const PLUGIN_NAME = 'react:webpack';
-const JSX_IMPORT_SOURCE = {
+export const JSX_IMPORT_SOURCE = {
     MAIN_THREAD: '@lynx-js/react/lepus',
     BACKGROUND: '@lynx-js/react',
 };
 const PUBLIC_RUNTIME_PKG = '@lynx-js/react';
-const RUNTIME_PKG = '@lynx-js/react/internal';
+export const RUNTIME_PKG = '@lynx-js/react/internal';
 const OLD_RUNTIME_PKG = '@lynx-js/react-runtime';
 const COMPONENT_PKG = '@lynx-js/react-components';
 function normalizeSlashes(file) {
@@ -16,7 +16,7 @@ function normalizeSlashes(file) {
 }
 function getCommonOptions(inputSourceMap) {
     const filename = normalizeSlashes(path.relative(this.rootContext, this.resourcePath));
-    const { compat, enableRemoveCSSScope, inlineSourcesContent, isDynamicComponent, engineVersion, defineDCE = { define: {} }, } = this.getOptions();
+    const { compat, enableRemoveCSSScope, enableUiSourceMap, inlineSourcesContent, isDynamicComponent, engineVersion, defineDCE = { define: {} }, } = this.getOptions();
     const syntax = (/\.[mc]?tsx?$/.exec(this.resourcePath))
         ? 'typescript'
         : 'ecmascript';
@@ -70,6 +70,7 @@ function getCommonOptions(inputSourceMap) {
                 // This allows serializing the updated runtime code to Lepus using `Function.prototype.toString`.
                 ? 'MIXED'
                 : 'JS',
+            enableUiSourceMap: enableUiSourceMap ?? false,
             runtimePkg: RUNTIME_PKG,
             filename,
             isDynamicComponent: isDynamicComponent ?? false,

package/lib/loaders/testing.d.ts

@@ -0,0 +1,4 @@
+import type { LoaderContext } from '@rspack/core';
+import type { ReactLoaderOptions } from './options.js';
+declare function testingLoader(this: LoaderContext<ReactLoaderOptions>, content: string): void;
+export default testingLoader;

package/lib/loaders/testing.js

@@ -0,0 +1,102 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import { JSX_IMPORT_SOURCE, RUNTIME_PKG } from './options.js';
+function normalizeSlashes(file) {
+    return file.replaceAll(path.win32.sep, '/');
+}
+function testingLoader(content) {
+    const require = createRequire(import.meta.url);
+    const { compat = false, defineDCE = { define: {} }, engineVersion = '', shake = false, transformPath = '@lynx-js/react/transform', } = this.getOptions();
+    const { transformReactLynxSync } = require(transformPath);
+    const filename = normalizeSlashes(path.relative(this.rootContext, this.resourcePath));
+    const result = transformReactLynxSync(content, {
+        mode: 'test',
+        pluginName: '',
+        filename: this.resourcePath,
+        sourcemap: true,
+        snapshot: {
+            preserveJsx: false,
+            runtimePkg: RUNTIME_PKG,
+            jsxImportSource: JSX_IMPORT_SOURCE.BACKGROUND,
+            filename,
+            target: 'MIXED',
+        },
+        // snapshot: true,
+        directiveDCE: false,
+        defineDCE,
+        shake,
+        compat,
+        engineVersion,
+        worklet: {
+            filename,
+            runtimePkg: RUNTIME_PKG,
+            target: 'MIXED',
+        },
+        refresh: false,
+        cssScope: false,
+    });
+    if (result.errors.length > 0) {
+        for (const error of result.errors) {
+            if (this.experiments?.emitDiagnostic) {
+                // Rspack with `emitDiagnostic` API
+                try {
+                    this.experiments.emitDiagnostic({
+                        message: error.text,
+                        sourceCode: content,
+                        location: {
+                            line: error.location?.line ?? 1,
+                            column: error.location?.column ?? 0,
+                            length: error.location?.length ?? 0,
+                            text: error.text ?? '',
+                        },
+                        severity: 'error',
+                    });
+                }
+                catch {
+                    // Rspack may throw on invalid line & column when containing UTF-8.
+                    // We catch it up here.
+                    this.emitError(new Error(error.text));
+                }
+            }
+            else {
+                // Webpack or legacy Rspack
+                this.emitError(new Error(error.text));
+            }
+        }
+        this.callback(new Error('react-transform failed'));
+        return;
+    }
+    for (const warning of result.warnings) {
+        if (this.experiments?.emitDiagnostic) {
+            // Rspack with `emitDiagnostic` API
+            try {
+                this.experiments.emitDiagnostic({
+                    message: warning.text,
+                    sourceCode: content,
+                    location: {
+                        line: warning.location?.line ?? 1,
+                        column: warning.location?.column ?? 0,
+                        length: warning.location?.length ?? 0,
+                        text: warning.text ?? '',
+                    },
+                    severity: 'warning',
+                });
+            }
+            catch {
+                // Rspack may throw on invalid line & column when containing UTF-8.
+                // We catch it up here.
+                this.emitWarning(new Error(warning.text));
+            }
+        }
+        else {
+            // Webpack or legacy Rspack
+            this.emitWarning(new Error(warning.text));
+        }
+    }
+    this.callback(null, result.code, result.map);
+}
+export default testingLoader;
+//# sourceMappingURL=testing.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react-webpack-plugin-canary",
-  "version": "0.9.0",
+  "version": "0.9.1-canary-20260414-a9f8d054",
   "description": "A webpack plugin for ReactLynx",
   "keywords": [
     "webpack",
@@ -43,9 +43,9 @@
     "swc-loader": "^0.2.7",
     "webpack": "^5.105.2",
     "@lynx-js/css-extract-webpack-plugin": "npm:@lynx-js/css-extract-webpack-plugin-canary@0.7.0",
-    "@lynx-js/react": "npm:@lynx-js/react-canary@0.118.0",
-    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.10.8",
+    "@lynx-js/react": "npm:@lynx-js/react-canary@0.118.1-canary-20260414-a9f8d054",
     "@lynx-js/test-tools": "0.0.0",
+    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.10.9-canary-20260414-a9f8d054",
     "@lynx-js/vitest-setup": "0.0.0"
   },
   "peerDependencies": {