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

package/dist/layers.d.ts

@@ -1,9 +1,11 @@
 import type { RsbuildPluginAPI } from '@lynx-js/rspeedy';
 /**
- * Webpack layer names for the dual-thread build. Each entry is duplicated
- * into two webpack entries with different layers — the layer determines which
- * SWC target (ES2015 vs ES2019) and which thread-specific configuration
- * (CSS extraction vs ignore, AMD wrapping vs plain) applies to the module.
+ * Webpack layer names for the dual-thread build. Each entry is split into two
+ * webpack entries with different layers (entry.ts), and every module an entry
+ * reaches stays in its layer. The layer determines which SWC target (ES2015 vs
+ * ES2019), which `__MAIN_THREAD__` value and which thread-specific
+ * configuration (CSS extraction vs ignore, AMD wrapping vs plain) applies to
+ * the module.
  */
 export declare const LAYERS: {
     BACKGROUND: string;

package/dist/logger/dev-logger-middleware.d.ts

@@ -1,12 +1,18 @@
 import type { IncomingMessage, ServerResponse } from 'node:http';
-export declare const formatArg: (arg: unknown) => string;
-export declare const getLogFilePath: () => string;
 /**
- * Creates a connect-style middleware that handles POST /__dev_logs.
- * Other requests are passed through to the next middleware.
+ * Connect-style middleware that receives log batches from on-device and
+ * writes them to a log file. Rspeedy's TUI uses the alternate screen buffer,
+ * so stdout writes are hidden — a file + `tail -f` is more reliable.
  */
+/** The dev server path the app posts its log entries to. */
+export declare const DEV_LOGS_PATH = "/__dev_logs";
+export declare const formatArg: (arg: unknown) => string;
 /**
- * Creates a connect-style middleware that handles POST /__dev_logs.
- * Other requests are passed through to the next middleware.
+ * Creates a connect-style middleware that handles POST /__dev_logs and writes
+ * the entries to `logFilePath`. Other requests are passed through to the next
+ * middleware.
+ *
+ * The file is created, or emptied, right away: each dev server start begins a
+ * fresh log, and `tail -f` can follow it before the first entry arrives.
  */
-export declare const createDevLoggerMiddleware: () => ((req: IncomingMessage, res: ServerResponse, next: () => void) => void);
+export declare const createDevLoggerMiddleware: (logFilePath: string) => ((req: IncomingMessage, res: ServerResponse, next: () => void) => void);

package/dist/logger/dev-logger.d.ts

@@ -1,2 +1,15 @@
 import type { RsbuildPluginAPI } from '@lynx-js/rspeedy';
+/**
+ * Receives `LynxLogger` entries from the app on the dev server itself, and
+ * writes them to `.dev-logs`. Also injects __DEV_LOG_URL__ at compile time so
+ * the runtime knows where to POST logs (rspack's __webpack_public_path__ isn't
+ * accessible as a globalThis property in Lynx's JS environment).
+ *
+ * The endpoint is a middleware on the dev server, at the origin the app loads
+ * its bundle from, rather than a server of its own on a port next to it. The
+ * phone can already reach that origin, and its port is the one rspeedy
+ * resolved: a second server had to guess its port when the bundle was
+ * compiled, and when that port was taken it moved to another one while the
+ * app kept posting to the first, so the logs were lost.
+ */
 export declare const applyDevLogger: (api: RsbuildPluginAPI) => void;

package/dist/polyfills.js

@@ -40,6 +40,62 @@ if ("u" < typeof AbortController) {
     };
 }
 if ('function' != typeof Object.hasOwn) Object.hasOwn = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+const definePolyfillOverride = (proto, name, value)=>{
+    Object.defineProperty(proto, name, {
+        value,
+        writable: true,
+        configurable: true,
+        enumerable: false
+    });
+};
+const definePolyfill = (proto, name, value)=>{
+    if (proto && 'function' != typeof proto[name]) definePolyfillOverride(proto, name, value);
+};
+const relativeIndex = function(index) {
+    const length = this.length;
+    let n = Math.trunc(Number(index)) || 0;
+    if (n < 0) n += length;
+    if (n < 0 || n >= length) return;
+    return 'string' == typeof this ? this.charAt(n) : this[n];
+};
+definePolyfill(Array.prototype, 'at', relativeIndex);
+definePolyfill(String.prototype, 'at', function(index) {
+    return relativeIndex.call(String(this), index);
+});
+if ('function' == typeof Int8Array) definePolyfill(Object.getPrototypeOf(Int8Array.prototype), 'at', relativeIndex);
+definePolyfill(Array.prototype, 'findLastIndex', function(predicate, thisArg) {
+    for(let i = this.length - 1; i >= 0; i--)if (predicate.call(thisArg, this[i], i, this)) return i;
+    return -1;
+});
+definePolyfill(Array.prototype, 'findLast', function(predicate, thisArg) {
+    for(let i = this.length - 1; i >= 0; i--)if (predicate.call(thisArg, this[i], i, this)) return this[i];
+});
+definePolyfill(String.prototype, 'replaceAll', function(search, replacement) {
+    const subject = String(this);
+    if (search instanceof RegExp) {
+        if (!search.global) throw new TypeError('replaceAll must be called with a global RegExp');
+        return subject.replace(search, replacement);
+    }
+    const needle = String(search);
+    const pattern = new RegExp(needle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g');
+    return subject.replace(pattern, replacement);
+});
+if ("u" < typeof Intl) definePolyfillOverride(Number.prototype, 'toLocaleString', function(_locales, options) {
+    const value = Number(this);
+    if (Number.isNaN(value)) return 'NaN';
+    if (!Number.isFinite(value)) return value > 0 ? '∞' : '-∞';
+    const opts = options || {};
+    const min = opts.minimumFractionDigits ?? 0;
+    const max = Math.max(min, opts.maximumFractionDigits ?? Math.max(min, 3));
+    const fixed = Math.abs(value).toFixed(max);
+    const dot = fixed.indexOf('.');
+    let integer = dot < 0 ? fixed : fixed.slice(0, dot);
+    let fraction = dot < 0 ? '' : fixed.slice(dot + 1).replace(/0+$/, '');
+    while(fraction.length < min)fraction += '0';
+    if (false !== opts.useGrouping) integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    const sign = value < 0 && 0 !== Number(fixed) ? '-' : '';
+    return sign + integer + (fraction ? `.${fraction}` : '');
+});
 if ('function' != typeof Promise.allSettled) Promise.allSettled = (promises)=>Promise.all(Array.from(promises, (p)=>Promise.resolve(p).then((value)=>({
                 status: 'fulfilled',
                 value

package/dist/polyfills.test.d.ts

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

package/dist/pure-classes.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+export declare const wrapPureClasses: (code: string, filename: string) => string;

package/dist/pure-classes.test.d.ts

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

package/dist/resolve.d.ts

@@ -0,0 +1,19 @@
+import type { RsbuildPluginAPI } from '@lynx-js/rspeedy';
+/**
+ * Resolves `import`s to a package's ES module build.
+ *
+ * The Lynx build engine resolves every request with the conditions `lynx`,
+ * `import`, `require` and `browser`, whether it comes from an `import` or a
+ * `require()`. A package whose `exports` list `require` before any of the
+ * others then resolves to its CommonJS build even from an `import`. rxjs is
+ * one (`types`, `node`, `require`, `es2015`, `default`), and Angular and the
+ * runtime import it everywhere. CommonJS can't be tree-shaken, so every app
+ * carried all of rxjs on both threads, about 130 kB of each bundle, when the
+ * background thread uses `Subject` alone.
+ *
+ * So `import`s get the engine's conditions without `require`, and with
+ * `module` after `import`, as webpack's defaults have them (tslib's ES module
+ * build is behind `module`). A `require()` still resolves with all of the
+ * engine's conditions.
+ */
+export declare const applyResolve: (api: RsbuildPluginAPI) => void;

package/dist/resolve.test.d.ts

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

package/dist/split-chunks.d.ts

@@ -1,3 +1,3 @@
 import type { RsbuildPluginAPI } from '@lynx-js/rspeedy';
-import type { PluginAngularLynxOptions } from './utils/options.js';
-export declare const applySplitChunksRule: (api: RsbuildPluginAPI, options: Required<PluginAngularLynxOptions>) => void;
+import type { NormalizedPluginAngularLynxOptions } from './utils/options.js';
+export declare const applySplitChunksRule: (api: RsbuildPluginAPI, options: NormalizedPluginAngularLynxOptions) => void;

package/dist/styles/blur-view.css

@@ -0,0 +1,16 @@
+/*
+ * The look of iOS's blur-view materials on Android, where Lynx's blur-view
+ * only blurs. On Android the runtime sets these variables inline on every
+ * blur-view (see android-blur-material.ts in @blotch/angular-lynx); iOS leaves
+ * them unset, so the fallbacks apply there and change nothing.
+ *
+ * The type selector is what lets the app restyle a blur-view: it loses to any
+ * class, id or inline style, so `bg-white/30` or `shadow-none` still wins.
+ * The build adds this file to the native bundle first, so an app's own
+ * `blur-view` rule comes later and wins too. Web draws its materials itself.
+ */
+blur-view {
+  background-color: var(--angular-lynx-blur-background, transparent);
+  background-image: var(--angular-lynx-blur-background-image, none);
+  box-shadow: var(--angular-lynx-blur-box-shadow, none);
+}

package/dist/transform-module.d.ts

@@ -1,4 +1,16 @@
-import type { ComponentScopeInfo, ComponentStylesEntry } from './component-styles-cache.js';
+/**
+ * The stylesheets extracted from one module's components (see
+ * component-styles.ts), written as CSS files.
+ */
+export type ModuleStylesheets = {
+    /** The CSS files, in the order the module's components declare them. */
+    imports: string[];
+    /** Each Emulated component's class name and the scope ID its CSS uses. */
+    scopes: Array<{
+        className: string;
+        scopeId: string;
+    }>;
+};
 /**
  * Transforms the Angular-compiled JS for a single component module before rspack
  * bundles it. This is the per-module half of the AngularLynx pipeline, extracted
@@ -6,26 +18,40 @@ import type { ComponentScopeInfo, ComponentStylesEntry } from './component-style
  * string→string function (no rspack loader context, no compilation cache).
  *
  * It applies, in order:
- *   1. Prepends `import "<scoped.css>"` statements for the component's scoped
- *      stylesheets (resolved relative to the component file).
- *   2. Appends the `Component.ɵcmp.id = '<scopeId>'` assignment that ties the CSS
- *      files (whose filenames carry the same scope ID) to the runtime component.
+ *   1. Prepends `import "<component.css>"` statements for the stylesheets
+ *      extracted from the module's components (resolved relative to the
+ *      component file).
+ *   2. Appends a `Component.ɵcmp.id = '<scopeId>'` assignment for each
+ *      Emulated component, which ties its scoped CSS to its renderer.
  *   3. Runs the worklet ("main thread" directive) transform over the result.
+ *   4. Runs the cross-thread transform (cross-thread-transform.ts), which gives
+ *      module-level background functions and refs IDs that match on both
+ *      threads.
+ *   5. In a development build with hot updates (`hot` is set), makes the
+ *      module take them (hot-updates.ts): an entry module re-bootstraps the
+ *      app, and a module that defines components updates them in place when
+ *      only their templates or styles changed. Other modules pass their
+ *      updates on to the modules that import them.
  *
- * It deliberately does NOT make the bootstrap entry accept its own hot
- * updates (`module.hot.accept()`), which an earlier version did. On Lynx the
- * screen is drawn by the Angular app on the main thread, but webpack HMR only
- * runs on the background thread: nothing loads the main-thread hot-update
- * chunk. A self-accepting entry let the background thread apply the update
- * and re-bootstrap its own copy of the app, so HMR reported success and the
- * main thread kept rendering the old code until a manual reload. With no
- * module accepting, the update aborts and the Lynx HMR client
- * (`@lynx-js/webpack-dev-transport`) falls back to a full `Page.reload`, which
- * re-runs both threads with the new bundle.
+ * The hot update clients apply each update on both threads (see client/).
+ * Before they did, only the background thread took hot updates, so a
+ * self-accepting entry (which an earlier version had) re-bootstrapped the
+ * background thread's copy of the app while the main thread, which draws the
+ * screen, kept running the old code.
  */
 export declare const buildTransformedCode: (params: {
     code: string;
     resourcePath: string;
-    componentStyles: Pick<ComponentStylesEntry, "imports"> | undefined;
-    scopeInfo: ComponentScopeInfo | undefined;
+    stylesheets: ModuleStylesheets | undefined;
+    /** The project root, which cross-thread IDs are relative to. */
+    root: string;
+    /**
+     * Set in a development build with hot updates. `entry` says whether the
+     * module is one of the app's entries, and `source` reads its TypeScript
+     * source.
+     */
+    hot?: {
+        entry: boolean;
+        source: () => string;
+    };
 }) => string;

package/dist/utils/angular/component-scope-id.d.ts

@@ -5,8 +5,10 @@
  * (for "Lynx") differentiates these from Angular's default 'ng' prefix IDs,
  * preventing collisions if browser-Angular scope IDs leak into shared code.
  * This ID appears in:
- *   - CSS filenames: `...__scoped_l<hash>.css`
- *   - ɵcmp.id: patched at the end of angular.ts transform
- *   - _nghost-l<hash> class: added by EmulatedLynxRenderer.selectRootElement()
+ *   - the component's compiled CSS: `.title._ngcontent-l<hash>`,
+ *     `._nghost-l<hash>` (see component-styles.ts)
+ *   - ɵcmp.id: set by the loader (see transform-module.ts)
+ *   - the `_ngcontent-l<hash>` and `_nghost-l<hash>` classes that
+ *     EmulatedLynxRenderer adds to the component's elements
  */
 export declare const generateComponentScopeId: (className: string, containingFile: string) => string;

package/dist/utils/options.d.ts

@@ -2,14 +2,29 @@ export type PluginAngularLynxOptions = {
     customCSSInheritanceList?: string[] | undefined;
     debugInfoOutside?: boolean;
     defaultDisplayLinear?: boolean;
+    /**
+     * Make `overflow: visible` the default for every element, as on the web.
+     * With `false`, elements clip their children unless they set `overflow`,
+     * Lynx's older default.
+     */
     defaultOverflowVisible?: boolean;
     enableA11y?: boolean;
     enableAccessibilityElement?: boolean;
     enableCSSInheritance?: boolean;
     enableCSSInvalidation?: boolean;
     enableCSSSelector?: boolean;
+    /**
+     * @deprecated Has no effect, and never did: it was never passed to Lynx.
+     * Lynx's template plugin and React Lynx dropped it too. Will be removed in
+     * a future release.
+     */
     enableICU?: boolean;
     enableNewGesture?: boolean;
+    /**
+     * @deprecated Has no effect, and never did: it was never passed to Lynx.
+     * Lynx's template plugin and React Lynx dropped it too. Will be removed in
+     * a future release.
+     */
     enableParallelElement?: boolean;
     enableRemoveCSSScope?: boolean;
     enableSSR?: boolean;
@@ -23,9 +38,33 @@ export type PluginAngularLynxOptions = {
      * When omitted, uses `source.entry` from lynx.config.ts (single or multi-entry).
      */
     pages?: string[] | 'all' | undefined;
+    /**
+     * @deprecated Has no effect, and never did: it was never passed to Lynx.
+     * Lynx's template plugin and React Lynx dropped it too. Will be removed in
+     * a future release.
+     */
     pipelineSchedulerConfig?: number;
     removeDescendantSelectorScope?: boolean;
     targetSdkVersion?: string;
     experimental_isLazyBundle?: boolean;
 };
-export declare const normalizeOptions: (options?: Partial<PluginAngularLynxOptions>) => Required<PluginAngularLynxOptions>;
+/**
+ * Options the plugin still accepts, so existing `lynx.config.ts` files keep
+ * type-checking, but ignores. They were declared and given defaults but never
+ * passed to Lynx, and `@lynx-js/template-webpack-plugin` 0.9 removed them
+ * (lynx-family/lynx-stack#1705, #1800), so there's nothing to pass them to:
+ *
+ * - `enableParallelElement` and `pipelineSchedulerConfig` turn on Lynx's
+ *   experimental parallel element resolution, which React Lynx turned off for
+ *   stability.
+ * - `enableICU` binds a host-provided ICU service (`LynxServiceI18nProtocol`
+ *   on iOS, `ICURegister` on Android) into the JS context. Lynx Explorer and
+ *   the apps `ng build --platform` makes don't provide one.
+ */
+export declare const DEPRECATED_OPTIONS: readonly ["enableICU", "enableParallelElement", "pipelineSchedulerConfig"];
+type DeprecatedOption = (typeof DEPRECATED_OPTIONS)[number];
+export type NormalizedPluginAngularLynxOptions = Required<Omit<PluginAngularLynxOptions, DeprecatedOption>>;
+/** The deprecated options `options` sets, to warn about. */
+export declare const deprecatedOptionsIn: (options?: Partial<PluginAngularLynxOptions>) => DeprecatedOption[];
+export declare const normalizeOptions: (options?: Partial<PluginAngularLynxOptions>) => NormalizedPluginAngularLynxOptions;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blotch/rsbuild-plugin-angular-lynx",
-  "version": "22.2.2",
+  "version": "22.2.3",
   "description": "Rsbuild plugin for building AngularLynx applications",
   "homepage": "https://github.com/Blotch-Smart-Frames/AngularLynx#readme",
   "bugs": {
@@ -45,7 +45,6 @@
     "@lynx-js/runtime-wrapper-webpack-plugin": "^0.2.4",
     "@lynx-js/template-webpack-plugin": "^0.16.2",
     "@lynx-js/webpack-runtime-globals": "^0.0.8",
-    "rsbuild-plugin-tailwindcss": "0.2.4",
     "tiny-invariant": "^1.3.3"
   },
   "devDependencies": {

package/dist/loaders/thread-globals-loader.d.ts

@@ -1,8 +0,0 @@
-import type { Rspack } from '@rsbuild/core';
-/**
- * Prepends `globalThis["__MAIN_THREAD__"]=<value>;` to every module in the layer.
- * Replaces the BannerPlugin approach — injections happen per-module during
- * compilation instead of per-chunk after bundling.
- */
-declare const threadGlobalsLoader: (this: Rspack.LoaderContext, source: string) => string;
-export default threadGlobalsLoader;

package/dist/loaders/thread-globals-loader.js

@@ -1,6 +0,0 @@
-const threadGlobalsLoader = function(source) {
-    const options = this.getOptions();
-    return `globalThis["__MAIN_THREAD__"]=${options.isMainThread};\n${source}`;
-};
-const thread_globals_loader = threadGlobalsLoader;
-export default thread_globals_loader;