@matthewp/zebra 0.0.1 → 0.0.3

package/dist/html.d.ts

@@ -0,0 +1,8 @@
+export declare class SafeHTML {
+    #private;
+    constructor(value: string);
+    toString(): string;
+}
+export declare function unsafeHTML(s: string): SafeHTML;
+export declare function html(strings: TemplateStringsArray, ...values: unknown[]): SafeHTML;
+//# sourceMappingURL=html.d.ts.map

package/dist/html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AAYA,qBAAa,QAAQ;;gBAEP,KAAK,EAAE,MAAM;IAGzB,QAAQ,IAAI,MAAM;CAGnB;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,QAAQ,CAE9C;AAYD,wBAAgB,IAAI,CAAC,OAAO,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,CAOlF"}

package/dist/html.js

@@ -0,0 +1,43 @@
+const ESC = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, (ch) => ESC[ch]);
+}
+export class SafeHTML {
+    #html;
+    constructor(value) {
+        this.#html = value;
+    }
+    toString() {
+        return this.#html;
+    }
+}
+export function unsafeHTML(s) {
+    return new SafeHTML(s);
+}
+function resolveValue(val) {
+    if (val == null || val === false)
+        return '';
+    if (val instanceof SafeHTML)
+        return val.toString();
+    if (typeof val === 'object' && 'template' in val && typeof val.template === 'function') {
+        return val.template().toString();
+    }
+    if (Array.isArray(val))
+        return val.map(resolveValue).join('');
+    return escapeHtml(String(val));
+}
+export function html(strings, ...values) {
+    let result = strings[0];
+    for (let i = 0; i < values.length; i++) {
+        result += resolveValue(values[i]);
+        result += strings[i + 1];
+    }
+    return new SafeHTML(result);
+}
+//# sourceMappingURL=html.js.map

package/dist/html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.js","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AAAA,MAAM,GAAG,GAA2B;IAClC,GAAG,EAAE,OAAO;IACZ,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,QAAQ;IACb,GAAG,EAAE,OAAO;CACb,CAAC;AAEF,SAAS,UAAU,CAAC,CAAS;IAC3B,OAAO,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;AAChD,CAAC;AAED,MAAM,OAAO,QAAQ;IACnB,KAAK,CAAS;IACd,YAAY,KAAa;QACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IACD,QAAQ;QACN,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;CACF;AAED,MAAM,UAAU,UAAU,CAAC,CAAS;IAClC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;AACzB,CAAC;AAED,SAAS,YAAY,CAAC,GAAY;IAChC,IAAI,GAAG,IAAI,IAAI,IAAI,GAAG,KAAK,KAAK;QAAE,OAAO,EAAE,CAAC;IAC5C,IAAI,GAAG,YAAY,QAAQ;QAAE,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;IACnD,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,UAAU,IAAI,GAAG,IAAI,OAAQ,GAAW,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;QAChG,OAAQ,GAAW,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC;IAC5C,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QAAE,OAAO,GAAG,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9D,OAAO,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;AACjC,CAAC;AAED,MAAM,UAAU,IAAI,CAAC,OAA6B,EAAE,GAAG,MAAiB;IACtE,IAAI,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;IACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACvC,MAAM,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAClC,MAAM,IAAI,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3B,CAAC;IACD,OAAO,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC;AAC9B,CAAC"}

package/dist/list.d.ts

@@ -0,0 +1,17 @@
+import { View } from './view.ts';
+import { SafeHTML } from './html.ts';
+type ViewConstructor<T> = new () => View<T>;
+export declare class List<T = Record<string, unknown>> {
+    private ViewClass;
+    private keyFn;
+    private views;
+    private keys;
+    private container;
+    constructor(ViewClass: ViewConstructor<T>, keyFn: (item: T) => unknown);
+    template(items?: T[]): SafeHTML;
+    mount(container: HTMLElement, items?: T[]): void;
+    private updateView;
+    update(items: T[]): void;
+}
+export {};
+//# sourceMappingURL=list.d.ts.map

package/dist/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../src/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,KAAK,eAAe,CAAC,CAAC,IAAI,UAAU,IAAI,CAAC,CAAC,CAAC,CAAC;AAE5C,qBAAa,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3C,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,KAAK,CAA0B;IACvC,OAAO,CAAC,IAAI,CAAiB;IAC7B,OAAO,CAAC,SAAS,CAA4B;gBAEjC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO;IAKtE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,GAAG,QAAQ;IAQ/B,KAAK,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE;IAczC,OAAO,CAAC,UAAU;IAIlB,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE;CAuGlB"}

package/dist/list.js

@@ -0,0 +1,141 @@
+import { SafeHTML } from "./html.js";
+export class List {
+    ViewClass;
+    keyFn;
+    views = [];
+    keys = [];
+    container = null;
+    constructor(ViewClass, keyFn) {
+        this.ViewClass = ViewClass;
+        this.keyFn = keyFn;
+    }
+    template(items) {
+        if (!items || items.length === 0)
+            return new SafeHTML('');
+        return new SafeHTML(items.map(item => {
+            let view = new this.ViewClass();
+            return view.template(item).toString();
+        }).join(''));
+    }
+    mount(container, items) {
+        this.container = container;
+        let children = Array.from(container.children);
+        if (children.length > 0 && items) {
+            for (let i = 0; i < children.length && i < items.length; i++) {
+                let view = new this.ViewClass();
+                view.mount(children[i]);
+                view.update(items[i]);
+                this.views.push(view);
+                this.keys.push(this.keyFn(items[i]));
+            }
+        }
+    }
+    updateView(view, item) {
+        view.update(item);
+    }
+    update(items) {
+        let container = this.container;
+        let oldViews = this.views;
+        let oldKeys = this.keys;
+        let newKeys = items.map(this.keyFn);
+        let newViews = new Array(items.length).fill(null);
+        let oldHead = 0;
+        let oldTail = oldViews.length - 1;
+        let newHead = 0;
+        let newTail = items.length - 1;
+        let oldKeyToIndex;
+        while (oldHead <= oldTail && newHead <= newTail) {
+            if (oldViews[oldHead] === null) {
+                oldHead++;
+            }
+            else if (oldViews[oldTail] === null) {
+                oldTail--;
+            }
+            else if (oldKeys[oldHead] === newKeys[newHead]) {
+                // Head-Head match
+                newViews[newHead] = oldViews[oldHead];
+                this.updateView(oldViews[oldHead], items[newHead]);
+                oldHead++;
+                newHead++;
+            }
+            else if (oldKeys[oldTail] === newKeys[newTail]) {
+                // Tail-Tail match
+                newViews[newTail] = oldViews[oldTail];
+                this.updateView(oldViews[oldTail], items[newTail]);
+                oldTail--;
+                newTail--;
+            }
+            else if (oldKeys[oldHead] === newKeys[newTail]) {
+                // Head-Tail match: move old head to after old tail
+                newViews[newTail] = oldViews[oldHead];
+                this.updateView(oldViews[oldHead], items[newTail]);
+                oldViews[oldTail].el.after(oldViews[oldHead].el);
+                oldHead++;
+                newTail--;
+            }
+            else if (oldKeys[oldTail] === newKeys[newHead]) {
+                // Tail-Head match: move old tail to before old head
+                newViews[newHead] = oldViews[oldTail];
+                this.updateView(oldViews[oldTail], items[newHead]);
+                oldViews[oldHead].el.before(oldViews[oldTail].el);
+                oldTail--;
+                newHead++;
+            }
+            else {
+                // Build map lazily
+                if (!oldKeyToIndex) {
+                    oldKeyToIndex = new Map();
+                    for (let i = oldHead; i <= oldTail; i++) {
+                        if (oldViews[i] !== null) {
+                            oldKeyToIndex.set(oldKeys[i], i);
+                        }
+                    }
+                }
+                let oldIndex = oldKeyToIndex.get(newKeys[newHead]);
+                if (oldIndex === undefined) {
+                    // New item
+                    let view = new this.ViewClass();
+                    view.createAndMount();
+                    newViews[newHead] = view;
+                    oldViews[oldHead].el.before(view.el);
+                    this.updateView(view, items[newHead]);
+                }
+                else {
+                    // Move existing
+                    let view = oldViews[oldIndex];
+                    this.updateView(view, items[newHead]);
+                    newViews[newHead] = view;
+                    oldViews[oldHead].el.before(view.el);
+                    oldViews[oldIndex] = null;
+                }
+                newHead++;
+            }
+        }
+        // Remove remaining old items
+        while (oldHead <= oldTail) {
+            if (oldViews[oldHead] !== null) {
+                oldViews[oldHead].el.remove();
+            }
+            oldHead++;
+        }
+        // Add remaining new items
+        while (newHead <= newTail) {
+            let view = new this.ViewClass();
+            view.createAndMount();
+            newViews[newHead] = view;
+            let el = view.el;
+            let ref = newViews[newTail + 1]?.el;
+            if (ref) {
+                ref.before(el);
+            }
+            else {
+                container.append(el);
+            }
+            this.updateView(view, items[newHead]);
+            newHead++;
+        }
+        this.views = newViews;
+        this.keys = newKeys;
+    }
+}
+//# sourceMappingURL=list.js.map

package/dist/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","sourceRoot":"","sources":["../src/list.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAIrC,MAAM,OAAO,IAAI;IACP,SAAS,CAAqB;IAC9B,KAAK,CAAuB;IAC5B,KAAK,GAAuB,EAAE,CAAC;IAC/B,IAAI,GAAc,EAAE,CAAC;IACrB,SAAS,GAAuB,IAAI,CAAC;IAE7C,YAAY,SAA6B,EAAE,KAA2B;QACpE,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAED,QAAQ,CAAC,KAAW;QAClB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;QAC1D,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACnC,IAAI,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YAChC,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;QACxC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IACf,CAAC;IAED,KAAK,CAAC,SAAsB,EAAE,KAAW;QACvC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAkB,CAAC;QAC/D,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,EAAE,CAAC;YACjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC7D,IAAI,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBAChC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;gBACxB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACtB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;IACH,CAAC;IAEO,UAAU,CAAC,IAAa,EAAE,IAAO;QACvC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;IAED,MAAM,CAAC,KAAU;QACf,IAAI,SAAS,GAAG,IAAI,CAAC,SAAU,CAAC;QAChC,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAC1B,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;QACxB,IAAI,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,QAAQ,GAAuB,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEtE,IAAI,OAAO,GAAG,CAAC,CAAC;QAChB,IAAI,OAAO,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAClC,IAAI,OAAO,GAAG,CAAC,CAAC;QAChB,IAAI,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QAE/B,IAAI,aAA+C,CAAC;QAEpD,OAAO,OAAO,IAAI,OAAO,IAAI,OAAO,IAAI,OAAO,EAAE,CAAC;YAChD,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC/B,OAAO,EAAE,CAAC;YACZ,CAAC;iBAAM,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;gBACtC,OAAO,EAAE,CAAC;YACZ,CAAC;iBAAM,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;gBACjD,kBAAkB;gBAClB,QAAQ,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;gBACtC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;gBACpD,OAAO,EAAE,CAAC;gBACV,OAAO,EAAE,CAAC;YACZ,CAAC;iBAAM,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;gBACjD,kBAAkB;gBAClB,QAAQ,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;gBACtC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;gBACpD,OAAO,EAAE,CAAC;gBACV,OAAO,EAAE,CAAC;YACZ,CAAC;iBAAM,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;gBACjD,mDAAmD;gBACnD,QAAQ,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;gBACtC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;gBACpD,QAAQ,CAAC,OAAO,CAAE,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAE,CAAC,EAAE,CAAC,CAAC;gBACnD,OAAO,EAAE,CAAC;gBACV,OAAO,EAAE,CAAC;YACZ,CAAC;iBAAM,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;gBACjD,oDAAoD;gBACpD,QAAQ,CAAC,OAAO,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;gBACtC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAE,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;gBACpD,QAAQ,CAAC,OAAO,CAAE,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAE,CAAC,EAAE,CAAC,CAAC;gBACpD,OAAO,EAAE,CAAC;gBACV,OAAO,EAAE,CAAC;YACZ,CAAC;iBAAM,CAAC;gBACN,mBAAmB;gBACnB,IAAI,CAAC,aAAa,EAAE,CAAC;oBACnB,aAAa,GAAG,IAAI,GAAG,EAAE,CAAC;oBAC1B,KAAK,IAAI,CAAC,GAAG,OAAO,EAAE,CAAC,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;wBACxC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;4BACzB,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;wBACnC,CAAC;oBACH,CAAC;gBACH,CAAC;gBAED,IAAI,QAAQ,GAAG,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;gBACnD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;oBAC3B,WAAW;oBACX,IAAI,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBAChC,IAAI,CAAC,cAAc,EAAE,CAAC;oBACtB,QAAQ,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;oBACzB,QAAQ,CAAC,OAAO,CAAE,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBACtC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;gBACxC,CAAC;qBAAM,CAAC;oBACN,gBAAgB;oBAChB,IAAI,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAE,CAAC;oBAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;oBACtC,QAAQ,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;oBACzB,QAAQ,CAAC,OAAO,CAAE,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBACtC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;gBAC5B,CAAC;gBACD,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC;QAED,6BAA6B;QAC7B,OAAO,OAAO,IAAI,OAAO,EAAE,CAAC;YAC1B,IAAI,QAAQ,CAAC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;gBAC/B,QAAQ,CAAC,OAAO,CAAE,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;YACjC,CAAC;YACD,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,0BAA0B;QAC1B,OAAO,OAAO,IAAI,OAAO,EAAE,CAAC;YAC1B,IAAI,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YAChC,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,QAAQ,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;YACzB,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;YACjB,IAAI,GAAG,GAAG,QAAQ,CAAC,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC;YACpC,IAAI,GAAG,EAAE,CAAC;gBACR,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACjB,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACvB,CAAC;YACD,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YACtC,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;IACtB,CAAC;CACF"}

package/dist/server.d.ts

@@ -0,0 +1,3 @@
+import type { View } from './view.ts';
+export declare function renderToString(view: View, props?: Record<string, unknown>): string;
+//# sourceMappingURL=server.d.ts.map

package/dist/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEtC,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAElF"}

package/dist/server.js

@@ -0,0 +1,4 @@
+export function renderToString(view, props) {
+    return view.template(props).toString();
+}
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,cAAc,CAAC,IAAU,EAAE,KAA+B;IACxE,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;AACzC,CAAC"}

package/dist/view.d.ts

@@ -0,0 +1,15 @@
+export { SafeHTML, html, unsafeHTML } from './html.ts';
+import { SafeHTML } from './html.ts';
+export declare class View<T = Record<string, unknown>> {
+    el: HTMLElement;
+    createElement(): HTMLElement;
+    template(_props?: T): SafeHTML;
+    createAndMount(): void;
+    mount(el: HTMLElement): void;
+    update(_data?: T): HTMLElement;
+}
+interface Slottable {
+    template(props?: any): SafeHTML;
+}
+export declare function slot<T extends Slottable>(target: T, ...args: Parameters<T['template']>): SafeHTML;
+//# sourceMappingURL=view.d.ts.map

package/dist/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAQ,MAAM,WAAW,CAAC;AAE3C,qBAAa,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3C,EAAE,EAAG,WAAW,CAAC;IAEjB,aAAa,IAAI,WAAW;IAO5B,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,QAAQ;IAI9B,cAAc,IAAI,IAAI;IAItB,KAAK,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI;IAI5B,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,WAAW;CAG/B;AAED,UAAU,SAAS;IACjB,QAAQ,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,QAAQ,CAAC;CACjC;AAED,wBAAgB,IAAI,CAAC,CAAC,SAAS,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,QAAQ,CAEjG"}

package/dist/view.js

@@ -0,0 +1,27 @@
+export { SafeHTML, html, unsafeHTML } from "./html.js";
+import { html } from "./html.js";
+export class View {
+    el;
+    createElement() {
+        let tpl = document.createElement('template');
+        tpl.innerHTML = this.template().toString();
+        this.el = document.importNode(tpl.content, true).firstElementChild;
+        return this.el;
+    }
+    template(_props) {
+        return html ``;
+    }
+    createAndMount() {
+        this.mount(this.createElement());
+    }
+    mount(el) {
+        this.el = el;
+    }
+    update(_data) {
+        return this.el;
+    }
+}
+export function slot(target, ...args) {
+    return target.template(...args);
+}
+//# sourceMappingURL=view.js.map

package/dist/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","sourceRoot":"","sources":["../src/view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAY,IAAI,EAAE,MAAM,WAAW,CAAC;AAE3C,MAAM,OAAO,IAAI;IACf,EAAE,CAAe;IAEjB,aAAa;QACX,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAC7C,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC;QAC3C,IAAI,CAAC,EAAE,GAAG,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,iBAAgC,CAAC;QAClF,OAAO,IAAI,CAAC,EAAE,CAAC;IACjB,CAAC;IAED,QAAQ,CAAC,MAAU;QACjB,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IACnC,CAAC;IAED,KAAK,CAAC,EAAe;QACnB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACf,CAAC;IAED,MAAM,CAAC,KAAS;QACd,OAAO,IAAI,CAAC,EAAE,CAAC;IACjB,CAAC;CACF;AAMD,MAAM,UAAU,IAAI,CAAsB,MAAS,EAAE,GAAG,IAA+B;IACrF,OAAO,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;AAClC,CAAC"}

package/package.json

@@ -1,10 +1,30 @@
 {
   "name": "@matthewp/zebra",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "exports": {
-    ".": "./src/view.ts",
-    "./list": "./src/list.ts",
-    "./server": "./src/server.ts"
+    ".": {
+      "types": "./dist/view.d.ts",
+      "default": "./dist/view.js"
+    },
+    "./html": {
+      "types": "./dist/html.d.ts",
+      "default": "./dist/html.js"
+    },
+    "./list": {
+      "types": "./dist/list.d.ts",
+      "default": "./dist/list.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "default": "./dist/server.js"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^5.8.0"
   }
 }

package/src/list.ts

@@ -1,146 +0,0 @@
-import { View } from './view.ts';
-
-type ViewConstructor = new () => View;
-
-export class List<T = Record<string, unknown>> {
-  private ViewClass: ViewConstructor;
-  private keyFn: (item: T) => unknown;
-  private views: (View | null)[] = [];
-  private keys: unknown[] = [];
-  private container: HTMLElement | null = null;
-
-  constructor(ViewClass: ViewConstructor, keyFn: (item: T) => unknown) {
-    this.ViewClass = ViewClass;
-    this.keyFn = keyFn;
-  }
-
-  template(items?: T[]): string {
-    if (!items || items.length === 0) return '';
-    return items.map(item => {
-      let view = new this.ViewClass();
-      return view.template(item as unknown as Record<string, unknown>);
-    }).join('');
-  }
-
-  mount(container: HTMLElement, items?: T[]) {
-    this.container = container;
-    let children = Array.from(container.children) as HTMLElement[];
-    if (children.length > 0 && items) {
-      for (let i = 0; i < children.length && i < items.length; i++) {
-        let view = new this.ViewClass();
-        view.mount(children[i]);
-        view.update(items[i] as unknown as Record<string, unknown>);
-        this.views.push(view);
-        this.keys.push(this.keyFn(items[i]));
-      }
-    }
-  }
-
-  private updateView(view: View, item: T) {
-    view.update(item as unknown as Record<string, unknown>);
-  }
-
-  update(items: T[]) {
-    let container = this.container!;
-    let oldViews = this.views;
-    let oldKeys = this.keys;
-    let newKeys = items.map(this.keyFn);
-    let newViews: (View | null)[] = new Array(items.length).fill(null);
-
-    let oldHead = 0;
-    let oldTail = oldViews.length - 1;
-    let newHead = 0;
-    let newTail = items.length - 1;
-
-    let oldKeyToIndex: Map<unknown, number> | undefined;
-
-    while (oldHead <= oldTail && newHead <= newTail) {
-      if (oldViews[oldHead] === null) {
-        oldHead++;
-      } else if (oldViews[oldTail] === null) {
-        oldTail--;
-      } else if (oldKeys[oldHead] === newKeys[newHead]) {
-        // Head-Head match
-        newViews[newHead] = oldViews[oldHead];
-        this.updateView(oldViews[oldHead]!, items[newHead]);
-        oldHead++;
-        newHead++;
-      } else if (oldKeys[oldTail] === newKeys[newTail]) {
-        // Tail-Tail match
-        newViews[newTail] = oldViews[oldTail];
-        this.updateView(oldViews[oldTail]!, items[newTail]);
-        oldTail--;
-        newTail--;
-      } else if (oldKeys[oldHead] === newKeys[newTail]) {
-        // Head-Tail match: move old head to after old tail
-        newViews[newTail] = oldViews[oldHead];
-        this.updateView(oldViews[oldHead]!, items[newTail]);
-        oldViews[oldTail]!.el.after(oldViews[oldHead]!.el);
-        oldHead++;
-        newTail--;
-      } else if (oldKeys[oldTail] === newKeys[newHead]) {
-        // Tail-Head match: move old tail to before old head
-        newViews[newHead] = oldViews[oldTail];
-        this.updateView(oldViews[oldTail]!, items[newHead]);
-        oldViews[oldHead]!.el.before(oldViews[oldTail]!.el);
-        oldTail--;
-        newHead++;
-      } else {
-        // Build map lazily
-        if (!oldKeyToIndex) {
-          oldKeyToIndex = new Map();
-          for (let i = oldHead; i <= oldTail; i++) {
-            if (oldViews[i] !== null) {
-              oldKeyToIndex.set(oldKeys[i], i);
-            }
-          }
-        }
-
-        let oldIndex = oldKeyToIndex.get(newKeys[newHead]);
-        if (oldIndex === undefined) {
-          // New item
-          let view = new this.ViewClass();
-          view.createAndMount();
-          newViews[newHead] = view;
-          oldViews[oldHead]!.el.before(view.el);
-          this.updateView(view, items[newHead]);
-        } else {
-          // Move existing
-          let view = oldViews[oldIndex]!;
-          this.updateView(view, items[newHead]);
-          newViews[newHead] = view;
-          oldViews[oldHead]!.el.before(view.el);
-          oldViews[oldIndex] = null;
-        }
-        newHead++;
-      }
-    }
-
-    // Remove remaining old items
-    while (oldHead <= oldTail) {
-      if (oldViews[oldHead] !== null) {
-        oldViews[oldHead]!.el.remove();
-      }
-      oldHead++;
-    }
-
-    // Add remaining new items
-    while (newHead <= newTail) {
-      let view = new this.ViewClass();
-      view.createAndMount();
-      newViews[newHead] = view;
-      let el = view.el;
-      let ref = newViews[newTail + 1]?.el;
-      if (ref) {
-        ref.before(el);
-      } else {
-        container.append(el);
-      }
-      this.updateView(view, items[newHead]);
-      newHead++;
-    }
-
-    this.views = newViews;
-    this.keys = newKeys;
-  }
-}

package/src/server.ts

@@ -1,5 +0,0 @@
-import type { View } from './view.ts';
-
-export function renderToString(view: View, props?: Record<string, unknown>): string {
-  return view.template(props);
-}

package/src/view.ts

@@ -1,34 +0,0 @@
-export class View {
-  el!: HTMLElement;
-
-  createElement(): HTMLElement {
-    let tpl = document.createElement('template');
-    tpl.innerHTML = this.template();
-    this.el = document.importNode(tpl.content, true).firstElementChild as HTMLElement;
-    return this.el;
-  }
-
-  template(_props?: any): string {
-    return '';
-  }
-
-  createAndMount(): void {
-    this.mount(this.createElement());
-  }
-
-  mount(el: HTMLElement): void {
-    this.el = el;
-  }
-
-  update(_data?: Record<string, unknown>): HTMLElement {
-    return this.el;
-  }
-}
-
-interface Slottable {
-  template(props?: any): string;
-}
-
-export function slot<T extends Slottable>(target: T, ...args: Parameters<T['template']>): string {
-  return target.template(...args);
-}