@davidsouther/jiffies 1.0.0 → 2.0.1

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/css/border.ts

@@ -1,6 +1,6 @@
-import { Properties } from "../types/css.js";
-import { Side, Size } from "./constants.js";
-import { isSide, getSize, getSide } from "./core.js";
+import { Properties } from "../types/css.js"
+import { Side, Size } from "./constants.js"
+import { isSide, getSize, getSide } from "./core.js"
 
 export function rounded(size: Size = "", side: Side = "") {
   if (isSide(size)) {

package/src/dom/css/core.ts

@@ -1,4 +1,4 @@
-import { Side, Sides, Size, Sizes } from "./constants.js";
+import { Side, Sides, Size, Sizes } from "./constants.js"
 
 export function isSide(v: string): v is Side {
   return Sides[v as keyof typeof Sides] !== undefined;

package/src/dom/css/fstyle.ts

@@ -1,5 +1,5 @@
-import { dashCase } from "../../case.js";
-import { Properties } from "../types/css.js";
+import { dashCase } from "../../case.js"
+import { Properties } from "../types/css.js"
 
 export type FStyle =
   | Properties

package/src/dom/css/sizing.ts

@@ -1,4 +1,4 @@
-import { Width, Widths } from "./constants.js";
+import { Width, Widths } from "./constants.js"
 
 export function width(amount: Width, block?: "inline") {
   if (amount === undefined && Widths[block as Width] !== undefined) {

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.test.ts

@@ -1,6 +1,6 @@
-import { describe, it, expect } from "../scope/index.js";
-import { FC } from "./fc.js";
-import { button, div, form, input, label, small } from "./html.js";
+import { describe, it, expect } from "../scope/index.js"
+import { FC } from "./fc.js"
+import { button, div, form, input, label, small } from "./html.js"
 
 describe("FC", () => {
   it("creates FCs", () => {

package/src/dom/fc.ts

@@ -3,25 +3,24 @@ import {
   DenormChildren,
   DomAttrs,
   normalizeArguments,
-  Updatable,
   update,
-} from "./dom.js";
+} from "./dom.js"
 
 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;
     }
   }
 

package/src/dom/form/form.app.ts

@@ -1,5 +1,5 @@
-import { article, button, div, main, small } from "../html.js";
-import { Form, Input } from "./form.js";
+import { article, button, div, main, small } from "../html.js"
+import { Form, Input } from "./form.js"
 
 export const App = () =>
   main(

package/src/dom/form/form.ts

@@ -1,12 +1,12 @@
-import { Attrs, DenormChildren } from "../dom.js";
-import { form, input, label, option, select } from "../html.js";
+import { Attrs, DenormChildren } from "../dom.js"
+import { form, input, label, option, select } from "../html.js"
 import {
   FormAttributes,
   InputAttributes,
   LabelAttributes,
   OptionAttributes,
   SelectAttributes,
-} from "../types/html.js";
+} from "../types/html"
 
 export const Form = (attrs: FormAttributes, ...children: DenormChildren[]) => {
   if (attrs.events?.submit) {

package/src/dom/html.test.ts

@@ -1,6 +1,6 @@
-import { describe, it } from "../scope/describe.js";
-import { expect } from "../scope/expect.js";
-import { table, tbody, td, th, thead, tr, button } from "./html.js";
+import { describe, it } from "../scope/describe.js"
+import { expect } from "../scope/expect.js"
+import { table, tbody, td, th, thead, tr, button } from "./html.js"
 
 describe("html", () => {
   it("creates HTML Elements", () => {
@@ -16,16 +16,16 @@ describe("html", () => {
   });
 
   it("attaches event handlers", () => {
-    let clicked = false;
+    let clicked = 0;
     const btn = button({
       events: {
         click: () => {
-          clicked = true;
+          clicked += 1;
         },
       },
     });
     btn.dispatchEvent(new Event("click"));
-    expect(clicked).toBe(true);
+    expect(clicked).toBe(1);
   });
 
   it("removes event handlers", () => {
@@ -41,7 +41,7 @@ describe("html", () => {
 
     expect(clicked).toBe(1);
 
-    btn.update({ events: { click: undefined } });
+    btn.update({ events: { click: null } });
     btn.dispatchEvent(new Event("click"));
     expect(clicked).toBe(1);
   });
@@ -49,7 +49,7 @@ describe("html", () => {
   it("sets style properties", () => {
     const btn = button({
       style: { flexDirection: "column" },
-    }) as unknown as HTMLButtonElement;
+    });
 
     expect(btn.style.flexDirection).toBe("column");
   });

package/src/dom/html.ts

@@ -1,19 +1,16 @@
-import { DenormAttrs, DenormChildren, up, Updatable } from "./dom.js";
-import { Properties } from "./types/css.js";
-
-export type UHTMLElement<E extends HTMLElement = HTMLElement> = Updatable<
-  Omit<E, "style">
-> & { style: Properties };
+import { DenormAttrs, DenormChildren, up } from "./dom.js"
 
 const makeHTMLElement =
   <K extends keyof HTMLElementTagNameMap>(name: K) =>
   (
-    attrs?: DenormAttrs<Omit<HTMLElementTagNameMap[K], "style">>,
+    attrs?: DenormAttrs<HTMLElementTagNameMap[K]>,
     ...children: DenormChildren[]
   ) =>
-    up(document.createElement(name), attrs, ...children) as UHTMLElement<
-      HTMLElementTagNameMap[K]
-    >;
+    up(
+      document.createElement(name),
+      attrs,
+      ...children
+    ) as HTMLElementTagNameMap[K];
 
 export const a = makeHTMLElement("a");
 export const abbr = makeHTMLElement("abbr");

package/src/dom/observable.test.ts

@@ -0,0 +1,43 @@
+import { O } from "./observable.js"
+import { Subject, map } from "../observable/observable.js"
+import { describe, it } from "../scope/describe.js"
+import { expect } from "../scope/expect.js"
+import { div, span } from "./html.js"
+import { DOMUpdates } from "./dom.js"
+
+describe("DOM Observable", () => {
+  it("updates a dom node with observable results", async () => {
+    const subject = new Subject<string>();
+    const observable = subject.pipe(map((s) => [s]));
+
+    const element = O(div(), observable);
+
+    expect(element.innerText).toEqual("");
+    await subject.next("H");
+    expect(element.innerText).toEqual("H");
+    await subject.next("He");
+    expect(element.innerText).toEqual("He");
+  });
+
+  it("updates a dom node's attributes", async () => {
+    const classes = new Subject<string[]>();
+    const observable = classes.map<DOMUpdates>((c) => [{ class: c.join(" ") }]);
+
+    const element = O(span(), observable);
+
+    expect(element.classList.contains("warning")).toBe(false);
+    expect(element.classList.contains("error")).toBe(false);
+
+    await classes.next(["warning"]);
+    expect(element.classList.contains("warning")).toBe(true);
+    expect(element.classList.contains("error")).toBe(false);
+
+    await classes.next(["error"]);
+    expect(element.classList.contains("warning")).toBe(true);
+    expect(element.classList.contains("error")).toBe(true);
+
+    await classes.next(["!warning", "!error"]);
+    expect(element.classList.contains("warning")).toBe(false);
+    expect(element.classList.contains("error")).toBe(false);
+  });
+});

package/src/dom/observable.ts

@@ -0,0 +1,11 @@
+import { Observable } from "../observable/observable.js"
+
+export function O<E extends Element>(
+  element: E,
+  observable: Observable<Parameters<E["update"]>>
+): E {
+  observable.subscribe((t) => {
+    element.update(...t);
+  });
+  return element;
+}

package/src/dom/provide.ts

@@ -1,4 +1,4 @@
-import { Option } from "../result.js";
+import { Option } from "../result.js"
 
 let registry: Record<string, unknown> = {};
 

package/src/dom/router/link.ts

@@ -1,5 +1,5 @@
-import { a } from "../html.js";
-import { Router } from "./router.js";
+import { a } from "../html.js"
+import { Router } from "./router.js"
 
 export interface Link {
   href: string;

package/src/dom/router/router.ts

@@ -1,10 +1,10 @@
-import { DOMElement, Updatable } from "../dom";
-import { Link } from "./link";
+import { DOMElement } from "../dom.js";
+import { Link } from "./link.js";
 
 export interface Router {
   current?: string;
   navigate: (url: string) => (event: Event) => void;
-  (target: Updatable<DOMElement>): Updatable<DOMElement>;
+  (target: DOMElement): DOMElement;
 }
 
 let baseURI = `${document.baseURI}`;
@@ -15,8 +15,8 @@ const normalizeHref = () => {
 let globalRouter: Router;
 export const Router = {
   for(links: Link[], index: string, setGlobalRouter = true): Router {
-    let target: Updatable<Element>;
-    const partialRouter: Partial<Router> = (t: Updatable<Element>) => {
+    let target: Element;
+    const partialRouter: Partial<Router> = (t: Element) => {
       target = t;
       const href = normalizeHref();
       const route = href === baseURI ? baseURI + index : href;

package/src/dom/svg.ts

@@ -1,4 +1,4 @@
-import { DenormAttrs, DenormChildren, up } from "./dom.js";
+import { DenormAttrs, DenormChildren, up } from "./dom.js"
 
 const makeSVGElement =
   <K extends keyof SVGElementTagNameMap>(name: K) =>

package/src/dom/test.ts

@@ -1,2 +1,8 @@
-export {};
-await Promise.all([import("./html.test.js"), import("./fc.test.js")]);
+export async function loadTests() {
+  if (process?.env.CI?.toLowerCase() === "true") return;
+  await Promise.all([
+    import("./html.test.js"),
+    import("./fc.test.js"),
+    import("./observable.test.js"),
+  ]);
+}

package/src/dom/types/html.ts

@@ -1,4 +1,4 @@
-import { Properties } from "./css.js";
+import { Properties } from "./css"
 
 export interface AriaAttributes {
   [_: `aria-${string}`]: string;

package/src/dom/xml.ts

@@ -7,6 +7,5 @@ export function xml(
     (attrs, [attr, val]) => `${attrs} ${attr}="${val}"`,
     ""
   );
-  const kids = children.join("");
-  return `<${tag} ${attrs}>${kids}</${tag}>`;
+  return `<${tag} ${attrs}>${children.join("")}</${tag}>`;
 }

package/src/equal.ts

@@ -36,7 +36,7 @@ export function equals<A>(a: A | A[], b: A | A[], partial = false): boolean {
         return matchObjects(a, b, partial);
       }
     case "function":
-      return a.name == (b as unknown as Function).name;
+      return a.name === (b as unknown as Function).name;
     default:
       return Object.is(a, b);
   }

package/src/flags.ts

@@ -22,7 +22,7 @@ export const parse = (parseArgs: string[]) => {
   };
 
   while (hasNext()) {
-    if (peek().substr(0, 2) == "--") {
+    if (peek().substr(0, 2) === "--") {
       parseLong(advance().substr(2));
     } else {
       args.push(advance());