tosijs-ui 1.6.19 → 1.6.20

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 1.6.20
+
+### Fixed
+
+- **`import 'tosijs-ui'` no longer resolves to the IIFE under browser bundlers.**
+  The `"."` export had a `"browser"` condition pointing at `dist/iife.js` — the
+  self-contained CDN/doc-site bundle that inlines tosijs + marked. Browser-targeted
+  bundlers (Vite, webpack, esbuild) picked it, so consumers **double-bundled tosijs**
+  instead of externalizing the peer, and named imports broke (the IIFE isn't an ESM
+  module). Removed the condition: every `import` now resolves to `dist/index.js`
+  (ESM, peers externalized). The IIFE stays for CDN `<script>` use and the naive
+  doc site — referenced by file path, never via `import 'tosijs-ui'`.
+
+### Changed
+
+- **tosijs peer + dev dependency bumped to `^1.6.6`** — picks up a subtle
+  component-lifecycle fix.
+
 ## 1.6.19
 
 Doc-system tooling; no component API changes.

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

@@ -0,0 +1,30 @@
+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;
+export interface CmHandle {
+    view: EditorView;
+    getValue(): string;
+    setValue(text: string): void;
+    setMode(mode: string): 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,132 @@
+/*
+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';
+/** 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 fine as TypeScript until the tjs-lang language is wired
+        // (workstream B); this keeps `mode="tjs"` readable today.
+        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();
+    }
+}
+// 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 [
+        lineNumbers(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        history(),
+        foldGutter(),
+        drawSelection(),
+        dropCursor(),
+        EditorState.allowMultipleSelections.of(true),
+        indentOnInput(),
+        indentUnit.of('  '),
+        EditorState.tabSize.of(2),
+        syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+        bracketMatching(),
+        closeBrackets(),
+        autocompletion(),
+        rectangularSelection(),
+        crosshairCursor(),
+        highlightActiveLine(),
+        highlightSelectionMatches(),
+        EditorView.lineWrapping,
+        keymap.of([
+            indentWithTab,
+            ...closeBracketsKeymap,
+            ...defaultKeymap,
+            ...searchKeymap,
+            ...historyKeymap,
+            ...foldKeymap,
+            ...completionKeymap,
+            ...lintKeymap,
+        ]),
+    ];
+}
+/** 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 langExt = opts.languageExtension ?? languageForMode(opts.mode ?? 'javascript');
+    const view = new EditorView({
+        parent,
+        root: opts.root,
+        state: EditorState.create({
+            doc: opts.value ?? '',
+            extensions: [
+                baseExtensions(),
+                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());
+                }),
+            ],
+        }),
+    });
+    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(languageForMode(mode)) });
+        },
+        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: () => view.destroy(),
+    };
+    return handle;
+}

package/dist/code-editor.d.ts

@@ -1,7 +1,15 @@
-import { Component as WebComponent, ElementCreator } from 'tosijs';
-export declare class CodeEditor extends WebComponent {
+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> {
     static preferredTagName: string;
     private source;
+    private _handle;
+    private _loadPromise;
+    private _appliedMode;
+    private _appliedDisabled;
     get value(): string;
     set value(text: string);
     private _original;
@@ -12,16 +20,16 @@ export declare class CodeEditor extends WebComponent {
     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;
+    undo(): void;
+    redo(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    content: () => HTMLDivElement[];
     static shadowStyleSpec: {
         ':host': {
             display: string;
@@ -29,9 +37,20 @@ export declare class CodeEditor extends WebComponent {
             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
 
-An [ACE Editor](https://ace.c9.io/) wrapper.
+A [CodeMirror 6](https://codemirror.net/) 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, and you can further configure
-the ACE editor instance via its `options` property.
+`<tosi-code>`'s `value` is the code it contains. Its `mode` attribute sets the
+language (`javascript`, `typescript`, `tjs`, `css`, `html`, `markdown`).
 
 ```html
 <tosi-code style="width: 100%; height: 100%" mode="css">
@@ -16,51 +16,33 @@ body {
 </tosi-code>
 ```
 
-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).
+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.
 */
 /*{ "parent": "Components" }*/
-import { Component as WebComponent } from 'tosijs';
-import { scriptTag } from './via-tag';
+import { Component as WebComponent, elements } from 'tosijs';
 import { tosiDiff } from './diff';
-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 };
-};
+const { div } = elements;
 export class CodeEditor extends WebComponent {
     static preferredTagName = 'tosi-code';
     source = '';
+    _handle;
+    _loadPromise;
+    _appliedMode = '';
+    _appliedDisabled;
     get value() {
-        return this.editor === undefined ? this.source : this.editor.getValue();
+        return this._handle ? this._handle.getValue() : this.source;
     }
     set value(text) {
-        if (this.editor === undefined) {
-            this.source = text;
+        if (this._handle) {
+            this._handle.setValue(text);
         }
         else {
-            this.editor.setValue(text);
-            this.editor.clearSelection();
-            this.editor.session.getUndoManager().reset();
+            this.source = text;
         }
     }
     // Baseline for `showDiff()` — the version to diff the current `value` against.
@@ -72,9 +54,9 @@ export class CodeEditor extends WebComponent {
     set original(text) {
         this._original = text;
     }
-    // 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.
+    // 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).
     diffOverlay;
     get showingDiff() {
         return this.diffOverlay !== undefined && !this.diffOverlay.hidden;
@@ -103,20 +85,27 @@ export class CodeEditor extends WebComponent {
     }
     static initAttributes = {
         mode: 'javascript',
-        theme: DEFAULT_THEME,
         disabled: false,
     };
     role = 'code editor';
-    _ace;
-    _editor;
-    _editorPromise;
-    options = {};
-    get ace() {
-        return this._ace;
-    }
+    /** The underlying CodeMirror EditorView (undefined until loaded). */
     get editor() {
-        return this._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;
     }
+    canRedo() {
+        return this._handle?.canRedo() ?? false;
+    }
+    content = () => [div({ part: 'host' })];
     static shadowStyleSpec = {
         ':host': {
             display: 'block',
@@ -124,32 +113,49 @@ 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() {
-        if (this.editor !== undefined) {
-            this.editor.resize(true);
-        }
+        this._handle?.refresh();
     }
     connectedCallback() {
         super.connectedCallback();
         if (this.source === '') {
             this.value = this.textContent !== null ? this.textContent.trim() : '';
         }
-        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();
+        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;
             });
         }
     }
     render() {
         super.render();
-        if (this._editorPromise !== undefined) {
-            this._editorPromise.then(({ editor }) => editor.setReadOnly(this.disabled));
+        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;
+            }
         }
     }
 }