@davidsouther/jiffies 1.0.0 → 1.1.0

package/build/test.mjs

@@ -1,23 +1,23 @@
-#!/usr/bin/env node
-import { parse } from "./flags.js";
-import { execute } from "./scope/execute.js";
-import { asXML } from "./scope/display/junit.js";
-import { onConsole } from "./scope/display/console.js";
-await import("./test_all.js");
-(async function () {
-    const results = await execute();
-    const FLAGS = parse(process.argv);
-    switch (FLAGS.asString("mode", "console")) {
-        case "junit":
-            const xml = asXML(results);
-            console.log(xml);
-            break;
-        case "console":
-        default:
-            onConsole(results);
-            break;
-    }
-    if (results.failed > 0) {
-        process.exit(1);
-    }
-})();
+#!/usr/bin/env node
+import { parse } from "./flags.js";
+import { execute } from "./scope/execute.js";
+import { asXML } from "./scope/display/junit.js";
+import { onConsole } from "./scope/display/console.js";
+await import("./test_all.js");
+(async function () {
+    const results = await execute();
+    const FLAGS = parse(process.argv);
+    switch (FLAGS.asString("mode", "console")) {
+        case "junit":
+            const xml = asXML(results);
+            console.log(xml);
+            break;
+        case "console":
+        default:
+            onConsole(results);
+            break;
+    }
+    if (results.failed > 0) {
+        process.exit(1);
+    }
+})();

package/build/test_all.d.ts

@@ -1,7 +1,7 @@
-import "./context.test.js";
-import "./equal.test.js";
-import "./flags.test.js";
-import "./fs.test.js";
-import "./generator.test.js";
-import "./lock.test.js";
-import "./result.test.js";
+import "./context.test.js";
+import "./equal.test.js";
+import "./flags.test.js";
+import "./fs.test.js";
+import "./generator.test.js";
+import "./lock.test.js";
+import "./result.test.js";

package/build/test_all.js

@@ -1,18 +1,18 @@
-// This file must be .js for imports to run. Unused imports in .ts files are
-// discarded during transpilation.
-import { describe, expect, it } from "./scope/index.js";
-import "./context.test.js";
-import "./equal.test.js";
-import "./flags.test.js";
-import "./fs.test.js";
-import "./generator.test.js";
-import "./lock.test.js";
-import "./result.test.js";
-describe("Test executor", () => {
-    it("matches equality", () => {
-        expect(1).toBe(1);
-    });
-    it("fails on inequality", () => {
-        expect(() => expect(1).toBe(2)).toThrow();
-    });
-});
+// This file must be .js for imports to run. Unused imports in .ts files are
+// discarded during transpilation.
+import { describe, expect, it } from "./scope/index.js";
+import "./context.test.js";
+import "./equal.test.js";
+import "./flags.test.js";
+import "./fs.test.js";
+import "./generator.test.js";
+import "./lock.test.js";
+import "./result.test.js";
+describe("Test executor", () => {
+    it("matches equality", () => {
+        expect(1).toBe(1);
+    });
+    it("fails on inequality", () => {
+        expect(() => expect(1).toBe(2)).toThrow();
+    });
+});

package/build/transpile.d.mts

@@ -1,3 +1,3 @@
-export function transpile(url: string, get: () => Promise<{
-    toString(): string;
-}>): Promise<any>;
+export function transpile(url: string, get: () => Promise<{
+    toString(): string;
+}>): Promise<any>;

package/build/transpile.mjs

@@ -1,18 +1,18 @@
-// @ts-ignore
-import ts from "typescript";
-const compilerOptions = {
-    target: ts.ScriptTarget.ESNext,
-    module: ts.ModuleKind.ESNext,
-    inlineSourceMap: true,
-    inlineSources: true,
-};
-const tsmap = new Map();
-export async function transpile(
-/** @type string */ url, 
-/** @type {() => Promise<{toString(): string}>} */ get) {
-    if (!tsmap.has(url) || true) {
-        const source = ts.transpile((await get()).toString(), compilerOptions, url, undefined, url);
-        tsmap.set(url, source);
-    }
-    return tsmap.get(url);
-}
+// @ts-ignore
+import ts from "typescript";
+const compilerOptions = {
+    target: ts.ScriptTarget.ESNext,
+    module: ts.ModuleKind.ESNext,
+    inlineSourceMap: true,
+    inlineSources: true,
+};
+const tsmap = new Map();
+export async function transpile(
+/** @type string */ url, 
+/** @type {() => Promise<{toString(): string}>} */ get) {
+    if (!tsmap.has(url) || true) {
+        const source = ts.transpile((await get()).toString(), compilerOptions, url, undefined, url);
+        tsmap.set(url, source);
+    }
+    return tsmap.get(url);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@davidsouther/jiffies",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": false,
   "displayName": "JEFRi Jiffies",
   "type": "module",
@@ -31,9 +31,9 @@
   },
   "devDependencies": {
     "@types/node": "^17.0.24",
-    "typescript": "4.7.1-rc"
+    "typescript": "^4.7.1"
   },
   "dependencies": {
     "sass": "^1.49.9"
   }
-}
+}

package/src/components/logger.ts

@@ -1,10 +1,9 @@
 import { display, Display } from "../display.js";
-import { DOMElement, Updatable } from "../dom/dom.js";
 import { div, span, ul, li, pre, code } from "../dom/html.js";
 import { LEVEL, Logger } from "../log.js";
 
 export interface HTMLLogger extends Logger {
-  root: Updatable<DOMElement>;
+  root: Element;
 }
 
 export function isHTMLLogger(logger: Logger): logger is HTMLLogger {
@@ -12,7 +11,7 @@ export function isHTMLLogger(logger: Logger): logger is HTMLLogger {
 }
 
 export function makeHTMLLogger(name: string): HTMLLogger {
-  let log: Updatable<DOMElement>;
+  let log: Element;
   const root = div(div(span(name)), (log = ul()));
   const logger: Partial<HTMLLogger> = { level: LEVEL.INFO, root };
 

package/src/components/virtual_scroll.test.ts

@@ -15,13 +15,13 @@ describe("VirtualScroll", () => {
       get: arrayAdapter(data),
       row: (i) => div(`${i}`),
     };
-    // @ts-ignore TODO(TFC)
+
     const scroll = VirtualScroll(props);
 
-    expect(scroll[State].bufferedItems).toBe(9);
-    expect(scroll[State].data).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8]);
+    expect(scroll[State]?.bufferedItems).toBe(9);
+    expect(scroll[State]?.data).toEqual([0, 1, 2, 3, 4]);
     //expect(scroll.state.topPaddingHeight).toBe(0);
-    expect(scroll[State].viewportHeight).toBe(60);
+    expect(scroll[State]?.viewportHeight).toBe(60);
     //expect(scroll.state.totalHeight).toBe(200);
   });
 });

package/src/components/virtual_scroll.ts

@@ -1,6 +1,6 @@
 import { debounce } from "../debounce.js";
 import { FC, State } from "../dom/fc.js";
-import { div, UHTMLElement } from "../dom/html.js";
+import { div } from "../dom/html.js";
 
 export interface VirtualScrollSettings {
   minIndex: number;
@@ -22,7 +22,7 @@ export function arrayAdapter<T>(data: T[]): VirtualScrollDataAdapter<T> {
 export interface VirtualScrollProps<T, U extends HTMLElement> {
   settings: Partial<VirtualScrollSettings>;
   get: VirtualScrollDataAdapter<T>;
-  row: (t: T) => UHTMLElement<U>;
+  row: (t: T) => U;
 }
 
 export function fillVirtualScrollSettings(
@@ -30,7 +30,7 @@ export function fillVirtualScrollSettings(
 ): VirtualScrollSettings {
   const {
     minIndex = 0,
-    maxIndex = 1,
+    maxIndex = Number.MAX_SAFE_INTEGER,
     startIndex = 0,
     itemHeight = 20,
     count = maxIndex - minIndex + 1,
@@ -121,7 +121,7 @@ interface VirtualScrollState<T, U extends HTMLElement = HTMLElement> {
   bottomPaddingHeight: number; // px
   toleranceHeight: number; // px
   data: T[];
-  rows: UHTMLElement<U>[];
+  rows: U[];
 }
 
 // export interface VirtualScroll<T, U extends HTMLElement> {
@@ -130,8 +130,8 @@ interface VirtualScrollState<T, U extends HTMLElement = HTMLElement> {
 // }
 
 export const VirtualScroll = FC<
-  VirtualScrollProps<unknown, HTMLElement>,
-  VirtualScrollState<unknown, HTMLElement>
+  VirtualScrollProps<any, HTMLElement>,
+  VirtualScrollState<any, HTMLElement>
 >("virtual-scroll", (element, props) => {
   const settings = fillVirtualScrollSettings(props.settings);
   const state = (element[State] = {
@@ -163,14 +163,14 @@ export const VirtualScroll = FC<
     state.topPaddingHeight = newState.topPaddingHeight;
     state.bottomPaddingHeight = newState.bottomPaddingHeight;
     state.data = newState.data;
-    element[State].rows = state.data.map(props.row);
+    state.rows = state.data.map(props.row);
 
     viewportElement.update(
       div({
         class: "VirtualScroll__topPadding",
         style: { height: `${state.topPaddingHeight}px` },
       }),
-      ...(element[State].rows ?? []).map((row, i) =>
+      ...(state.rows ?? []).map((row, i) =>
         div(
           {
             class: `VirtualScroll__item_${i}`,

package/src/diff.test.ts

@@ -0,0 +1,48 @@
+import { diff } from "./diff.js";
+import { describe, it } from "./scope/describe.js";
+import { expect } from "./scope/expect.js";
+
+describe("diff", () => {
+  it("diffs primitives", () => {
+    const diffed = diff(1, 2);
+    expect(diffed).toEqual([{ key: "", left: 1, right: 2 }]);
+  });
+
+  it("diffs objects", () => {
+    const diffed = diff({ a: 1, b: 2 }, { a: 2, b: 2 });
+    expect(diffed).toEqual([{ key: "a", left: 1, right: 2 }]);
+  });
+
+  it("diffs nested objects", () => {
+    const diffed = diff({ a: { c: 1 }, b: 2 }, { a: { c: 2 }, b: 2 });
+    expect(diffed).toEqual([
+      { key: "a", children: [{ key: "c", left: 1, right: 2 }] },
+    ]);
+  });
+
+  it("diffs missing sides", () => {
+    const diffed = diff<{ a?: number; b?: number }>({ a: 1 }, { b: 2 });
+    expect(diffed).toEqual([
+      { key: "a", left: 1, right: undefined },
+      { key: "b", left: undefined, right: 2 },
+    ]);
+  });
+
+  it("diffs arrays", () => {
+    const diffed = diff<number[]>([1, 2, 3], [1, 4, 3]);
+    expect(diffed).toEqual([{ key: 1, left: 2, right: 4 }]);
+  });
+
+  it("diffs objects in an array", () => {
+    const diffed = diff(
+      [{ a: { b: 1 } }, { a: { b: 2 } }, { a: { b: 3 } }],
+      [{ a: { b: 1 } }, { a: { b: 4 } }, { a: { b: 3 } }]
+    );
+    expect(diffed).toEqual([
+      {
+        key: 1,
+        children: [{ key: "a", children: [{ key: "b", left: 2, right: 4 }] }],
+      },
+    ]);
+  });
+});

package/src/diff.ts

@@ -0,0 +1,84 @@
+import { range } from "./range.js";
+import { isSome, None, Option, Some } from "./result.js";
+
+export const DiffA = Symbol("A");
+export const DiffB = Symbol("B");
+
+export type DiffIndex = string | number;
+export type DiffPrimitive = string | number | boolean | null | undefined;
+
+interface DiffEntry {
+  key: DiffIndex;
+  left: DiffPrimitive;
+  right: DiffPrimitive;
+}
+
+interface DiffList {
+  key: DiffIndex;
+  children: (DiffEntry | DiffList)[];
+}
+
+function doDiff<T>(va: T, vb: T, k: DiffIndex): Option<DiffList | DiffEntry> {
+  if (Array.isArray(va)) {
+    // @ts-ignore
+    return diffArray(va, vb, k);
+  }
+  if (typeof va == "object") {
+    const d = diffObject(va, vb, k);
+    if (d.children.length == 0) {
+      return None();
+    } else {
+      return Some(d);
+    }
+  }
+  if (Object.is(va, vb)) {
+    return None();
+  } else {
+    // @ts-ignore
+    return { key: k, left: va, right: vb };
+  }
+}
+
+function diffArray<T>(
+  a: Partial<T>[],
+  b: Partial<T>[],
+  key: DiffIndex
+): Option<DiffList> {
+  const indexes = Math.max(a.length, b.length);
+  const children = range(0, indexes)
+    .map((i) => doDiff(a[i], b[i], i))
+    .filter(isSome);
+  return children.length > 0 ? { key, children } : None();
+}
+
+function diffObject<T>(
+  a: Partial<T>,
+  b: Partial<T>,
+  key: DiffIndex = ""
+): DiffList {
+  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+  const children = [...keys]
+    // @ts-ignore
+    .map((k) => doDiff(a[k], b[k], k))
+    .filter(isSome);
+  return {
+    key,
+    children,
+  };
+}
+
+export function diff<T>(
+  a: Partial<T>,
+  b: Partial<T>
+): (DiffEntry | DiffList)[] {
+  if (typeof a != "object" && !Object.is(a, b)) {
+    // @ts-ignore
+    return [{ key: "", left: a, right: b }];
+  }
+  return (
+    Array.isArray(a)
+      ? // @ts-ignore
+        diffArray(a, b, "") ?? { children: [] }
+      : diffObject(a, b, "")
+  ).children;
+}

package/src/dom/dom.ts

@@ -1,4 +1,4 @@
-import * as CSS from "./types/css";
+import { Properties } from "./types/css.js";
 
 const Events = Symbol("events");
 export const CLEAR = Symbol("Clear children");
@@ -10,40 +10,44 @@ export type DOMElement = Element &
   DocumentAndElementEventHandlers &
   ElementCSSInlineStyle;
 
-export type Updater<E extends DOMElement> = Omit<E, "style"> & {
-  [Events]?: Map<string, EventHandler>;
-  update?: (attrs?: DenormAttrs<E>, ...children: DenormChildren[]) => Node;
-};
-
-export type Updatable<E extends Element> = Omit<E, "style"> & {
-  [Events]: Map<string, EventHandler>;
-  update: (attrs?: DenormAttrs<E>, ...children: DenormChildren[]) => Node;
-};
-
 export type DomAttrs = {
-  class: string;
-  style: Partial<CSS.Properties>;
+  class: string | string[];
+  style: Partial<Properties> | string;
+  role: "button" | "list" | "listbox";
   events: Partial<{
-    [K in keyof HTMLElementEventMap]: EventHandler;
+    [K in keyof HTMLElementEventMap]: EventHandler | null;
   }>;
 };
 
-export type Attrs<E extends Element, S = {}> = Partial<E & S & DomAttrs>;
+export type Attrs<E extends Omit<Element, "update">, S = {}> = Partial<
+  Omit<E, "style"> & S & DomAttrs
+>;
 
-export type DenormAttrs<E extends Element, S = {}> =
+export type DenormAttrs<E extends Omit<Element, "update">, S = {}> =
   | Attrs<E, S>
   | DenormChildren;
 
+declare global {
+  interface Element {
+    [Events]: Map<string, EventHandler>;
+    update(attrs?: DenormAttrs<Element>, ...children: DenormChildren[]): this;
+  }
+}
+
+export type DOMUpdates<E extends Element = Element> =
+  | [DenormAttrs<E>, ...DenormChildren[]]
+  | DenormChildren[];
+
 function isAttrs<E extends Element>(
   attrs: DenormAttrs<E> | undefined
 ): attrs is Attrs<E> {
   if (!attrs) {
     return false;
   }
-  if (typeof attrs === "string") {
-    return false;
+  if (typeof attrs === "object") {
+    return !(attrs as Node).nodeType;
   }
-  return !(attrs as Node).nodeType;
+  return false;
 }
 
 export function normalizeArguments<E extends Element>(
@@ -63,29 +67,31 @@ export function normalizeArguments<E extends Element>(
   return [attributes, children.flat()];
 }
 
-export function up<E extends DOMElement>(
-  element: E,
+export function up<E extends Element>(
+  element: Omit<E, "update">,
   attrs?: DenormAttrs<E>,
   ...children: DenormChildren[]
-): Updatable<E> {
-  return update(element, ...normalizeArguments(attrs, children));
+): E {
+  return update(element, ...normalizeArguments(attrs, children)) as E;
 }
 
-export function update<E extends DOMElement>(
-  element: Updater<E>,
-  attrs: Attrs<E>,
+export function update(
+  element: Omit<Element, "update">,
+  attrs: Attrs<Element>,
   children: DenormChildren[]
-): Updatable<E> {
+): Element {
   // Track events, to remove later
   const $events = (element[Events] ??= new Map<string, EventHandler>());
   const { style = {}, events = {}, ...rest } = attrs;
 
   Object.entries(events as NonNullable<typeof attrs.events>).forEach(
     ([k, v]) => {
-      if (v === null && $events.has(k)) {
-        const listener = $events.get(k)!;
-        element.removeEventListener(k, listener);
-      } else if (!$events.has(k)) {
+      if (v === null) {
+        if ($events.has(k)) {
+          const listener = $events.get(k)!;
+          element.removeEventListener(k, listener);
+        }
+      } else if (v !== undefined) {
         element.addEventListener(k as keyof ElementEventMap, v);
         $events.set(k, v);
       }
@@ -107,48 +113,54 @@ export function update<E extends DOMElement>(
   }
 
   Object.entries(rest).forEach(([k, v]) => {
-    if (k === "class" && typeof v === "string") {
-      v.split(/\s+/m)
+    if (k === "class") {
+      v = Array.isArray(v)
+        ? v
+        : (typeof v === "string" ? v : `${v}`).split(/\s+/m);
+      (v as string[])
         .filter((s) => s !== "")
-        .forEach((c) => element.classList.add(c));
+        .forEach((c) => {
+          if (c.startsWith("!")) {
+            element.classList.remove(c.substring(1));
+          } else {
+            element.classList.add(c);
+          }
+        });
+      return;
     }
 
-    let useAttributes =
-      k.startsWith("aria-") ||
-      k == "role" ||
+    const useNamespace =
+      element.namespaceURI &&
       element.namespaceURI != "http://www.w3.org/1999/xhtml";
-
-    if (useAttributes) {
-      switch (v) {
-        case false:
-          element.removeAttributeNS(element.namespaceURI, k);
-          break;
-        case true:
-          element.setAttributeNS(element.namespaceURI, k, k);
-          break;
-        default:
-          if (v === "") {
-            element.removeAttributeNS(element.namespaceURI, k);
-          } else {
-            element.setAttributeNS(element.namespaceURI, k, v);
-          }
+    const remove = !v;
+
+    if (useNamespace) {
+      if (remove) {
+        element.removeAttributeNS(element.namespaceURI, k);
+      } else if (v === true) {
+        element.setAttributeNS(element.namespaceURI, k, k);
+      } else {
+        element.setAttributeNS(element.namespaceURI, k, v);
       }
     } else {
-      // @ts-ignore Object.entries is unable to statically look into args
-      element[k] = v;
+      if (remove) {
+        element.removeAttribute(k);
+      } else if (v === true) {
+        element.setAttribute(k, k);
+      } else {
+        element.setAttribute(k, v);
+      }
     }
   });
 
   if (children?.length > 0) {
-    if (children[0] === CLEAR) {
-      element.replaceChildren();
-    } else {
-      element.replaceChildren(...(children as (string | Node)[]));
-    }
+    element.replaceChildren(
+      ...(children[0] === CLEAR ? [] : (children as (string | Node)[]))
+    );
   }
 
-  element.update ??= (attrs, ...children) =>
+  (element as Element).update ??= (attrs, ...children) =>
     update(element, ...normalizeArguments(attrs, children));
 
-  return element as Updatable<E>;
+  return element as Element;
 }

package/src/dom/fc.ts

@@ -3,7 +3,6 @@ import {
   DenormChildren,
   DomAttrs,
   normalizeArguments,
-  Updatable,
   update,
 } from "./dom.js";
 
@@ -11,17 +10,17 @@ export type Attrs<S> = S & Partial<DomAttrs>;
 
 export const State = Symbol();
 export interface FCComponent<P extends object, S extends object>
-  extends HTMLElement {
-  [State]: Partial<S>;
+  extends Element {
+  [State]?: Partial<S>;
   update(
-    attrs?: Partial<Attrs<P>> | DenormChildren,
+    attrs?: Partial<Attrs<P> & DomAttrs> | DenormChildren,
     ...children: DenormChildren[]
-  ): void;
+  ): this;
 }
 export interface RenderFn<P extends object, S extends object> {
   (el: FCComponent<P, S>, attrs: Attrs<P>, children: DenormChildren[]):
-    | Updatable<Element>
-    | Updatable<Element>[];
+    | Element
+    | Element[];
 }
 
 export interface FCComponentCtor<P extends object, S extends object> {
@@ -35,7 +34,7 @@ export function FC<P extends object, S extends object = {}>(
   name: string,
   component: RenderFn<P, S>
 ): FCComponentCtor<P, S> {
-  class FCImpl extends HTMLElement {
+  class FCImpl extends HTMLElement implements FCComponent<P, S> {
     constructor() {
       super();
     }
@@ -55,12 +54,14 @@ export function FC<P extends object, S extends object = {}>(
         this.#children = children;
       }
       this.#attrs = { ...this.#attrs, ...(attrs as Attrs<P>) };
+
       // Apply updates from the attrs to the dom node itself
-      // @ts-ignore
       update(this, this.#attrs, []);
+
       // Re-run the component function using new element, attrs, and children.
       const replace = [component(this, this.#attrs, this.#children)];
       this.replaceChildren(...replace.flat());
+      return this;
     }
   }