tosijs-ui 1.6.7 → 1.6.10

package/README.md

@@ -67,7 +67,7 @@ npm add tosijs-ui
 Then import the component `elementCreator` and create elements. A `tosijs`
 `elementCreator` is syntax sugar around `document.createElement()`.
 
-```ts
+```typescript
 import { tosiTable } from 'tosijs-ui'
 
 document.body.append(tosiTable())

package/dist/code-editor.d.ts

@@ -4,6 +4,12 @@ export declare class CodeEditor extends WebComponent {
     private source;
     get value(): string;
     set value(text: string);
+    private _original;
+    get original(): string;
+    set original(text: string);
+    private diffOverlay;
+    get showingDiff(): boolean;
+    showDiff(on: boolean): void;
     static initAttributes: {
         mode: string;
         theme: string;

package/dist/code-editor.js

@@ -23,6 +23,7 @@ and an `ace` property that returns the `ace` module, giving you complete access
 /*{ "parent": "Components" }*/
 import { Component as WebComponent } from 'tosijs';
 import { scriptTag } from './via-tag';
+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 () => {
@@ -37,6 +38,10 @@ const makeCodeEditor = async (codeElement, mode = 'html', options = {}, theme =
         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);
@@ -58,6 +63,44 @@ export class CodeEditor extends WebComponent {
             this.editor.session.getUndoManager().reset();
         }
     }
+    // Baseline for `showDiff()` — the version to diff the current `value` against.
+    // Defaults to the current value (no diff) until a caller sets it.
+    _original;
+    get original() {
+        return this._original ?? this.value;
+    }
+    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.
+    diffOverlay;
+    get showingDiff() {
+        return this.diffOverlay !== undefined && !this.diffOverlay.hidden;
+    }
+    showDiff(on) {
+        if (on) {
+            if (this.diffOverlay === undefined) {
+                this.diffOverlay = tosiDiff({
+                    style: {
+                        position: 'absolute',
+                        inset: '0',
+                        zIndex: '5',
+                        overflow: 'auto',
+                        background: 'var(--tosi-diff-bg, var(--background, #fff))',
+                    },
+                });
+                this.append(this.diffOverlay);
+            }
+            this.diffOverlay.original = this.original;
+            this.diffOverlay.modified = this.value;
+            this.diffOverlay.hidden = false;
+        }
+        else if (this.diffOverlay !== undefined) {
+            this.diffOverlay.hidden = true;
+        }
+    }
     static initAttributes = {
         mode: 'javascript',
         theme: DEFAULT_THEME,

package/dist/diff.d.ts

@@ -0,0 +1,61 @@
+import { Component, ElementCreator, PartsMap } from 'tosijs';
+export type DiffOp = 'context' | 'add' | 'remove';
+export interface DiffLine {
+    op: DiffOp;
+    text: string;
+}
+/**
+ * Line-level diff of two strings via longest-common-subsequence, returning each
+ * line tagged `context` (unchanged), `remove` (only in `before`), or `add` (only
+ * in `after`), in display order.
+ */
+export declare function diffLines(before: string, after: string): DiffLine[];
+interface DiffParts extends PartsMap {
+    body: HTMLElement;
+}
+export declare class TosiDiff extends Component<DiffParts> {
+    static preferredTagName: string;
+    static initAttributes: {
+        original: string;
+        modified: string;
+    };
+    static shadowStyleSpec: {
+        ':host': {
+            display: string;
+            overflow: string;
+            font: string;
+            background: string;
+            color: string;
+        };
+        ':host([hidden])': {
+            display: string;
+        };
+        '.diff-line': {
+            display: string;
+            gridTemplateColumns: string;
+            whiteSpace: string;
+            wordBreak: string;
+        };
+        '.diff-line .marker': {
+            textAlign: string;
+            userSelect: string;
+            opacity: string;
+        };
+        '.diff-add': {
+            background: string;
+        };
+        '.diff-add .marker': {
+            color: string;
+        };
+        '.diff-remove': {
+            background: string;
+        };
+        '.diff-remove .marker': {
+            color: string;
+        };
+    };
+    content: () => HTMLDivElement[];
+    render(): void;
+}
+export declare const tosiDiff: ElementCreator<TosiDiff>;
+export {};

package/dist/diff.js

@@ -0,0 +1,132 @@
+/*#
+# diff
+
+`<tosi-diff>` renders a unified, line-by-line diff between two strings — the kind
+of view you'd see in a code review, with removed lines marked `-` and added
+lines marked `+`.
+
+Set its `original` and `modified` properties (or attributes) to the two versions
+of the text; it recomputes and re-renders. (They're named `original`/`modified`
+rather than `before`/`after` to avoid the native `Element.before()`/`after()`
+methods.)
+
+```js
+const { tosiDiff } = tosijsui
+
+preview.append(
+  tosiDiff({
+    original: 'one\ntwo\nthree\nfour',
+    modified: 'one\nTWO\nthree\nfour\nfive',
+    style: { width: '100%', height: '100%' },
+  })
+)
+```
+
+The diff is computed with a longest-common-subsequence pass over the lines, so
+unchanged lines are shown as context and only genuine insertions/deletions are
+highlighted. The pure `diffLines(before, after)` function is exported too, if you
+just want the data.
+*/
+/*{ "parent": "Components" }*/
+import { Component, elements } from 'tosijs';
+const { div, span } = elements;
+/**
+ * Line-level diff of two strings via longest-common-subsequence, returning each
+ * line tagged `context` (unchanged), `remove` (only in `before`), or `add` (only
+ * in `after`), in display order.
+ */
+export function diffLines(before, after) {
+    const a = before.split('\n');
+    const b = after.split('\n');
+    const m = a.length;
+    const n = b.length;
+    // lcs[i][j] = length of the LCS of a[i:] and b[j:]
+    const lcs = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+    for (let i = m - 1; i >= 0; i -= 1) {
+        for (let j = n - 1; j >= 0; j -= 1) {
+            lcs[i][j] =
+                a[i] === b[j]
+                    ? lcs[i + 1][j + 1] + 1
+                    : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+        }
+    }
+    const out = [];
+    let i = 0;
+    let j = 0;
+    while (i < m && j < n) {
+        if (a[i] === b[j]) {
+            out.push({ op: 'context', text: a[i] });
+            i += 1;
+            j += 1;
+        }
+        else if (lcs[i + 1][j] >= lcs[i][j + 1]) {
+            out.push({ op: 'remove', text: a[i] });
+            i += 1;
+        }
+        else {
+            out.push({ op: 'add', text: b[j] });
+            j += 1;
+        }
+    }
+    while (i < m) {
+        out.push({ op: 'remove', text: a[i] });
+        i += 1;
+    }
+    while (j < n) {
+        out.push({ op: 'add', text: b[j] });
+        j += 1;
+    }
+    return out;
+}
+const MARKER = { context: ' ', add: '+', remove: '-' };
+export class TosiDiff extends Component {
+    static preferredTagName = 'tosi-diff';
+    // `before`/`after` would collide with the native Element.before()/after()
+    // methods, so the component props are `original`/`modified`.
+    static initAttributes = {
+        original: '',
+        modified: '',
+    };
+    static shadowStyleSpec = {
+        ':host': {
+            display: 'block',
+            overflow: 'auto',
+            font: 'var(--tosi-code-font, 12px/1.5 monospace)',
+            background: 'var(--tosi-diff-bg, #fff)',
+            color: 'var(--tosi-diff-color, #222)',
+        },
+        // `:host{display:block}` would otherwise beat the UA `[hidden]` rule, so the
+        // element couldn't be hidden via the attribute — restore that.
+        ':host([hidden])': {
+            display: 'none',
+        },
+        '.diff-line': {
+            display: 'grid',
+            gridTemplateColumns: '1.5em 1fr',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+        },
+        '.diff-line .marker': {
+            textAlign: 'center',
+            userSelect: 'none',
+            opacity: '0.5',
+        },
+        '.diff-add': {
+            background: 'var(--tosi-diff-add-bg, #e6ffed)',
+        },
+        '.diff-add .marker': { color: 'var(--tosi-diff-add-color, #22863a)' },
+        '.diff-remove': {
+            background: 'var(--tosi-diff-remove-bg, #ffeef0)',
+        },
+        '.diff-remove .marker': { color: 'var(--tosi-diff-remove-color, #cb2431)' },
+    };
+    content = () => [div({ part: 'body' })];
+    render() {
+        super.render();
+        const lines = diffLines(this.original, this.modified);
+        this.parts.body.replaceChildren(...lines.map((line) => div({ class: `diff-line diff-${line.op}` }, span({ class: 'marker' }, MARKER[line.op]), 
+        // Non-breaking fallback so empty lines keep their row height.
+        span({ class: 'text' }, line.text === '' ? ' ' : line.text))));
+    }
+}
+export const tosiDiff = TosiDiff.elementCreator();