@davidsouther/jiffies 2.2.5 → 2026.4.0

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 type { Properties } from "../types/css.ts";
+import type { Side, Size } from "./constants.ts";
+import { getSide, getSize, isSide } from "./core.ts";
 
 export function rounded(size: Size = "", side: Side = "") {
   if (isSide(size)) {
@@ -12,7 +12,7 @@ export function rounded(size: Size = "", side: Side = "") {
     if (curr === "") {
       prev.borderRadius = sized;
     } else {
-      // @ts-ignore
+      // @ts-expect-error
       prev[`border${curr}Radius`] = sized;
     }
     return prev;
@@ -20,11 +20,11 @@ export function rounded(size: Size = "", side: Side = "") {
 }
 
 export function border({
-  side = "",
-  style = "solid",
-  radius = "",
-  width = 1,
-  color = "black",
+  side: _side = "",
+  style: _style = "solid",
+  radius: _radius = "",
+  width: _width = 1,
+  color: _color = "black",
 }: {
   side?: Side;
   style?: "solid" | "dotted" | "dashed" | "double" | "none";
@@ -37,8 +37,8 @@ export function border({
 
 export function inset(
   width: 0 | 1 | 2 | 4 | 8,
-  color1: string = "gray",
-  color2: string = "lightgray"
+  color1 = "gray",
+  color2 = "lightgray",
 ) {
   return {
     ...border({ side: "tl", width, color: color1, radius: "none" }),

package/src/dom/css/core.ts

@@ -1,4 +1,4 @@
-import { Side, Sides, Size, Sizes } from "./constants.js"
+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;

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.ts";
+import type { Properties } from "../types/css.ts";
 
 export type FStyle =
   | Properties
@@ -12,7 +12,7 @@ export function compileFStyle(fstyle: FStyle, prefix = ""): string {
   const rules: { key: string; value: FStyle }[] = [];
 
   for (const [key, value] of Object.entries(fstyle)) {
-    if (typeof value == "string") {
+    if (typeof value === "string") {
       properties.push({ key, value });
     } else {
       rules.push({ key, value });
@@ -33,7 +33,7 @@ export function compileFStyle(fstyle: FStyle, prefix = ""): string {
     if (key.startsWith("@media")) {
       rule += `${key} {\n`;
       rule += compileFStyle(value, "  ");
-      rule += `}\n\n`;
+      rule += "}\n\n";
     } else {
       rule += compileFStyle(value, `${prefix} ${key}`);
     }

package/src/dom/css/sizing.ts

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

package/src/dom/dom.ts

@@ -1,4 +1,8 @@
-import { Properties } from "./types/css.js";
+import { assertExists } from "../assert.ts";
+import type { Properties as SVGProperties } from "./types/css.ts";
+
+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");
@@ -10,18 +14,20 @@ export type DOMElement = Element & ElementCSSInlineStyle;
 
 export type DomAttrs = {
   class: string | string[];
-  style: Partial<Properties> | 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 = {}> = Partial<
-  Omit<E, "style"> & S & DomAttrs
+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 = {}> =
+export type DenormAttrs<E extends Omit<Element, "update">, S = object> =
   | Attrs<E, S>
   | DenormChildren;
 
@@ -79,57 +85,63 @@ export function update(
   children: DenormChildren[]
 ): 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) {
-        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);
+  element[Events] ??= new Map<string, EventHandler>();
+  const $events = element[Events];
+  // const { style = {}, events = {}, ...rest } = attrs;
+
+  for (const [k, v] of Object.entries(
+    (attrs.events as NonNullable<typeof attrs.events>) ?? {}
+  )) {
+    if (v === null) {
+      if ($events.has(k)) {
+        const listener = assertExists($events.get(k));
+        element.removeEventListener(k, listener);
       }
+    } else if (v !== undefined) {
+      element.addEventListener(k as keyof ElementEventMap, v);
+      $events.set(k, v);
     }
-  );
+  }
 
   const _style = (element as { style?: Partial<CSSStyleDeclaration> }).style;
   if (_style) {
-    if (typeof style === "string") {
-      _style.cssText = style;
+    if (typeof attrs.style === "string") {
+      _style.cssText = attrs.style;
     } else {
-      Object.entries(style as Partial<CSSStyleDeclaration>).forEach(
-        ([k, v]) => {
-          // @ts-ignore Object.entries is unable to statically look into args
-          _style[k] = v;
-        }
-      );
+      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;
+      }
     }
   }
 
-  Object.entries(rest).forEach(([k, v]) => {
+  for (const [k, v] of Object.entries(attrs)) {
+    if (k === "style") {
+      continue;
+    }
+
+    if (k === "events") {
+      continue;
+    }
+
     if (k === "class") {
-      v = Array.isArray(v)
-        ? v
-        : (typeof v === "string" ? v : `${v}`).split(/\s+/m);
-      (v as string[])
-        .filter((s) => s !== "")
-        .forEach((c) => {
-          if (c.startsWith("!")) {
-            element.classList.remove(c.substring(1));
-          } else {
-            element.classList.add(c);
-          }
-        });
-      return;
+      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;
     }
 
-    const useNamespace =
-      element.namespaceURI &&
-      element.namespaceURI != "http://www.w3.org/1999/xhtml";
+    const useNamespace = false;
+    element.namespaceURI &&
+      element.namespaceURI !== XHTML_NAMESPACE_URI &&
+      element.namespaceURI !== SVG_NAMESPACE_URI;
     const remove = !v;
 
     if (useNamespace) {
@@ -138,7 +150,7 @@ export function update(
       } else if (v === true) {
         element.setAttributeNS(element.namespaceURI, k, k);
       } else {
-        element.setAttributeNS(element.namespaceURI, k, v as string);
+        element.setAttributeNS(element.namespaceURI, k, String(v));
       }
     } else {
       if (remove) {
@@ -146,10 +158,10 @@ export function update(
       } else if (v === true) {
         element.setAttribute(k, k);
       } else {
-        element.setAttribute(k, v as string);
+        element.setAttribute(k, String(v));
       }
     }
-  });
+  }
 
   if (children?.length > 0) {
     element.replaceChildren(

package/src/dom/fc.test.ts

@@ -1,6 +1,6 @@
-import { describe, it, expect } from "../scope/index.js";
-import { button, div, form, input, label, small } from "./html.js";
-import { FC } from "./fc.js";
+import { describe, expect, it } from "../scope/index.ts";
+import { FC } from "./fc.ts";
+import { button, div, form, input, label, small } from "./html.ts";
 
 describe("FC", () => {
   it("creates FCs", () => {
@@ -9,8 +9,8 @@ describe("FC", () => {
       name: string;
       required?: boolean;
       type?: string;
-    }>("fc-input", (el, attrs, children) =>
-      label(attrs.placeholder ?? attrs.name, input(attrs), ...children)
+    }>("fc-input", (_el, attrs, children) =>
+      label(attrs.placeholder ?? attrs.name, input(attrs), ...children),
     );
 
     const f = form(
@@ -26,13 +26,13 @@ describe("FC", () => {
           name: "lastName",
           placeholder: "Last Name",
           required: true,
-        })
+        }),
       ),
       Input(
         { name: "email", type: "email", placeholder: "E-Mail" },
-        small("We'll never share your information.")
+        small("We'll never share your information."),
       ),
-      button({ type: "submit" }, "Submit")
+      button({ type: "submit" }, "Submit"),
     );
 
     // document.body.appendChild(f);

package/src/dom/fc.ts

@@ -1,59 +1,56 @@
 import {
   CLEAR,
-  DenormChildren,
-  DomAttrs,
+  type DenormChildren,
+  type DomAttrs,
   normalizeArguments,
   update,
-} from "./dom.js";
+} from "./dom.ts";
 
 export type Attrs<S> = S & Partial<DomAttrs>;
 
 export const State = Symbol();
-export interface FCComponent<P extends object, S extends object>
+export interface FCComponent<Props extends object, State extends object>
   extends Element {
-  [State]?: Partial<S>;
+  [State]?: Partial<State>;
   update(
-    attrs?: Partial<Attrs<P> & DomAttrs> | DenormChildren,
+    attrs?: Partial<Attrs<Props> & DomAttrs> | DenormChildren,
     ...children: DenormChildren[]
   ): this;
 }
-export interface RenderFn<P extends object, S extends object> {
-  (el: FCComponent<P, S>, attrs: Attrs<P>, children: DenormChildren[]):
-    | Element
-    | Element[];
-}
+export type RenderFn<Props extends object, State extends object> = (
+  el: FCComponent<Props, State>,
+  attrs: Attrs<Props>,
+  children: DenormChildren[],
+) => Element | Element[];
 
-export interface FCComponentCtor<P extends object, S extends object> {
-  (
-    attrs?: Attrs<P> | DenormChildren,
-    ...children: DenormChildren[]
-  ): FCComponent<P, S>;
-}
+export type FCComponentCtor<Props extends object, State extends object> = (
+  attrs?: Attrs<Props> | DenormChildren,
+  ...children: DenormChildren[]
+) => FCComponent<Props, State>;
 
-export function FC<P extends object, S extends object = {}>(
+export function FC<Props extends object, State extends object = object>(
   name: string,
-  component: RenderFn<P, S>
-): FCComponentCtor<P, S> {
-  class FCImpl extends HTMLElement implements FCComponent<P, S> {
-    constructor() {
-      super();
-    }
-
-    [State]: Partial<S> = {};
-    #attrs: Attrs<P> = {} as Attrs<P>;
+  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<P> | DenormChildren, ...children: DenormChildren[]) {
+    update(
+      attrs?: Attrs<Props> | DenormChildren,
+      ...children: DenormChildren[]
+    ) {
       [attrs, children] = normalizeArguments(attrs, children) as [
-        Attrs<P>,
-        DenormChildren[]
+        Attrs<Props>,
+        DenormChildren[],
       ];
       if (children[0] === CLEAR) {
         this.#children = [];
       } else if (children.length > 0) {
         this.#children = children;
       }
-      this.#attrs = { ...this.#attrs, ...(attrs as Attrs<P>) };
+      this.#attrs = { ...this.#attrs, ...(attrs as Attrs<Props>) };
 
       // Apply updates from the attrs to the dom node itself
       update(this, this.#attrs, []);
@@ -67,11 +64,11 @@ export function FC<P extends object, S extends object = {}>(
 
   customElements.define(name, FCImpl);
 
-  const ctor: FCComponentCtor<P, S> = (
-    attrs?: Attrs<P> | DenormChildren,
+  const ctor: FCComponentCtor<Props, State> = (
+    attrs?: Attrs<Props> | DenormChildren,
     ...children: DenormChildren[]
-  ): FCComponent<P, S> => {
-    const element = document.createElement(name) as FCComponent<P, S>;
+  ): FCComponent<Props, State> => {
+    const element = document.createElement(name) as FCComponent<Props, State>;
     element.update(attrs, ...children);
     return element;
   };

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.ts";
+import { Form, Input } from "./form.ts";
 
 export const App = () =>
   main(
@@ -10,7 +10,7 @@ export const App = () =>
           events: {
             submit(event) {
               console.log(
-                "Should see fields for firstname, lastname, email, etc"
+                "Should see fields for firstname, lastname, email, etc",
               );
               console.log(event);
             },
@@ -19,7 +19,7 @@ export const App = () =>
         div(
           { class: "grid" },
           Input({ id: "firstname", placeholder: "First name" }),
-          Input({ id: "lastname", placeholder: "Last name" })
+          Input({ id: "lastname", placeholder: "Last name" }),
         ),
         Input(
           {
@@ -28,7 +28,7 @@ export const App = () =>
             placeholder: "Email address",
             required: true,
           },
-          small("We will never share your email with anyone.")
+          small("We will never share your email with anyone."),
         ),
         button({ type: "submit" }, "Submit"),
         div(
@@ -40,11 +40,11 @@ export const App = () =>
             "aria-invalid": "true",
           }),
           Input({ id: "disabled", placeholder: "Disabled", disabled: true }),
-          Input({ id: "readonly", value: "Readonly", readOnly: true })
-        )
+          Input({ id: "readonly", value: "Readonly", readOnly: true }),
+        ),
         // Dropdown({id: 'fruit', label: "Fruit", placeholder: "Select a fruit...", options: ['Banana', 'Watermelon', 'Apple', 'Orange', 'Mango']}),
         // Radios({legend: 'Size', options: {small: 'Small', medium: 'Medium', large: 'Large', extralarge: "Extra Large"}, checked: 'small'}),
         // Checkboxes({options: {terms: 'I agree to the Terms and Conditions', termsSharing: {label: 'I agree to share my information with partners', disabled: true, checked: true}}),
-      )
-    )
+      ),
+    ),
   );

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 {
+import type { Attrs, DenormChildren } from "../dom.ts";
+import { form, input, label, option, select } from "../html.ts";
+import type {
   FormAttributes,
   InputAttributes,
   LabelAttributes,
   OptionAttributes,
   SelectAttributes,
-} from "../types/html"
+} from "../types/html";
 
 export const Form = (attrs: FormAttributes, ...children: DenormChildren[]) => {
   if (attrs.events?.submit) {
@@ -19,18 +19,24 @@ export const Form = (attrs: FormAttributes, ...children: DenormChildren[]) => {
   return form(attrs as Attrs<HTMLFormElement>, ...children);
 };
 export const Input = (attrs: InputAttributes, ...children: DenormChildren[]) =>
-  label(input(attrs as Attrs<HTMLInputElement>), ...children);
+  label(
+    input(
+      // @ts-expect-error
+      attrs as Attrs<HTMLInputElement>,
+    ),
+    ...children,
+  );
 
 export const Select = (
-  attrs: { options: string[] | {}; selected?: string } & SelectAttributes &
-    LabelAttributes
+  attrs: { options: string[] | object; selected?: string } & SelectAttributes &
+    LabelAttributes,
 ) =>
   label(
     { style: attrs.style ?? {} },
     select(
       { events: attrs.events ?? {} },
-      ...prepareOptions(attrs.options, attrs.selected).map(Option)
-    )
+      ...prepareOptions(attrs.options as string[], attrs.selected).map(Option),
+    ),
   );
 export const Button = () => {};
 
@@ -41,18 +47,18 @@ const prepareOptions = (
         string,
         string | { label: string; disabled?: boolean; selected?: boolean }
       >,
-  selected?: string
+  selected?: string,
 ): Parameters<typeof Option>[0][] =>
   Array.isArray(attrs)
     ? attrs.map((value) => ({
         value,
         label: value,
-        selected: selected == value,
+        selected: selected === value,
       }))
     : Object.entries(attrs).map(([value, label]) =>
         typeof label === "string"
           ? { value, label, selected: selected === value }
-          : { value, ...label }
+          : { value, ...label },
       );
 export const Option = (attrs: OptionAttributes) =>
   option(attrs as Attrs<HTMLOptionElement>);
@@ -63,14 +69,14 @@ export const Dropdown = (
 ) =>
   Select({
     ...attrs,
-    options: typeof options[0] == "string" ? options : options[0],
+    options: typeof options[0] === "string" ? options : options[0],
   });
 export const Radios = () => {};
 export const Checks = () => {};
 export const Switches = () => {};
 
-export const Radio = (attrs: Omit<InputAttributes, "type">) =>
+export const Radio = (_attrs: Omit<InputAttributes, "type">) =>
   Input({ type: "radio" });
-export const Checkbox = (attrs: Omit<InputAttributes, "type">) =>
+export const Checkbox = (_attrs: Omit<InputAttributes, "type">) =>
   Input({ type: "checkbox" });
 export const Switch = () => Checkbox({ role: "switch" });

package/src/dom/form/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en-us">
   <head>
     <title>Jiffies Form</title>
     <base href="/dom/form/" />
@@ -7,7 +7,8 @@
   </head>
   <body>
     <script type="module">
-        import {App} from './form.app.js';
+        import {App} from './form.app.ts';
+
         document.body.appendChild(App());
     </script>
   </body>

package/src/dom/html.test.ts

@@ -1,14 +1,12 @@
-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.ts";
+import { expect } from "../scope/expect.ts";
+import { button, table, tbody, td, th, thead, tr } from "./html.ts";
 
 describe("html", () => {
   it("creates HTML Elements", () => {
-    let tableBody;
-    const myTable = table(
-      thead(tr(th("Col A"), th("Col B"))),
-      (tableBody = tbody())
-    );
+    const tableBody = tbody();
+    const tableHead = thead(tr(th("Col A"), th("Col B")));
+    const myTable = table(tableHead, tableBody);
     for (let x = 1; x <= 3; x++) {
       tableBody.appendChild(tr(td(`${x}`), td(`${x * 2}`)));
     }
@@ -59,13 +57,17 @@ describe("html", () => {
     const btn = button({
       class: "test-class",
       style: { flexDirection: "column" },
-      events: { click: () => (clicked = true) },
+      events: {
+        click: () => {
+          clicked = true;
+        },
+      },
     });
     btn.dispatchEvent(new Event("click"));
 
     expect(btn.classList.contains("test-class")).toBe(true);
     expect((btn as unknown as HTMLButtonElement).style.flexDirection).toBe(
-      "column"
+      "column",
     );
     expect(clicked).toBe(true);
   });

package/src/dom/html.ts

@@ -1,4 +1,4 @@
-import { DenormAttrs, DenormChildren, up } from "./dom.js"
+import { type DenormAttrs, type DenormChildren, up } from "./dom.ts";
 
 const makeHTMLElement =
   <K extends keyof HTMLElementTagNameMap>(name: K) =>
@@ -9,7 +9,7 @@ const makeHTMLElement =
     up(
       document.createElement(name),
       attrs,
-      ...children
+      ...children,
     ) as HTMLElementTagNameMap[K];
 
 export const a = makeHTMLElement("a");
@@ -85,7 +85,6 @@ export const optgroup = makeHTMLElement("optgroup");
 export const option = makeHTMLElement("option");
 export const output = makeHTMLElement("output");
 export const p = makeHTMLElement("p");
-export const param = makeHTMLElement("param");
 export const picture = makeHTMLElement("picture");
 export const pre = makeHTMLElement("pre");
 export const progress = makeHTMLElement("progress");

package/src/dom/index.ts

@@ -0,0 +1,2 @@
+export * as fc from "./fc.ts";
+export * as html from "./html.ts";

package/src/dom/observable.test.ts

@@ -1,9 +1,9 @@
-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"
+import { map, Subject } from "../observable/observable.ts";
+import { describe, it } from "../scope/describe.ts";
+import { expect } from "../scope/expect.ts";
+import type { DOMUpdates } from "./dom.ts";
+import { div, span } from "./html.ts";
+import { O } from "./observable.ts";
 
 describe("DOM Observable", () => {
   it("updates a dom node with observable results", async () => {

package/src/dom/observable.ts

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

package/src/dom/provide.ts

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