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

package/README.md

@@ -4,12 +4,14 @@ Rsbuild plugin that compiles Angular apps for the [Lynx](https://lynxjs.org/) na
 
 ## Installation
 
+> **Using the Angular CLI?** You don't need this package directly. `ng add @blotch/angular-lynx` installs [`@blotch/angular-lynx-build`](../build), whose `ng build` and `ng serve` builders depend on this plugin and add it to rspeedy's config. To pass it options, import it from there: `import { pluginAngularLynx } from '@blotch/angular-lynx-build'`.
+
+To run rspeedy directly:
+
 ```bash
 npm install @blotch/rsbuild-plugin-angular-lynx
 ```
 
-> Starting a new project? `ng add @blotch/angular-lynx` sets this up automatically.
-
 ## Usage
 
 Add the plugin to your `lynx.config.ts`:
@@ -32,7 +34,22 @@ export default defineConfig({
 - Splits each entry into **main-thread** and **background-thread** bundles for Lynx's dual-thread model
 - Bundles component stylesheets and processes CSS
 - Registers `CUSTOM_ELEMENTS_SCHEMA` so Angular accepts Lynx elements (`<view>`, `<text>`, etc.)
+- Enforces the build target's `budgets` with `ng build`'s units and messages: a warning is printed, an error fails the build
+
+## Budgets
+
+Budgets in angular.json are checked against the `lynx` environment, the bundles devices load. The `web` preview isn't checked. A Lynx app ships `.bundle` files rather than separate scripts and stylesheets, so each budget type measures:
+
+| Type                | Measures                                                           |
+| ------------------- | ------------------------------------------------------------------ |
+| `initial`           | Each entry's bundle on its own, since a Lynx page loads one bundle |
+| `bundle`            | The bundle of the entry named by `name`                            |
+| `all` / `allScript` | All bundles and scripts together (scripts ship inside the bundles) |
+| `any` / `anyScript` | Each bundle and script                                             |
+| `anyComponentStyle` | Each component stylesheet, compiled                                |
+
+Media and fonts aren't counted. Under plain `rspeedy dev` budgets are skipped: the plugin then reads angular.json's default configuration, usually production, whose budgets don't fit a development build. `ng serve` checks them when the configuration it serves has them, as Angular's dev server does.
 
 ## Documentation
 
-Full docs at [angularlynx.dev](https://angularlynx.dev).
+Full docs at [angularlynx.js.org](https://angularlynx.js.org).

package/dist/544.js

@@ -0,0 +1,21 @@
+const HMR_FETCH = 'AngularLynx.HmrFetch';
+const HMR_FETCH_RESULT = 'AngularLynx.HmrFetchResult';
+const HMR_CHECK = 'AngularLynx.HmrCheck';
+const HMR_CHECK_RESULT = 'AngularLynx.HmrCheckResult';
+const HMR_RELOAD = 'AngularLynx.HmrReload';
+const send = (context, type, message)=>{
+    context.dispatchEvent({
+        type,
+        data: JSON.stringify(message)
+    });
+};
+const listen = (context, type, listener)=>{
+    context.addEventListener(type, (event)=>listener(JSON.parse(event.data)));
+};
+const formatError = (error)=>{
+    if (!(error instanceof Error)) return String(error);
+    const heading = `${error.name}: ${error.message}`;
+    if (!error.stack) return heading;
+    return error.stack.startsWith(heading) ? error.stack : `${heading}\n${error.stack}`;
+};
+export { HMR_CHECK, HMR_CHECK_RESULT, HMR_FETCH, HMR_FETCH_RESULT, HMR_RELOAD, formatError, listen, send };

package/dist/angular-cli-context.d.ts

@@ -0,0 +1,34 @@
+import type { RsbuildPlugin, RsbuildPluginAPI } from '@lynx-js/rspeedy';
+/**
+ * What Angular CLI knows about the build that a plain rspeedy run doesn't:
+ * which project it is for, and its build target's options as Angular CLI
+ * resolved them. `ng build` and `ng serve` (@blotch/angular-lynx-build) hand
+ * it to the plugin through {@link pluginAngularCliContext}.
+ */
+export type AngularCliContext = {
+    /** The workspace root, where angular.json is. */
+    readonly workspaceRoot: string;
+    /** The angular.json project being built. */
+    readonly project: string;
+    /**
+     * The project's build target options: its base options, then each
+     * configuration selected with `-c` (or the default one), then command-line
+     * overrides, merged by Angular CLI.
+     */
+    readonly buildOptions: Readonly<Record<string, unknown>>;
+};
+export declare const ANGULAR_CLI_CONTEXT_PLUGIN_NAME = "lynx:angular-cli-context";
+/**
+ * Hands the Angular CLI context to `pluginAngularLynx()` through Rsbuild's
+ * plugin-to-plugin API (`api.expose` / `api.useExposed`). The builders add it
+ * to rspeedy's config; lynx.config.ts never lists it.
+ *
+ * It works whether the builders added `pluginAngularLynx()` themselves or
+ * lynx.config.ts lists it with options, which a constructor argument couldn't.
+ */
+export declare const pluginAngularCliContext: (context: AngularCliContext) => RsbuildPlugin;
+/**
+ * The Angular CLI context, or undefined when rspeedy runs on its own (then
+ * the plugin reads angular.json itself).
+ */
+export declare const getAngularCliContext: (api: Pick<RsbuildPluginAPI, "useExposed">) => AngularCliContext | undefined;

package/dist/angular-diagnostics.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Where an Angular diagnostic points. Mirrors the esbuild `Location` shape that
+ * `@angular/build` converts TypeScript and Angular compiler diagnostics into:
+ * `line` is 1-based and `column` 0-based.
+ */
+export type AngularDiagnosticLocation = {
+    readonly file?: string;
+    readonly line?: number;
+    readonly column?: number;
+    readonly length?: number;
+    readonly lineText?: string;
+};
+/**
+ * One diagnostic from `compilation.diagnoseFiles()`: an esbuild
+ * `PartialMessage`, whose `text` starts with the code (`TS2307: ...`,
+ * `NG8001: ...`).
+ */
+export type AngularDiagnosticMessage = {
+    readonly text?: string;
+    readonly location?: AngularDiagnosticLocation | null;
+    readonly notes?: readonly {
+        readonly text?: string;
+        readonly location?: AngularDiagnosticLocation | null;
+    }[];
+};
+/**
+ * The diagnostics of one Angular compile, normalized so callers don't have to
+ * handle `diagnoseFiles()` leaving either list out.
+ */
+export type AngularDiagnostics = {
+    readonly errors: readonly AngularDiagnosticMessage[];
+    readonly warnings: readonly AngularDiagnosticMessage[];
+};
+/**
+ * The shape rspack accepts in `compilation.errors` and `compilation.warnings`.
+ * rsbuild prints `file` as the error's `File:` line, so a `path:line:column`
+ * value makes it clickable in terminals and editors.
+ */
+export type AngularDiagnosticError = Error & {
+    file?: string;
+    hideStack: boolean;
+};
+/**
+ * Keeps only the diagnostics a user can act on. Angular's template checker
+ * doesn't know Lynx's native elements and their attributes, so it reports
+ * them as unknown even though the renderer supports them.
+ */
+export declare const filterAngularDiagnostics: (diagnostics: {
+    errors?: readonly AngularDiagnosticMessage[];
+    warnings?: readonly AngularDiagnosticMessage[];
+}) => AngularDiagnostics;
+/**
+ * Converts an Angular diagnostic into an error rspack can report. Pushing it
+ * into `compilation.errors` is what makes `rspeedy build` exit non-zero (and
+ * the dev server show it) the way `ng build` and `ng serve` do; printing it
+ * with `console.log` let builds with type errors succeed and ship.
+ */
+export declare const toAngularDiagnosticError: (message: AngularDiagnosticMessage, severity: "error" | "warning") => AngularDiagnosticError;

package/dist/angular-diagnostics.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/angular-rebuild-coordinator.d.ts

@@ -18,7 +18,7 @@ export type AngularCompileResult = {
     /**
      * Every file the compilation read: program sources plus component
      * resources such as external templates and stylesheets. Changes to any
-     * other non-TypeScript file (global CSS, assets, the scoped-CSS cache this
+     * other non-TypeScript file (global CSS, assets, the component-CSS cache this
      * plugin writes itself) can't affect Angular's output, so they don't
      * trigger a recompile.
      */

package/dist/angular.d.ts

@@ -1,5 +1,6 @@
 import type { RsbuildPluginAPI } from '@lynx-js/rspeedy';
-import type { PluginAngularLynxOptions } from './utils/options.js';
+import type { BackgroundEntries } from './background-entry.js';
+import type { NormalizedPluginAngularLynxOptions } from './utils/options.js';
 /**
  * Wires Angular's AOT/JIT compilation pipeline into the rsbuild/rspack build
  * graph. This is the heart of the AngularLynx build — it bridges three worlds:
@@ -21,11 +22,12 @@ import type { PluginAngularLynxOptions } from './utils/options.js';
  *     → compilation.update (rebuilds only: invalidate the changed files)
  *     → compilation.initialize (Angular AOT walk + transformStylesheet callback)
  *     → emitAffectedFiles (refreshes typeScriptFileCache)
- *     → diagnoseFiles (filtered to suppress Lynx-element false positives)
+ *     → diagnoseFiles (filtered to suppress Lynx-element false positives, then
+ *       reported as rspack errors/warnings so type errors fail the build)
  *     → rspack rebuilds the changed files plus any whose compiled output changed
  *
  * Then for each module request the `api.transform` hook delegates the per-module
  * string transform (import-prepend + ɵcmp.id + worklet) to
  * `buildTransformedCode` in transform-module.ts.
  */
-export declare const applyAngularRules: (api: RsbuildPluginAPI, pluginOptions: Required<PluginAngularLynxOptions>) => Promise<void>;
+export declare const applyAngularRules: (api: RsbuildPluginAPI, pluginOptions: NormalizedPluginAngularLynxOptions, backgroundEntries: BackgroundEntries, appEntries: ReadonlySet<string>) => Promise<void>;

package/dist/background-entry.d.ts

@@ -0,0 +1,96 @@
+/**
+ * The background half of each bundle starts from a module this file
+ * generates, not from the app's own entry.
+ *
+ * Angular runs on the main thread only (issue #81). The background thread
+ * needs three things from the bundle:
+ *
+ * - **the runtime**, whose module-level code installs the background half of
+ *   each bridge (the call relay, the log relay, the exposure bridge and so on);
+ * - **each module-level `backgroundFn()`**, so the function registers there;
+ * - **each module-level `createMainThreadRef()` / `new MainThreadRef()`**, so a
+ *   ref the main thread passes to a background function arrives as the
+ *   background thread's copy.
+ *
+ * Starting from `main.ts` reached every component, the router and Angular
+ * itself, which the background thread evaluated on every launch and never ran
+ * (issue #84). The generated entry imports the runtime and the modules that
+ * make those calls, and nothing else. They load at startup, so a background
+ * function in a lazy route's file is there before the route is.
+ *
+ * The modules are the app's own files, found in Angular's compiled output, and
+ * the files of any installed package that depends on the runtime (see
+ * {@link findLibraryBackgroundModules}).
+ */
+export type BackgroundEntries = {
+    /**
+     * The file the background half of `entryName` starts from, in
+     * `environmentName`. Created with the runtime alone if it doesn't exist yet,
+     * so the entry resolves even before the first compile has written it.
+     */
+    fileFor: (environmentName: string, entryName: string) => string;
+    /**
+     * Whether `file` is one of the background entry's modules: a file it
+     * imports. entry.ts marks them as having side effects in the background
+     * layer, because the entry imports them only for their side effects and a
+     * package's `"sideEffects": false` would otherwise drop them.
+     */
+    isBackgroundModule: (file: string) => boolean;
+    /** Whether `file` is one of the generated entries. */
+    isEntryFile: (file: string) => boolean;
+    /**
+     * Writes `environmentName`'s entry files for the compile about to start.
+     *
+     * @returns The files whose contents changed. The caller adds them to the
+     *   compiler's `modifiedFiles`, so rspack rebuilds them in this compile.
+     */
+    update: (environmentName: string, options: {
+        /** The app's modules that define a cross-thread value. */
+        appModules: Iterable<string>;
+        /**
+         * Set for a watch build's compiles. The entry then also changes on every
+         * compile with {@link rebuilt} set: see {@link renderBackgroundEntry}.
+         */
+        watch: boolean;
+        /** Whether something the bundle is built from changed. */
+        rebuilt: boolean;
+    }) => string[];
+};
+export declare const createBackgroundEntries: ({ rootPath, findLibraryModules, }: {
+    rootPath: string;
+    findLibraryModules?: (rootPath: string) => string[];
+}) => BackgroundEntries;
+/**
+ * The background entry's source.
+ *
+ * @param options.modules - The files to import, in order.
+ * @param options.rebuild - In a watch build, the number of compiles so far
+ *   that rebuilt something. It's written into the entry so that every such
+ *   compile changes the background bundle. The main thread doesn't run
+ *   webpack's HMR runtime (issue #9), so a hot update only reaches the
+ *   background thread, and an edit to a component would otherwise give it
+ *   nothing to apply: the HMR client would report the app up to date and keep
+ *   showing the old screen. With the entry changed, the update reaches a
+ *   module that doesn't accept it, so it aborts, and the client falls back to
+ *   a full reload, as it did when the background bundle held the whole app.
+ */
+export declare const renderBackgroundEntry: ({ modules, rebuild, }: {
+    modules: readonly string[];
+    rebuild?: number;
+}) => string;
+/**
+ * The files in installed packages that define a cross-thread value at module
+ * level, such as a UI library with its own background functions.
+ *
+ * A package can only call the runtime's functions if it depends on the runtime,
+ * so only the packages whose `package.json` lists `@blotch/angular-lynx` (as a
+ * dependency, peer dependency or optional dependency) are read: every one of
+ * their JavaScript files, outside nested `node_modules` folders. Packages are
+ * found by walking the dependencies from the app's `package.json`, resolved as
+ * Node does, so a nested or hoisted copy is found where the app's build
+ * finds it.
+ *
+ * @param rootPath - The app's directory, which holds its `package.json`.
+ * @returns The files' real paths, sorted.
+ */
+export declare const findLibraryBackgroundModules: (rootPath: string) => string[];

package/dist/background-entry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/budgets-plugin.d.ts

@@ -0,0 +1,64 @@
+import type { RsbuildPluginAPI, Rspack } from '@lynx-js/rspeedy';
+import { type BudgetAsset, type BudgetFailure, type ComponentStyleSize } from './utils/angular/budgets.js';
+import type { Budget } from './utils/angular/options.js';
+/** The shape rspack accepts in `compilation.errors` and `compilation.warnings`. */
+export type BudgetError = Error & {
+    hideStack: boolean;
+};
+/**
+ * Turns a budget failure into an rspack error or warning. As an error it
+ * fails `ng build` / `rspeedy build`, like a budget error fails `ng build`
+ * for a web app; as a warning it's printed and the build succeeds.
+ */
+export declare const toBudgetError: (failure: BudgetFailure) => BudgetError;
+/**
+ * The entry (page) a Lynx template was built from, or undefined for a lazy
+ * bundle. A template covers an entry and its main-thread twin; lazy bundles
+ * cover async chunk groups, which aren't entry points.
+ */
+export declare const bundleEntryName: (chunkGroups: readonly {
+    readonly name?: string | null;
+}[], entrypoints: {
+    has: (name: string) => boolean;
+}) => string | undefined;
+/**
+ * The emitted files budgets count: the bundles and any scripts left outside
+ * them. Leaves out source maps and hot updates (as Angular does), media and
+ * fonts, and the build's intermediate directory, where the Lynx template
+ * plugin writes debug copies of what it encoded into the bundles.
+ */
+export declare const collectBudgetAssets: (assets: readonly {
+    readonly name: string;
+    readonly source: {
+        size: () => number;
+    };
+    readonly info: {
+        readonly hotModuleReplacement?: boolean;
+    };
+}[], entryBundles: ReadonlyMap<string, string>, intermediateDir: string | undefined) => BudgetAsset[];
+export type AngularBudgetsPluginOptions = {
+    readonly budgets: readonly Budget[];
+    /** Kept current by the Angular compile, which runs before each compilation. */
+    readonly componentStyleSizes: ReadonlyMap<string, ComponentStyleSize>;
+    readonly intermediateDir: string | undefined;
+};
+/**
+ * Checks the budgets after every compilation of the `lynx` environment,
+ * including watch rebuilds, once its bundles are final.
+ */
+export declare class AngularBudgetsPlugin {
+    #private;
+    constructor(options: AngularBudgetsPluginOptions);
+    apply(compiler: Rspack.Compiler): void;
+}
+/**
+ * Enforces angular.json's `budgets` on the `lynx` environment, the bundles
+ * devices load. The `web` environment only builds a browser preview, so its
+ * sizes say nothing about the app.
+ */
+export declare const applyBudgets: (api: Pick<RsbuildPluginAPI, "context" | "modifyBundlerChain" | "useExposed">, { budgets, componentStyleSizes, underAngularCli, }: {
+    readonly budgets: readonly Budget[];
+    readonly componentStyleSizes: ReadonlyMap<string, ComponentStyleSize>;
+    /** Whether `ng build` / `ng serve` resolved the build options. */
+    readonly underAngularCli: boolean;
+}) => void;

package/dist/budgets-plugin.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/background-hot-updates.d.ts

@@ -0,0 +1,50 @@
+import { type HotApi, type ThreadContext } from './hmr-protocol.js';
+/**
+ * How long the background thread waits for the main thread to apply an
+ * update. A main thread without the client, or one stuck in a module that
+ * never returns, would otherwise block every later update.
+ */
+export declare const MAIN_THREAD_TIMEOUT_MS = 60000;
+type Log = (level: 'info' | 'warning', message: string) => void;
+export type BackgroundHotUpdatesOptions = {
+    /** The background thread's `import.meta.webpackHot`. */
+    hot: HotApi;
+    /** Where the dev transport announces each new build's hash. */
+    emitter: {
+        on(event: 'webpackHotUpdate', listener: (hash: string) => void): void;
+    };
+    /** The hash of the code the background thread runs, `__webpack_hash__`. */
+    currentHash: () => string;
+    /** Lynx's `getCoreContext()`, which reaches the main thread. */
+    context: ThreadContext;
+    fetch: (url: string) => Promise<{
+        status: number;
+        text(): Promise<string>;
+    }>;
+    /** Reloads the whole page, through Lynx DevTool. */
+    reloadPage: () => void;
+    log: Log;
+    logApplyResult: (updatedModules: (string | number)[], renewedModules: (string | number)[]) => void;
+};
+/**
+ * Applies hot updates on both threads, replacing `@rspack/core/hot/dev-server`
+ * on the background thread.
+ *
+ * Webpack's hot update client runs on the background thread, where the dev
+ * server's connection is, and only updates the code there. But on Lynx the
+ * app runs on the main thread, which has no network access of its own (its
+ * `fetch` is the runtime's relay to this thread). So for each new
+ * build this:
+ *
+ * 1. applies the update on the background thread, which registers the
+ *    updated modules' background functions again;
+ * 2. asks the main thread to apply its own half of the update (see
+ *    main-thread-hot-updates.ts), and fetches the files it needs for it;
+ * 3. falls back to a full page reload if either thread can't apply it, so the
+ *    screen never keeps showing old code.
+ *
+ * The background thread goes first so that a background function the updated
+ * app calls straight away is already the new one.
+ */
+export declare const startBackgroundHotUpdates: ({ hot, emitter, currentHash, context, fetch, reloadPage, log, logApplyResult, }: BackgroundHotUpdatesOptions) => void;
+export {};

package/dist/client/background-hot-updates.js

@@ -0,0 +1,77 @@
+import { HMR_CHECK_RESULT, HMR_FETCH_RESULT, HMR_CHECK, listen, HMR_FETCH, HMR_RELOAD, send, formatError } from "../544.js";
+const MAIN_THREAD_TIMEOUT_MS = 60000;
+const startBackgroundHotUpdates = ({ hot, emitter, currentHash, context, fetch, reloadPage, log, logApplyResult })=>{
+    listen(context, HMR_FETCH, ({ id, url })=>{
+        fetch(url).then(async (response)=>({
+                id,
+                status: response.status,
+                text: await response.text()
+            })).catch((error)=>({
+                id,
+                error: formatError(error)
+            })).then((result)=>send(context, HMR_FETCH_RESULT, result));
+    });
+    const checks = new Map();
+    let nextCheckId = 0;
+    listen(context, HMR_CHECK_RESULT, (result)=>{
+        checks.get(result.id)?.(result);
+    });
+    const checkMainThread = (hash)=>{
+        const id = nextCheckId++;
+        return new Promise((resolve)=>{
+            const timer = setTimeout(()=>finish({
+                    id,
+                    ok: false,
+                    reason: `The main thread didn't apply the update within ${MAIN_THREAD_TIMEOUT_MS / 1000}s.`
+                }), MAIN_THREAD_TIMEOUT_MS);
+            const finish = (result)=>{
+                clearTimeout(timer);
+                checks.delete(id);
+                resolve(result);
+            };
+            checks.set(id, finish);
+            send(context, HMR_CHECK, {
+                id,
+                hash
+            });
+        });
+    };
+    const fullReload = (reason)=>{
+        log('warning', '[HMR] Cannot apply update. Need to do a full reload!');
+        log('warning', `[HMR] ${reason}`);
+        reloadPage();
+    };
+    listen(context, HMR_RELOAD, ({ reason })=>fullReload(`Main thread: ${reason}`));
+    let lastHash = '';
+    let checking = false;
+    const upToDate = ()=>lastHash.includes(currentHash());
+    const check = async ()=>{
+        const hash = lastHash;
+        let updatedModules;
+        try {
+            updatedModules = await hot.check(true);
+        } catch (error) {
+            const status = hot.status();
+            if ('abort' === status || 'fail' === status) fullReload(formatError(error));
+            else log('warning', `[HMR] Update failed: ${formatError(error)}`);
+            return;
+        }
+        if (!updatedModules) return void fullReload('Cannot find update.');
+        const mainThread = await checkMainThread(hash);
+        if (!mainThread.ok) return void fullReload(`Main thread: ${mainThread.reason}`);
+        logApplyResult(updatedModules, updatedModules);
+        if (!upToDate()) return void await check();
+        log('info', '[HMR] App is up to date.');
+    };
+    emitter.on('webpackHotUpdate', (hash)=>{
+        lastHash = hash;
+        if (upToDate() || checking || 'idle' !== hot.status()) return;
+        log('info', '[HMR] Checking for updates on the server...');
+        checking = true;
+        check().finally(()=>{
+            checking = false;
+        });
+    });
+    log('info', '[HMR] Waiting for update signal from WDS...');
+};
+export { MAIN_THREAD_TIMEOUT_MS, startBackgroundHotUpdates };

package/dist/client/background-hot-updates.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/css-hot-update.cjs

@@ -0,0 +1,9 @@
+'use strict';
+const { createCssHotUpdate } = require('./css-hot-update.js');
+module.exports = createCssHotUpdate({
+    isMainThread: __MAIN_THREAD__,
+    lynx,
+    publicPath: __webpack_require__.p,
+    cssHotUpdateList: ()=>__webpack_require__.cssHotUpdateList,
+    flushElementTree: ()=>__FlushElementTree()
+});

package/dist/client/css-hot-update.d.ts

@@ -0,0 +1,44 @@
+import { type ThreadContext } from './hmr-protocol.js';
+/** The CSS hot update file css-extract writes for each chunk. */
+type CssHotUpdate = {
+    /** The chunk's whole stylesheet, encoded as Lynx's CSS binary in base64. */
+    content?: string;
+    /** For each CSS ID, the IDs of the stylesheets that import it. */
+    deps: Record<string, string[]>;
+};
+export type CssHotUpdateOptions = {
+    isMainThread: boolean;
+    lynx: {
+        requireModuleAsync?: (url: string, callback: (error: Error | null, update?: CssHotUpdate) => void) => void;
+        getDevtool?: () => {
+            replaceStyleSheetByIdWithBase64?: (id: number, base64: string) => void;
+        } | undefined;
+        getJSContext(): ThreadContext;
+    };
+    /** `__webpack_require__.p`, the dev server's address. */
+    publicPath: string;
+    /** `__webpack_require__.cssHotUpdateList`: each chunk's CSS update file. */
+    cssHotUpdateList: () => [chunkName: string, path: string][] | null;
+    flushElementTree: () => void;
+};
+/**
+ * Applies a stylesheet edit on the main thread. It replaces css-extract's
+ * `runtime/hotModuleReplacement.cjs` (entry.ts swaps the module), which every
+ * CSS module calls when a hot update replaces it.
+ *
+ * css-extract's version runs on the background thread: it loads the new
+ * stylesheet there and sends it to a main-thread listener React Lynx adds. In
+ * an AngularLynx app the main thread takes its own hot updates (see
+ * main-thread-hot-updates.ts), which include the CSS modules, so the stylesheet
+ * is loaded and applied there, with the same Lynx call React Lynx's listener
+ * makes. On the background thread the CSS modules do nothing.
+ *
+ * Lynx can't apply a stylesheet if `replaceStyleSheetByIdWithBase64` is
+ * missing, or the file can't be loaded. Then it asks the background thread to
+ * reload the page, rather than leave the old styles on screen.
+ *
+ * @returns css-extract's `update(moduleId, options, cssId)`, which returns the
+ *   function each CSS module calls when it's replaced.
+ */
+export declare const createCssHotUpdate: ({ isMainThread, lynx, publicPath, cssHotUpdateList, flushElementTree, }: CssHotUpdateOptions) => (_moduleId: unknown, _options: unknown, cssId?: string) => (() => void);
+export {};

package/dist/client/css-hot-update.js

@@ -0,0 +1,42 @@
+import { send, HMR_RELOAD, formatError } from "../544.js";
+const createCssHotUpdate = ({ isMainThread, lynx, publicPath, cssHotUpdateList, flushElementTree })=>{
+    const fail = (reason)=>send(lynx.getJSContext(), HMR_RELOAD, {
+            reason: `Can't apply the stylesheet update: ${reason}`
+        });
+    const apply = (update, ids)=>{
+        const { content } = update;
+        if (!content) return;
+        const devtool = lynx.getDevtool?.();
+        if (!devtool?.replaceStyleSheetByIdWithBase64) return void fail('lynx.getDevtool().replaceStyleSheetByIdWithBase64 is missing.');
+        try {
+            for (const id of ids){
+                for (const dependent of update.deps[id] ?? [])devtool.replaceStyleSheetByIdWithBase64(Number(dependent), content);
+                devtool.replaceStyleSheetByIdWithBase64(id, content);
+            }
+            flushElementTree();
+        } catch (error) {
+            fail(formatError(error));
+        }
+    };
+    const pending = new Set();
+    let timer;
+    const updateStyles = ()=>{
+        const ids = new Set(pending);
+        pending.clear();
+        timer = void 0;
+        for (const [, path] of cssHotUpdateList() ?? [])lynx.requireModuleAsync?.(publicPath + path, (error, update)=>{
+            if (error) return void fail(formatError(error));
+            apply(update, ids);
+        });
+    };
+    return (_moduleId, _options, cssId)=>{
+        if (!isMainThread) return ()=>{};
+        const id = Number(cssId || 0);
+        return ()=>{
+            pending.add(id);
+            if (void 0 !== timer) clearTimeout(timer);
+            timer = setTimeout(updateStyles, 50);
+        };
+    };
+};
+export { createCssHotUpdate };

package/dist/client/css-hot-update.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/hmr-background.js

@@ -0,0 +1,16 @@
+import { reloadPage } from '@lynx-js/webpack-dev-transport/reloadApp';
+import { emitter } from '@rspack/core/hot/emitter.js';
+import { logApplyResult } from '@rspack/core/hot/log-apply-result.js';
+import { log } from '@rspack/core/hot/log.js';
+import { startBackgroundHotUpdates } from './background-hot-updates.js';
+if (!import.meta.webpackHot) throw new Error('[HMR] Hot Module Replacement is disabled.');
+startBackgroundHotUpdates({
+    hot: import.meta.webpackHot,
+    emitter,
+    currentHash: ()=>__webpack_hash__,
+    context: lynx.getCoreContext(),
+    fetch: (url)=>fetch(url),
+    reloadPage,
+    log,
+    logApplyResult
+});

package/dist/client/hmr-main-thread.js

@@ -0,0 +1,9 @@
+import { startMainThreadHotUpdates } from './main-thread-hot-updates.js';
+if (!import.meta.webpackHot) throw new Error('[HMR] Hot Module Replacement is disabled.');
+startMainThreadHotUpdates({
+    hot: import.meta.webpackHot,
+    lynx,
+    context: lynx.getJSContext(),
+    currentBootstrap: ()=>globalThis.__LYNX_ANGULAR_BOOTSTRAP__,
+    appRunning: ()=>void 0 !== globalThis.__LYNX_ANGULAR_APP_REF__
+});