@lynx-js/react-webpack-plugin-canary 0.12.1 → 0.13.0-canary-20261014-bdb7471c

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @lynx-js/react-webpack-plugin
 
+## 0.13.0-canary-20261014081315-bdb7471ce6e98461b062d1572df766ecccf6bca4
+
+### Minor Changes
+
+- Deliver the main-thread runtime through named imports from its init entry, including background-only definitions that carry their registration dependencies into the main-thread graph. Runtime code participates in business defines and release processing. Every supported transform supplies semantic runtime requirements, including for definitions injected from background-only modules; watch rebuilds refresh their dependencies and metadata. ([#4066](https://github.com/lynx-family/lynx-stack/pull/4066))
+
+  Upgrade the build plugins and `@lynx-js/react` together. This release requires `@lynx-js/react@^0.128.0`; its runtime and bundled transform use the same module-delivery protocol. The refresh plugin adds support for `@lynx-js/react-webpack-plugin@^0.13.0` while retaining its existing supported versions. Older compiler output is unsupported. The prebuilt worklet-runtime chunk, its package entries, and `loadWorkletRuntime` are removed. Combined lazy chunks share their paired main runtime, and standalone lazy bundles bootstrap themselves.
+
+  The worklet init entry follows `worklet.runtimePkg`: remove a trailing `/internal`, if present, and append `/worklet-runtime/init`. Its `registerWorklet` export uses the existing host registration function when the runtime is already initialized. Default worklet options use `@lynx-js/react/internal` for helpers.
+
+  Testing-library initializes module-delivered worklets on its emulated main thread in Vitest and Rstest.
+
+### Patch Changes
+
+- Updated dependencies [[`bdb7471`](https://github.com/lynx-family/lynx-stack/commit/bdb7471ce6e98461b062d1572df766ecccf6bca4), [`89b828a`](https://github.com/lynx-family/lynx-stack/commit/89b828aba5e4eff14d8d2b5c44baecc121856c7d), [`16b45de`](https://github.com/lynx-family/lynx-stack/commit/16b45defdc76e822086b5207c0c290d51224da0e)]:
+  - @lynx-js/react@0.128.0-canary-20261014081315-bdb7471ce6e98461b062d1572df766ecccf6bca4
+  - @lynx-js/template-webpack-plugin@0.16.4-canary-20261014081315-bdb7471ce6e98461b062d1572df766ecccf6bca4
+
 ## 0.12.1
 
 ### Patch Changes

package/lib/Defines.d.ts

@@ -4,6 +4,14 @@ export interface Define {
     id: string;
     code: string;
     unmergeable?: boolean;
+    imports?: Array<{
+        source: string;
+        imported: string;
+        local: string;
+    }>;
+    runtimeRequirements?: {
+        mainThreadProgrammability: boolean;
+    };
 }
 export declare function collectDefines<TModule>(modules: Iterable<TModule>, buildInfoKey: string, getModuleIdentifier: (module: TModule) => string): Define[];
 export declare function selectMissingDefines(candidates: readonly Define[], present: readonly Define[]): Define[];

package/lib/Defines.js

@@ -32,9 +32,22 @@ export function collectDefines(modules, buildInfoKey, getModuleIdentifier) {
             defines.set(define.id, define);
             continue;
         }
-        if (seen.code !== define.code) {
+        if (seen.code !== define.code
+            || JSON.stringify(seen.imports?.map(({ source, imported, local }) => [source, imported, local]))
+                !== JSON.stringify(define.imports?.map(({ source, imported, local }) => [source, imported, local]))) {
             throw new Error(`Two different definitions share the id ${define.id}.`);
         }
+        // Equal code and dependencies identify one executable definition. Keep
+        // semantic evidence from any copy instead of making it depend on order.
+        if (define.runtimeRequirements !== undefined) {
+            defines.set(define.id, {
+                ...seen,
+                runtimeRequirements: {
+                    mainThreadProgrammability: seen.runtimeRequirements?.mainThreadProgrammability === true
+                        || define.runtimeRequirements.mainThreadProgrammability,
+                },
+            });
+        }
     }
     return [...defines.values()];
 }
@@ -49,15 +62,30 @@ export function renderDefines(defines) {
 }
 export function renderDefinesModule(definesForSnapshot, definesForWorklet) {
     const prelude = [`import * as ReactLynx from '@lynx-js/react/internal';`];
-    if (definesForWorklet.length > 0) {
-        prelude.push(`var loadWorkletRuntime = ReactLynx.loadWorkletRuntime;`);
-    }
     const defines = [...definesForWorklet, ...definesForSnapshot];
+    const locals = new Set(defines.flatMap(define => define.imports?.map(({ local }) => local) ?? []));
+    const imports = new Map();
+    let nextImport = 0;
+    const boundDefines = defines.map(define => {
+        const bindings = (define.imports ?? []).map(({ source, imported, local }) => {
+            const key = JSON.stringify([source, imported]);
+            let alias = imports.get(key);
+            if (alias === undefined) {
+                do {
+                    alias = `__lynxDefineImport${nextImport++}`;
+                } while (locals.has(alias));
+                imports.set(key, alias);
+                prelude.push(`import { ${imported} as ${alias} } from ${JSON.stringify(source)};`);
+            }
+            return `const ${local} = ${alias};`;
+        });
+        return { ...define, code: [...bindings, define.code].join('\n') };
+    });
     if (defines.some(({ code }) => /\brequire\(/.test(code))) {
         prelude.push(`var require = function () { return ReactLynx; };`);
     }
     return `${prelude.join('\n')}
-${renderDefines(defines)}
+${renderDefines(boundDefines)}
 `;
 }
 //# sourceMappingURL=Defines.js.map

package/lib/DefinesInjection.js

@@ -5,6 +5,7 @@ import * as path from 'node:path';
 import { DEFINES_FOR_SNAPSHOT_BUILD_INFO, DEFINES_FOR_WORKLET_BUILD_INFO, collectDefines, renderDefinesModule, selectMissingDefines, } from './Defines.js';
 import { LAYERS } from './layer.js';
 import { boundaryKey, definesImportByBoundary, } from './loaders/defines-import-by-boundary.js';
+import { REACT_RUNTIME_REQUIREMENTS_BUILD_INFO, } from './loaders/main-thread.js';
 export function applyDefinesInjection(compiler, entryPairs, pluginName) {
     const { EntryPlugin, experiments } = compiler.webpack;
     const virtualModules = new experiments.VirtualModulesPlugin({});
@@ -12,7 +13,21 @@ export function applyDefinesInjection(compiler, entryPairs, pluginName) {
     compiler.hooks.finishMake.tapPromise(pluginName, async (compilation) => {
         const { moduleGraph } = compilation;
         const definesImports = definesImportByBoundary(compiler);
+        const previousDefinesImports = new Map(definesImports);
         definesImports.clear();
+        const requirementsByRequest = new Map();
+        compilation.hooks.finishModules.tap(pluginName, modules => {
+            // Rebuilding an async boundary does not finish its new dependencies.
+            // Transfer compiler metadata only after all injected modules are built.
+            for (const module of modules) {
+                const resource = module.resource;
+                const requirements = resource && requirementsByRequest.get(resource);
+                if (requirements) {
+                    module.buildInfo[REACT_RUNTIME_REQUIREMENTS_BUILD_INFO] =
+                        requirements;
+                }
+            }
+        });
         const traverse = (roots) => {
             const visited = new Set();
             const asyncBoundaries = new Map();
@@ -82,8 +97,17 @@ export function applyDefinesInjection(compiler, entryPairs, pluginName) {
                 throw new Error(`The main thread lacks the worklet definition(s) ${unmergeable.map(({ id }) => id).join(', ')} and they cannot be merged: they close over shared-runtime imports. Make the owning module reachable from the main thread, or avoid closing over a shared import inside the worklet.`);
             }
             if (missingSnapshot.length > 0 || missingWorklet.length > 0) {
+                const previousModule = [...compilation.modules].find(module => module.resource === request);
                 virtualModules.writeModule(request, renderDefinesModule(missingSnapshot, missingWorklet));
+                // Updating the virtual file does not invalidate a module already
+                // reused by this compilation. Rebuild it before reusing its imports.
+                if (previousModule) {
+                    await rebuildModule(previousModule);
+                }
                 await inject(request);
+                requirementsByRequest.set(request, {
+                    mainThreadProgrammability: missingWorklet.some(define => define.runtimeRequirements.mainThreadProgrammability),
+                });
             }
             for (const [resource, backgroundBoundary] of background.asyncBoundaries) {
                 const mainThreadBoundary = mainThread.asyncBoundaries.get(resource);
@@ -111,6 +135,19 @@ export function applyDefinesInjection(compiler, entryPairs, pluginName) {
                 }
             });
         }));
+        // A background boundary can lose its last definition or disappear
+        // entirely while its main-thread module remains cached and reachable.
+        // Rebuild every former owner that no longer needs a synthetic import.
+        await Promise.all([...compilation.modules].flatMap(module => {
+            const { resource, layer } = module;
+            if (!resource) {
+                return [];
+            }
+            const key = boundaryKey(layer, resource);
+            return previousDefinesImports.has(key) && !definesImports.has(key)
+                ? [rebuildModule(module)]
+                : [];
+        }));
     });
 }
 //# sourceMappingURL=DefinesInjection.js.map

package/lib/ReactWebpackPlugin.d.ts

@@ -65,10 +65,6 @@ interface ReactWebpackPluginOptions {
      * @defaultValue `false` when production, `true` when development
      */
     profile?: boolean | undefined;
-    /**
-     * The file path of `@lynx-js/react/worklet-runtime`.
-     */
-    workletRuntimePath: string;
     /**
      * Whether to enable Element Template compilation.
      *

package/lib/ReactWebpackPlugin.js

@@ -1,7 +1,6 @@
 // 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 * as fs from 'node:fs';
 import { createRequire } from 'node:module';
 import invariant from 'tiny-invariant';
 import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
@@ -187,7 +186,6 @@ class ReactWebpackPlugin {
         extractStr: false,
         experimental_isLazyBundle: false,
         profile: undefined,
-        workletRuntimePath: '',
         experimental_useElementTemplate: false,
         experimental_transformBuiltinAttributeNames: false,
         lazyBundleFetcher: 'QueryComponent',
@@ -287,20 +285,7 @@ class ReactWebpackPlugin {
             // two layers keep their own chunk. Strip it again here: the resulting
             // chunk groups still make up a single lazy bundle.
             hooks.asyncChunkName.tap(this.constructor.name, (chunkName) => chunkName.replace(/-react__(?:background|main-thread)$/, ''));
-            const { RawSource, ConcatSource } = compiler.webpack.sources;
-            hooks.beforeEncode.tap(this.constructor.name, (args) => {
-                const lepusCode = args.encodeData.lepusCode;
-                if (lepusCode.root?.source.source().toString()?.includes('registerWorkletInternal')) {
-                    lepusCode.chunks.push({
-                        name: 'worklet-runtime',
-                        source: new RawSource(fs.readFileSync(options.workletRuntimePath, 'utf8')),
-                        info: {
-                            ['lynx:main-thread']: true,
-                        },
-                    });
-                }
-                return args;
-            });
+            const { ConcatSource } = compiler.webpack.sources;
             if (compiler.options.plugins.some((p) => p instanceof LynxTemplatePlugin)) {
                 compilation.hooks.processAssets.tap({
                     name: this.constructor.name,

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

@@ -1,5 +1,9 @@
 import type { LoaderDefinitionFunction } from '@rspack/core';
 import type { ReactLoaderOptions } from './options.js';
 export declare const ELEMENT_TEMPLATE_BUILD_INFO = "lynx:element-templates";
+export declare const REACT_RUNTIME_REQUIREMENTS_BUILD_INFO = "lynx:react-runtime-requirements";
+export interface ReactRuntimeRequirementsBuildInfo {
+    mainThreadProgrammability: boolean;
+}
 declare const mainThreadLoader: LoaderDefinitionFunction<ReactLoaderOptions>;
 export default mainThreadLoader;

package/lib/loaders/main-thread.js

@@ -7,6 +7,7 @@ import { DEFINES_FOR_SNAPSHOT_BUILD_INFO, DEFINES_FOR_WORKLET_BUILD_INFO, } from
 import { boundaryKey, definesImportByBoundary, } from './defines-import-by-boundary.js';
 import { getMainThreadTransformOptions } from './options.js';
 export const ELEMENT_TEMPLATE_BUILD_INFO = 'lynx:element-templates';
+export const REACT_RUNTIME_REQUIREMENTS_BUILD_INFO = 'lynx:react-runtime-requirements';
 const mainThreadLoader = function (content, sourceMap) {
     const require = createRequire(import.meta.url);
     const { transformPath = '@lynx-js/react/transform' } = this.getOptions();
@@ -83,6 +84,14 @@ const mainThreadLoader = function (content, sourceMap) {
     const buildInfo = currentModule?.buildInfo;
     if (buildInfo) {
         buildInfo[UI_SOURCE_MAP_RECORDS_BUILD_INFO] = result.uiSourceMapRecords;
+        if (typeof result.runtimeRequirements !== 'object'
+            || result.runtimeRequirements === null
+            || typeof result.runtimeRequirements.mainThreadProgrammability
+                !== 'boolean') {
+            throw new TypeError('react-transform must provide runtimeRequirements.mainThreadProgrammability as a boolean; upgrade the build plugins and @lynx-js/react (runtime and transform) together to the module-delivery release (^0.128.0).');
+        }
+        buildInfo[REACT_RUNTIME_REQUIREMENTS_BUILD_INFO] =
+            result.runtimeRequirements;
         if (result.elementTemplates && result.elementTemplates.length > 0) {
             buildInfo[ELEMENT_TEMPLATE_BUILD_INFO] = result.elementTemplates;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react-webpack-plugin-canary",
-  "version": "0.12.1",
+  "version": "0.13.0-canary-20261014-bdb7471c",
   "description": "A webpack plugin for ReactLynx",
   "keywords": [
     "webpack",
@@ -38,11 +38,12 @@
     "tiny-invariant": "^1.3.3"
   },
   "devDependencies": {
+    "@lynx-js/chunk-loading-webpack-plugin": "npm:@lynx-js/chunk-loading-webpack-plugin-canary@0.4.2",
     "@lynx-js/css-extract-webpack-plugin": "npm:@lynx-js/css-extract-webpack-plugin-canary@0.11.1",
-    "@lynx-js/react": "npm:@lynx-js/react-canary@0.127.0",
-    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.16.3",
+    "@lynx-js/react": "npm:@lynx-js/react-canary@0.128.0-canary-20261014-bdb7471c",
+    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.16.4-canary-20261014-bdb7471c",
     "@lynx-js/test-tools": "0.0.0",
-    "@microsoft/api-extractor": "7.59.2",
+    "@microsoft/api-extractor": "7.59.4",
     "@rspack/core": "2.2.7",
     "@rspack/lite-tapable": "1.1.5",
     "@rstest/core": "0.12.1",
@@ -50,6 +51,7 @@
     "swc-loader": "^0.2.7"
   },
   "peerDependencies": {
+    "@lynx-js/react": "*",
     "@lynx-js/template-webpack-plugin": "*"
   },
   "peerDependenciesMeta": {