@davidsouther/jiffies 1.0.0-beta.1 → 2.0.0

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/context.ts

@@ -21,8 +21,8 @@ export function using<T, E extends Error, C extends Context>(
   operation?: Operation<T, E, C>,
   normalizeError: (e: Error | unknown | any) => Err<E> = (e) => Err(e)
 ): Result<T, E> {
-  if (typeof context == "function") {
-    if (context.length == 1) {
+  if (typeof context === "function") {
+    if (context.length === 1) {
       operation = context as Operation<T, E, C>;
       context = {} as C;
     } else {
@@ -47,7 +47,7 @@ export async function asyncUsing<T, E extends Error, C extends Context>(
   operation: AsyncOperation<T, E, C>,
   normalizeError: (e: Error | unknown | any) => Err<E> = (e: E) => Err(e)
 ): Promise<Result<T, E>> {
-  context = typeof context == "function" ? await context() : context;
+  context = typeof context === "function" ? await context() : context;
   let result: Result<T, E>;
   try {
     context[Enter]();

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/display.ts

@@ -8,5 +8,11 @@ export const isDisplay = (/** @type unknown */ a: unknown): a is Display =>
   typeof (a as Display).toString === "function" ||
   typeof (a as Display) === "string";
 
-export const display = (a: unknown | Display): string =>
-  isDisplay(a) ? a.toString() : JSON.stringify(a);
+export const display = (a: unknown | Display): string => {
+  if (isDisplay(a)) {
+    const str = a.toString();
+    if (str === "[object Object]") return JSON.stringify(a);
+    return str;
+  }
+  return JSON.stringify(a);
+};

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,47 +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-") ||
+    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,11 +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) {
@@ -19,8 +20,18 @@ export const Form = (attrs: FormAttributes, ...children: DenormChildren[]) => {
 };
 export const Input = (attrs: InputAttributes, ...children: DenormChildren[]) =>
   label(input(attrs as Attrs<HTMLInputElement>), ...children);
-export const Select = ({ options }: { options: string[] | {} }) =>
-  label(select(...prepareOptions(options).map(Option)));
+
+export const Select = (
+  attrs: { options: string[] | {}; selected?: string } & SelectAttributes &
+    LabelAttributes
+) =>
+  label(
+    { style: attrs.style ?? {} },
+    select(
+      { events: attrs.events ?? {} },
+      ...prepareOptions(attrs.options, attrs.selected).map(Option)
+    )
+  );
 export const Button = () => {};
 
 const prepareOptions = (
@@ -29,19 +40,31 @@ const prepareOptions = (
     | Record<
         string,
         string | { label: string; disabled?: boolean; selected?: boolean }
-      >
+      >,
+  selected?: string
 ): Parameters<typeof Option>[0][] =>
   Array.isArray(attrs)
-    ? attrs.map((value) => ({ value, label: value }))
+    ? attrs.map((value) => ({
+        value,
+        label: value,
+        selected: selected == value,
+      }))
     : Object.entries(attrs).map(([value, label]) =>
-        typeof label === "string" ? { value, label } : { value, ...label }
+        typeof label === "string"
+          ? { value, label, selected: selected === value }
+          : { value, ...label }
       );
 export const Option = (attrs: OptionAttributes) =>
   option(attrs as Attrs<HTMLOptionElement>);
 
 export const Dropdown = (
-  attrs: SelectAttributes | { options: Parameters<typeof prepareOptions>[0] }
-) => {};
+  attrs: SelectAttributes | { selected?: string },
+  ...options: Parameters<typeof prepareOptions>[0][]
+) =>
+  Select({
+    ...attrs,
+    options: typeof options[0] == "string" ? options : options[0],
+  });
 export const Radios = () => {};
 export const Checks = () => {};
 export const Switches = () => {};

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");
   });