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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lynx-js/react-webpack-plugin
 
+## 0.9.1
+
+### Patch Changes
+
+- Support rstest for testing library using a dedicated testing loader. ([#2328](https://github.com/lynx-family/lynx-stack/pull/2328))
+
+- fix(rstest): normalize partial `compat` options in the testing loader ([#2464](https://github.com/lynx-family/lynx-stack/pull/2464))
+
+  The testing loader forwards `compat` directly to `transformReactLynxSync` without normalization. When `compat` is supplied as a partial object, the required `target` field is absent and the WASM transform throws `Error: Missing field 'target'`. Added the same normalization already present in `getCommonOptions` for the background/main-thread loaders: fills in `target: 'MIXED'` and all other required fields with sensible defaults.
+
+- Add `enableUiSourceMap` option to enable UI source map generation and debug-metadata asset emission. ([#2402](https://github.com/lynx-family/lynx-stack/pull/2402))
+
 ## 0.9.0
 
 ### Minor Changes

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,118 @@
+// 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 normalizedCompat = typeof compat === 'object'
+        ? {
+            target: 'MIXED',
+            addComponentElement: compat.addComponentElement ?? false,
+            additionalComponentAttributes: compat.additionalComponentAttributes ?? [],
+            componentsPkg: compat.componentsPkg ?? ['@lynx-js/react-components'],
+            disableDeprecatedWarning: compat.disableDeprecatedWarning ?? false,
+            newRuntimePkg: compat.newRuntimePkg ?? '@lynx-js/react',
+            oldRuntimePkg: compat.oldRuntimePkg ?? ['@lynx-js/react-runtime'],
+            simplifyCtorLikeReactLynx2: compat.simplifyCtorLikeReactLynx2 ?? false,
+            ...(typeof compat.removeComponentAttrRegex === 'string' && {
+                removeComponentAttrRegex: compat.removeComponentAttrRegex,
+            }),
+            darkMode: compat.darkMode ?? false,
+        }
+        : (compat ?? false);
+    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: normalizedCompat,
+        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",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "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": "0.7.0",
-    "@lynx-js/react": "0.118.0",
+    "@lynx-js/react": "0.119.0",
+    "@lynx-js/template-webpack-plugin": "0.10.9",
     "@lynx-js/test-tools": "0.0.0",
-    "@lynx-js/template-webpack-plugin": "0.10.8",
     "@lynx-js/vitest-setup": "0.0.0"
   },
   "peerDependencies": {