@lynx-js/react-webpack-plugin 0.9.2 → 0.9.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @lynx-js/react-webpack-plugin
 
+## 0.9.4
+
+### Patch Changes
+
+- Support the unified `debug-metadata.json` format and depend on `@lynx-js/debug-metadata`. ([#2642](https://github.com/lynx-family/lynx-stack/pull/2642))
+
+- Prefix Lynx runtime module names with `webpack/runtime/` (e.g. `Lynx async chunks` → `webpack/runtime/lynx async chunks`), matching the path-structured naming of the bundler's built-in runtime modules. The previous bare names had no path segment, so when they appear as a source-map `sources` entry under a `file://` module-filename template they collapsed into an invalid URL authority (the space-containing name became the host) and broke `SourceMapConsumer` parsing. ([#2642](https://github.com/lynx-family/lynx-stack/pull/2642))
+
+- Widen peer ranges to admit the new minor versions of `@lynx-js/template-webpack-plugin` (^0.12.0) and `@lynx-js/rspeedy` (^0.15.0) shipping with the unified `debug-metadata.json` feature. ([#2642](https://github.com/lynx-family/lynx-stack/pull/2642))
+
+- Updated dependencies [[`a839d59`](https://github.com/lynx-family/lynx-stack/commit/a839d59b7f477a86f2cd10215d0b754264e54425), [`d3201df`](https://github.com/lynx-family/lynx-stack/commit/d3201dfa57964bfe6c8c52a803aeeb0fca1f2d27), [`409594b`](https://github.com/lynx-family/lynx-stack/commit/409594b9c51bb0c13f01c7d3f16949b27ebfdced), [`353363e`](https://github.com/lynx-family/lynx-stack/commit/353363e52dca3b252b39b34a3a87ce840dd308f3)]:
+  - @lynx-js/debug-metadata@0.1.0
+
+## 0.9.3
+
+### Patch Changes
+
+- Inject the `lynxProcessEvalResult` runtime module only into main-thread chunks. The previous guard checked the chunk name for `:background`, which never matched the actual chunk names (`main__background`, `foo.js-react__background`), so the runtime was duplicated into background and async background chunks. ([#2692](https://github.com/lynx-family/lynx-stack/pull/2692))
+
 ## 0.9.2
 
 ### Patch Changes

package/lib/LynxProcessEvalResultRuntimeModule.js

@@ -2,7 +2,7 @@ import { RuntimeGlobals as LynxRuntimeGlobals } from '@lynx-js/webpack-runtime-g
 export function createLynxProcessEvalResultRuntimeModule(webpack) {
     return class LynxProcessEvalResultRuntimeModule extends webpack.RuntimeModule {
         constructor() {
-            super('Lynx process eval result', webpack.RuntimeModule.STAGE_ATTACH);
+            super('webpack/runtime/lynx process eval result', webpack.RuntimeModule.STAGE_ATTACH);
         }
         generate() {
             const chunk = this.chunk;

package/lib/ReactWebpackPlugin.d.ts

@@ -1,6 +1,17 @@
 import type { Compiler } from '@rspack/core';
 import type { ExtractStrConfig } from '@lynx-js/react/transform';
 import { LAYERS } from './layer.js';
+interface ElementTemplateBuildInfo {
+    templateId: string;
+    compiledTemplate: Record<string, unknown>;
+}
+export interface ModuleWithElementTemplateBuildInfo {
+    buildInfo?: Record<string, unknown>;
+    modules?: Iterable<ModuleWithElementTemplateBuildInfo>;
+}
+export declare function collectElementTemplatesFromModule(module: ModuleWithElementTemplateBuildInfo): ElementTemplateBuildInfo[];
+export declare function mergeElementTemplate(elementTemplates: Record<string, Record<string, unknown>>, templateId: string, compiledTemplate: Record<string, unknown>): void;
+export declare function mergeElementTemplatesFromModule(elementTemplates: Record<string, Record<string, unknown>>, module: ModuleWithElementTemplateBuildInfo): void;
 /**
  * The options for ReactWebpackPlugin
  *
@@ -50,6 +61,12 @@ interface ReactWebpackPluginOptions {
      * The file path of `@lynx-js/react/worklet-runtime`.
      */
     workletRuntimePath: string;
+    /**
+     * Whether to enable Element Template compilation.
+     *
+     * @experimental
+     */
+    experimental_useElementTemplate?: boolean;
 }
 /**
  * ReactWebpackPlugin allows using ReactLynx with webpack

package/lib/ReactWebpackPlugin.js

@@ -7,8 +7,67 @@ import invariant from 'tiny-invariant';
 import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
 import { RuntimeGlobals } from '@lynx-js/webpack-runtime-globals';
 import { LAYERS } from './layer.js';
+import { ELEMENT_TEMPLATE_BUILD_INFO } from './loaders/main-thread.js';
 import { createLynxProcessEvalResultRuntimeModule } from './LynxProcessEvalResultRuntimeModule.js';
 const require = createRequire(import.meta.url);
+export function collectElementTemplatesFromModule(module) {
+    const elementTemplates = [];
+    const templates = module.buildInfo?.[ELEMENT_TEMPLATE_BUILD_INFO];
+    if (Array.isArray(templates)) {
+        elementTemplates.push(...templates);
+    }
+    if (module.modules) {
+        for (const nestedModule of module.modules) {
+            elementTemplates.push(...collectElementTemplatesFromModule(nestedModule));
+        }
+    }
+    return elementTemplates;
+}
+function isPlainRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function areCompiledTemplateValuesEqual(left, right) {
+    if (Object.is(left, right)) {
+        return true;
+    }
+    if (Array.isArray(left) || Array.isArray(right)) {
+        if (!Array.isArray(left)
+            || !Array.isArray(right)
+            || left.length !== right.length) {
+            return false;
+        }
+        return left.every((value, index) => areCompiledTemplateValuesEqual(value, right[index]));
+    }
+    if (isPlainRecord(left) || isPlainRecord(right)) {
+        if (!isPlainRecord(left) || !isPlainRecord(right)) {
+            return false;
+        }
+        const leftKeys = Object.keys(left).sort();
+        const rightKeys = Object.keys(right).sort();
+        if (leftKeys.length !== rightKeys.length) {
+            return false;
+        }
+        return leftKeys.every((key, index) => key === rightKeys[index]
+            && areCompiledTemplateValuesEqual(left[key], right[key]));
+    }
+    return false;
+}
+export function mergeElementTemplate(elementTemplates, templateId, compiledTemplate) {
+    const existingTemplate = elementTemplates[templateId];
+    if (!existingTemplate) {
+        elementTemplates[templateId] = compiledTemplate;
+        return;
+    }
+    if (areCompiledTemplateValuesEqual(existingTemplate, compiledTemplate)) {
+        return;
+    }
+    throw new Error(`Element Template id collision for ${templateId}: same template id has different compiledTemplate content.`);
+}
+export function mergeElementTemplatesFromModule(elementTemplates, module) {
+    for (const { templateId, compiledTemplate } of collectElementTemplatesFromModule(module)) {
+        mergeElementTemplate(elementTemplates, templateId, compiledTemplate);
+    }
+}
 /**
  * ReactWebpackPlugin allows using ReactLynx with webpack
  *
@@ -81,6 +140,7 @@ class ReactWebpackPlugin {
         experimental_isLazyBundle: false,
         profile: undefined,
         workletRuntimePath: '',
+        experimental_useElementTemplate: false,
     }); }
     /**
      * The entry point of a webpack plugin.
@@ -120,6 +180,7 @@ class ReactWebpackPlugin {
             __GLOBAL_PROPS_MODE__: JSON.stringify(options.globalPropsMode),
             __ENABLE_SSR__: JSON.stringify(options.enableSSR),
             __DISABLE_CREATE_SELECTOR_QUERY_INCOMPATIBLE_WARNING__: JSON.stringify(options.disableCreateSelectorQueryIncompatibleWarning),
+            __USE_ELEMENT_TEMPLATE__: JSON.stringify(options.experimental_useElementTemplate),
         }).apply(compiler);
         compiler.hooks.thisCompilation.tap(this.constructor.name, compilation => {
             const onceForChunkSet = new WeakSet();
@@ -131,7 +192,7 @@ class ReactWebpackPlugin {
                     return;
                 }
                 onceForChunkSet.add(chunk);
-                if (chunk.name?.includes(':background')) {
+                if (!chunk.name?.includes('__main-thread')) {
                     return;
                 }
                 const LynxProcessEvalResultRuntimeModule = createLynxProcessEvalResultRuntimeModule(compiler.webpack);
@@ -156,8 +217,6 @@ class ReactWebpackPlugin {
                         .forEach(name => this.#updateMainThreadInfo(compilation, name));
                 });
             });
-            // TODO: replace LynxTemplatePlugin types with Rspack
-            // @ts-expect-error Rspack x Webpack compilation not match
             const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
             const { RawSource, ConcatSource } = compiler.webpack.sources;
             hooks.beforeEncode.tap(this.constructor.name, (args) => {
@@ -222,6 +281,18 @@ class ReactWebpackPlugin {
             hooks.asyncChunkName.tap(this.constructor.name, (chunkName) => chunkName
                 ?.replaceAll(`-react__background`, '')
                 ?.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);
+                    }
+                    args.encodeData.sourceContent.config['enableUnifyFixedBehavior'] =
+                        true;
+                    args.encodeData.elementTemplate = elementTemplates;
+                    return args;
+                });
+            }
         });
     }
     #updateMainThreadInfo(compilation, name) {

package/lib/loaders/main-thread.d.ts

@@ -1,4 +1,5 @@
 import type { LoaderDefinitionFunction } from '@rspack/core';
 import type { ReactLoaderOptions } from './options.js';
+export declare const ELEMENT_TEMPLATE_BUILD_INFO = "lynx:element-templates";
 declare const mainThreadLoader: LoaderDefinitionFunction<ReactLoaderOptions>;
 export default mainThreadLoader;

package/lib/loaders/main-thread.js

@@ -2,8 +2,9 @@
 // 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 { UI_SOURCE_MAP_RECORDS_BUILD_INFO } from '@lynx-js/debug-metadata';
 import { getMainThreadTransformOptions } from './options.js';
+export const ELEMENT_TEMPLATE_BUILD_INFO = 'lynx:element-templates';
 const mainThreadLoader = function (content, sourceMap) {
     const require = createRequire(import.meta.url);
     const { transformPath = '@lynx-js/react/transform' } = this.getOptions();
@@ -80,6 +81,12 @@ const mainThreadLoader = function (content, sourceMap) {
     const buildInfo = currentModule?.buildInfo;
     if (buildInfo) {
         buildInfo[UI_SOURCE_MAP_RECORDS_BUILD_INFO] = result.uiSourceMapRecords;
+        if (result.elementTemplates && result.elementTemplates.length > 0) {
+            buildInfo[ELEMENT_TEMPLATE_BUILD_INFO] = result.elementTemplates;
+        }
+        else {
+            delete buildInfo[ELEMENT_TEMPLATE_BUILD_INFO];
+        }
     }
     this.callback(null, result.code + (this.hot
         // TODO: temporary fix LEPUS error `$RefreshReg$ is not defined`

package/lib/loaders/options.d.ts

@@ -3,8 +3,10 @@ import type { CompatVisitorConfig, DefineDceVisitorConfig, JsxTransformerConfig,
 export declare const JSX_IMPORT_SOURCE: {
     MAIN_THREAD: string;
     BACKGROUND: string;
+    ELEMENT_TEMPLATE: string;
 };
 export declare const RUNTIME_PKG = "@lynx-js/react/internal";
+export declare const ELEMENT_TEMPLATE_RUNTIME_PKG = "@lynx-js/react/element-template";
 /**
  * The options of the ReactLynx plugin.
  * @public
@@ -46,6 +48,12 @@ export interface ReactLoaderOptions {
      * The engine version.
      */
     engineVersion?: string | undefined;
+    /**
+     * Whether to enable Element Template compilation.
+     *
+     * @experimental
+     */
+    experimental_useElementTemplate?: boolean | undefined;
 }
 export declare function getMainThreadTransformOptions(this: LoaderContext<ReactLoaderOptions>, inputSourceMap: string | undefined): TransformNodiffOptions;
 export declare function getBackgroundTransformOptions(this: LoaderContext<ReactLoaderOptions>, inputSourceMap: string | undefined): TransformNodiffOptions;

package/lib/loaders/options.js

@@ -6,9 +6,11 @@ const PLUGIN_NAME = 'react:webpack';
 export const JSX_IMPORT_SOURCE = {
     MAIN_THREAD: '@lynx-js/react/lepus',
     BACKGROUND: '@lynx-js/react',
+    ELEMENT_TEMPLATE: '@lynx-js/react/element-template',
 };
 const PUBLIC_RUNTIME_PKG = '@lynx-js/react';
 export const RUNTIME_PKG = '@lynx-js/react/internal';
+export const ELEMENT_TEMPLATE_RUNTIME_PKG = '@lynx-js/react/element-template';
 const OLD_RUNTIME_PKG = '@lynx-js/react-runtime';
 const COMPONENT_PKG = '@lynx-js/react-components';
 function normalizeSlashes(file) {
@@ -16,7 +18,8 @@ function normalizeSlashes(file) {
 }
 function getCommonOptions(inputSourceMap) {
     const filename = normalizeSlashes(path.relative(this.rootContext, this.resourcePath));
-    const { compat, enableRemoveCSSScope, enableUiSourceMap, inlineSourcesContent, isDynamicComponent, engineVersion, defineDCE = { define: {} }, } = this.getOptions();
+    const { compat, enableRemoveCSSScope, enableUiSourceMap, inlineSourcesContent, isDynamicComponent, engineVersion, experimental_useElementTemplate, defineDCE = { define: {} }, } = this.getOptions();
+    const useElementTemplate = experimental_useElementTemplate === true;
     const syntax = (/\.[mc]?tsx?$/.exec(this.resourcePath))
         ? 'typescript'
         : 'ecmascript';
@@ -61,7 +64,7 @@ function getCommonOptions(inputSourceMap) {
         ...(inputSourceMap && { inputSourceMap }),
         sourceMapColumns: this.sourceMap && !this.hot,
         inlineSourcesContent: inlineSourcesContent ?? !this.hot,
-        snapshot: {
+        snapshot: useElementTemplate ? false : {
             // TODO: config
             preserveJsx: false,
             // In standalone lazy bundle mode, we do not support HMR now.
@@ -75,6 +78,16 @@ function getCommonOptions(inputSourceMap) {
             filename,
             isDynamicComponent: isDynamicComponent ?? false,
         },
+        elementTemplate: useElementTemplate
+            ? {
+                preserveJsx: false,
+                runtimePkg: ELEMENT_TEMPLATE_RUNTIME_PKG,
+                jsxImportSource: JSX_IMPORT_SOURCE.ELEMENT_TEMPLATE,
+                filename,
+                target: 'JS',
+                isDynamicComponent: isDynamicComponent ?? false,
+            }
+            : false,
         engineVersion: engineVersion ?? '',
         syntaxConfig: JSON.stringify({
             syntax,
@@ -100,6 +113,7 @@ function getCommonOptions(inputSourceMap) {
 export function getMainThreadTransformOptions(inputSourceMap) {
     const commonOptions = getCommonOptions.call(this, inputSourceMap);
     const { shake } = this.getOptions();
+    const useElementTemplate = typeof commonOptions.elementTemplate === 'object';
     return {
         ...commonOptions,
         compat: typeof commonOptions.compat === 'object'
@@ -108,11 +122,18 @@ export function getMainThreadTransformOptions(inputSourceMap) {
                 target: 'LEPUS',
             }
             : false,
-        snapshot: {
+        snapshot: useElementTemplate ? false : {
             ...commonOptions.snapshot,
             jsxImportSource: JSX_IMPORT_SOURCE.MAIN_THREAD,
             target: 'LEPUS',
         },
+        elementTemplate: useElementTemplate
+            ? {
+                ...commonOptions.elementTemplate,
+                jsxImportSource: JSX_IMPORT_SOURCE.ELEMENT_TEMPLATE,
+                target: 'LEPUS',
+            }
+            : false,
         dynamicImport: {
             layer: `react__main-thread`,
             runtimePkg: RUNTIME_PKG,
@@ -141,6 +162,8 @@ export function getMainThreadTransformOptions(inputSourceMap) {
                 PUBLIC_RUNTIME_PKG,
                 `${PUBLIC_RUNTIME_PKG}/legacy-react-runtime`,
                 RUNTIME_PKG,
+                ELEMENT_TEMPLATE_RUNTIME_PKG,
+                `${ELEMENT_TEMPLATE_RUNTIME_PKG}/internal`,
                 ...typeof commonOptions.compat === 'object'
                     ? commonOptions.compat.oldRuntimePkg
                     : [],
@@ -178,6 +201,7 @@ export function getMainThreadTransformOptions(inputSourceMap) {
 }
 export function getBackgroundTransformOptions(inputSourceMap) {
     const commonOptions = getCommonOptions.call(this, inputSourceMap);
+    const useElementTemplate = typeof commonOptions.elementTemplate === 'object';
     return {
         ...commonOptions,
         compat: typeof commonOptions.compat === 'object'
@@ -190,10 +214,17 @@ export function getBackgroundTransformOptions(inputSourceMap) {
             layer: `react__background`,
             runtimePkg: RUNTIME_PKG,
         },
-        snapshot: {
+        snapshot: useElementTemplate ? false : {
             ...commonOptions.snapshot,
             jsxImportSource: JSX_IMPORT_SOURCE.BACKGROUND,
         },
+        elementTemplate: useElementTemplate
+            ? {
+                ...commonOptions.elementTemplate,
+                jsxImportSource: JSX_IMPORT_SOURCE.BACKGROUND,
+                target: 'JS',
+            }
+            : false,
         defineDCE: {
             define: {
                 ...commonOptions.defineDCE?.define,

package/lib/loaders/testing.js

@@ -3,13 +3,13 @@
 // 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';
+import { ELEMENT_TEMPLATE_RUNTIME_PKG, 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 { compat = false, defineDCE = { define: {} }, engineVersion = '', experimental_useElementTemplate = false, 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'
@@ -33,13 +33,22 @@ function testingLoader(content) {
         pluginName: '',
         filename: this.resourcePath,
         sourcemap: true,
-        snapshot: {
+        snapshot: experimental_useElementTemplate ? false : {
             preserveJsx: false,
             runtimePkg: RUNTIME_PKG,
             jsxImportSource: JSX_IMPORT_SOURCE.BACKGROUND,
             filename,
             target: 'MIXED',
         },
+        elementTemplate: experimental_useElementTemplate
+            ? {
+                preserveJsx: false,
+                runtimePkg: ELEMENT_TEMPLATE_RUNTIME_PKG,
+                jsxImportSource: JSX_IMPORT_SOURCE.ELEMENT_TEMPLATE,
+                filename,
+                target: 'MIXED',
+            }
+            : false,
         // snapshot: true,
         directiveDCE: false,
         defineDCE,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react-webpack-plugin",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "A webpack plugin for ReactLynx",
   "keywords": [
     "webpack",
@@ -34,22 +34,23 @@
   ],
   "dependencies": {
     "tiny-invariant": "^1.3.3",
+    "@lynx-js/debug-metadata": "^0.1.0",
     "@lynx-js/webpack-runtime-globals": "0.0.6"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "7.58.2",
-    "@rspack/core": "1.7.9",
+    "@rspack/core": "2.0.8",
+    "@rspack/lite-tapable": "1.1.0",
+    "@rstest/core": "0.10.5",
     "css-loader": "^7.1.4",
     "swc-loader": "^0.2.7",
-    "webpack": "^5.105.2",
-    "@lynx-js/css-extract-webpack-plugin": "0.7.1",
-    "@lynx-js/react": "0.120.0",
-    "@lynx-js/template-webpack-plugin": "0.11.0",
+    "@lynx-js/css-extract-webpack-plugin": "0.8.0",
+    "@lynx-js/react": "0.121.2",
     "@lynx-js/test-tools": "0.0.0",
-    "@lynx-js/vitest-setup": "0.0.0"
+    "@lynx-js/template-webpack-plugin": "0.12.0"
   },
   "peerDependencies": {
-    "@lynx-js/template-webpack-plugin": "^0.4.0 || ^0.5.0 || ^0.6.0 || ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0"
+    "@lynx-js/template-webpack-plugin": "^0.4.0 || ^0.5.0 || ^0.6.0 || ^0.7.0 || ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0"
   },
   "peerDependenciesMeta": {
     "@lynx-js/react": {
@@ -61,6 +62,6 @@
   },
   "scripts": {
     "api-extractor": "api-extractor run --verbose",
-    "test": "pnpm -w run test --project webpack/react"
+    "test": "rstest"
   }
 }