tosijs-ui 1.6.20 → 1.6.22

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 1.6.22
+
+### Fixed
+
+- **The dev server no longer leaks memory on every rebuild — update as a priority if
+  you use `tosijs-ui/site`.** `buildSite()` called `Bun.build()` in-process, and Bun's
+  bundler never returns its native arena: RSS grows monotonically per call with no
+  plateau (40 sequential builds of one entry = **+367MB**, still climbing ~5MB/build at
+  the end), while the JS heap stays flat — so it is invisible to `Bun.gc()` and to any
+  heap profiler. `devServer()` calls it once per rebuild in a process that runs for
+  days, so it compounds: a ~2-day watch session reached **136GB RSS** and took the
+  machine down with it. Filed upstream as
+  [oven-sh/bun#34053](https://github.com/oven-sh/bun/issues/34053).
+
+  The bundle now builds in a **child process** (`bun build`), whose memory the OS
+  reclaims on exit — the same 15 bundles leave the parent **+0.5MB** instead of +192MB.
+  `buildEpub()` moved to a child too (happy-dom + `@resvg/resvg-js` are both native and
+  retaining, and it runs on every rebuild), with a 120s timeout kill so a hung or failed
+  ePub warns instead of wedging the rebuild. Measured on this repo's own dev server:
+  **baseline RSS 503MB → 150MB, and per-rebuild growth 26–59MB → ~2.7MB.**
+
+  Bundle output is byte-for-byte identical; this is purely where the work runs.
+
+### Added
+
+- **Dev-server memory watchdog.** `devServer()` now samples RSS after each rebuild and,
+  past a ceiling (`memoryLimitMb` in the site config, or `DEV_MEMORY_LIMIT_MB`; default
+  4096), prints the growth-per-rebuild and exits rather than let a leak thrash the
+  machine. It distinguishes real growth (a leak — report it) from a build whose baseline
+  simply exceeds the ceiling (raise the ceiling).
+
+## 1.6.21
+
+- Memory-routed nav-toggle fix; `buildSite` `.tjs` hooks (`libraryBuild`,
+  `generateCssPreload` — see BUILD-TJS-HOOK.md); tjs-lang 0.9.0.
+
 ## 1.6.20
 
 ### Fixed

package/dist/code-editor.d.ts

@@ -1,15 +1,7 @@
-import { Component as WebComponent, ElementCreator, PartsMap } from 'tosijs';
-import type { CmHandle } from './code-editor-cm';
-interface CodeEditorParts extends PartsMap {
-    host: HTMLDivElement;
-}
-export declare class CodeEditor extends WebComponent<CodeEditorParts> {
+import { Component as WebComponent, ElementCreator } from 'tosijs';
+export declare class CodeEditor extends WebComponent {
     static preferredTagName: string;
     private source;
-    private _handle;
-    private _loadPromise;
-    private _appliedMode;
-    private _appliedDisabled;
     get value(): string;
     set value(text: string);
     private _original;
@@ -20,16 +12,16 @@ export declare class CodeEditor extends WebComponent<CodeEditorParts> {
     showDiff(on: boolean): void;
     static initAttributes: {
         mode: string;
+        theme: string;
         disabled: boolean;
     };
     role: string;
-    /** The underlying CodeMirror EditorView (undefined until loaded). */
-    get editor(): CmHandle['view'] | undefined;
-    undo(): void;
-    redo(): void;
-    canUndo(): boolean;
-    canRedo(): boolean;
-    content: () => HTMLDivElement[];
+    private _ace;
+    private _editor;
+    private _editorPromise;
+    options: any;
+    get ace(): any;
+    get editor(): any;
     static shadowStyleSpec: {
         ':host': {
             display: string;
@@ -37,20 +29,9 @@ export declare class CodeEditor extends WebComponent<CodeEditorParts> {
             width: string;
             height: string;
         };
-        '[part="host"]': {
-            height: string;
-        };
-        '.cm-editor': {
-            height: string;
-        };
-        '.cm-scroller': {
-            outline: string;
-            fontFamily: string;
-        };
     };
     onResize(): void;
     connectedCallback(): void;
     render(): void;
 }
 export declare const codeEditor: ElementCreator<CodeEditor>;
-export {};

package/dist/code-editor.js

@@ -1,12 +1,12 @@
 /*#
 # code
 
-A [CodeMirror 6](https://codemirror.net/) wrapper.
+An [ACE Editor](https://ace.c9.io/) wrapper.
 
 Sometimes, it's nice to be able to just toss a code-editor in a web-page.
 
-`<tosi-code>`'s `value` is the code it contains. Its `mode` attribute sets the
-language (`javascript`, `typescript`, `tjs`, `css`, `html`, `markdown`).
+`<tosi-code>`'s `value` is the code it contains. Its `mode` attribute sets the language, and you can further configure
+the ACE editor instance via its `options` property.
 
 ```html
 <tosi-code style="width: 100%; height: 100%" mode="css">
@@ -16,33 +16,51 @@ body {
 </tosi-code>
 ```
 
-The `<tosi-code>` element has an `editor` property that gives you its CodeMirror
-[`EditorView`](https://codemirror.net/docs/ref/#view.EditorView), and
-`undo()` / `redo()` / `canUndo()` / `canRedo()` methods for history control.
-
-CodeMirror is loaded lazily on first use — a page with no `<tosi-code>` bundles
-none of it.
+The `<tosi-code>` element has an `editor` property that gives you its ACE editor instance,
+and an `ace` property that returns the `ace` module, giving you complete access to the
+[Ace API](https://ace.c9.io/api/index.html).
 */
 /*{ "parent": "Components" }*/
-import { Component as WebComponent, elements } from 'tosijs';
+import { Component as WebComponent } from 'tosijs';
+import { scriptTag } from './via-tag';
 import { tosiDiff } from './diff';
-const { div } = elements;
+const ACE_BASE_URL = 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.2/';
+const DEFAULT_THEME = 'ace/theme/tomorrow';
+const getAce = async () => {
+    const { ace } = await scriptTag(`${ACE_BASE_URL}ace.min.js`);
+    return ace;
+};
+const makeCodeEditor = async (codeElement, mode = 'html', options = {}, theme = DEFAULT_THEME) => {
+    const ace = await getAce();
+    ace.config.set('basePath', ACE_BASE_URL);
+    const editor = ace.edit(codeElement, {
+        mode: `ace/mode/${mode}`,
+        tabSize: 2,
+        useSoftTabs: true,
+        useWorker: false,
+        // Wrap wide lines instead of scrolling horizontally; indentedSoftWrap keeps
+        // wrapped continuations aligned under the line's indent.
+        wrap: true,
+        indentedSoftWrap: true,
+        ...options,
+    });
+    editor.setTheme(theme);
+    return { ace, editor };
+};
 export class CodeEditor extends WebComponent {
     static preferredTagName = 'tosi-code';
     source = '';
-    _handle;
-    _loadPromise;
-    _appliedMode = '';
-    _appliedDisabled;
     get value() {
-        return this._handle ? this._handle.getValue() : this.source;
+        return this.editor === undefined ? this.source : this.editor.getValue();
     }
     set value(text) {
-        if (this._handle) {
-            this._handle.setValue(text);
+        if (this.editor === undefined) {
+            this.source = text;
         }
         else {
-            this.source = text;
+            this.editor.setValue(text);
+            this.editor.clearSelection();
+            this.editor.session.getUndoManager().reset();
         }
     }
     // Baseline for `showDiff()` — the version to diff the current `value` against.
@@ -54,9 +72,9 @@ export class CodeEditor extends WebComponent {
     set original(text) {
         this._original = text;
     }
-    // Diff overlay — built only on the editor's public surface (`value` + `original`)
-    // and the tosi-diff component, never the underlying editor's API, so it is
-    // editor-agnostic (this is why it survived the Ace → CodeMirror swap untouched).
+    // Diff overlay — deliberately built only on the editor's public surface
+    // (`value` + `original`) and the tosi-diff component, never the underlying
+    // editor's API, so it survives a future Ace → CodeMirror swap untouched.
     diffOverlay;
     get showingDiff() {
         return this.diffOverlay !== undefined && !this.diffOverlay.hidden;
@@ -85,27 +103,20 @@ export class CodeEditor extends WebComponent {
     }
     static initAttributes = {
         mode: 'javascript',
+        theme: DEFAULT_THEME,
         disabled: false,
     };
     role = 'code editor';
-    /** The underlying CodeMirror EditorView (undefined until loaded). */
-    get editor() {
-        return this._handle?.view;
-    }
-    // History control — so consumers use these instead of reaching into `editor`.
-    undo() {
-        this._handle?.undo();
-    }
-    redo() {
-        this._handle?.redo();
-    }
-    canUndo() {
-        return this._handle?.canUndo() ?? false;
+    _ace;
+    _editor;
+    _editorPromise;
+    options = {};
+    get ace() {
+        return this._ace;
     }
-    canRedo() {
-        return this._handle?.canRedo() ?? false;
+    get editor() {
+        return this._editor;
     }
-    content = () => [div({ part: 'host' })];
     static shadowStyleSpec = {
         ':host': {
             display: 'block',
@@ -113,49 +124,32 @@ export class CodeEditor extends WebComponent {
             width: '100%',
             height: '100%',
         },
-        '[part="host"]': { height: '100%' },
-        '.cm-editor': { height: '100%' },
-        '.cm-scroller': {
-            outline: 'none',
-            fontFamily: "Menlo, Monaco, Consolas, 'Courier New', monospace",
-        },
     };
     onResize() {
-        this._handle?.refresh();
+        if (this.editor !== undefined) {
+            this.editor.resize(true);
+        }
     }
     connectedCallback() {
         super.connectedCallback();
         if (this.source === '') {
             this.value = this.textContent !== null ? this.textContent.trim() : '';
         }
-        if (this._loadPromise === undefined) {
-            // Lazy chunk — CodeMirror only enters the bundle here, on first editor use.
-            this._loadPromise = import('./code-editor-cm').then(({ createCmEditor }) => {
-                const handle = createCmEditor(this.parts.host, {
-                    value: this.source,
-                    mode: this.mode,
-                    readOnly: this.disabled,
-                    root: this.shadowRoot ?? undefined,
-                    onChange: (value) => this.dispatchEvent(new CustomEvent('change', { detail: { value } })),
-                });
-                this._handle = handle;
-                this._appliedMode = this.mode;
-                this._appliedDisabled = this.disabled;
-                return handle;
+        if (this._editorPromise === undefined) {
+            this._editorPromise = makeCodeEditor(this, this.mode, this.options, this.theme);
+            this._editorPromise.then(({ ace, editor }) => {
+                this._ace = ace;
+                this._editor = editor;
+                editor.setValue(this.source, 1);
+                editor.clearSelection();
+                editor.session.getUndoManager().reset();
             });
         }
     }
     render() {
         super.render();
-        if (this._handle) {
-            if (this.disabled !== this._appliedDisabled) {
-                this._handle.setReadOnly(this.disabled);
-                this._appliedDisabled = this.disabled;
-            }
-            if (this.mode !== this._appliedMode) {
-                this._handle.setMode(this.mode);
-                this._appliedMode = this.mode;
-            }
+        if (this._editorPromise !== undefined) {
+            this._editorPromise.then(({ editor }) => editor.setReadOnly(this.disabled));
         }
     }
 }

package/dist/doc-browser.js

@@ -472,6 +472,11 @@ export function createDocBrowser(options) {
             }
         });
     }
+    // This instance's own sidenav. Captured from its own change event (below), so the
+    // header nav toggle drives THIS doc-browser — not `document.querySelector('tosi-
+    // sidenav')`, which returns the FIRST sidenav in the document (an OUTER instance
+    // when this one is an embedded, memory-routed browser).
+    let sidenav = null;
     const headerContent = [
         button({
             class: 'iconic',
@@ -489,8 +494,8 @@ export function createDocBrowser(options) {
                 },
             },
             onClick() {
-                const nav = document.querySelector(TosiSidenav.tagName);
-                nav.contentVisible = !nav.contentVisible;
+                if (sidenav)
+                    sidenav.contentVisible = !sidenav.contentVisible;
             },
         }, icons.menu()),
         span({ style: { flex: '0 0 10px' } }),
@@ -1027,9 +1032,12 @@ export function createDocBrowser(options) {
             flex: '1 1 auto',
             overflow: 'hidden',
         },
-        onChange() {
-            const nav = document.querySelector(TosiSidenav.tagName);
-            app.compact = nav.compact;
+        onChange(event) {
+            // Scope to the sidenav that fired — and capture it so the header toggle
+            // targets THIS instance, not the first sidenav in the document.
+            sidenav = event.target.closest(TosiSidenav.tagName);
+            if (sidenav)
+                app.compact = sidenav.compact;
         },
     }, searchField, navContent, div({
         style: {

package/dist/doc-system/site/dev-server.js

@@ -223,6 +223,57 @@ export async function devServer(config, opts = {}) {
         // never regenerated — leaving the page's /iife.js to 404 into the SPA
         // fallback (it "loads as html"). Serialize builds and coalesce bursts.
         const runBuild = opts.build ?? (() => buildSite(config));
+        // Memory watchdog.
+        //
+        // The build hands work to native code (the bundler, the HTML parser, the SVG
+        // rasterizer) which can strand memory the JS heap never sees — so nothing
+        // here can GC it away, and `heapUsed` stays flat while RSS climbs. A watch
+        // process lives for DAYS across thousands of rebuilds, so a per-rebuild leak
+        // compounds until the machine swaps itself to death. That is not
+        // hypothetical: a 2-day session reached 136GB RSS and took the machine down
+        // (Bun.build's native arena — see orchestrator.ts and oven-sh/bun#34053).
+        // Dying loudly beats being the reason a laptop overheats: the dev server is
+        // one keystroke to restart, the machine is not.
+        const rssMb = () => Math.round(process.memoryUsage().rss / 1e6);
+        const limitMb = Number(process.env.DEV_MEMORY_LIMIT_MB ?? config.memoryLimitMb ?? 4096);
+        let baselineMb = 0;
+        let rebuilds = 0;
+        let warned = false;
+        const checkMemory = () => {
+            const mb = rssMb();
+            rebuilds += 1;
+            if (!baselineMb)
+                baselineMb = mb;
+            const growth = mb - baselineMb;
+            const each = rebuilds > 1 ? growth / (rebuilds - 1) : 0;
+            if (mb >= limitMb) {
+                // Distinguish the two ways to get here, because the advice is opposite:
+                // memory that GREW across rebuilds is a leak (report it); a build that was
+                // simply born bigger than the ceiling just needs a bigger ceiling.
+                const leaking = rebuilds > 1 && each >= 1;
+                const diagnosis = leaking
+                    ? `   ${rebuilds} rebuilds, +${growth}MB since the first ` +
+                        `(~${each.toFixed(1)}MB per rebuild).\n\n` +
+                        `   Growth per rebuild should be ~0, so this is a leak, not your project\n` +
+                        `   getting bigger. Restarting reclaims it — please report the numbers\n` +
+                        `   above. If this build genuinely needs the headroom, raise the ceiling\n` +
+                        `   with DEV_MEMORY_LIMIT_MB=<mb> or memoryLimitMb in your site config.\n`
+                    : `   ${rebuilds} rebuild${rebuilds === 1 ? '' : 's'}, ` +
+                        `+${growth}MB since the first — i.e. it is not growing.\n\n` +
+                        `   This build's baseline footprint is simply above the ceiling, which is\n` +
+                        `   not a leak. Raise it with DEV_MEMORY_LIMIT_MB=<mb> or memoryLimitMb in\n` +
+                        `   your site config.\n`;
+                console.error(`\n🛑 dev server stopping: ${mb}MB RSS, over the ${limitMb}MB limit.\n\n` +
+                    diagnosis);
+                process.exit(1);
+            }
+            if (!warned && mb > limitMb * 0.6) {
+                warned = true;
+                console.warn(`⚠️  dev server at ${mb}MB RSS after ${rebuilds} rebuilds (+${growth}MB, ` +
+                    `~${each.toFixed(1)}MB each; limit ${limitMb}MB). Growth per rebuild ` +
+                    `should be ~0 — if this keeps climbing, restart and report it.`);
+            }
+        };
         let building = false;
         let pending = false;
         const rebuild = async () => {
@@ -239,6 +290,7 @@ export async function devServer(config, opts = {}) {
             }
             finally {
                 building = false;
+                checkMemory();
                 if (pending) {
                     pending = false;
                     void rebuild();

package/dist/doc-system/site/epub-cli.d.ts

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

package/dist/doc-system/site/epub-cli.js

@@ -0,0 +1,22 @@
+/*
+Standalone ePub build — the subprocess entry point for buildEpub().
+
+buildEpub() drives happy-dom (HTML→XHTML for 50+ chapters) and @resvg/resvg-js
+(cover rasterization). Both hold native/retained memory that the JS heap can't
+see, and the ePub is rebuilt on EVERY dev-server rebuild — so in-process it
+strands memory in a watch process that lives for days. Running it in a child
+hands all of it back to the OS on exit. Same reasoning as the bundle step; see
+the Bun.build note in orchestrator.ts.
+
+  bun epub-cli.ts <payload.json>     # payload = { config, opts }
+
+Build-time only. Never import this from browser code.
+*/
+import { buildEpub } from './epub';
+const payloadPath = process.argv[2];
+if (!payloadPath) {
+    console.error('epub-cli: expected a payload file path');
+    process.exit(1);
+}
+const { config, opts } = JSON.parse(await Bun.file(payloadPath).text());
+await buildEpub(config, opts ?? {});

package/dist/doc-system/site/epub.js

@@ -535,6 +535,12 @@ export async function buildEpub(config, opts = {}) {
     const output = path.resolve(opts.output ?? path.join(outDir, `${slugify(meta.title)}.epub`));
     await zipEpub(buildDir, output);
     fs.rmSync(buildDir, { recursive: true, force: true });
+    // Release the parser window: an unclosed happy-dom Window holds its whole
+    // document (every chapter parsed) plus its timers. Hygiene, not a proven win —
+    // buildEpub still grows ~1.5MB per call with this in place, so something here
+    // is still retained. buildEpub now runs in a child process (see orchestrator),
+    // which is what actually bounds it.
+    win?.close?.();
     console.log(`epub: ${output} (${chapters.length} chapters)`);
     return output;
 }

package/dist/doc-system/site/index.d.ts

@@ -1,5 +1,5 @@
 export { defineSiteConfig } from './site-config';
-export type { SiteConfig, SiteHost } from './site-config';
+export type { SiteConfig, SiteHost, LibraryBuildContext } from './site-config';
 export { buildSite } from './orchestrator';
 export { devServer } from './dev-server';
 export { extractDocs, saveDocsJSON } from './docs';