@blotch/rsbuild-plugin-angular-lynx 22.2.2 → 22.2.3

package/dist/index.js

@@ -1,19 +1,17 @@
 /*! LICENSE: index.js.LICENSE.txt */
 import node_fs, { existsSync } from "node:fs";
-import node_path, { join, resolve } from "node:path";
+import node_path, { join, resolve as external_node_path_resolve } from "node:path";
 import { CSSPlugins, LynxEncodePlugin, LynxTemplatePlugin, WebEncodePlugin } from "@lynx-js/template-webpack-plugin";
+import { createRequire } from "node:module";
+import { fileURLToPath } from "node:url";
 import { RuntimeWrapperWebpackPlugin } from "@lynx-js/runtime-wrapper-webpack-plugin";
 import { RuntimeGlobals } from "@lynx-js/webpack-runtime-globals";
 import tiny_invariant from "tiny-invariant";
 import { createHash } from "node:crypto";
-import { fileURLToPath } from "node:url";
-import { createRequire } from "node:module";
 import { availableParallelism } from "node:os";
 import { workspaces } from "@angular-devkit/core";
 import { NodeJsSyncHost } from "@angular-devkit/core/node";
 import { access, constants } from "node:fs/promises";
-import node_http from "node:http";
-import { pluginTailwindCSS } from "rsbuild-plugin-tailwindcss";
 import * as __rspack_external_typescript from "typescript";
 import * as __rspack_external_node_path_c5b9b54f from "node:path";
 const ANGULAR_CLI_CONTEXT = Symbol.for('@blotch/rsbuild-plugin-angular-lynx:angular-cli-context');
@@ -90,19 +88,32 @@ const LAYERS = {
 };
 const applyLayers = (api)=>{
     api.modifyBundlerChain((chain)=>{
-        chain.module.rule("typescript").oneOf(LAYERS.BACKGROUND).layer(LAYERS.BACKGROUND).test(/\.[cm]?[jt]sx?$/).use('builtin:swc-loader').loader('builtin:swc-loader').options({
+        for (const [layer, target, isMainThread] of [
+            [
+                LAYERS.BACKGROUND,
+                'es2015',
+                false
+            ],
+            [
+                LAYERS.MAIN_THREAD,
+                'es2019',
+                true
+            ]
+        ])chain.module.rule("typescript").oneOf(layer).issuerLayer(layer).test(/\.[cm]?[jt]sx?$/).use('builtin:swc-loader').loader('builtin:swc-loader').options({
             jsc: {
-                target: 'es2015',
-                parser: {
-                    syntax: "typescript"
-                }
-            }
-        }).end();
-        chain.module.rule("typescript").oneOf(LAYERS.MAIN_THREAD).layer(LAYERS.MAIN_THREAD).test(/\.[cm]?[jt]sx?$/).use('builtin:swc-loader').loader('builtin:swc-loader').options({
-            jsc: {
-                target: 'es2019',
+                target,
                 parser: {
                     syntax: "typescript"
+                },
+                transform: {
+                    optimizer: {
+                        simplify: false,
+                        globals: {
+                            vars: {
+                                __MAIN_THREAD__: String(isMainThread)
+                            }
+                        }
+                    }
                 }
             }
         }).end();
@@ -201,8 +212,9 @@ class AngularWebpackPlugin {
                     name: `${this.constructor.name}:threadGlobals`,
                     stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
                 }, ()=>{
-                    for (const [name] of Object.entries(compilation.assets).filter(([n])=>n.endsWith('.js'))){
-                        const isMainThread = mainThreadChunkSet.has(name);
+                    this.#markMainThreadHotUpdates(compilation, mainThreadChunkSet);
+                    for (const [name] of Object.entries(compilation.assets).filter(([n])=>n.endsWith('.js') && !compilation.getAsset(n)?.info.hotModuleReplacement)){
+                        const isMainThread = mainThreadChunkSet.has(name) || compilation.getAsset(name)?.info['lynx:main-thread'] === true;
                         const prefix = `globalThis["__MAIN_THREAD__"]=${isMainThread};`;
                         compilation.updateAsset(name, (old)=>new ConcatSource(prefix, old));
                     }
@@ -236,6 +248,16 @@ class AngularWebpackPlugin {
             });
         });
     }
+    #markMainThreadHotUpdates(compilation, mainThreadChunkSet) {
+        for (const chunk of compilation.chunks){
+            const files = [
+                ...chunk.files
+            ];
+            if (files.some((file)=>mainThreadChunkSet.has(file) || !compilation.getAsset(file)?.info.hotModuleReplacement && compilation.getAsset(file)?.info['lynx:main-thread'])) {
+                for (const file of files)if (file.endsWith('.js') && compilation.getAsset(file)?.info.hotModuleReplacement) this.#updateMainThreadInfo(compilation, file);
+            }
+        }
+    }
     #updateMainThreadInfo(compilation, name) {
         const asset = compilation.getAsset(name);
         tiny_invariant(asset, `Should have main thread asset ${name}`);
@@ -249,9 +271,17 @@ const S_LYNX_CONFIG = Symbol.for('@lynx-js/rsbuild-plugin:config');
 const PLUGIN_NAME_TEMPLATE = 'lynx:template';
 const PLUGIN_NAME_RUNTIME_WRAPPER = 'lynx:runtime-wrapper';
 const PLUGIN_NAME_ANGULAR = 'lynx:angular';
-const applyEntry = (api, options)=>{
-    const { customCSSInheritanceList, debugInfoOutside, defaultDisplayLinear, enableA11y, enableAccessibilityElement, enableCSSInheritance, enableCSSInvalidation, enableCSSSelector, enableNewGesture, enableRemoveCSSScope, removeDescendantSelectorScope, targetSdkVersion } = options;
-    api.modifyBundlerChain((chain, { environment, isDev })=>{
+const RULE_BACKGROUND_MODULES = 'lynx:background-modules';
+const PLUGIN_NAME_CSS_HOT_UPDATE = 'lynx:css-hot-update';
+const BLUR_VIEW_STYLESHEET = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './styles/blur-view.css');
+const HMR_BACKGROUND_CLIENT = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './client/hmr-background.js');
+const HMR_MAIN_THREAD_CLIENT = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './client/hmr-main-thread.js');
+const CSS_HOT_UPDATE = node_path.resolve(node_path.dirname(fileURLToPath(import.meta.url)), './client/css-hot-update.cjs');
+const CSS_EXTRACT_HOT_UPDATE = /css-extract-webpack-plugin[\\/]runtime[\\/]hotModuleReplacement\.cjs$/;
+const resolveReloadApp = ()=>createRequire(createRequire(import.meta.url).resolve('@lynx-js/rsbuild-plugin')).resolve('@lynx-js/webpack-dev-transport/reloadApp');
+const applyEntry = (api, options, backgroundEntries, appEntries)=>{
+    const { customCSSInheritanceList, debugInfoOutside, defaultDisplayLinear, defaultOverflowVisible, enableA11y, enableAccessibilityElement, enableCSSInheritance, enableCSSInvalidation, enableCSSSelector, enableNewGesture, enableRemoveCSSScope, removeDescendantSelectorScope, targetSdkVersion } = options;
+    api.modifyBundlerChain((chain, { environment, isDev, rspack })=>{
         const lynxConfig = api.useExposed(S_LYNX_CONFIG);
         if (!lynxConfig) throw new Error('No Lynx config exposed. `pluginLynx` has to be applied for the Lynx build engine to be configured.');
         const isLynx = 'lynx' === environment.name;
@@ -261,9 +291,19 @@ const applyEntry = (api, options)=>{
         const enabledLiveReload = isDev && !isWeb && false !== liveReload;
         const entries = chain.entryPoints.entries() ?? {};
         chain.entryPoints.clear();
+        const preEntry = new Set(environment.config.source.preEntry);
         const mainThreadChunks = [];
         for (const [entryName, entryPoint] of Object.entries(entries)){
-            const { imports } = getChunks(entryName, entryPoint.values());
+            const { imports: entryImports } = getChunks(entryName, entryPoint.values());
+            const mainThreadImports = isLynx ? [
+                BLUR_VIEW_STYLESHEET,
+                ...entryImports
+            ] : entryImports;
+            const backgroundImports = [
+                ...entryImports.filter((entryImport)=>preEntry.has(entryImport)),
+                backgroundEntries.fileFor(environment.name, entryName)
+            ];
+            for (const entryImport of entryImports)if (entryImport.startsWith('.') || node_path.isAbsolute(entryImport)) appEntries.add(node_path.resolve(api.context.rootPath, entryImport));
             const templateFilename = lynxConfig.resolveBundleFilename({
                 entryName,
                 platform: environment.name
@@ -278,17 +318,22 @@ const applyEntry = (api, options)=>{
             mainThreadChunks.push(mainThreadName);
             chain.entry(mainThreadEntry).add({
                 layer: LAYERS.MAIN_THREAD,
-                import: imports,
+                import: mainThreadImports,
                 filename: mainThreadName
+            }).when(enabledHMR, (entry)=>{
+                entry.prepend({
+                    layer: LAYERS.MAIN_THREAD,
+                    import: HMR_MAIN_THREAD_CLIENT
+                });
             }).end();
             chain.entry(backgroundEntry).add({
                 layer: LAYERS.BACKGROUND,
-                import: imports,
+                import: backgroundImports,
                 filename: backgroundThreadName
             }).when(enabledHMR, (entry)=>{
                 entry.prepend({
                     layer: LAYERS.BACKGROUND,
-                    import: '@rspack/core/hot/dev-server'
+                    import: HMR_BACKGROUND_CLIENT
                 });
             }).when(enabledHMR || enabledLiveReload, (entry)=>{
                 entry.prepend({
@@ -315,6 +360,7 @@ const applyEntry = (api, options)=>{
                     customCSSInheritanceList,
                     debugInfoOutside,
                     defaultDisplayLinear,
+                    defaultOverflowVisible,
                     enableAccessibilityElement,
                     enableCSSInheritance,
                     enableCSSInvalidation,
@@ -327,6 +373,14 @@ const applyEntry = (api, options)=>{
                 }
             ]).end();
         }
+        chain.module.rule(RULE_BACKGROUND_MODULES).issuerLayer(LAYERS.BACKGROUND).test((file)=>backgroundEntries.isBackgroundModule(file)).sideEffects(true);
+        if (enabledHMR) {
+            chain.resolve.alias.set('@lynx-js/webpack-dev-transport/reloadApp', resolveReloadApp());
+            chain.plugin(PLUGIN_NAME_CSS_HOT_UPDATE).use(rspack.NormalModuleReplacementPlugin, [
+                CSS_EXTRACT_HOT_UPDATE,
+                CSS_HOT_UPDATE
+            ]).end();
+        }
         if (isLynx) {
             chain.plugin(PLUGIN_NAME_RUNTIME_WRAPPER).use(RuntimeWrapperWebpackPlugin, [
                 {
@@ -622,68 +676,111 @@ const buildLynxSchemaSourceFileCache = (tsconfig, shouldInclude = ()=>true)=>{
         fileNames
     };
 };
-const generateComponentScopeId = (className, containingFile)=>{
-    const hash = createHash('sha256').update(`${className}|${containingFile}`).digest('hex').slice(0, 10);
-    return `l${hash}`;
-};
 const componentStyleSizeKey = (containingFile, stylesheetKey)=>`${containingFile}#${stylesheetKey}`;
 const forgetComponentStyleSizes = (componentStyleSizes, containingFile)=>{
     const prefix = componentStyleSizeKey(containingFile, '');
     for (const key of componentStyleSizes.keys())if (key.startsWith(prefix)) componentStyleSizes.delete(key);
 };
 const createTransformStylesheet = (params)=>{
-    const { basePath, scopedCssCacheDir, componentStylesCache, componentScopeIds, onStylesheetWritten, componentStyleSizes } = params;
+    const { basePath, componentStyleSizes } = params;
     return async (data, containingFile, stylesheetFile, order, className)=>{
-        const resolvedClassName = className ?? 'Component';
-        const scopeId = generateComponentScopeId(resolvedClassName, containingFile);
-        let componentStyles = componentStylesCache.get(containingFile);
-        if (!componentStyles) {
-            componentStyles = {
-                imports: [],
-                inlineStyles: [],
-                scopeId,
-                processedFiles: new Map()
-            };
-            componentStylesCache.set(containingFile, componentStyles);
-        }
-        const stylesheetKey = stylesheetFile ?? `__inline_${order}`;
-        const previousPath = componentStyles.processedFiles.get(stylesheetKey);
-        if (previousPath && !className) return '';
-        componentStyleSizes?.set(componentStyleSizeKey(containingFile, stylesheetKey), {
+        const key = componentStyleSizeKey(containingFile, stylesheetFile ?? `__inline_${order}`);
+        if (componentStyleSizes && (className || !componentStyleSizes.has(key))) componentStyleSizes.set(key, {
             label: node_path.relative(basePath, stylesheetFile ?? containingFile).replace(/\\/g, '/'),
             size: Buffer.byteLength(data)
         });
-        if (className || !componentScopeIds.has(containingFile)) componentScopeIds.set(containingFile, {
-            className: resolvedClassName,
-            scopeId
-        });
-        const scopedCss = data;
-        const writeIfChanged = (filePath, content)=>{
-            try {
-                if (node_fs.readFileSync(filePath, 'utf-8') === content) return;
-            } catch  {}
-            node_fs.writeFileSync(filePath, content);
-            onStylesheetWritten?.(filePath);
-        };
-        let scopedPath;
-        if (stylesheetFile) {
-            const relName = node_path.relative(basePath, stylesheetFile);
-            scopedPath = node_path.join(scopedCssCacheDir, `${relName.replace(/[/\\]/g, '__')}.__scoped_${scopeId}.css`);
-        } else {
-            const relDir = node_path.relative(basePath, node_path.dirname(containingFile));
-            scopedPath = node_path.join(scopedCssCacheDir, `${relDir.replace(/[/\\]/g, '__')}__inline_${resolvedClassName}_${order}.__scoped_${scopeId}.css`);
+        return data;
+    };
+};
+const generateComponentScopeId = (className, containingFile)=>{
+    const hash = createHash('sha256').update(`${className}|${containingFile}`).digest('hex').slice(0, 10);
+    return `l${hash}`;
+};
+const EMULATED = 0;
+const toLynxScopedCss = (css, scopeId)=>css.replaceAll('[_ngcontent-%COMP%]', `._ngcontent-${scopeId}`).replaceAll('[_nghost-%COMP%]', `._nghost-${scopeId}`).replaceAll('%COMP%', scopeId);
+const fillCssVarNamespace = (css)=>css.replaceAll('%NS%', '');
+const propertyName = (property)=>__rspack_external_typescript.isPropertyAssignment(property) && (__rspack_external_typescript.isIdentifier(property.name) || __rspack_external_typescript.isStringLiteral(property.name)) ? property.name.text : null;
+const isDefineComponentCall = (node)=>{
+    if (!__rspack_external_typescript.isCallExpression(node)) return false;
+    const callee = node.expression;
+    const name = __rspack_external_typescript.isPropertyAccessExpression(callee) ? callee.name.text : __rspack_external_typescript.isIdentifier(callee) ? callee.text : null;
+    return 'ɵɵdefineComponent' === name;
+};
+const extractComponentStyles = (code, fileName)=>{
+    if (!code.includes('ɵɵdefineComponent')) return {
+        code,
+        components: []
+    };
+    const sourceFile = __rspack_external_typescript.createSourceFile(fileName, code, __rspack_external_typescript.ScriptTarget.Latest, true, __rspack_external_typescript.ScriptKind.JS);
+    const components = [];
+    const removals = [];
+    const visit = (node)=>{
+        if (isDefineComponentCall(node)) {
+            const definition = node.arguments[0];
+            if (definition && __rspack_external_typescript.isObjectLiteralExpression(definition)) {
+                const properties = definition.properties;
+                const find = (name)=>properties.find((property)=>propertyName(property) === name);
+                const type = find('type')?.initializer;
+                const styles = find('styles');
+                const encapsulation = find('encapsulation')?.initializer;
+                if (type && __rspack_external_typescript.isIdentifier(type) && styles && __rspack_external_typescript.isArrayLiteralExpression(styles.initializer) && styles.initializer.elements.length > 0 && styles.initializer.elements.every(__rspack_external_typescript.isStringLiteralLike)) {
+                    const emulated = void 0 === encapsulation || __rspack_external_typescript.isNumericLiteral(encapsulation) && Number(encapsulation.text) === EMULATED;
+                    const scopeId = emulated ? generateComponentScopeId(type.text, fileName) : void 0;
+                    const stylesheets = styles.initializer.elements.map((element)=>{
+                        const css = fillCssVarNamespace(element.text);
+                        return scopeId ? toLynxScopedCss(css, scopeId) : css;
+                    });
+                    components.push({
+                        className: type.text,
+                        scopeId,
+                        stylesheets
+                    });
+                    const index = properties.indexOf(styles);
+                    const next = properties[index + 1];
+                    removals.push({
+                        start: styles.getStart(sourceFile),
+                        end: next ? next.getStart(sourceFile) : properties.hasTrailingComma ? properties.end : styles.end
+                    });
+                }
+            }
         }
-        writeIfChanged(scopedPath, scopedCss);
-        if (previousPath) {
-            const idx = componentStyles.imports.indexOf(previousPath);
-            if (idx >= 0) componentStyles.imports[idx] = scopedPath;
-            else componentStyles.imports.push(scopedPath);
-            if (previousPath !== scopedPath) try {
-                node_fs.unlinkSync(previousPath);
+        __rspack_external_typescript.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    let result = code;
+    for (const { start, end } of removals.sort((a, b)=>b.start - a.start))result = result.slice(0, start) + result.slice(end);
+    return {
+        code: result,
+        components
+    };
+};
+const writeModuleStylesheets = (params)=>{
+    const { basePath, cacheDir, fileName, components, onWritten } = params;
+    if (0 === components.length) return;
+    const prefix = node_path.relative(basePath, fileName).replace(/[/\\]/g, '__').replace(/\.[cm]?[jt]s$/, '');
+    const imports = [];
+    const scopes = [];
+    for (const { className, scopeId, stylesheets } of components){
+        stylesheets.forEach((css, index)=>{
+            const filePath = node_path.join(cacheDir, `${prefix}.${className}.${index}.css`);
+            let current;
+            try {
+                current = node_fs.readFileSync(filePath, 'utf-8');
             } catch  {}
-        } else componentStyles.imports.push(scopedPath);
-        componentStyles.processedFiles.set(stylesheetKey, scopedPath);
-        return '';
+            if (current !== css) {
+                node_fs.writeFileSync(filePath, css);
+                onWritten?.(filePath);
+            }
+            imports.push(filePath);
+        });
+        if (scopeId) scopes.push({
+            className,
+            scopeId
+        });
+    }
+    return {
+        imports,
+        scopes
     };
 };
 const isLynxUnknownElementMessage = (text)=>(text?.includes('is not a known element') || text?.includes("isn't a known property of")) ?? false;
@@ -723,12 +820,267 @@ const toAngularDiagnosticError = (message, severity)=>{
     error.hideStack = true;
     return error;
 };
+const PURE_CONSTRUCTORS = new Set([
+    'Map',
+    'Set',
+    'WeakMap',
+    'WeakSet'
+]);
+/**
+ * Wraps each top-level class with private or static members in a pure IIFE,
+ * so a bundler can drop the classes nothing uses.
+ *
+ * The background layer compiles to ES2015 (layers.ts), so SWC lowers private
+ * and static class fields. A class declaration keeps its own statement, but the
+ * class expressions that bundled libraries are written in (`var X = class
+ * {…}`) become a sequence that assigns each private field's `WeakMap` to an
+ * outer variable: `var X = (_a = new WeakMap(), class {…})`. The assignment
+ * counts as a side effect, so rspack keeps every such class, and every import
+ * it uses, even when nothing uses the class. The runtime's own classes are
+ * like that (it uses `#private` fields throughout), which kept Angular's
+ * renderer and change detection in the background bundle.
+ *
+ * Angular's build already wraps a class whose static members are Angular's
+ * own (`ɵcmp`, `ɵfac` and so on) in `/*#__PURE__*\/ (() => {…})()`; this does
+ * the same for the rest. Inside the IIFE, the lowering's assignments are local
+ * and the call is marked pure. A class whose static members could have side
+ * effects of their own (anything but literals, functions and new collections)
+ * is left alone.
+ *
+ * @param code - The module's code, before SWC lowers it (and, for a `.ts`
+ *   file, strips its types).
+ * @param filename - The module's path, for the parser.
+ * @returns The transformed code, or `code` itself when nothing applies.
+ */ const wrapPureClasses = (code, filename)=>{
+    if (!code.includes('class')) return code;
+    const sourceFile = __rspack_external_typescript.createSourceFile(filename, code, __rspack_external_typescript.ScriptTarget.Latest, true);
+    const edits = [];
+    const wrap = (classNode)=>{
+        edits.push({
+            start: classNode.getStart(sourceFile),
+            end: classNode.getStart(sourceFile),
+            text: '/*#__PURE__*/ (() => '
+        }, {
+            start: classNode.end,
+            end: classNode.end,
+            text: ')()'
+        });
+    };
+    for (const statement of sourceFile.statements){
+        if (__rspack_external_typescript.isVariableStatement(statement)) {
+            const [declaration, ...rest] = statement.declarationList.declarations;
+            const value = declaration?.initializer;
+            if (0 === rest.length && value && __rspack_external_typescript.isClassExpression(value) && isLoweredPureClass(value)) wrap(value);
+            continue;
+        }
+        if (__rspack_external_typescript.isClassDeclaration(statement) && statement.name && isLoweredPureClass(statement)) {
+            const modifiers = __rspack_external_typescript.getModifiers(statement) ?? [];
+            const isExport = modifiers.some((modifier)=>modifier.kind === __rspack_external_typescript.SyntaxKind.ExportKeyword);
+            const isDefault = modifiers.some((modifier)=>modifier.kind === __rspack_external_typescript.SyntaxKind.DefaultKeyword);
+            const name = statement.name.text;
+            const start = statement.getStart(sourceFile);
+            const classStart = statement.getChildren(sourceFile).find((child)=>child.kind === __rspack_external_typescript.SyntaxKind.ClassKeyword).getStart(sourceFile);
+            // `class X {}` becomes `let X = /*#__PURE__*/ (() => class X {})();`.
+            edits.push({
+                start,
+                end: classStart,
+                text: `${isExport && !isDefault ? 'export ' : ''}let ${name} = /*#__PURE__*/ (() => `
+            }, {
+                start: statement.end,
+                end: statement.end,
+                text: `)();${isDefault ? `\nexport { ${name} as default };` : ''}`
+            });
+        }
+    }
+    if (0 === edits.length) return code;
+    edits.sort((a, b)=>b.start - a.start);
+    let result = code;
+    for (const { start, end, text } of edits)result = result.slice(0, start) + text + result.slice(end);
+    return result;
+};
+const isLoweredPureClass = (node)=>{
+    if (__rspack_external_typescript.getDecorators(node)?.length) return false;
+    const heritage = node.heritageClauses?.find((clause)=>clause.token === __rspack_external_typescript.SyntaxKind.ExtendsKeyword);
+    const base = heritage?.types[0]?.expression;
+    if (base && !isPureReference(base)) return false;
+    let lowered = false;
+    for (const member of node.members){
+        if (__rspack_external_typescript.isClassStaticBlockDeclaration(member)) return false;
+        const isStatic = __rspack_external_typescript.getModifiers(member)?.some((modifier)=>modifier.kind === __rspack_external_typescript.SyntaxKind.StaticKeyword);
+        const isPrivate = member.name && __rspack_external_typescript.isPrivateIdentifier(member.name);
+        if (member.name && __rspack_external_typescript.isComputedPropertyName(member.name)) return false;
+        if (isStatic || isPrivate) lowered = true;
+        if (isStatic && __rspack_external_typescript.isPropertyDeclaration(member) && member.initializer && !isPure(member.initializer)) return false;
+    }
+    return lowered;
+};
+const isPureReference = (node)=>__rspack_external_typescript.isIdentifier(node) || __rspack_external_typescript.isPropertyAccessExpression(node) && isPureReference(node.expression);
+const isPure = (node)=>{
+    if (__rspack_external_typescript.isLiteralExpression(node) || __rspack_external_typescript.isNoSubstitutionTemplateLiteral(node) || __rspack_external_typescript.isIdentifier(node) || __rspack_external_typescript.isArrowFunction(node) || __rspack_external_typescript.isFunctionExpression(node) || node.kind === __rspack_external_typescript.SyntaxKind.TrueKeyword || node.kind === __rspack_external_typescript.SyntaxKind.FalseKeyword || node.kind === __rspack_external_typescript.SyntaxKind.NullKeyword) return true;
+    if (__rspack_external_typescript.isVoidExpression(node)) return isPure(node.expression);
+    if (__rspack_external_typescript.isParenthesizedExpression(node)) return isPure(node.expression);
+    if (__rspack_external_typescript.isPrefixUnaryExpression(node)) return isPure(node.operand);
+    if (__rspack_external_typescript.isArrayLiteralExpression(node)) return node.elements.every((element)=>!__rspack_external_typescript.isSpreadElement(element) && isPure(element));
+    if (__rspack_external_typescript.isObjectLiteralExpression(node)) return node.properties.every((property)=>__rspack_external_typescript.isPropertyAssignment(property) && !__rspack_external_typescript.isComputedPropertyName(property.name) && isPure(property.initializer));
+    return __rspack_external_typescript.isNewExpression(node) && __rspack_external_typescript.isIdentifier(node.expression) && PURE_CONSTRUCTORS.has(node.expression.text) && (node.arguments ?? []).every(isPure);
+};
 const seedCompilationSourceFiles = (compilation, sourceFileCache)=>{
     const { sourceFiles } = compilation;
     if (!(sourceFiles instanceof Map)) return false;
     for (const [fileName, sourceFile] of sourceFileCache)sourceFiles.set(fileName, sourceFile);
     return true;
 };
+const IN_PLACE_FIELDS = new Set([
+    'template',
+    'templateUrl',
+    'styles',
+    'styleUrl',
+    'styleUrls'
+]);
+const hotUpdatesEnabled = (environment)=>'web' !== environment.name && 'development' === environment.config.mode && environment.config.dev?.hmr !== false;
+const hot_updates_hash = (text)=>createHash('sha1').update(text).digest('hex').slice(0, 16);
+const isComponentDecorator = (decorator)=>{
+    const call = decorator.expression;
+    if (!__rspack_external_typescript.isCallExpression(call)) return false;
+    const callee = call.expression;
+    const name = __rspack_external_typescript.isPropertyAccessExpression(callee) ? callee.name.text : __rspack_external_typescript.isIdentifier(callee) ? callee.text : void 0;
+    return 'Component' === name;
+};
+const hotUpdateSignature = (source, fileName)=>{
+    const sourceFile = __rspack_external_typescript.createSourceFile(fileName, source, __rspack_external_typescript.ScriptTarget.Latest, true, __rspack_external_typescript.ScriptKind.TS);
+    const removals = [];
+    const visit = (node)=>{
+        if (__rspack_external_typescript.isDecorator(node) && isComponentDecorator(node)) {
+            const metadata = node.expression.arguments[0];
+            if (metadata && __rspack_external_typescript.isObjectLiteralExpression(metadata)) {
+                for (const property of metadata.properties)if (__rspack_external_typescript.isPropertyAssignment(property) && (__rspack_external_typescript.isIdentifier(property.name) || __rspack_external_typescript.isStringLiteral(property.name)) && IN_PLACE_FIELDS.has(property.name.text)) removals.push({
+                    start: property.initializer.getStart(sourceFile),
+                    end: property.initializer.end
+                });
+            }
+        }
+        __rspack_external_typescript.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    let rest = source;
+    for (const { start, end } of removals.reverse())rest = rest.slice(0, start) + rest.slice(end);
+    return hot_updates_hash(rest);
+};
+const componentClassNames = (code, fileName)=>{
+    if (!code.includes('ɵɵdefineComponent')) return [];
+    const sourceFile = __rspack_external_typescript.createSourceFile(fileName, code, __rspack_external_typescript.ScriptTarget.Latest, true, __rspack_external_typescript.ScriptKind.JS);
+    const topLevelClasses = new Set(sourceFile.statements.filter(__rspack_external_typescript.isClassDeclaration).flatMap((statement)=>statement.name ? [
+            statement.name.text
+        ] : []));
+    const names = [];
+    const visit = (node)=>{
+        if (__rspack_external_typescript.isCallExpression(node) && (__rspack_external_typescript.isPropertyAccessExpression(node.expression) ? node.expression.name.text : __rspack_external_typescript.isIdentifier(node.expression) ? node.expression.text : void 0) === 'ɵɵdefineComponent') {
+            const definition = node.arguments[0];
+            const type = definition && __rspack_external_typescript.isObjectLiteralExpression(definition) ? definition.properties.find((property)=>__rspack_external_typescript.isPropertyAssignment(property) && __rspack_external_typescript.isIdentifier(property.name) && 'type' === property.name.text)?.initializer : void 0;
+            if (type && __rspack_external_typescript.isIdentifier(type) && topLevelClasses.has(type.text) && !names.includes(type.text)) names.push(type.text);
+        }
+        __rspack_external_typescript.forEachChild(node, visit);
+    };
+    visit(sourceFile);
+    return names;
+};
+const ACCEPT = 'ɵɵangularLynxHmrAccept';
+const addHotAccept = (code, { components, signature, compiled })=>{
+    const list = `[${components.join(', ')}]`;
+    return `${code}
+import { ɵhmrAccept as ${ACCEPT} } from '@blotch/angular-lynx';
+if (import.meta.webpackHot) {
+  ${list} = ${ACCEPT}(import.meta.webpackHot, ${list}, ${JSON.stringify(signature)}, ${JSON.stringify(hot_updates_hash(compiled))});
+}
+`;
+};
+const addEntryHotAccept = (code)=>`${code}
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}
+`;
+const RUNTIME_MODULE = '@blotch/angular-lynx';
+const TAGGED_CALLS = new Set([
+    'backgroundFn',
+    'createMainThreadRef'
+]);
+const TAGGED_CLASSES = new Set([
+    'MainThreadRef'
+]);
+const transformCrossThread = (code, filename, options)=>{
+    const calls = findModuleLevelCalls(code, filename);
+    if (0 === calls.length) return code;
+    const fileKey = keyForFile(filename, options.root);
+    const edits = [];
+    calls.forEach((node, index)=>{
+        const edit = tagEdit(node, JSON.stringify(`${fileKey}:${index}`), code);
+        if (edit) edits.push(edit);
+    });
+    edits.sort((a, b)=>b.start - a.start);
+    let result = code;
+    for (const { start, end, text } of edits)result = result.slice(0, start) + text + result.slice(end);
+    return result;
+};
+const definesCrossThreadValues = (code, filename)=>findModuleLevelCalls(code, filename).length > 0;
+const findModuleLevelCalls = (code, filename)=>{
+    if (!code.includes(RUNTIME_MODULE) || !code.includes('backgroundFn') && !code.includes('MainThreadRef')) return [];
+    const sourceFile = __rspack_external_typescript.createSourceFile(filename, code, __rspack_external_typescript.ScriptTarget.Latest, true);
+    const runtime = runtimeBindings(sourceFile);
+    const calls = [];
+    const visit = (node, topLevel)=>{
+        if (topLevel && (__rspack_external_typescript.isCallExpression(node) && isRuntimeReference(node.expression, runtime, TAGGED_CALLS) || __rspack_external_typescript.isNewExpression(node) && isRuntimeReference(node.expression, runtime, TAGGED_CLASSES))) calls.push(node);
+        const childTopLevel = topLevel && !__rspack_external_typescript.isFunctionLike(node) && !__rspack_external_typescript.isClassLike(node);
+        __rspack_external_typescript.forEachChild(node, (child)=>visit(child, childTopLevel));
+    };
+    visit(sourceFile, true);
+    return calls;
+};
+const tagEdit = (node, id, code)=>{
+    const args = node.arguments ?? __rspack_external_typescript.factory.createNodeArray();
+    if (args.length > 1 || args.some(__rspack_external_typescript.isSpreadElement)) return;
+    if (1 === args.length) return {
+        start: args[0].end,
+        end: args[0].end,
+        text: `, ${id}`
+    };
+    const close = node.getEnd() - 1;
+    if (')' !== code[close]) return;
+    return {
+        start: close,
+        end: close,
+        text: `undefined, ${id}`
+    };
+};
+const runtimeBindings = (sourceFile)=>{
+    const named = new Map();
+    const namespaces = new Set();
+    for (const statement of sourceFile.statements){
+        if (!__rspack_external_typescript.isImportDeclaration(statement) || !__rspack_external_typescript.isStringLiteral(statement.moduleSpecifier) || statement.moduleSpecifier.text !== RUNTIME_MODULE) continue;
+        const bindings = statement.importClause?.namedBindings;
+        if (bindings) {
+            if (__rspack_external_typescript.isNamespaceImport(bindings)) {
+                namespaces.add(bindings.name.text);
+                continue;
+            }
+            for (const element of bindings.elements)named.set(element.name.text, (element.propertyName ?? element.name).text);
+        }
+    }
+    return {
+        named,
+        namespaces
+    };
+};
+const isRuntimeReference = (expression, runtime, exports)=>{
+    if (__rspack_external_typescript.isIdentifier(expression)) {
+        const imported = runtime.named.get(expression.text);
+        return void 0 !== imported && exports.has(imported);
+    }
+    return __rspack_external_typescript.isPropertyAccessExpression(expression) && __rspack_external_typescript.isIdentifier(expression.expression) && runtime.namespaces.has(expression.expression.text) && exports.has(expression.name.text);
+};
+const keyForFile = (filename, root)=>{
+    const relative = node_path.relative(root, filename).split(node_path.sep).join('/');
+    return createHash('sha1').update(relative).digest('hex').slice(0, 10);
+};
 const MAIN_THREAD_DIRECTIVE = 'main thread';
 const MAIN_THREAD_DIRECTIVE_ALT = 'main-thread';
 const transformWorklets = (code, filename)=>{
@@ -775,10 +1127,10 @@ const isAlreadyWrapped = (node)=>{
     return false;
 };
 const buildTransformedCode = (params)=>{
-    const { resourcePath, componentStyles, scopeInfo } = params;
+    const { resourcePath, stylesheets, root, hot } = params;
     let code = params.code;
-    if (componentStyles) {
-        const { imports } = componentStyles;
+    if (stylesheets) {
+        const { imports } = stylesheets;
         let importsString = '';
         for(let i = 0; i < imports.length; ++i){
             let relativeImport = node_path.relative(node_path.dirname(resourcePath), imports[i]);
@@ -787,8 +1139,19 @@ const buildTransformedCode = (params)=>{
         }
         code = importsString + code;
     }
-    if (scopeInfo) code += `\n;${scopeInfo.className}.ɵcmp.id = '${scopeInfo.scopeId}';\n`;
-    return transformWorklets(code, resourcePath);
+    for (const { className, scopeId } of stylesheets?.scopes ?? [])code += `\n;${className}.ɵcmp.id = '${scopeId}';\n`;
+    const transformed = transformCrossThread(transformWorklets(code, resourcePath), resourcePath, {
+        root
+    });
+    if (!hot) return transformed;
+    if (hot.entry) return addEntryHotAccept(transformed);
+    const components = componentClassNames(params.code, resourcePath);
+    if (0 === components.length) return transformed;
+    return addHotAccept(transformed, {
+        components,
+        signature: hotUpdateSignature(hot.source(), resourcePath),
+        compiled: params.code
+    });
 };
 const applyAngularConfig = (api, buildOptions)=>{
     const __dirname = node_path.dirname(fileURLToPath(import.meta.url));
@@ -805,9 +1168,9 @@ const applyAngularConfig = (api, buildOptions)=>{
         ];
         else config.source.preEntry ??= [];
         config.source.preEntry.push(node_path.resolve(__dirname, './polyfills'));
-        if (buildOptions.i18n.hasDefinedSourceLocale) config.source.preEntry.push('@angular/localize/init');
-        const polyfills = buildOptions.polyfills;
-        if (polyfills) config.source.preEntry.push(...polyfills);
+        const polyfills = buildOptions.polyfills ?? [];
+        if (buildOptions.i18n.hasDefinedSourceLocale && !polyfills.some((polyfill)=>polyfill.startsWith('@angular/localize'))) config.source.preEntry.push('@angular/localize/init');
+        config.source.preEntry.push(...polyfills);
         config.source.preEntry.push(...buildOptions.styles);
         config.source.tsconfigPath = buildOptions.tsconfig;
         config.source.define ??= {};
@@ -916,7 +1279,7 @@ const normalizeCacheOptions = (projectMetadata, workspaceRoot)=>{
             cacheEnabled = !isCI;
             break;
     }
-    const cacheBasePath = resolve(workspaceRoot, path);
+    const cacheBasePath = external_node_path_resolve(workspaceRoot, path);
     return {
         enabled: cacheEnabled,
         basePath: cacheBasePath,
@@ -1325,7 +1688,7 @@ const reportLynxDiagnostics = (diagnostics)=>{
         for (const w of cssWarnings)console.warn(`  ${w.message}`);
     }
 };
-const applyAngularRules = async (api, pluginOptions)=>{
+const applyAngularRules = async (api, pluginOptions, backgroundEntries, appEntries)=>{
     const cli = getAngularCliContext(api);
     const { basePath, workspace } = await getAngularWorkspace(cli?.workspaceRoot);
     if (pluginOptions.pages) {
@@ -1365,25 +1728,22 @@ const applyAngularRules = async (api, pluginOptions)=>{
     const tsconfig = buildOptions.tsconfig;
     const compilation = await createAngularCompilation(false, aot);
     const typeScriptFileCache = new Map();
-    const scopedCssCacheDir = node_path.join(basePath, 'node_modules', '.cache', 'angular-lynx-css');
-    node_fs.mkdirSync(scopedCssCacheDir, {
+    const componentCssCacheDir = node_path.join(basePath, 'node_modules', '.cache', 'angular-lynx-css');
+    node_fs.mkdirSync(componentCssCacheDir, {
         recursive: true
     });
-    const componentStylesCache = new Map();
-    const componentScopeIds = new Map();
+    const moduleStylesheets = new Map();
     let componentResourceDependencies = new Map();
     const writtenStylesheets = new Set();
     let knownSourceFiles = new Set();
+    const backgroundModules = new Set();
+    let angularInputs = new Set();
     let angularDiagnostics = {
         errors: [],
         warnings: []
     };
     const transformStylesheet = createTransformStylesheet({
         basePath,
-        scopedCssCacheDir,
-        componentStylesCache,
-        componentScopeIds,
-        onStylesheetWritten: (filePath)=>writtenStylesheets.add(filePath),
         componentStyleSizes
     });
     const compileAngular = async (changedFiles)=>{
@@ -1420,8 +1780,22 @@ const applyAngularRules = async (api, pluginOptions)=>{
         try {
             for (const { filename, contents } of (await compilation.emitAffectedFiles())){
                 const file = node_path.normalize(filename);
-                if (typeScriptFileCache.get(file) !== contents) changedOutputs.add(file);
-                typeScriptFileCache.set(file, contents);
+                const { code, components } = extractComponentStyles('string' == typeof contents ? contents : Buffer.from(contents).toString(), file);
+                const stylesheets = writeModuleStylesheets({
+                    basePath,
+                    cacheDir: componentCssCacheDir,
+                    fileName: file,
+                    components,
+                    onWritten: (filePath)=>writtenStylesheets.add(filePath)
+                });
+                if (stylesheets) moduleStylesheets.set(file, stylesheets);
+                else moduleStylesheets.delete(file);
+                if (typeScriptFileCache.get(file) !== code) {
+                    changedOutputs.add(file);
+                    if (definesCrossThreadValues(code, file)) backgroundModules.add(file);
+                    else backgroundModules.delete(file);
+                }
+                typeScriptFileCache.set(file, code);
             }
         } catch (error) {
             throw new Error(`Angular failed to emit compiled output for "${tsconfig}". Original error: ${error instanceof Error ? error.stack ?? error.message : String(error)}`);
@@ -1429,6 +1803,8 @@ const applyAngularRules = async (api, pluginOptions)=>{
         for (const file of writtenStylesheets)changedOutputs.add(file);
         for (const file of changedFiles ?? [])if (!node_fs.existsSync(file)) {
             typeScriptFileCache.delete(file);
+            backgroundModules.delete(file);
+            moduleStylesheets.delete(file);
             forgetComponentStyleSizes(componentStyleSizes, file);
         }
         reportLynxDiagnostics([
@@ -1438,9 +1814,16 @@ const applyAngularRules = async (api, pluginOptions)=>{
             ...scanSourcesForUnsupportedCss(fileNames)
         ]);
         angularDiagnostics = filterAngularDiagnostics(await compilation.diagnoseFiles(useTypeChecking ? DiagnosticModes.All : DiagnosticModes.All & ~DiagnosticModes.Semantic));
+        const inputFiles = result.referencedFiles.map((file)=>node_path.normalize(file));
+        angularInputs = new Set([
+            ...inputFiles,
+            ...[
+                ...componentResourceDependencies.values()
+            ].flat()
+        ]);
         return {
             changedOutputs,
-            inputFiles: result.referencedFiles.map((file)=>node_path.normalize(file))
+            inputFiles
         };
     };
     const coordinator = createAngularRebuildCoordinator({
@@ -1460,46 +1843,199 @@ const applyAngularRules = async (api, pluginOptions)=>{
     let compilationClosed = false;
     api.onBeforeEnvironmentCompile(async ({ environment, isWatch })=>{
         const compiler = compilersByEnvironment.get(environment.name);
-        const outdatedFiles = await coordinator.prepare(environment.name, [
+        const changedFiles = [
             ...compiler?.modifiedFiles ?? [],
             ...compiler?.removedFiles ?? []
-        ]);
-        if (compiler && outdatedFiles.size > 0) compiler.modifiedFiles = new Set([
+        ];
+        const outdatedFiles = await coordinator.prepare(environment.name, changedFiles);
+        const changedEntries = backgroundEntries.update(environment.name, {
+            appModules: backgroundModules,
+            watch: isWatch,
+            rebuilt: outdatedFiles.size > 0 || changedFiles.some((file)=>!angularInputs.has(node_path.normalize(file)) && !backgroundEntries.isEntryFile(file))
+        });
+        if (compiler && outdatedFiles.size + changedEntries.length > 0) compiler.modifiedFiles = new Set([
             ...compiler.modifiedFiles ?? [],
-            ...outdatedFiles
+            ...outdatedFiles,
+            ...changedEntries
         ]);
         if (!isWatch && !compilationClosed) {
             compilationClosed = true;
             await compilation.close?.();
         }
     });
-    api.transform({
-        test: /\.[cm]?[jt]sx?$/
-    }, async (context)=>{
+    const transformModule = async (context, background)=>{
+        const hot = hotUpdatesEnabled(context.environment);
         const isJs = /\.[cm]?js$/.test(context.resourcePath);
         if (isJs) {
             const contents = await javascriptTransformer.transformData(context.resourcePath, context.code, {
                 skipLinker: false,
                 sideEffects: ()=>Promise.resolve(false)
             });
+            const code = transformCrossThread(transformWorklets(Buffer.from(contents).toString(), context.resourcePath), context.resourcePath, {
+                root: api.context.rootPath
+            });
+            if (!background) return {
+                code
+            };
+            const wrapped = wrapPureClasses(code, context.resourcePath);
             return {
-                code: transformWorklets(Buffer.from(contents).toString(), context.resourcePath)
+                code: hot && backgroundEntries.isEntryFile(context.resourcePath) ? addEntryHotAccept(wrapped) : wrapped
             };
         }
         const content = typeScriptFileCache.get(context.resourcePath);
         if (!content) throw new Error(`No compiled output found for ${context.resourcePath}`);
         for (const dependency of componentResourceDependencies.get(context.resourcePath) ?? [])context.addDependency(dependency);
-        const code = 'string' == typeof content ? content : Buffer.from(content).toString();
+        const code = buildTransformedCode({
+            code: 'string' == typeof content ? content : Buffer.from(content).toString(),
+            resourcePath: context.resourcePath,
+            stylesheets: moduleStylesheets.get(context.resourcePath),
+            root: api.context.rootPath,
+            hot: hot && !background ? {
+                entry: appEntries.has(node_path.normalize(context.resourcePath)),
+                source: ()=>node_fs.readFileSync(context.resourcePath, 'utf-8')
+            } : void 0
+        });
+        if (!background) return {
+            code
+        };
         return {
-            code: buildTransformedCode({
-                code,
-                resourcePath: context.resourcePath,
-                componentStyles: componentStylesCache.get(context.resourcePath),
-                scopeInfo: componentScopeIds.get(context.resourcePath)
-            })
+            code: wrapPureClasses(Buffer.from(await javascriptTransformer.transformData(context.resourcePath, code, {
+                skipLinker: true,
+                sideEffects: ()=>Promise.resolve(false)
+            })).toString(), context.resourcePath)
         };
+    };
+    api.transform({
+        test: /\.[cm]?[jt]sx?$/,
+        issuerLayer: LAYERS.MAIN_THREAD
+    }, (context)=>transformModule(context, false));
+    api.transform({
+        test: /\.[cm]?[jt]sx?$/,
+        issuerLayer: LAYERS.BACKGROUND
+    }, (context)=>transformModule(context, true));
+};
+const background_entry_RUNTIME_MODULE = '@blotch/angular-lynx';
+const createBackgroundEntries = ({ rootPath, findLibraryModules = findLibraryBackgroundModules })=>{
+    const cacheDir = node_path.join(rootPath, 'node_modules', '.cache', 'angular-lynx', 'background-entries');
+    const files = new Map();
+    let libraryModules;
+    const getLibraryModules = ()=>libraryModules ??= findLibraryModules(rootPath);
+    let modules = new Set();
+    const rebuilds = new Map();
+    return {
+        fileFor: (environmentName, entryName)=>{
+            const file = node_path.join(cacheDir, environmentName, `${entryName}.js`);
+            let environmentFiles = files.get(environmentName);
+            if (!environmentFiles) {
+                environmentFiles = new Set();
+                files.set(environmentName, environmentFiles);
+            }
+            environmentFiles.add(file);
+            if (!node_fs.existsSync(file)) writeIfChanged(file, renderBackgroundEntry({
+                modules: []
+            }));
+            return file;
+        },
+        isBackgroundModule: (file)=>modules.has(file),
+        isEntryFile: (file)=>[
+                ...files.values()
+            ].some((environmentFiles)=>environmentFiles.has(file)),
+        update: (environmentName, { appModules, watch, rebuilt })=>{
+            modules = new Set([
+                ...getLibraryModules(),
+                ...[
+                    ...appModules
+                ].sort()
+            ]);
+            const rebuild = (rebuilds.get(environmentName) ?? 0) + (watch && rebuilt ? 1 : 0);
+            rebuilds.set(environmentName, rebuild);
+            const contents = renderBackgroundEntry({
+                modules: [
+                    ...modules
+                ],
+                rebuild: watch ? rebuild : void 0
+            });
+            return [
+                ...files.get(environmentName) ?? []
+            ].filter((file)=>writeIfChanged(file, contents));
+        }
+    };
+};
+const renderBackgroundEntry = ({ modules, rebuild })=>{
+    const lines = [
+        "// The background thread's entry, generated by",
+        '// @blotch/rsbuild-plugin-angular-lynx (see background-entry.ts there).',
+        '// Angular runs on the main thread only, so the background thread loads the',
+        '// runtime and the modules that call backgroundFn(), createMainThreadRef()',
+        '// or new MainThreadRef() at module level.',
+        `import { ɵstartBackgroundThread } from '${background_entry_RUNTIME_MODULE}';`,
+        ...modules.map((file)=>`import ${JSON.stringify(file)};`),
+        'ɵstartBackgroundThread();'
+    ];
+    if (void 0 !== rebuild) lines.push(`// Rebuild ${rebuild}`);
+    return `${lines.join('\n')}\n`;
+};
+const writeIfChanged = (file, contents)=>{
+    if (node_fs.existsSync(file) && node_fs.readFileSync(file, 'utf8') === contents) return false;
+    node_fs.mkdirSync(node_path.dirname(file), {
+        recursive: true
     });
+    node_fs.writeFileSync(file, contents);
+    return true;
+};
+const JS_FILE = /\.[cm]?js$/;
+const findLibraryBackgroundModules = (rootPath)=>{
+    const found = new Set();
+    const visited = new Set();
+    const visit = (packageDir, isApp)=>{
+        const manifest = readManifest(packageDir);
+        if (!manifest) return;
+        const names = new Set([
+            ...Object.keys(manifest.dependencies ?? {}),
+            ...Object.keys(manifest.optionalDependencies ?? {}),
+            ...Object.keys(manifest.peerDependencies ?? {}),
+            ...isApp ? Object.keys(manifest.devDependencies ?? {}) : []
+        ]);
+        names.delete(background_entry_RUNTIME_MODULE);
+        for (const name of names){
+            const dependencyDir = resolvePackageDir(name, packageDir);
+            if (!dependencyDir || visited.has(dependencyDir)) continue;
+            visited.add(dependencyDir);
+            const dependency = readManifest(dependencyDir);
+            if (dependency && dependsOnRuntime(dependency)) {
+                for (const file of listJsFiles(dependencyDir))if (definesCrossThreadValues(node_fs.readFileSync(file, 'utf8'), file)) found.add(file);
+            }
+            visit(dependencyDir, false);
+        }
+    };
+    visit(rootPath, true);
+    return [
+        ...found
+    ].sort();
+};
+const readManifest = (packageDir)=>{
+    try {
+        return JSON.parse(node_fs.readFileSync(node_path.join(packageDir, 'package.json'), 'utf8'));
+    } catch  {
+        return;
+    }
+};
+const dependsOnRuntime = (manifest)=>[
+        manifest.dependencies,
+        manifest.optionalDependencies,
+        manifest.peerDependencies
+    ].some((dependencies)=>dependencies?.[background_entry_RUNTIME_MODULE] !== void 0);
+const resolvePackageDir = (name, fromDir)=>{
+    for(let dir = fromDir;; dir = node_path.dirname(dir)){
+        const candidate = node_path.join(dir, 'node_modules', name);
+        if (node_fs.existsSync(node_path.join(candidate, 'package.json'))) return node_fs.realpathSync(candidate);
+        if (node_path.dirname(dir) === dir) return;
+    }
 };
+const listJsFiles = (packageDir)=>node_fs.readdirSync(packageDir, {
+        recursive: true,
+        encoding: 'utf8'
+    }).filter((file)=>JS_FILE.test(file) && !file.split(node_path.sep).includes('node_modules')).map((file)=>node_path.join(packageDir, file));
 const applyCSS = (api, options)=>{
     const { enableRemoveCSSScope, enableCSSSelector, enableCSSInvalidation, targetSdkVersion } = options;
     api.modifyRsbuildConfig((config, { mergeRsbuildConfig })=>mergeRsbuildConfig(config, {
@@ -1525,23 +2061,23 @@ const applyCSS = (api, options)=>{
             const mainRule = rule.oneOf(mainRuleName);
             const parentRuleEntries = rule.entries();
             removeLightningCSS(mainRule);
-            mainRule.issuerLayer(LAYERS.BACKGROUND).use(CHAIN_ID.USE.MINI_CSS_EXTRACT).loader(CssExtractRspackPlugin.loader).end();
+            mainRule.issuerLayer(LAYERS.MAIN_THREAD).use(CHAIN_ID.USE.MINI_CSS_EXTRACT).loader(CssExtractRspackPlugin.loader).end();
             const uses = mainRule.uses.entries() ?? {};
             const ruleEntries = mainRule.entries();
             const cssLoader = uses[CHAIN_ID.USE.CSS];
             if (!cssLoader) continue;
             const cssLoaderRule = cssLoader.entries();
-            const mainThreadLayerRule = chain.module.rule(`${ruleName}:${LAYERS.MAIN_THREAD}`).test(parentRuleEntries.test).merge(ruleEntries).issuerLayer(LAYERS.MAIN_THREAD);
-            if (void 0 !== parentRuleEntries.dependency) mainThreadLayerRule.merge({
+            const backgroundLayerRule = chain.module.rule(`${ruleName}:${LAYERS.BACKGROUND}`).test(parentRuleEntries.test).merge(ruleEntries).issuerLayer(LAYERS.BACKGROUND);
+            if (void 0 !== parentRuleEntries.dependency) backgroundLayerRule.merge({
                 dependency: parentRuleEntries.dependency
             });
-            mainThreadLayerRule.use(CHAIN_ID.USE.IGNORE_CSS).loader(node_path.resolve(__dirname, './loaders/ignore-css-loader')).end().uses.merge(uses).delete(CHAIN_ID.USE.MINI_CSS_EXTRACT).delete(CHAIN_ID.USE.LIGHTNINGCSS).delete(CHAIN_ID.USE.CSS).end().use(CHAIN_ID.USE.CSS).after(CHAIN_ID.USE.IGNORE_CSS).merge(cssLoaderRule).options(normalizeCssLoaderOptions(cssLoaderRule.options, true)).end();
+            backgroundLayerRule.use(CHAIN_ID.USE.IGNORE_CSS).loader(node_path.resolve(__dirname, './loaders/ignore-css-loader')).end().uses.merge(uses).delete(CHAIN_ID.USE.MINI_CSS_EXTRACT).delete(CHAIN_ID.USE.LIGHTNINGCSS).delete(CHAIN_ID.USE.CSS).end().use(CHAIN_ID.USE.CSS).after(CHAIN_ID.USE.IGNORE_CSS).merge(cssLoaderRule).options(normalizeCssLoaderOptions(cssLoaderRule.options, true)).end();
         }
         for (const ruleName of cssRules.filter((rule)=>chain.module.rules.has(rule))){
             const inlineRuleName = ruleName === CHAIN_ID.RULE.CSS ? CHAIN_ID.ONE_OF.CSS_INLINE : `${ruleName}-inline`;
             removeLightningCSS(chain.module.rule(ruleName).oneOf(inlineRuleName));
         }
-        if ('lynx' === environment.name && chain.module.rules.has(CHAIN_ID.RULE.FONT)) {
+        if (chain.module.rules.has(CHAIN_ID.RULE.FONT)) {
             const fontRule = chain.module.rule(CHAIN_ID.RULE.FONT);
             fontRule.oneOfs.clear();
             fontRule.type('asset/inline');
@@ -1597,6 +2133,21 @@ const applyGenerator = (api)=>{
         }
     });
 };
+const applyResolve = (api)=>{
+    api.modifyRspackConfig((config)=>{
+        const resolve = config.resolve ??= {};
+        const conditions = (resolve.conditionNames ?? []).filter((condition)=>'require' !== condition);
+        if (!conditions.includes('module')) conditions.splice(conditions.indexOf('import') + 1, 0, 'module');
+        resolve.byDependency = {
+            ...resolve.byDependency,
+            esm: {
+                ...resolve.byDependency?.['esm'],
+                conditionNames: conditions
+            }
+        };
+    });
+};
+const DEV_LOGS_PATH = '/__dev_logs';
 const RESET = '\x1b[0m';
 const GRAY = '\x1b[90m';
 const RED = '\x1b[31m';
@@ -1631,7 +2182,9 @@ const formatArg = (arg)=>{
     if ('string' == typeof arg) return arg;
     if ('object' == typeof arg && 'Error' === arg.__type) {
         const err = arg;
-        return err.stack || `${err.name}: ${err.message}`;
+        const header = err.message ? `${err.name}: ${err.message}` : err.name;
+        if (!err.stack) return header;
+        return err.stack.startsWith(header) ? err.stack : `${header}\n${err.stack}`;
     }
     try {
         return JSON.stringify(arg, null, 2);
@@ -1639,28 +2192,19 @@ const formatArg = (arg)=>{
         return String(arg);
     }
 };
-let logFile = null;
-let logFilePath = '';
-const getLogFilePath = ()=>logFilePath;
-const ensureLogFile = ()=>{
-    if (!logFile) {
-        logFilePath = node_path.resolve(process.cwd(), '.dev-logs');
-        logFile = node_fs.createWriteStream(logFilePath, {
-            flags: 'w'
-        });
-    }
-    return logFile;
-};
-const writeLog = (entry)=>{
-    const stream = ensureLogFile();
+const writeLog = (stream, entry)=>{
     const color = LEVEL_COLORS[entry.level] || WHITE;
     const label = LEVEL_LABELS[entry.level] || entry.level.toUpperCase();
     const time = formatTimestamp(entry.timestamp);
     const args = entry.args.map(formatArg).join(' ');
     stream.write(`${GRAY}${time}${RESET} ${color}${label}${RESET} ${args}\n`);
 };
-const createDevLoggerMiddleware = ()=>(req, res, next)=>{
-        if ('OPTIONS' === req.method && '/__dev_logs' === req.url) {
+const createDevLoggerMiddleware = (logFilePath)=>{
+    const logFile = node_fs.createWriteStream(logFilePath, {
+        flags: 'w'
+    });
+    return (req, res, next)=>{
+        if ('OPTIONS' === req.method && req.url === DEV_LOGS_PATH) {
             res.writeHead(204, {
                 'Access-Control-Allow-Origin': '*',
                 'Access-Control-Allow-Methods': 'POST, OPTIONS',
@@ -1669,7 +2213,7 @@ const createDevLoggerMiddleware = ()=>(req, res, next)=>{
             res.end();
             return;
         }
-        if ('POST' !== req.method || '/__dev_logs' !== req.url) return void next();
+        if ('POST' !== req.method || req.url !== DEV_LOGS_PATH) return void next();
         let body = '';
         req.on('data', (chunk)=>{
             body += chunk.toString();
@@ -1681,22 +2225,21 @@ const createDevLoggerMiddleware = ()=>(req, res, next)=>{
             res.end();
             try {
                 const { logs } = JSON.parse(body);
-                for (const entry of logs)writeLog(entry);
+                for (const entry of logs)writeLog(logFile, entry);
             } catch  {}
         });
     };
-const LOG_PORT_OFFSET = 1;
+};
+const FALLBACK_ORIGIN = 'http://localhost:3000';
 const applyDevLogger = (api)=>{
     api.modifyRspackConfig((rspackConfig)=>{
         if ('development' !== rspackConfig.mode) return rspackConfig;
         const publicPath = rspackConfig.output?.publicPath;
-        let logUrl = '';
+        let origin = FALLBACK_ORIGIN;
         if ('string' == typeof publicPath && publicPath.startsWith('http')) try {
-            const parsed = new URL(publicPath);
-            const logPort = Number(parsed.port || 80) + LOG_PORT_OFFSET;
-            logUrl = `${parsed.protocol}//${parsed.hostname}:${logPort}/__dev_logs`;
+            origin = new URL(publicPath).origin;
         } catch  {}
-        if (!logUrl) logUrl = `http://localhost:${3000 + LOG_PORT_OFFSET}/__dev_logs`;
+        const logUrl = `${origin}${DEV_LOGS_PATH}`;
         rspackConfig.plugins = rspackConfig.plugins || [];
         rspackConfig.plugins.push({
             name: 'lynx:angular:dev-logger-define',
@@ -1709,22 +2252,12 @@ const applyDevLogger = (api)=>{
         });
         return rspackConfig;
     });
-    api.onAfterStartDevServer(({ port })=>{
-        const logPort = port + LOG_PORT_OFFSET;
-        const middleware = createDevLoggerMiddleware();
-        const server = node_http.createServer((req, res)=>{
-            middleware(req, res, ()=>{
-                res.writeHead(404);
-                res.end();
-            });
-        });
-        server.listen(logPort, '0.0.0.0', ()=>{
-            console.log(`[dev-logger] Log server on :${logPort} → tail -f ${getLogFilePath()}`);
-        });
-        server.on('error', (err)=>{
-            if ('EADDRINUSE' === err.code) server.listen(logPort + 1, '0.0.0.0');
-            else console.warn('[dev-logger] Failed to start log server:', err.message);
-        });
+    const logFilePath = node_path.resolve(process.cwd(), '.dev-logs');
+    api.onBeforeStartDevServer(({ server })=>{
+        server.middlewares.use(createDevLoggerMiddleware(logFilePath));
+    });
+    api.onAfterStartDevServer(()=>{
+        console.log(`[dev-logger] LynxLogger output: tail -f ${logFilePath}`);
     });
 };
 const applySplitChunksRule = (api, options)=>{
@@ -1760,16 +2293,28 @@ const TAILWIND_CONFIG_FILES = [
     'tailwind.config.mjs',
     'tailwind.config.cjs'
 ];
+const isTailwind = (plugin)=>'function' == typeof plugin ? 'tailwindcss' === plugin.name : plugin?.postcssPlugin === 'tailwindcss';
 const applyTailwind = (api)=>{
     const configFile = findUp(TAILWIND_CONFIG_FILES, process.cwd());
     if (!configFile) return;
-    pluginTailwindCSS({
-        config: configFile,
-        exclude: [
-            /[\\/]node_modules[\\/]/
-        ]
-    }).setup(api);
+    api.modifyRsbuildConfig((config, { mergeRsbuildConfig })=>mergeRsbuildConfig(config, {
+            tools: {
+                postcss: ({ postcssOptions }, { addPlugins })=>{
+                    if ('object' == typeof postcssOptions && postcssOptions.plugins?.some(isTailwind)) return;
+                    const tailwindcss = createRequire(configFile)('tailwindcss');
+                    addPlugins(tailwindcss({
+                        config: configFile
+                    }));
+                }
+            }
+        }));
 };
+const DEPRECATED_OPTIONS = [
+    'enableICU',
+    'enableParallelElement',
+    'pipelineSchedulerConfig'
+];
+const deprecatedOptionsIn = (options)=>DEPRECATED_OPTIONS.filter((name)=>options?.[name] !== void 0);
 const normalizeOptions = (options)=>{
     const defaultOptions = {
         customCSSInheritanceList: void 0,
@@ -1779,20 +2324,19 @@ const normalizeOptions = (options)=>{
         enableCSSInheritance: false,
         enableCSSInvalidation: false,
         enableCSSSelector: true,
-        enableICU: false,
         enableNewGesture: true,
-        enableParallelElement: true,
         defaultDisplayLinear: true,
         enableRemoveCSSScope: false,
         enableSSR: false,
         pages: void 0,
-        pipelineSchedulerConfig: 0x00010000,
         targetSdkVersion: '3.2',
         defaultOverflowVisible: true,
         removeDescendantSelectorScope: false,
         experimental_isLazyBundle: false
     };
-    return Object.assign(defaultOptions, options);
+    const normalized = Object.assign(defaultOptions, options);
+    for (const name of DEPRECATED_OPTIONS)delete normalized[name];
+    return normalized;
 };
 const pluginAngularLynx = (options)=>({
         name: 'lynx:angular',
@@ -1801,12 +2345,18 @@ const pluginAngularLynx = (options)=>({
             ANGULAR_CLI_CONTEXT_PLUGIN_NAME
         ],
         setup: async (api)=>{
+            for (const name of deprecatedOptionsIn(options))api.logger.warn(`pluginAngularLynx(): the \`${name}\` option has no effect and will be removed in a future release. Remove it from your config.`);
             const normalizedOptions = normalizeOptions(options);
+            const backgroundEntries = createBackgroundEntries({
+                rootPath: api.context.rootPath
+            });
             applyCSS(api, normalizedOptions);
             applyTailwind(api);
-            applyEntry(api, normalizedOptions);
+            const appEntries = new Set();
+            applyEntry(api, normalizedOptions, backgroundEntries, appEntries);
             applyLayers(api);
-            const angularRules = applyAngularRules(api, normalizedOptions);
+            applyResolve(api);
+            const angularRules = applyAngularRules(api, normalizedOptions, backgroundEntries, appEntries);
             applyGenerator(api);
             applySplitChunksRule(api, normalizedOptions);
             applyDevLogger(api);