@lynx-js/react-webpack-plugin-canary 0.14.0 → 0.15.0-canary-20261027-749147c8

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @lynx-js/react-webpack-plugin
 
+## 0.15.0-canary-20261027063858-749147c82c3e0bb06f1e92567a5afec909baf19b
+
+### Minor Changes
+
+- Support Main Thread Function HMR in native ReactLynx development builds. Apply main-thread updates through native bundle loading before releasing background Fast Refresh, and refresh worklet owners when their main-thread dependencies change. Reload once if either runtime fails or times out, and preserve runtime version coordination when the development connection reconnects. ([#4179](https://github.com/lynx-family/lynx-stack/pull/4179))
+
+  Accept ordinary Snapshot component and helper updates at their actual main-thread entry roots, preserving explicit HMR handlers and declines. Keep a stable main-thread registration module so the first background-only worklet added during development is registered before Fast Refresh resumes.
+
+  Allow up to ten seconds for matching main-thread completion before timeout recovery.
+
+  Load background HMR updates through the same Native bundle adapter, preserve the SDK runtime wrapper in per-chunk sections, and retain the original background loader on hosts without Native app-scope initialization.
+
+  Use the build engine's exposed template plugin consistently for React compilation and Native HMR hooks, while retaining the installed template plugin as the default for direct Rspack integrations.
+
+### Patch Changes
+
+- Apply main-thread hot updates to loaded async chunks, keep async definition modules stable when worklets are added or removed, and retain background HMR on hosts without Native bundle loading. Centralize the shared HMR runtime identifiers. ([#4179](https://github.com/lynx-family/lynx-stack/pull/4179))
+
+  Keep the refresh plugin compatible with the planned `react-webpack-plugin` 0.15 release while preserving its existing peer dependency ranges.
+- Updated dependencies [[`7d498ae`](https://github.com/lynx-family/lynx-stack/commit/7d498aece52a20e77abc19e2a4579333861c11da), [`749147c`](https://github.com/lynx-family/lynx-stack/commit/749147c82c3e0bb06f1e92567a5afec909baf19b), [`18dc25e`](https://github.com/lynx-family/lynx-stack/commit/18dc25ecb7dc0700e63da5c648f8dee702821405), [`4b19a9b`](https://github.com/lynx-family/lynx-stack/commit/4b19a9b356f29f7177dfb423d1b0b3114e248c69)]:
+  - @lynx-js/webpack-runtime-globals@0.1.0-canary-20261027063858-749147c82c3e0bb06f1e92567a5afec909baf19b
+  - @lynx-js/react@0.129.1-canary-20261027063858-749147c82c3e0bb06f1e92567a5afec909baf19b
+  - @lynx-js/template-webpack-plugin@0.16.6-canary-20261027063858-749147c82c3e0bb06f1e92567a5afec909baf19b
+
 ## 0.14.0
 
 ### Minor Changes

package/lib/DefinesInjection.js

@@ -3,6 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 import * as path from 'node:path';
 import { DEFINES_FOR_SNAPSHOT_BUILD_INFO, DEFINES_FOR_WORKLET_BUILD_INFO, collectDefines, renderDefinesModule, selectMissingDefines, } from './Defines.js';
+import { MAIN_THREAD_HMR } from './hmr/enabled.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';
@@ -77,7 +78,7 @@ export function applyDefinesInjection(compiler, entryPairs, pluginName) {
                 return module ? [module] : [];
             });
         };
-        const processScope = async (backgroundRoots, mainThreadRoots, inheritedPresent, ancestors, request, inject) => {
+        const processScope = async (backgroundRoots, mainThreadRoots, inheritedPresent, ancestors, request, inject, keepEmpty = false) => {
             const background = traverse(backgroundRoots);
             const mainThread = traverse(mainThreadRoots);
             const present = {
@@ -96,9 +97,12 @@ export function applyDefinesInjection(compiler, entryPairs, pluginName) {
             if (unmergeable.length > 0) {
                 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) {
+            if (keepEmpty || missingSnapshot.length > 0 || missingWorklet.length > 0) {
                 const previousModule = [...compilation.modules].find(module => module.resource === request);
-                virtualModules.writeModule(request, renderDefinesModule(missingSnapshot, missingWorklet));
+                virtualModules.writeModule(request, renderDefinesModule(missingSnapshot, missingWorklet)
+                    + (compiler[MAIN_THREAD_HMR]
+                        ? '\nif (module.hot) module.hot.accept();'
+                        : ''));
                 // Updating the virtual file does not invalidate a module already
                 // reused by this compilation. Rebuild it before reusing its imports.
                 if (previousModule) {
@@ -117,7 +121,7 @@ export function applyDefinesInjection(compiler, entryPairs, pluginName) {
                 await processScope([backgroundBoundary], [mainThreadBoundary], present, new Set([...ancestors, resource]), `${resource}.__lynx-react-defines.js`, async (boundaryRequest) => {
                     definesImports.set(boundaryKey(mainThreadBoundary.layer, resource), boundaryRequest);
                     await rebuildModule(mainThreadBoundary);
-                });
+                }, keepEmpty);
             }
         };
         await Promise.all(entryPairs.map(async ({ mainThread, background }) => {
@@ -133,7 +137,10 @@ export function applyDefinesInjection(compiler, entryPairs, pluginName) {
                 for (const originalRequest of originalRequests) {
                     await addEntry(originalRequest);
                 }
-            });
+            }, 
+            // HMR only reexecutes cached self-accepted modules. Keep the root
+            // definition module executed even before its first definition.
+            Boolean(compiler[MAIN_THREAD_HMR]));
         }));
         // A background boundary can lose its last definition or disappear
         // entirely while its main-thread module remains cached and reachable.

package/lib/LynxProcessEvalResultRuntimeModule.js

@@ -1,4 +1,5 @@
 import { RuntimeGlobals as LynxRuntimeGlobals } from '@lynx-js/webpack-runtime-globals';
+import { MAIN_THREAD_HMR } from './hmr/enabled.js';
 export function createLynxProcessEvalResultRuntimeModule(webpack) {
     return class LynxProcessEvalResultRuntimeModule extends webpack.RuntimeModule {
         constructor() {
@@ -18,10 +19,14 @@ globalThis.processEvalResult = (${LynxRuntimeGlobals.lynxProcessEvalResultByHost
   if (chunk && chunk.ids && chunk.modules) {
     // We only deal with webpack chunk
     ${webpack.RuntimeGlobals.externalInstallChunk}(chunk);
-    // TODO: sort with preOrderIndex. See: https://github.com/web-infra-dev/rspack/pull/8588
-    for (var moduleId in chunk.modules) {
+    ${compilation.compiler[MAIN_THREAD_HMR]
+                ? `var moduleIds = chunk.entryModuleIds || Object.keys(chunk.modules);
+    for (var i = 0; i < moduleIds.length; i++) {
+      ${webpack.RuntimeGlobals.require}(moduleIds[i]);
+    }`
+                : `for (var moduleId in chunk.modules) {
       ${webpack.RuntimeGlobals.require}(moduleId);
-    }
+    }`}
     return chunk;
   }
   return chunk

package/lib/MainThreadHMR.d.ts

@@ -0,0 +1,4 @@
+import type { Compiler } from '@rspack/core';
+import type { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
+import type { EntryPair } from './DefinesInjection.js';
+export declare function applyMainThreadHMR(compiler: Compiler, entryPairs: EntryPair[], acceptEntryModules: boolean, templatePlugin: typeof LynxTemplatePlugin): void;

package/lib/MainThreadHMR.js

@@ -0,0 +1,206 @@
+// Copyright 2026 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 { RuntimeGlobals as LynxRuntimeGlobals } from '@lynx-js/webpack-runtime-globals';
+import { DEFINES_FOR_WORKLET_BUILD_INFO } from './Defines.js';
+import { MAIN_THREAD_HMR } from './hmr/enabled.js';
+import { LAYERS } from './layer.js';
+import backgroundRuntime from './runtime/hmr-background.js';
+import loadRuntime from './runtime/hmr-load.js';
+import mainThreadRuntime from './runtime/hmr-main-thread.js';
+export function applyMainThreadHMR(compiler, entryPairs, acceptEntryModules, templatePlugin) {
+    const name = 'ReactMainThreadHMR';
+    compiler[MAIN_THREAD_HMR] = true;
+    const { RuntimeGlobals, RuntimeModule, Template, sources } = compiler.webpack;
+    let previousHash;
+    let previousModules = new Map();
+    compiler.hooks.thisCompilation.tap(name, compilation => {
+        const currentModules = new Map();
+        const getFilename = (chunk, manifest, id = chunk.id) => compilation.getPath(manifest
+            ? compilation.outputOptions.hotUpdateMainFilename
+            : compilation.outputOptions.hotUpdateChunkFilename, {
+            hash: previousHash,
+            chunk: { id: id, name: chunk.name },
+            runtime: [...chunk.runtime].sort().join('~'),
+        });
+        compilation.hooks.additionalTreeRuntimeRequirements.tap(name, (chunk, requirements) => {
+            for (const pair of entryPairs) {
+                const main = compilation.entrypoints.get(pair.mainThread);
+                const background = compilation.entrypoints.get(pair.background);
+                const isMain = main?.getRuntimeChunk() === chunk;
+                if (!isMain && background?.getRuntimeChunk() !== chunk)
+                    continue;
+                requirements.add(RuntimeGlobals.moduleCache);
+                requirements.add(RuntimeGlobals.interceptModuleExecution);
+                requirements.add(RuntimeGlobals.getFullHash);
+                requirements.add(RuntimeGlobals.publicPath);
+                class DualThreadHMRRuntimeModule extends RuntimeModule {
+                    constructor() {
+                        super(name, RuntimeModule.STAGE_ATTACH);
+                    }
+                    generate() {
+                        const dependency = compilation.entries.get(pair.mainThread)
+                            .dependencies[0];
+                        const module = compilation.moduleGraph.getModule(dependency);
+                        return [
+                            Template.getFunctionContent(loadRuntime),
+                            Template.getFunctionContent(isMain ? mainThreadRuntime : backgroundRuntime),
+                        ].join('\n')
+                            .replaceAll('$BACKGROUND$', JSON.stringify(!isMain))
+                            .replaceAll('$RuntimeGlobals_lynxHMR$', LynxRuntimeGlobals.lynxHMR)
+                            .replaceAll('$RuntimeGlobals_lynxHMRLoad$', LynxRuntimeGlobals.lynxHMRLoad)
+                            .replaceAll('$ENTRY_MODULES$', JSON.stringify(acceptEntryModules
+                            ? [
+                                ...new Set(compilation.entries.get(pair.mainThread)
+                                    .dependencies.map(dependency => compilation.chunkGraph.getModuleId(compilation.moduleGraph.getModule(dependency)))),
+                            ]
+                            : []))
+                            .replaceAll('$METHOD$', JSON.stringify(`__lynxHMR_${pair.mainThread}`))
+                            .replaceAll('$EVENT$', JSON.stringify(`LynxHMR:${pair.background}`))
+                            .replaceAll('$HOT_MODULE$', JSON.stringify(compilation.chunkGraph.getModuleId(module)));
+                    }
+                }
+                compilation.addRuntimeModule(chunk, new DualThreadHMRRuntimeModule());
+            }
+        });
+        compilation.hooks.processAssets.tap({
+            name,
+            stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+        }, () => {
+            const { chunkGraph, moduleGraph } = compilation;
+            for (const pair of entryPairs) {
+                const main = compilation.entrypoints.get(pair.mainThread);
+                const background = compilation.entrypoints.get(pair.background);
+                const mainChunk = main.getRuntimeChunk();
+                const backgroundChunk = background.getRuntimeChunk();
+                const mainModules = new Set([...mainChunk.getAllReferencedChunks()].flatMap(chunk => [...chunkGraph.getChunkModulesIterable(chunk)]));
+                const backgroundModules = new Map();
+                for (const chunk of backgroundChunk.getAllReferencedChunks()) {
+                    for (const module of chunkGraph.getChunkModulesIterable(chunk)) {
+                        const resource = module.resource;
+                        if (resource && module.layer === LAYERS.BACKGROUND) {
+                            backgroundModules.set(resource, module);
+                        }
+                    }
+                }
+                const changed = [];
+                for (const module of mainModules) {
+                    if (module.layer !== LAYERS.MAIN_THREAD)
+                        continue;
+                    const key = `${pair.mainThread}:${module.identifier()}`;
+                    const hash = chunkGraph.getModuleHash(module, new Set(mainChunk.runtime));
+                    currentModules.set(key, hash);
+                    if (previousHash && previousModules.get(key) !== hash) {
+                        changed.push(module);
+                    }
+                }
+                // Follow actual MTS dependencies to their worklet-owning BTS modules.
+                // Replaying their existing factories preserves Fast Refresh's own
+                // acceptance boundary; invalidating a self-accepted owner would not.
+                const owners = new Set();
+                const visited = new Set();
+                while (changed.length > 0) {
+                    const module = changed.pop();
+                    if (visited.has(module))
+                        continue;
+                    visited.add(module);
+                    const resource = module.resource;
+                    const owner = resource ? backgroundModules.get(resource) : undefined;
+                    const defines = owner?.buildInfo?.[DEFINES_FOR_WORKLET_BUILD_INFO];
+                    if (owner && Array.isArray(defines) && defines.length > 0) {
+                        owners.add(chunkGraph.getModuleId(owner));
+                    }
+                    for (const connection of moduleGraph.getIncomingConnections(module)) {
+                        if (connection.originModule
+                            && mainModules.has(connection.originModule)) {
+                            changed.push(connection.originModule);
+                        }
+                    }
+                }
+                if (!previousHash)
+                    continue;
+                const manifestAsset = compilation.getAsset(getFilename(mainChunk, true));
+                if (!manifestAsset)
+                    continue;
+                const manifest = JSON.parse(manifestAsset.source.source().toString());
+                for (const id of manifest.c) {
+                    const target = [...compilation.chunks].find(chunk => chunk.id === id);
+                    const file = getFilename(target, false);
+                    const asset = compilation.getAsset(file);
+                    compilation.updateAsset(file, asset.source, {
+                        ...asset.info,
+                        'lynx:main-thread': true,
+                    });
+                }
+                if (owners.size > 0) {
+                    const file = getFilename(backgroundChunk, false);
+                    const asset = compilation.getAsset(file);
+                    compilation.updateAsset(file, new sources.ConcatSource(asset.source, `\nexports.lynxRefreshModules=${JSON.stringify([...owners])};`));
+                }
+            }
+        });
+        const emitted = new Set();
+        const hooks = templatePlugin.getLynxTemplatePluginHooks(compilation);
+        hooks.beforeEmit.tapPromise(name, async (args) => {
+            if (!previousHash)
+                return args;
+            for (const pair of entryPairs) {
+                if (!args.chunkGroups.some(group => group.name === pair.mainThread)) {
+                    continue;
+                }
+                for (const entry of [pair.mainThread, pair.background]) {
+                    const isMain = entry === pair.mainThread;
+                    const chunk = compilation.entrypoints.get(entry).getRuntimeChunk();
+                    const filename = getFilename(chunk, true);
+                    const manifest = compilation.getAsset(filename);
+                    if (!manifest || emitted.has(filename))
+                        continue;
+                    emitted.add(filename);
+                    const manifestSource = manifest.source.source().toString();
+                    const sections = {
+                        // BTS loadScript must initialize the same app scope as normal JS
+                        // chunks. This wrapper also detects hosts predating that support.
+                        manifest: {
+                            content: isMain
+                                ? `(${manifestSource})`
+                                : `({init:function(){return (${manifestSource});}})`,
+                        },
+                    };
+                    const { c: ids } = JSON.parse(manifestSource);
+                    for (const id of ids) {
+                        const target = [...compilation.chunks].find(chunk => chunk.id === id);
+                        const file = getFilename(target, false);
+                        const source = compilation.getAsset(file).source.source()
+                            .toString();
+                        // BTS assets already carry the runtime wrapper and its host scope.
+                        // MTS chunks expose CommonJS exports without that SDK wrapper.
+                        sections[file] = {
+                            content: isMain
+                                ? `(function(){var exports={};${source}\nreturn exports;})()`
+                                : source,
+                        };
+                    }
+                    const encodeOptions = {
+                        ...args.finalEncodeOptions,
+                        sourceContent: {
+                            ...args.finalEncodeOptions['sourceContent'],
+                            appType: 'DynamicComponent',
+                        },
+                        lepusCode: undefined,
+                        manifest: {},
+                        customSections: sections,
+                    };
+                    const { buffer } = await hooks.encode.promise({ encodeOptions });
+                    compilation.emitAsset(filename.replace(/\.json$/, '.bundle'), new sources.RawSource(buffer));
+                }
+            }
+            return args;
+        });
+        compilation.hooks.afterSeal.tap(name, () => {
+            // Rspack advances its HMR records even when the build has diagnostics.
+            previousHash = compilation.hash ?? undefined;
+            previousModules = currentModules;
+        });
+    });
+}
+//# sourceMappingURL=MainThreadHMR.js.map

package/lib/ReactWebpackPlugin.d.ts

@@ -1,5 +1,6 @@
 import type { Compiler } from '@rspack/core';
 import type { ExtractStrConfig, TransformBuiltinAttributeNamesOptions } from '@lynx-js/react/transform';
+import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
 import { LAYERS } from './layer.js';
 interface ElementTemplateBuildInfo {
     templateId: string;
@@ -36,6 +37,13 @@ export declare function mergeElementTemplatesFromModule(elementTemplates: Record
  * @public
  */
 interface ReactWebpackPluginOptions {
+    /**
+     * The template plugin implementation supplied by the build engine.
+     * Rsbuild integrations use the implementation exposed by `pluginLynx`.
+     *
+     * @defaultValue The `LynxTemplatePlugin` exported by `@lynx-js/template-webpack-plugin`.
+     */
+    LynxTemplatePlugin?: typeof LynxTemplatePlugin;
     /**
      * Whether disable runtime warnings about using ReactLynx2.0-incompatible `SelectorQuery` APIs.
      */

package/lib/ReactWebpackPlugin.js

@@ -3,12 +3,14 @@
 // LICENSE file in the root directory of this source tree.
 import { createRequire } from 'node:module';
 import invariant from 'tiny-invariant';
-import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
+import { LynxEncodePlugin, LynxTemplatePlugin, } from '@lynx-js/template-webpack-plugin';
 import { RuntimeGlobals } from '@lynx-js/webpack-runtime-globals';
 import { applyDefinesInjection } from './DefinesInjection.js';
+import { MAIN_THREAD_HMR } from './hmr/enabled.js';
 import { LAYERS } from './layer.js';
 import { ELEMENT_TEMPLATE_BUILD_INFO, REACT_RUNTIME_REQUIREMENTS_BUILD_INFO, } from './loaders/main-thread.js';
 import { createLynxProcessEvalResultRuntimeModule } from './LynxProcessEvalResultRuntimeModule.js';
+import { applyMainThreadHMR } from './MainThreadHMR.js';
 const require = createRequire(import.meta.url);
 const REACT_COMPILATION_RESULT = Symbol.for('@lynx-js/react/internal:compilation-result');
 /**
@@ -222,6 +224,7 @@ class ReactWebpackPlugin {
      */
     static { this.defaultOptions = Object
         .freeze({
+        LynxTemplatePlugin,
         disableCreateSelectorQueryIncompatibleWarning: false,
         firstScreenSyncTiming: 'immediately',
         globalPropsMode: 'reactive',
@@ -308,6 +311,13 @@ class ReactWebpackPlugin {
         const entryPairs = options.entryPairs ?? [];
         if (entryPairs.length > 0) {
             applyDefinesInjection(compiler, entryPairs, this.constructor.name);
+            if (isDev && !options.experimental_isLazyBundle
+                && compiler.options.plugins.some(plugin => plugin instanceof compiler.webpack.HotModuleReplacementPlugin)
+                && compiler.options.plugins.some(plugin => plugin instanceof LynxEncodePlugin)) {
+                // ET template structure HMR is unsupported, so retain its existing
+                // acceptance boundaries instead of adding a root fallback.
+                applyMainThreadHMR(compiler, entryPairs, !options.experimental_useElementTemplate, options.LynxTemplatePlugin);
+            }
         }
         compiler.hooks.thisCompilation.tap(this.constructor.name, compilation => {
             const onceForChunkSet = new WeakSet();
@@ -351,13 +361,13 @@ class ReactWebpackPlugin {
                         .forEach(name => this.#updateMainThreadInfo(compilation, name));
                 });
             });
-            const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
+            const hooks = options.LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
             // The transform appends `-react__<layer>` to a `webpackChunkName` so the
             // 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 { ConcatSource } = compiler.webpack.sources;
-            if (compiler.options.plugins.some((p) => p instanceof LynxTemplatePlugin)) {
+            if (compiler.options.plugins.some((p) => p instanceof options.LynxTemplatePlugin)) {
                 compilation.hooks.processAssets.tap({
                     name: this.constructor.name,
                     // This wrapper must be injected after size/minify optimizations have
@@ -378,6 +388,36 @@ class ReactWebpackPlugin {
                         + 1,
                 }, () => {
                     const wrappedFiles = new Set();
+                    const entryModuleIds = new Map();
+                    if (compiler[MAIN_THREAD_HMR]) {
+                        // Only dynamic import targets are entries. Requiring helpers as
+                        // roots prevents their updates from bubbling to their owners.
+                        for (const module of compilation.modules) {
+                            const blocks = [...module.blocks];
+                            for (const block of blocks) {
+                                blocks.push(...block.blocks);
+                                const group = compilation.chunkGraph.getBlockChunkGroup(block);
+                                if (!group || group.isInitial()
+                                    || !group.origins.every(origin => origin.module?.layer === LAYERS.MAIN_THREAD))
+                                    continue;
+                                for (const chunk of group.chunks) {
+                                    let ids = entryModuleIds.get(chunk);
+                                    if (!ids)
+                                        entryModuleIds.set(chunk, ids = new Set());
+                                    const factories = new Set(compilation.chunkGraph
+                                        .getChunkModulesIterableBySourceType(chunk, 'javascript'));
+                                    for (const dependency of block.dependencies) {
+                                        const target = compilation.moduleGraph.getResolvedModule(dependency);
+                                        if (!target || !factories.has(target))
+                                            continue;
+                                        const id = compilation.chunkGraph.getModuleId(target);
+                                        if (id !== null)
+                                            ids.add(id);
+                                    }
+                                }
+                            }
+                        }
+                    }
                     compilation.chunkGroups.forEach(chunkGroup => {
                         const isDynamicImport = !chunkGroup.isInitial()
                             && chunkGroup.origins.every(origin => origin.module?.layer === LAYERS.MAIN_THREAD);
@@ -400,8 +440,14 @@ class ReactWebpackPlugin {
                                 if (!asset) {
                                     continue;
                                 }
+                                // HMR consumes CommonJS exports directly, not the lazy-bundle factory.
+                                if (asset.info.hotModuleReplacement) {
+                                    continue;
+                                }
                                 wrappedFiles.add(file);
-                                compilation.updateAsset(file, old => new ConcatSource(`(function (globDynamicComponentEntry) {\n`, `  const module = { exports: {} }\n`, `  const exports = module.exports;\n`, old, `\n  ;return module.exports\n})`));
+                                compilation.updateAsset(file, old => new ConcatSource(`(function (globDynamicComponentEntry) {\n`, `  const module = { exports: {} }\n`, `  const exports = module.exports;\n`, old, entryModuleIds.has(chunk)
+                                    ? `\n  module.exports.entryModuleIds = ${JSON.stringify([...entryModuleIds.get(chunk)])};`
+                                    : '', `\n  ;return module.exports\n})`));
                             }
                         });
                     });

package/lib/hmr/enabled.d.ts

@@ -0,0 +1 @@
+export declare const MAIN_THREAD_HMR: symbol;

package/lib/hmr/enabled.js

@@ -0,0 +1,5 @@
+// Copyright 2026 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.
+export const MAIN_THREAD_HMR = Symbol.for('@lynx-js/react/internal:main-thread-hmr');
+//# sourceMappingURL=enabled.js.map

package/lib/loaders/main-thread.js

@@ -6,6 +6,7 @@ import { UI_SOURCE_MAP_RECORDS_BUILD_INFO } from '@lynx-js/debug-metadata';
 import { DEFINES_FOR_SNAPSHOT_BUILD_INFO, DEFINES_FOR_WORKLET_BUILD_INFO, } from '../Defines.js';
 import { boundaryKey, definesImportByBoundary, } from './defines-import-by-boundary.js';
 import { getMainThreadTransformOptions } from './options.js';
+import { MAIN_THREAD_HMR } from '../hmr/enabled.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) {
@@ -110,6 +111,12 @@ const mainThreadLoader = function (content, sourceMap) {
         : undefined;
     this.callback(null, result.code
         + (definesImport ? `\nimport ${JSON.stringify(definesImport)};` : '')
+        + (this.hot
+            && this._compiler?.[MAIN_THREAD_HMR]
+            && ((result.definesForSnapshot?.length ?? 0) > 0
+                || (result.definesForWorklet?.length ?? 0) > 0)
+            ? '\nif (module.hot && !module.hot._selfAccepted && !module.hot._selfDeclined) module.hot.accept();'
+            : '')
         + (this.hot
             // TODO: temporary fix LEPUS error `$RefreshReg$ is not defined`
             // should make react-refresh transform in `react-transform`.

package/lib/runtime/hmr-background.d.ts

@@ -0,0 +1 @@
+export default function (): void;

package/lib/runtime/hmr-background.js

@@ -0,0 +1,94 @@
+// Copyright 2026 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.
+// @ts-nocheck
+/* istanbul ignore file -- stringified into the application runtime */
+export default function () {
+    var sequence = 0;
+    var session = Date.now().toString(36) + Math.random().toString(36).slice(2);
+    var pending;
+    var failed = false;
+    var applying = false;
+    var executionError;
+    var expectedHash;
+    // Fast Refresh's self-accept handler can consume a factory exception. Record
+    // it at execution, before that handler runs, and check it before committing.
+    __webpack_require__.i.push(function (options) {
+        var factory = options.factory;
+        options.factory = function () {
+            try {
+                return factory.apply(this, arguments);
+            }
+            catch (error) {
+                if (applying) {
+                    executionError = error instanceof Error
+                        ? error
+                        : new Error(String(error));
+                }
+                throw error;
+            }
+        };
+    });
+    lynx.getCoreContext().addEventListener($EVENT$, function (event) {
+        var ack = JSON.parse(event.data);
+        if (failed || ack.session !== session || !pending
+            || pending.sequence !== ack.sequence)
+            return;
+        var waiter = pending;
+        pending = undefined;
+        clearTimeout(waiter.timer);
+        if (ack.supported === false) {
+            $RuntimeGlobals_lynxHMR$ = undefined;
+            $RuntimeGlobals_lynxHMRLoad$ = undefined;
+            waiter.resolve(false);
+            return;
+        }
+        if (ack.ok) {
+            expectedHash = ack.hash;
+            applying = true;
+            waiter.resolve();
+        }
+        else {
+            waiter.reject(new Error(ack.error));
+        }
+    });
+    $RuntimeGlobals_lynxHMR$ = {
+        prepare: function (hash) {
+            if (failed)
+                return Promise.reject(new Error('HMR transaction stopped'));
+            executionError = undefined;
+            return new Promise(function (resolve, reject) {
+                var currentSequence = ++sequence;
+                pending = {
+                    sequence: currentSequence,
+                    resolve: resolve,
+                    reject: reject,
+                    timer: setTimeout(function () {
+                        pending = undefined;
+                        reject(new Error('Main-thread HMR completion timed out'));
+                    }, 10000),
+                };
+                lynx.getNativeApp().callLepusMethod($METHOD$, {
+                    session: session,
+                    sequence: currentSequence,
+                    hash: hash,
+                }, function () { });
+            });
+        },
+        finish: function (hash) {
+            if (executionError)
+                throw executionError;
+            if (hash !== expectedHash)
+                throw new Error('HMR thread hashes differ');
+            applying = false;
+        },
+        stop: function () {
+            failed = true;
+            applying = false;
+            if (pending)
+                clearTimeout(pending.timer);
+            pending = undefined;
+        },
+    };
+}
+//# sourceMappingURL=hmr-background.js.map

package/lib/runtime/hmr-load.d.ts

@@ -0,0 +1 @@
+export default function (): void;

package/lib/runtime/hmr-load.js

@@ -0,0 +1,51 @@
+// Copyright 2026 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.
+// @ts-nocheck
+/* istanbul ignore file -- stringified into the application runtime */
+export default function () {
+    if (typeof lynx.fetchBundle !== 'function'
+        || typeof lynx.loadScript !== 'function')
+        return;
+    var bundleName;
+    $RuntimeGlobals_lynxHMRLoad$ = function (name, callback) {
+        if (name.endsWith('.json')) {
+            // Native ResponseHandler is a thenable, not a chainable Promise.
+            new Promise(function (resolve, reject) {
+                lynx.fetchBundle(name.slice(0, -5) + '.bundle', {}).then(resolve, reject);
+            }).then(function (response) {
+                if (response.code !== 0)
+                    throw new Error(JSON.stringify(response));
+                bundleName = response.url;
+                return lynx.loadScript('manifest', { bundleName: bundleName });
+            }).then(function (manifest) {
+                // Early BTS hosts expose loadScript but return the wrapper instead of
+                // initializing its app scope. Probe that contract before applying code.
+                if ($BACKGROUND$ && typeof manifest.init === 'function') {
+                    $RuntimeGlobals_lynxHMRLoad$ = undefined;
+                    return new Promise(function (resolve, reject) {
+                        lynx.requireModuleAsync(name, function (error, result) {
+                            if (error)
+                                reject(error);
+                            else
+                                resolve(result);
+                        });
+                    });
+                }
+                return manifest;
+            }).then(function (manifest) {
+                callback(null, manifest);
+            }, callback);
+        }
+        else {
+            try {
+                var filename = name.slice(__webpack_require__.p.length);
+                callback(null, lynx.loadScript(filename, { bundleName: bundleName }));
+            }
+            catch (error) {
+                callback(error);
+            }
+        }
+    };
+}
+//# sourceMappingURL=hmr-load.js.map

package/lib/runtime/hmr-main-thread.d.ts

@@ -0,0 +1 @@
+export default function (): void;

package/lib/runtime/hmr-main-thread.js

@@ -0,0 +1,76 @@
+// Copyright 2026 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.
+// @ts-nocheck
+/* istanbul ignore file -- stringified into the application runtime */
+export default function () {
+    var applying = false;
+    var executionError;
+    // CSS and app imports are parallel entry roots. Accept the actual roots,
+    // while helpers still bubble through and replay their worklet owners.
+    __webpack_require__.i.push(function (options) {
+        var factory = options.factory;
+        options.factory = function () {
+            try {
+                factory.apply(this, arguments);
+            }
+            catch (error) {
+                // A self-accept handler can consume this exception. Preserve it for
+                // the transaction check even when hot.check() subsequently resolves.
+                if (applying) {
+                    executionError = error instanceof Error
+                        ? error
+                        : new Error(String(error));
+                }
+                throw error;
+            }
+            if ($ENTRY_MODULES$.includes(options.id)) {
+                var hot = options.module.hot;
+                if (!hot._selfAccepted && !hot._selfDeclined)
+                    hot.accept();
+            }
+        };
+    });
+    globalThis[$METHOD$] = function (request) {
+        var acknowledge = function (ok, error, supported) {
+            lynx.getJSContext().dispatchEvent({
+                type: $EVENT$,
+                data: JSON.stringify({
+                    session: request.session,
+                    sequence: request.sequence,
+                    hash: __webpack_require__.h(),
+                    ok: ok,
+                    supported: supported,
+                    error: error && String(error),
+                }),
+            });
+        };
+        if (applying || request.hash !== __webpack_require__.h()) {
+            acknowledge(false, new Error('Main-thread HMR version mismatch'));
+            return;
+        }
+        // Native loading is optional on older hosts; ordinary BTS HMR can continue.
+        if (typeof lynx.fetchBundle !== 'function'
+            || typeof lynx.loadScript !== 'function') {
+            acknowledge(false, undefined, false);
+            return;
+        }
+        applying = true;
+        executionError = undefined;
+        Promise.resolve().then(function () {
+            return __webpack_require__.c[$HOT_MODULE$].hot.check(true);
+        }).then(function (updated) {
+            if (executionError)
+                throw executionError;
+            if (updated === null) {
+                throw new Error('Main-thread HMR update is missing');
+            }
+            applying = false;
+            acknowledge(true);
+        }).catch(function (error) {
+            applying = false;
+            acknowledge(false, error);
+        });
+    };
+}
+//# sourceMappingURL=hmr-main-thread.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react-webpack-plugin-canary",
-  "version": "0.14.0",
+  "version": "0.15.0-canary-20261027-749147c8",
   "description": "A webpack plugin for ReactLynx",
   "keywords": [
     "webpack",
@@ -34,14 +34,14 @@
   ],
   "dependencies": {
     "@lynx-js/debug-metadata": "npm:@lynx-js/debug-metadata-canary@0.1.0",
-    "@lynx-js/webpack-runtime-globals": "npm:@lynx-js/webpack-runtime-globals-canary@0.0.8",
+    "@lynx-js/webpack-runtime-globals": "npm:@lynx-js/webpack-runtime-globals-canary@0.1.0-canary-20261027-749147c8",
     "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/chunk-loading-webpack-plugin": "npm:@lynx-js/chunk-loading-webpack-plugin-canary@0.4.3-canary-20261027-749147c8",
     "@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.129.0",
-    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.16.5",
+    "@lynx-js/react": "npm:@lynx-js/react-canary@0.129.1-canary-20261027-749147c8",
+    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.16.6-canary-20261027-749147c8",
     "@lynx-js/test-tools": "0.0.0",
     "@microsoft/api-extractor": "7.59.4",
     "@rspack/core": "2.2.7",