@davidsouther/jiffies 2026.24.0 → 2026.24.2

package/src/dom/css/constants.ts

@@ -1,34 +0,0 @@
-export const Sizes = {
-  none: "0px",
-  sm: "0.125rem",
-  "": "0.25rem",
-  md: "0.375rem",
-  lg: "0.5rem",
-  xl: "0.75rem",
-  "2xl": "1rem",
-  "3xl": "1.5rem",
-  full: "9999px",
-};
-
-export const Sides = {
-  "": "",
-  t: "Top",
-  r: "Right",
-  l: "Left",
-  b: "Bottom",
-  tl: "TopLeft",
-  tr: "TopRight",
-  bl: "BottomLeft",
-  br: "BottomRight",
-};
-
-export const Widths = {
-  "1/4": "25%",
-  "1/2": "50%",
-  "3/4": "75%",
-  full: "100%",
-};
-
-export type Size = keyof typeof Sizes;
-export type Side = keyof typeof Sides;
-export type Width = keyof typeof Widths;

package/src/dom/css/core.ts

@@ -1,28 +0,0 @@
-import { type Side, Sides, type Size, Sizes } from "./constants.ts";
-
-export function isSide(v: string): v is Side {
-  return Sides[v as keyof typeof Sides] !== undefined;
-}
-
-export function isSize(v: string): v is Size {
-  return Sizes[v as keyof typeof Sizes] !== undefined;
-}
-
-export function getSize(size: keyof typeof Sizes) {
-  return Sizes[size];
-}
-
-export function getSide(side: Side): string[] {
-  switch (side) {
-    case "t":
-      return [...getSide("tl"), ...getSide("tr")];
-    case "r":
-      return [...getSide("tr"), ...getSide("br")];
-    case "b":
-      return [...getSide("br"), ...getSide("bl")];
-    case "l":
-      return [...getSide("tl"), ...getSide("bl")];
-    default:
-      return [Sides[side]];
-  }
-}

package/src/dom/css/fstyle.ts

@@ -1,42 +0,0 @@
-import { dashCase } from "../../case.ts";
-import type { Properties } from "../types/css.ts";
-
-export type FStyle =
-  | Properties
-  | {
-      [k: string]: FStyle;
-    };
-
-export function compileFStyle(fstyle: FStyle, prefix = ""): string {
-  const properties: { key: string; value: string }[] = [];
-  const rules: { key: string; value: FStyle }[] = [];
-
-  for (const [key, value] of Object.entries(fstyle)) {
-    if (typeof value === "string") {
-      properties.push({ key, value });
-    } else {
-      rules.push({ key, value });
-    }
-  }
-
-  let rule = "";
-
-  if (properties.length > 0) {
-    rule += `${prefix} {\n`;
-    for (const { key, value } of properties) {
-      rule += `  ${dashCase(key)}: ${value};\n`;
-    }
-    rule += "}\n\n";
-  }
-
-  for (const { key, value } of rules) {
-    if (key.startsWith("@media")) {
-      rule += `${key} {\n`;
-      rule += compileFStyle(value, "  ");
-      rule += "}\n\n";
-    } else {
-      rule += compileFStyle(value, `${prefix} ${key}`);
-    }
-  }
-  return rule;
-}

package/src/dom/css/sizing.ts

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

package/src/dom/dom.ts

@@ -1,327 +0,0 @@
-import { assert, assertExists } from "../assert.ts";
-import type { Properties as SVGProperties } from "./types/css.ts";
-
-if (typeof window === "undefined") {
-  const { JSDOM } = await import("jsdom");
-  // biome-ignore lint/suspicious/noGlobalAssign: Load JSDom globally
-  window = global.window = new JSDOM().window as unknown as Window &
-    typeof globalThis;
-  global.HTMLElement ??= window.HTMLElement;
-  global.customElements ??= window.customElements;
-  // Unconditional: jsdom's dispatchEvent instanceof-checks its own Event class, so Node's native Event must be replaced.
-  global.Event = window.Event as unknown as typeof Event;
-  global.MouseEvent ??= window.MouseEvent as unknown as typeof MouseEvent;
-  global.Element ??= window.Element as unknown as typeof Element;
-}
-
-export const XHTML_NAMESPACE_URI = "http://www.w3.org/1999/xhtml";
-export const SVG_NAMESPACE_URI = "http://www.w3.org/2000/svg";
-
-const Events = Symbol("events");
-export const CLEAR = Symbol("Clear children");
-
-// Node.ELEMENT_NODE; the Node global is not installed in the jsdom bootstrap
-// above, so the numeric constant is used directly (cf. nodeType 3 for text).
-const ELEMENT_NODE = 1;
-
-export type EventHandler = EventListenerOrEventListenerObject;
-export type DenormChildren =
-  | Node
-  | string
-  | typeof CLEAR
-  | null
-  | undefined
-  | false;
-
-export type DOMElement = Element & ElementCSSInlineStyle;
-
-export type DomAttrs = {
-  class: string | string[];
-  style: Partial<SVGProperties> | string;
-  role: "button" | "list" | "listbox";
-  events: Partial<{
-    [K in keyof HTMLElementEventMap]: EventHandler | null;
-  }>;
-};
-
-export type Attrs<E extends Omit<Element, "update">, S = object> = Partial<
-  Omit<{ [k in keyof E]: string | number | boolean }, "style" | "toString"> &
-    S &
-    DomAttrs
->;
-
-export type DenormAttrs<E extends Omit<Element, "update">, S = object> =
-  | 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 === "object") {
-    return !(attrs as Node).nodeType;
-  }
-  return false;
-}
-
-export function normalizeArguments<E extends Element>(
-  attrs?: DenormAttrs<E>,
-  children: DenormChildren[] = [],
-  defaultAttrs: Attrs<E> = {},
-): [Attrs<E>, DenormChildren[]] {
-  let attributes: Attrs<E>;
-  if (isAttrs(attrs)) {
-    attributes = attrs;
-  } else {
-    if (attrs !== undefined) {
-      children.unshift(attrs as DenormChildren);
-    }
-    attributes = defaultAttrs;
-  }
-  // Drop conditional/absent children (React's `{cond && <X/>}` idiom): null,
-  // undefined, and false. `0` and `""` are kept — they are legitimate text
-  // nodes, and dropping them would reintroduce the React `0`-renders-nothing bug.
-  return [attributes, children.flat().filter((c) => c != null && c !== false)];
-}
-
-export function up<E extends Element>(
-  element: Omit<E, "update">,
-  attrs?: DenormAttrs<E>,
-  ...children: DenormChildren[]
-): E {
-  return update(element, ...normalizeArguments(attrs, children)) as E;
-}
-
-/**
- * (Re)attach a single listener for `type`, replacing any handler `events`
- * already tracks for it, so each event has exactly one live handler — no
- * stacking, no orphans. `events` is the element's own `[Events]` map; it
- * stays the single source of truth.
- */
-function setListener(
-  target: EventTarget,
-  events: Map<string, EventHandler>,
-  type: string,
-  handler: EventHandler,
-): void {
-  if (events.has(type)) {
-    target.removeEventListener(type, assertExists(events.get(type)));
-  }
-  target.addEventListener(type, handler);
-  events.set(type, handler);
-}
-
-/** Detach the listener `events` tracks for `type`, if any, and forget it. */
-function clearListener(
-  target: EventTarget,
-  events: Map<string, EventHandler>,
-  type: string,
-): void {
-  if (events.has(type)) {
-    target.removeEventListener(type, assertExists(events.get(type)));
-    events.delete(type);
-  }
-}
-
-export function update(
-  element: Omit<Element, "update">,
-  attrs: Attrs<Element>,
-  children: DenormChildren[],
-): Element {
-  element[Events] ??= new Map<string, EventHandler>();
-  const $events = element[Events];
-
-  for (const [k, v] of Object.entries(attrs.events ?? {})) {
-    if (v === null) {
-      clearListener(element, $events, k);
-    } else if (v !== undefined) {
-      setListener(element, $events, k, v);
-    }
-  }
-  element.toggleAttribute("data-hydrate", $events.size > 0);
-
-  const _style = (element as { style?: Partial<CSSStyleDeclaration> }).style;
-  if (_style) {
-    if (typeof attrs.style === "string") {
-      _style.cssText = attrs.style;
-    } else {
-      for (const [k, v] of Object.entries(
-        (attrs.style as Partial<CSSStyleDeclaration>) ?? {},
-      )) {
-        // @ts-expect-error Object.entries is unable to statically look into args
-        _style[k] = v;
-      }
-    }
-  }
-
-  for (const [k, v] of Object.entries(attrs)) {
-    if (k === "style") {
-      continue;
-    }
-
-    if (k === "events") {
-      continue;
-    }
-
-    if (k === "class") {
-      const cs = Array.isArray(v) ? v : String(v).split(/\s+/m).filter(Boolean);
-      for (const c of cs) {
-        if (c.startsWith("!")) {
-          element.classList.remove(c.substring(1));
-        } else {
-          element.classList.add(c);
-        }
-      }
-      continue;
-    }
-
-    if (!v) {
-      element.removeAttribute(k);
-    } else if (v === true) {
-      element.setAttribute(k, k);
-    } else {
-      element.setAttribute(k, String(v));
-    }
-  }
-
-  if (children?.length > 0) {
-    reconcileChildren(
-      element,
-      children[0] === CLEAR ? [] : (children as (string | Node)[]),
-    );
-  }
-
-  (element as Element).update ??= (attrs, ...children) =>
-    update(element, ...normalizeArguments(attrs, children));
-
-  return element as Element;
-}
-
-/**
- * Reconcile `element`'s mounted children against expected `children`, mutating the live DOM in place.
- */
-export function reconcileChildren(
-  element: Node,
-  children: (string | Node)[],
-): void {
-  const desired = findDesiredNodes(element, children);
-
-  const { mountedSet, unclaimed } = findUnclaimedNodes(desired, element);
-
-  patchUnclaimedNodes(desired, mountedSet, unclaimed);
-
-  clearUnwantedNodes(desired, element);
-
-  insertDesiredNodes(element, desired);
-}
-
-function findDesiredNodes(element: Node, children: (string | Node)[]): Node[] {
-  const doc = element.ownerDocument ?? window.document;
-  const desired: Node[] = children.map((child) =>
-    typeof child === "string" ? doc.createTextNode(child) : child,
-  );
-  return desired;
-}
-
-function insertDesiredNodes(element: Node, desired: Node[]) {
-  let cursor: ChildNode | null = element.firstChild;
-  for (const node of desired) {
-    if (node === cursor) {
-      cursor = cursor.nextSibling;
-    } else {
-      element.insertBefore(node, cursor);
-    }
-  }
-}
-
-function clearUnwantedNodes(desired: Node[], element: Node) {
-  const keep = new Set(desired);
-  for (const mounted of Array.from(element.childNodes)) {
-    if (!keep.has(mounted)) {
-      element.removeChild(mounted);
-    }
-  }
-}
-
-function patchUnclaimedNodes(
-  desired: Node[],
-  mountedSet: Set<Node>,
-  unclaimed: Node[],
-) {
-  let claim = 0;
-  for (let i = 0; i < desired.length; i++) {
-    const node = desired[i];
-    if (node.nodeType !== ELEMENT_NODE || mountedSet.has(node)) {
-      continue;
-    }
-    if (claim < unclaimed.length) {
-      if (unclaimed[claim].nodeName === node.nodeName) {
-        patchNode(unclaimed[claim] as Element, node as Element);
-        desired[i] = unclaimed[claim];
-      }
-      claim++;
-    }
-  }
-}
-
-function findUnclaimedNodes(
-  desired: Node[],
-  element: Node,
-): { mountedSet: Set<Node>; unclaimed: Node[] } {
-  const unclaimed: Node[] = [];
-  const desiredSet = new Set<Node>(desired);
-  const mountedSet = new Set<Node>(element.childNodes);
-  for (const mounted of Array.from(element.childNodes)) {
-    if (mounted.nodeType === ELEMENT_NODE && !desiredSet.has(mounted)) {
-      unclaimed.push(mounted);
-    }
-  }
-  return { mountedSet, unclaimed };
-}
-
-export function patchNode(kept: Element, fresh: Element): void {
-  assert(kept.nodeName === fresh.nodeName, "patching nodes of different types");
-
-  // Remove `kept` attributes that aren't on `fresh`, then add `fresh` attributes not on `kept`.
-  for (const { name } of Array.from(kept.attributes)) {
-    if (!fresh.hasAttribute(name)) {
-      kept.removeAttribute(name);
-    }
-  }
-  for (const { name, value } of Array.from(fresh.attributes)) {
-    if (kept.getAttribute(name) !== value) {
-      kept.setAttribute(name, value);
-    }
-  }
-
-  // Similar to attributes, but operating in a map on the side rather than the node itself.
-  kept[Events] ??= new Map<string, EventHandler>();
-  const keptEvents = kept[Events];
-  const freshEvents = fresh[Events] ?? new Map<string, EventHandler>();
-  for (const [type] of keptEvents) {
-    if (!freshEvents.has(type)) {
-      clearListener(kept, keptEvents, type);
-    }
-  }
-  for (const [type, handler] of freshEvents) {
-    setListener(kept, keptEvents, type, handler);
-  }
-
-  // Custom elements rebuild their own subtrees
-  if (customElements.get(kept.localName)) return;
-
-  reconcileChildren(kept, Array.from(fresh.childNodes));
-}

package/src/dom/fc.ts

@@ -1,81 +0,0 @@
-import {
-  CLEAR,
-  type DenormChildren,
-  type DomAttrs,
-  normalizeArguments,
-  reconcileChildren,
-  update,
-} from "./dom.ts";
-
-export type Attrs<S> = S & Partial<DomAttrs>;
-
-export const State = Symbol();
-export interface FCComponent<Props extends object, State extends object>
-  extends Element {
-  [State]?: Partial<State>;
-  update(
-    attrs?: Partial<Attrs<Props> & DomAttrs> | DenormChildren,
-    ...children: DenormChildren[]
-  ): this;
-}
-export type RenderFn<Props extends object, State extends object> = (
-  el: FCComponent<Props, State>,
-  attrs: Attrs<Props>,
-  children: DenormChildren[],
-) => Element | Element[];
-
-export type FCComponentCtor<Props extends object, State extends object> = (
-  attrs?: Attrs<Props> | DenormChildren,
-  ...children: DenormChildren[]
-) => FCComponent<Props, State>;
-
-export function FC<Props extends object, State extends object = object>(
-  name: string,
-  component: RenderFn<Props, State>,
-): FCComponentCtor<Props, State> {
-  class FCImpl extends HTMLElement implements FCComponent<Props, State> {
-    [State]: Partial<State> = {};
-    #attrs: Attrs<Props> = {} as Attrs<Props>;
-    #children: DenormChildren[] = [];
-
-    update(
-      attrs?: Attrs<Props> | DenormChildren,
-      ...children: DenormChildren[]
-    ) {
-      [attrs, children] = normalizeArguments(attrs, children) as [
-        Attrs<Props>,
-        DenormChildren[],
-      ];
-      if (children[0] === CLEAR) {
-        this.#children = [];
-      } else if (children.length > 0) {
-        this.#children = children;
-      }
-      this.#attrs = { ...this.#attrs, ...(attrs as Attrs<Props>) };
-
-      // Apply updates from the attrs to the dom node itself
-      update(this, this.#attrs, []);
-
-      // Re-run the component function using new element, attrs, and children.
-      const rendered = [component(this, this.#attrs, this.#children)];
-      reconcileChildren(this, rendered.flat());
-      return this;
-    }
-  }
-
-  customElements.define(name, FCImpl);
-
-  const ctor: FCComponentCtor<Props, State> = (
-    attrs?: Attrs<Props> | DenormChildren,
-    ...children: DenormChildren[]
-  ): FCComponent<Props, State> => {
-    const element = window.document.createElement(name) as FCComponent<
-      Props,
-      State
-    >;
-    element.update(attrs, ...children);
-    return element;
-  };
-
-  return ctor;
-}

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

@@ -1,44 +0,0 @@
-import { button, div, main, small } from "../html.ts";
-import { Form, Input } from "./form.ts";
-
-export const App = () =>
-  main(
-    Form(
-      {
-        events: {
-          submit(event) {
-            console.log(
-              "Should see fields for firstname, lastname, email, etc",
-            );
-            console.log(event);
-          },
-        },
-      },
-      div(
-        { class: "grid" },
-        Input({ id: "firstname", placeholder: "First name" }),
-        Input({ id: "lastname", placeholder: "Last name" }),
-      ),
-      Input(
-        {
-          id: "email",
-          type: "email",
-          placeholder: "Email address",
-          required: true,
-        },
-        small("We will never share your email with anyone."),
-      ),
-      button({ type: "submit" }, "Submit"),
-      div(
-        { class: "grid" },
-        Input({ id: "valid", placeholder: "Valid", "aria-invalid": "false" }),
-        Input({
-          id: "invalid",
-          placeholder: "Invalid",
-          "aria-invalid": "true",
-        }),
-        Input({ id: "disabled", placeholder: "Disabled", disabled: true }),
-        Input({ id: "readonly", value: "Readonly", readOnly: true }),
-      ),
-    ),
-  );