@davidsouther/jiffies 2.2.4 → 2.3.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 } from "../dom/html.js";
+import { debounce } from "../debounce.ts";
+import { FC, State } from "../dom/fc.ts";
+import { div } from "../dom/html.ts";
 
 export interface VirtualScrollSettings {
   minIndex: number;
@@ -11,9 +11,10 @@ export interface VirtualScrollSettings {
   tolerance: number;
 }
 
-export interface VirtualScrollDataAdapter<T> {
-  (offset: number, limit: number): Iterable<T>;
-}
+export type VirtualScrollDataAdapter<T> = (
+  offset: number,
+  limit: number,
+) => Iterable<T>;
 
 export function arrayAdapter<T>(data: T[]): VirtualScrollDataAdapter<T> {
   return (offset, limit) => data.slice(offset, offset + limit);
@@ -26,7 +27,7 @@ export interface VirtualScrollProps<T, U extends HTMLElement> {
 }
 
 export function fillVirtualScrollSettings(
-  settings: Partial<VirtualScrollSettings>
+  settings: Partial<VirtualScrollSettings>,
 ): VirtualScrollSettings {
   const {
     minIndex = 0,
@@ -41,7 +42,7 @@ export function fillVirtualScrollSettings(
 }
 
 export function initialState<T>(
-  settings: VirtualScrollSettings
+  settings: VirtualScrollSettings,
 ): VirtualScrollState<T> {
   // From Denis Hilt, https://blog.logrocket.com/virtual-scrolling-core-principles-and-basic-implementation-in-react/
   const { minIndex, maxIndex, startIndex, itemHeight, count, tolerance } =
@@ -75,7 +76,7 @@ export function getData<T>(
   maxIndex: number,
   offset: number,
   limit: number,
-  get: VirtualScrollDataAdapter<T>
+  get: VirtualScrollDataAdapter<T>,
 ): T[] {
   const start = Math.max(0, minIndex, offset);
   const end = Math.min(maxIndex, offset + limit - 1);
@@ -86,7 +87,7 @@ export function getData<T>(
 export function doScroll<T>(
   scrollTop: number,
   state: VirtualScrollState<T>,
-  get: VirtualScrollDataAdapter<T>
+  get: VirtualScrollDataAdapter<T>,
 ): {
   scrollTop: number;
   topPaddingHeight: number;
@@ -105,7 +106,7 @@ export function doScroll<T>(
   const topPaddingHeight = Math.max((index - minIndex) * itemHeight, 0);
   const bottomPaddingHeight = Math.max(
     totalHeight - (topPaddingHeight + data.length * itemHeight),
-    0
+    0,
   );
 
   return { scrollTop, topPaddingHeight, bottomPaddingHeight, data };
@@ -124,23 +125,24 @@ interface VirtualScrollState<T, U extends HTMLElement = HTMLElement> {
   rows: U[];
 }
 
-// export interface VirtualScroll<T, U extends HTMLElement> {
-//   state: VirtualScrollState<T>;
-//   rows: UHTMLElement<U>[];
-// }
+export interface VirtualScroll<T, U extends HTMLElement> {
+  state: VirtualScrollState<T>;
+  rows: U[];
+}
 
 export const VirtualScroll = FC<
-  VirtualScrollProps<any, HTMLElement>,
-  VirtualScrollState<any, HTMLElement>
+  VirtualScrollProps<unknown, HTMLElement>,
+  VirtualScrollState<unknown, HTMLElement>
 >("virtual-scroll", (element, props) => {
   const settings = fillVirtualScrollSettings(props.settings);
-  const state = (element[State] = {
+  const state = {
     ...initialState(settings),
     ...element[State],
-  });
+  };
+  element[State] = state;
 
   const scrollTo = (
-    { target }: { target?: { scrollTop: number } } = { target: state }
+    { target }: { target?: { scrollTop: number } } = { target: state },
   ) => {
     const scrollTop = target?.scrollTop ?? state.topPaddingHeight;
     const updatedSate = {
@@ -152,7 +154,10 @@ export const VirtualScroll = FC<
 
   const viewportElement = div({
     style: { height: `${state.viewportHeight}px`, overflowY: "scroll" },
-    events: { scroll: debounce(scrollTo, 0) },
+    events: {
+      // @ts-expect-error
+      scroll: debounce(scrollTo, 0),
+    },
   });
   setTimeout(() => {
     viewportElement.scroll({ top: state.scrollTop });
@@ -176,13 +181,13 @@ export const VirtualScroll = FC<
             class: `VirtualScroll__item_${i}`,
             style: { height: `${settings.itemHeight}px` },
           },
-          row
-        )
+          row,
+        ),
       ),
       div({
         class: "VirtualScroll__bottomPadding",
         style: { height: `${state.bottomPaddingHeight}px` },
-      })
+      }),
     );
   };
 

package/src/context.test.ts

@@ -1,7 +1,7 @@
-import { Context, Enter, Exit, using } from "./context.js";
-import { Err, isErr, isOk, Ok, unwrap } from "./result.js";
-import { describe, it } from "./scope/describe.js";
-import { expect } from "./scope/expect.js";
+import { type Context, Enter, Exit, using } from "./context.ts";
+import { Err, isErr, isOk, Ok, unwrap } from "./result.ts";
+import { describe, it } from "./scope/describe.ts";
+import { expect } from "./scope/expect.ts";
 
 describe("Context", () => {
   it("performs an operation using a context", () => {

package/src/context.ts

@@ -1,4 +1,4 @@
-import { Ok, Err, isResult, Result } from "./result.js";
+import { Err, isResult, Ok, type Result } from "./result.ts";
 
 export const Enter = Symbol("Context Enter");
 export const Exit = Symbol("Context Exit");
@@ -8,18 +8,20 @@ export interface Context {
   [Exit]: () => void;
 }
 
-export interface Operation<T, E extends Error, C extends Context> {
-  (c: C): T | Result<T, E>;
-}
+export type Operation<T, E extends Error, C extends Context> = (
+  c: C,
+) => T | Result<T, E>;
 
-export interface AsyncOperation<T, E extends Error, C extends Context> {
-  (c: C): Promise<T | Result<T, E>>;
-}
+export type AsyncOperation<T, E extends Error, C extends Context> = (
+  c: C,
+) => Promise<T | Result<T, E>>;
 
 export function using<T, E extends Error, C extends Context>(
   context: C | (() => C) | Operation<T, E, C>,
   operation?: Operation<T, E, C>,
-  normalizeError: (e: Error | unknown | any) => Err<E> = (e) => Err(e)
+  normalizeError: (e: Error | unknown) => Err<E> = (e) =>
+    // @ts-expect-error
+    Err(e),
 ): Result<T, E> {
   if (typeof context === "function") {
     if (context.length === 1) {
@@ -32,7 +34,7 @@ export function using<T, E extends Error, C extends Context>(
   let result: Result<T, E>;
   try {
     context[Enter]();
-    const op = operation!(context);
+    const op = operation?.(context);
     result = isResult(op as Result<T, E>) ? (op as Result<T, E>) : Ok(op as T);
   } catch (e) {
     result = normalizeError(e);
@@ -45,7 +47,7 @@ export function using<T, E extends Error, C extends Context>(
 export async function asyncUsing<T, E extends Error, C extends Context>(
   context: C | (() => Promise<C>),
   operation: AsyncOperation<T, E, C>,
-  normalizeError: (e: Error | unknown | any) => Err<E> = (e: E) => Err(e)
+  normalizeError: (e: E) => Err<E> = (e: E) => Err(e),
 ): Promise<Result<T, E>> {
   context = typeof context === "function" ? await context() : context;
   let result: Result<T, E>;
@@ -54,7 +56,10 @@ export async function asyncUsing<T, E extends Error, C extends Context>(
     const op = await operation(context);
     result = isResult(op as Result<T, E>) ? (op as Result<T, E>) : Ok(op as T);
   } catch (e) {
-    result = normalizeError(e);
+    result = normalizeError(
+      // @ts-expect-error
+      e,
+    );
   } finally {
     context[Exit]();
   }

package/src/debounce.ts

@@ -1,8 +1,14 @@
-export function debounce(fn: (...args: any[]) => any, ms = 32) {
+export function debounce<T extends unknown[]>(
+  fn: (...args: T) => void,
+  ms = 32,
+): (...args: T) => void {
   let timer: ReturnType<typeof setTimeout>;
-  return (...args: Parameters<typeof fn>) => {
+  return (...args: T) => {
     clearTimeout(timer);
-    timer = setTimeout(() => (clearTimeout(timer), fn(...args)), ms);
+    timer = setTimeout(() => {
+      clearTimeout(timer);
+      return fn(...args);
+    }, ms);
     return timer;
   };
 }

package/src/diff.test.ts

@@ -1,6 +1,6 @@
-import { diff } from "./diff.js";
-import { describe, it } from "./scope/describe.js";
-import { expect } from "./scope/expect.js";
+import { diff } from "./diff.ts";
+import { describe, it } from "./scope/describe.ts";
+import { expect } from "./scope/expect.ts";
 
 describe("diff", () => {
   it("diffs primitives", () => {
@@ -36,7 +36,7 @@ describe("diff", () => {
   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 } }]
+      [{ a: { b: 1 } }, { a: { b: 4 } }, { a: { b: 3 } }],
     );
     expect(diffed).toEqual([
       {

package/src/diff.ts

@@ -1,5 +1,5 @@
-import { range } from "./range.js";
-import { isSome, None, Option, Some } from "./result.js";
+import { range } from "./range.ts";
+import { isSome, None, type Option, Some } from "./result.ts";
 
 export const DiffA = Symbol("A");
 export const DiffB = Symbol("B");
@@ -20,29 +20,27 @@ interface DiffList {
 
 function doDiff<T>(va: T, vb: T, k: DiffIndex): Option<DiffList | DiffEntry> {
   if (Array.isArray(va)) {
-    // @ts-ignore
+    // @ts-expect-error
     return diffArray(va, vb, k);
   }
   if (typeof va === "object") {
-    const d = diffObject(va, vb, k);
+    const d = diffObject(va ?? {}, vb ?? {}, k);
     if (d.children.length === 0) {
       return None();
-    } else {
-      return Some(d);
     }
+    return Some(d);
   }
   if (Object.is(va, vb)) {
     return None();
-  } else {
-    // @ts-ignore
-    return { key: k, left: va, right: vb };
   }
+  // @ts-expect-error
+  return { key: k, left: va, right: vb };
 }
 
 function diffArray<T>(
   a: Partial<T>[],
   b: Partial<T>[],
-  key: DiffIndex
+  key: DiffIndex,
 ): Option<DiffList> {
   const indexes = Math.max(a.length, b.length);
   const children = range(0, indexes)
@@ -54,11 +52,11 @@ function diffArray<T>(
 function diffObject<T>(
   a: Partial<T>,
   b: Partial<T>,
-  key: DiffIndex = ""
+  key: DiffIndex = "",
 ): DiffList {
   const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
   const children = [...keys]
-    // @ts-ignore
+    // @ts-expect-error
     .map((k) => doDiff(a[k], b[k], k))
     .filter(isSome);
   return {
@@ -69,16 +67,16 @@ function diffObject<T>(
 
 export function diff<T>(
   a: Partial<T>,
-  b: Partial<T>
+  b: Partial<T>,
 ): (DiffEntry | DiffList)[] {
-  if (typeof a != "object" && !Object.is(a, b)) {
-    // @ts-ignore
+  if (typeof a !== "object" && !Object.is(a, b)) {
+    // @ts-expect-error
     return [{ key: "", left: a, right: b }];
   }
   return (
     Array.isArray(a)
       ? // @ts-ignore
-        diffArray(a, b, "") ?? { children: [] }
+        (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 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,18 @@ 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"> & 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 +83,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 +148,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 +156,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);