tosijs-ui 1.6.22 → 1.7.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,90 @@
 # Changelog
 
+## 1.7.0-beta.1
+
+**A beta, published under npm's `beta` tag** — `latest` stays on 1.6.x. A prerelease is not
+matched by `^1.6.x` (or by `^1.7.0`), so nobody is auto-upgraded into the editor swap; you get
+this only by asking for it:
+
+```
+npm i tosijs-ui@beta        # or tosijs-ui@1.7.0-beta.1
+```
+
+The code editor moved from **ACE to [CodeMirror 6](https://codemirror.net/)**, `tjs`
+became a first-class editing mode with runtime-value autocomplete, and the doc-site
+builder gained the hooks that unblock the tosijs 2.0 TJS port.
+
+**Known cost, deliberate for now.** `dist/iife.js` carries CodeMirror (bun's IIFE format cannot
+code-split), and generated doc pages hide the body until hydration — so on a cheap phone the
+blank-screen window is ~4.5s vs ~3.7s without the editor. The fix is to pre-render the page
+chrome so hydration is additive and the gate can go (then the bundle gates *editing*, not
+*reading*); that's the next doc-system release, not this one. Measurements in `TODO.md`.
+
+### Breaking
+
+`<tosi-code>` (ACE → CodeMirror 6). Each removed member now **warns once and no-ops**
+rather than failing silently, but they are gone:
+
+| removed | replacement |
+| --- | --- |
+| `theme` attribute | style the editor with `--code-bg` / `--text-color` |
+| `options` property (ACE-shaped) | configure via `editor` (a CodeMirror `EditorView`) |
+| `ace` getter | there is no ACE global; use `editor` |
+| `editor.session.getUndoManager()` | `undo()` / `redo()` / `canUndo()` / `canRedo()` |
+
+**`editor` changed type in place** — it was an ACE `Editor`, it is now a CodeMirror
+[`EditorView`](https://codemirror.net/docs/ref/#view.EditorView). A grep for the
+removed names will not catch this; any code reaching into `editor` needs revisiting.
+
+Unchanged: `value`, `original` / `showDiff()`, `mode`, `disabled`.
+
+**Semver stance (deliberate, not an oversight).** This library breaks in minors before 2.0 —
+**`2.0` is reserved for the tjs-native rewrite**, not for this. So `^1.6.x` resolves `1.7.0` and
+existing consumers pick this up on their next install.
+
+**If you use `<tosi-code>`, pin `~1.6` and upgrade deliberately.** Everything else in the library
+is untouched, so a consumer of (say) `<tosi-rating>` can take 1.7 without changes — but note it
+now installs 12 `@codemirror/*` runtime dependencies where the library previously had none.
+
+The trap to know about: **`editor` changed type in place** and no shim can catch it. The removed
+`theme` / `options` / `ace` members warn once and no-op, but `el.editor` still exists — it is
+simply a CodeMirror `EditorView` now, so `el.editor.session.*` is a runtime `TypeError`. A grep
+for the removed names will not find it.
+
+### Added
+
+- `<tosi-code>` gained a `change` event (`event.detail.value`), `undo()` / `redo()` /
+  `canUndo()` / `canRedo()`, and `tjs` / `ajs` modes.
+- **Runtime-value autocomplete** in `tjs` mode: set `tjsAutocomplete` and completion
+  suggests the *real members of live values* — including tosijs proxy members that no
+  static analysis can see. Live examples wire their own executed scope into it, so
+  `const { app } = tosi(…)` gives real `app.` / `app.items.` completions.
+- Inline **WebAssembly** live examples (tjs `wasm {}` blocks).
+- `buildSite`: `libraryBuild` and `generateCssPreload` hooks, for projects whose
+  library sources are native `.tjs` (this is what the tosijs 2.0 TJS port needs).
+  **These actually shipped in 1.6.21** — they are listed here only because they landed on this
+  branch first. Nothing needs 1.7 to use them.
+
+### Changed
+
+- **`dist/iife.js` is ~384KB gzipped, up from ~120KB.** Bun's IIFE format cannot
+  code-split, so CodeMirror is inlined there. (Under a bundler/ESM it stays a lazy
+  chunk — a page with no `<tosi-code>` doesn't load it.) This is deliberate: the
+  in-page editor and its save-to-source flow are the point of the doc-system, so the
+  IIFE carries the editor.
+- The library now has runtime `dependencies` (12 `@codemirror/*` packages) where it
+  previously had none. They can't be optional peers: the tjs CodeMirror extension must
+  share this exact `@codemirror/state` instance or it silently no-ops.
+- `tjs-lang` peer: `^0.8.7` → `^0.9.1`.
+
+### Fixed
+
+- `showDiff()` rendered nothing. Giving `<tosi-code>` its own `content` displaced the
+  default `<slot>` that used to project the light-DOM diff overlay, so the overlay was
+  invisible (0×0) while `showingDiff` still reported `true`. It now renders inside the
+  shadow root. This is the review step of the doc-system's edit-and-save-to-source
+  flow, so a blank diff meant saving changes you never saw.
+
 ## 1.6.22
 
 ### Fixed
@@ -33,8 +118,19 @@
 
 ## 1.6.21
 
-- Memory-routed nav-toggle fix; `buildSite` `.tjs` hooks (`libraryBuild`,
-  `generateCssPreload` — see BUILD-TJS-HOOK.md); tjs-lang 0.9.0.
+### Fixed
+
+- Doc-system nav-toggle in `routing: 'memory'` mode drove the *outer* doc-browser
+  instance instead of its own (now scoped per-instance).
+
+### Added
+
+- `buildSite` `libraryBuild` + `generateCssPreload` hooks (also in 1.7.0 above), so a
+  project whose library source is native `.tjs` can build through the doc-site pipeline.
+
+### Changed
+
+- `tjs-lang` peer: `^0.8.7` → `^0.9.0`.
 
 ## 1.6.20
 

package/dist/code-editor-cm.d.ts

@@ -0,0 +1,48 @@
+import { EditorView } from '@codemirror/view';
+import { Extension } from '@codemirror/state';
+/** Map a `<tosi-code mode>` value to a CodeMirror language extension. */
+export declare function languageForMode(mode: string): Extension;
+/** Runtime-introspection hooks for tjs autocomplete (all optional). */
+export interface TjsAutocompleteConfig {
+    getMetadata?: () => Record<string, unknown> | undefined;
+    getImports?: () => Record<string, Record<string, unknown>> | undefined;
+    getLiveBindings?: () => Record<string, unknown> | undefined;
+    getMembers?: (path: string) => Promise<unknown[] | undefined>;
+}
+/**
+ * Lazy-load tjs-lang's CodeMirror language + completion bundle. Returns a single
+ * CodeMirror `Extension` (tjs language, forbidden-keyword highlighting, theme, and
+ * `tjsCompletionSource`-driven autocomplete) suitable for `setLanguageExtension()`,
+ * or `null` when tjs-lang (an optional peer) isn't installed or its editor build
+ * lacks `tjsEditorExtension`. The dynamic import keeps it out of the bundle until a
+ * tjs editor actually mounts.
+ */
+export declare function loadTjsExtension(autocomplete?: TjsAutocompleteConfig): Promise<Extension | null>;
+export interface CmHandle {
+    view: EditorView;
+    getValue(): string;
+    setValue(text: string): void;
+    setMode(mode: string): void;
+    /** Swap the language compartment wholesale (e.g. an async-loaded tjs bundle). */
+    setLanguageExtension(ext: Extension): void;
+    setReadOnly(readOnly: boolean): void;
+    undo(): void;
+    redo(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    focus(): void;
+    refresh(): void;
+    destroy(): void;
+}
+export interface CmOptions {
+    value?: string;
+    mode?: string;
+    readOnly?: boolean;
+    /** additional language-adjacent extensions (e.g. a tjs language + autocomplete) */
+    languageExtension?: Extension;
+    onChange?: (value: string) => void;
+    /** style-injection root — pass the host's ShadowRoot when mounted in shadow DOM */
+    root?: Document | ShadowRoot;
+}
+/** Create a CodeMirror editor mounted in `parent`, returning an editor-agnostic handle. */
+export declare function createCmEditor(parent: HTMLElement, opts?: CmOptions): CmHandle;

package/dist/code-editor-cm.js

@@ -0,0 +1,243 @@
+/*
+CodeMirror 6 editor factory — the "heavy" module.
+
+`code-editor.ts` imports this **dynamically** (on first `<tosi-code>` connect), so
+CodeMirror only enters a consumer's bundle as a separate lazy chunk when the editor
+is actually used — mirroring the way the old ACE build loaded from a CDN on first
+use. No `<tosi-code>` in the page → no CodeMirror.
+
+Languages here are the always-available set (js/ts/css/html/markdown). First-class
+tjs (highlighting + runtime-value autocomplete via tjs-lang's editors/codemirror) is
+layered in separately and only when tjs-lang is installed.
+*/
+import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, } from '@codemirror/view';
+import { EditorState, Compartment } from '@codemirror/state';
+import { indentWithTab, history, defaultKeymap, historyKeymap, undo, redo, undoDepth, redoDepth, } from '@codemirror/commands';
+import { indentUnit, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, } from '@codemirror/language';
+import { closeBrackets, closeBracketsKeymap, autocompletion, completionKeymap, } from '@codemirror/autocomplete';
+import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import { lintKeymap } from '@codemirror/lint';
+import { javascript } from '@codemirror/lang-javascript';
+import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
+import { markdown } from '@codemirror/lang-markdown';
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark';
+// The doc-system flips dark mode with a `darkmode` class on <body> (which inverts
+// the luminance of --code-bg / --text-color, so the editor SURFACE adapts for
+// free). Only CM's syntax-token colors need swapping: the light defaultHighlightStyle
+// washes out on a dark surface, so use oneDark's brighter palette in dark mode.
+const isDarkMode = () => typeof document !== 'undefined' &&
+    !!document.body &&
+    document.body.classList.contains('darkmode');
+const highlightFor = (dark) => dark
+    ? syntaxHighlighting(oneDarkHighlightStyle)
+    : syntaxHighlighting(defaultHighlightStyle, { fallback: true });
+/** Map a `<tosi-code mode>` value to a CodeMirror language extension. */
+export function languageForMode(mode) {
+    switch (mode) {
+        case 'js':
+        case 'javascript':
+            return javascript();
+        case 'ts':
+        case 'typescript':
+        // tjs highlights as TypeScript here (the sync default). First-class tjs — the
+        // tjs-lang language + autocomplete — is layered on asynchronously via
+        // `loadTjsExtension()` + `setLanguageExtension()`, since it lazy-loads the
+        // (optional) tjs-lang editor build; this keeps `mode="tjs"` readable meanwhile.
+        // falls through
+        case 'tjs':
+        case 'ajs':
+            return javascript({ typescript: true });
+        case 'css':
+            return css();
+        case 'html':
+            return html();
+        case 'md':
+        case 'markdown':
+            return markdown();
+        default:
+            return javascript();
+    }
+}
+// The language compartment carries the language AND its completion source, so
+// exactly ONE `autocompletion()` is ever active: standard modes use CM's built-in
+// (language-provided) completions here, while the tjs bundle brings its own
+// `autocompletion({ override: [tjsCompletionSource] })`. (This is why the base
+// extension set below does NOT include `autocompletion()`.)
+function standardLanguageBundle(mode) {
+    return [languageForMode(mode), autocompletion()];
+}
+/**
+ * Lazy-load tjs-lang's CodeMirror language + completion bundle. Returns a single
+ * CodeMirror `Extension` (tjs language, forbidden-keyword highlighting, theme, and
+ * `tjsCompletionSource`-driven autocomplete) suitable for `setLanguageExtension()`,
+ * or `null` when tjs-lang (an optional peer) isn't installed or its editor build
+ * lacks `tjsEditorExtension`. The dynamic import keeps it out of the bundle until a
+ * tjs editor actually mounts.
+ */
+export async function loadTjsExtension(autocomplete = {}) {
+    try {
+        const mod = (await import('tjs-lang/editors/codemirror'));
+        if (typeof mod.tjsEditorExtension === 'function') {
+            return mod.tjsEditorExtension({ typescript: true, autocomplete });
+        }
+    }
+    catch {
+        // tjs-lang absent or editor build unavailable — caller keeps TS highlighting.
+    }
+    return null;
+}
+// A minimal theme so the editor has a real surface instead of showing whatever is
+// behind it. It's applied as a CodeMirror theme (not shadow-DOM CSS) so it beats
+// CM's injected base styles. Colors come from the doc-system theme vars
+// (`--code-bg` / `--text-color`, which pierce the shadow root and adapt to dark
+// mode) with sensible standalone fallbacks.
+const editorTheme = EditorView.theme({
+    '&': {
+        height: '100%',
+        backgroundColor: 'var(--code-bg, var(--input-bg, #fdfdfd))',
+        color: 'var(--text-color, #222)',
+    },
+    '.cm-scroller': {
+        fontFamily: "Menlo, Monaco, Consolas, 'Courier New', monospace",
+    },
+    '.cm-gutters': {
+        backgroundColor: 'var(--code-bg, var(--input-bg, #fdfdfd))',
+        color: 'var(--text-color, #888)',
+        border: 'none',
+    },
+    '.cm-activeLine': { backgroundColor: 'transparent' },
+    '.cm-activeLineGutter': { backgroundColor: 'transparent' },
+});
+// A basicSetup-equivalent without a hard-coded color theme, so the host page's CSS
+// (and dark mode) controls the palette. Line-wrapping mirrors the old ACE `wrap:true`.
+function baseExtensions() {
+    return [
+        editorTheme,
+        lineNumbers(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        history(),
+        foldGutter(),
+        drawSelection(),
+        dropCursor(),
+        EditorState.allowMultipleSelections.of(true),
+        indentOnInput(),
+        indentUnit.of('  '),
+        EditorState.tabSize.of(2),
+        // syntax highlighting is applied per-instance via a compartment (dark-mode aware)
+        bracketMatching(),
+        closeBrackets(),
+        // NB: autocompletion() lives in the language compartment (see
+        // standardLanguageBundle) so tjs's own completion source never doubles up.
+        rectangularSelection(),
+        crosshairCursor(),
+        highlightActiveLine(),
+        highlightSelectionMatches(),
+        EditorView.lineWrapping,
+        keymap.of([
+            indentWithTab,
+            ...closeBracketsKeymap,
+            ...defaultKeymap,
+            ...searchKeymap,
+            ...historyKeymap,
+            ...foldKeymap,
+            ...completionKeymap,
+            ...lintKeymap,
+        ]),
+    ];
+}
+const darkListeners = new Set();
+let darkObserver;
+function watchDarkMode(listener) {
+    darkListeners.add(listener);
+    if (darkObserver === undefined &&
+        typeof MutationObserver !== 'undefined' &&
+        typeof document !== 'undefined' &&
+        document.body) {
+        darkObserver = new MutationObserver(() => {
+            for (const l of darkListeners)
+                l();
+        });
+        darkObserver.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    }
+    return () => {
+        darkListeners.delete(listener);
+        if (darkListeners.size === 0) {
+            darkObserver?.disconnect();
+            darkObserver = undefined;
+        }
+    };
+}
+/** Create a CodeMirror editor mounted in `parent`, returning an editor-agnostic handle. */
+export function createCmEditor(parent, opts = {}) {
+    const language = new Compartment();
+    const readonly = new Compartment();
+    const highlight = new Compartment();
+    const langExt = opts.languageExtension ?? standardLanguageBundle(opts.mode ?? 'javascript');
+    const view = new EditorView({
+        parent,
+        root: opts.root,
+        state: EditorState.create({
+            doc: opts.value ?? '',
+            extensions: [
+                baseExtensions(),
+                highlight.of(highlightFor(isDarkMode())),
+                language.of(langExt),
+                readonly.of(EditorState.readOnly.of(!!opts.readOnly)),
+                EditorView.updateListener.of((u) => {
+                    if (u.docChanged && opts.onChange)
+                        opts.onChange(u.state.doc.toString());
+                }),
+            ],
+        }),
+    });
+    // Re-apply the right highlight palette when the doc-system toggles dark mode
+    // (it flips the `darkmode` class on <body>).
+    let dark = isDarkMode();
+    const unwatchDark = watchDarkMode(() => {
+        const nowDark = isDarkMode();
+        if (nowDark !== dark) {
+            dark = nowDark;
+            view.dispatch({ effects: highlight.reconfigure(highlightFor(dark)) });
+        }
+    });
+    const handle = {
+        view,
+        getValue: () => view.state.doc.toString(),
+        setValue(text) {
+            if (view.state.doc.toString() === text)
+                return;
+            view.dispatch({
+                changes: { from: 0, to: view.state.doc.length, insert: text },
+            });
+        },
+        setMode(mode) {
+            view.dispatch({
+                effects: language.reconfigure(standardLanguageBundle(mode)),
+            });
+        },
+        setLanguageExtension(ext) {
+            view.dispatch({ effects: language.reconfigure(ext) });
+        },
+        setReadOnly(ro) {
+            view.dispatch({
+                effects: readonly.reconfigure(EditorState.readOnly.of(ro)),
+            });
+        },
+        undo: () => void undo(view),
+        redo: () => void redo(view),
+        canUndo: () => undoDepth(view.state) > 0,
+        canRedo: () => redoDepth(view.state) > 0,
+        focus: () => view.focus(),
+        refresh: () => view.requestMeasure(),
+        destroy: () => {
+            unwatchDark();
+            view.destroy();
+        },
+    };
+    return handle;
+}

package/dist/code-editor.d.ts

@@ -1,27 +1,58 @@
-import { Component as WebComponent, ElementCreator } from 'tosijs';
-export declare class CodeEditor extends WebComponent {
+import { Component as WebComponent, ElementCreator, PartsMap } from 'tosijs';
+import type { CmHandle, TjsAutocompleteConfig } from './code-editor-cm';
+export type { TjsAutocompleteConfig } from './code-editor-cm';
+interface CodeEditorParts extends PartsMap {
+    host: HTMLDivElement;
+    diffHost: HTMLDivElement;
+}
+export declare class CodeEditor extends WebComponent<CodeEditorParts> {
     static preferredTagName: string;
     private source;
+    private _handle;
+    private _loadPromise;
+    private _loadGeneration;
+    private _appliedMode;
+    private _appliedDisabled;
+    private _tjsAutocomplete;
+    /**
+     * Runtime-introspection hooks for tjs autocomplete (`getLiveBindings` /
+     * `getMembers`) — lets completion suggest the REAL members of live values (e.g.
+     * a tosijs proxy or a DOM element) that static analysis can't see. Only used in
+     * tjs mode; setting it re-applies the tjs extension so it takes effect live.
+     */
+    get tjsAutocomplete(): TjsAutocompleteConfig | undefined;
+    set tjsAutocomplete(config: TjsAutocompleteConfig | undefined);
     get value(): string;
     set value(text: string);
     private _original;
     get original(): string;
     set original(text: string);
     private diffOverlay;
+    private _partsHydrated;
+    private _pendingDiff;
+    private get partsReady();
     get showingDiff(): boolean;
     showDiff(on: boolean): void;
     static initAttributes: {
         mode: string;
-        theme: string;
         disabled: boolean;
     };
     role: string;
-    private _ace;
-    private _editor;
-    private _editorPromise;
-    options: any;
-    get ace(): any;
-    get editor(): any;
+    /** The underlying CodeMirror EditorView (undefined until loaded). */
+    get editor(): CmHandle['view'] | undefined;
+    /** @deprecated Removed in 1.7 — CodeMirror themes via `--code-bg`/`--text-color`. */
+    get theme(): string;
+    set theme(_: string);
+    /** @deprecated Removed in 1.7 — ACE-shaped options have no CodeMirror equivalent. */
+    get options(): Record<string, unknown>;
+    set options(_: Record<string, unknown>);
+    /** @deprecated Removed in 1.7 — there is no ACE global; use `editor` (an EditorView). */
+    get ace(): undefined;
+    undo(): void;
+    redo(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    content: () => HTMLDivElement[];
     static shadowStyleSpec: {
         ':host': {
             display: string;
@@ -29,9 +60,34 @@ export declare class CodeEditor extends WebComponent {
             width: string;
             height: string;
         };
+        '[part="host"]': {
+            height: string;
+        };
+        '[part="diffHost"]': {
+            position: string;
+            inset: string;
+            zIndex: string;
+            overflow: string;
+            background: string;
+        };
+        '.cm-editor': {
+            height: string;
+        };
+        '.cm-scroller': {
+            outline: string;
+            fontFamily: string;
+        };
     };
     onResize(): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private isTjsMode;
+    /**
+     * When in tjs mode, lazily upgrade the editor to tjs-lang's CodeMirror language +
+     * autocomplete. No-op (keeps TS highlighting) if not tjs, if tjs-lang isn't
+     * installed, or if the mode/handle changed before the async load resolved.
+     */
+    private applyTjsExtension;
     render(): void;
 }
 export declare const codeEditor: ElementCreator<CodeEditor>;