@lynx-js/react-webpack-plugin-canary 0.9.2 → 0.9.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lynx-js/react-webpack-plugin
 
+## 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/ReactWebpackPlugin.d.ts

@@ -1,6 +1,15 @@
 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[];
 /**
  * The options for ReactWebpackPlugin
  *
@@ -50,6 +59,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,22 @@ 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;
+}
 /**
  * ReactWebpackPlugin allows using ReactLynx with webpack
  *
@@ -81,6 +95,7 @@ class ReactWebpackPlugin {
         experimental_isLazyBundle: false,
         profile: undefined,
         workletRuntimePath: '',
+        experimental_useElementTemplate: false,
     }); }
     /**
      * The entry point of a webpack plugin.
@@ -120,6 +135,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 +147,7 @@ class ReactWebpackPlugin {
                     return;
                 }
                 onceForChunkSet.add(chunk);
-                if (chunk.name?.includes(':background')) {
+                if (!chunk.name?.includes('__main-thread')) {
                     return;
                 }
                 const LynxProcessEvalResultRuntimeModule = createLynxProcessEvalResultRuntimeModule(compiler.webpack);
@@ -222,6 +238,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) {
+                        for (const { templateId, compiledTemplate } of collectElementTemplatesFromModule(module)) {
+                            elementTemplates[templateId] = compiledTemplate;
+                        }
+                    }
+                    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

@@ -4,6 +4,7 @@
 import { createRequire } from 'node:module';
 import { UI_SOURCE_MAP_RECORDS_BUILD_INFO } from '@lynx-js/template-webpack-plugin';
 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-canary",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "A webpack plugin for ReactLynx",
   "keywords": [
     "webpack",
@@ -42,11 +42,11 @@
     "css-loader": "^7.1.4",
     "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.1",
-    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.11.0",
-    "@lynx-js/react": "npm:@lynx-js/react-canary@0.120.0",
+    "@lynx-js/react": "npm:@lynx-js/react-canary@0.121.1",
     "@lynx-js/test-tools": "0.0.0",
-    "@lynx-js/vitest-setup": "0.0.0"
+    "@lynx-js/vitest-setup": "0.0.0",
+    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.11.2",
+    "@lynx-js/css-extract-webpack-plugin": "npm:@lynx-js/css-extract-webpack-plugin-canary@0.7.1"
   },
   "peerDependencies": {
     "@lynx-js/template-webpack-plugin": "*"