@davidsouther/jiffies 1.0.0-beta.1

package/src/context.ts

@@ -0,0 +1,62 @@
+import { Ok, Err, isResult, Result } from "./result.js";
+
+export const Enter = Symbol("Context Enter");
+export const Exit = Symbol("Context Exit");
+
+export interface Context {
+  [Enter]: () => void;
+  [Exit]: () => void;
+}
+
+export interface 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 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)
+): Result<T, E> {
+  if (typeof context == "function") {
+    if (context.length == 1) {
+      operation = context as Operation<T, E, C>;
+      context = {} as C;
+    } else {
+      context = (context as () => C)() as C;
+    }
+  }
+  let result: Result<T, E>;
+  try {
+    context[Enter]();
+    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);
+  } finally {
+    context[Exit]();
+  }
+  return result;
+}
+
+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)
+): Promise<Result<T, E>> {
+  context = typeof context == "function" ? await context() : context;
+  let result: Result<T, E>;
+  try {
+    context[Enter]();
+    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);
+  } finally {
+    context[Exit]();
+  }
+  return result;
+}

package/src/debounce.ts

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

package/src/display.ts

@@ -0,0 +1,12 @@
+export type Display =
+  | string
+  | {
+      toString(): string;
+    };
+
+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);

package/src/dom/README.md

@@ -0,0 +1,102 @@
+# Jiffies DOM
+
+Jiffies DOM is an HTML microframework, exposing access to the DOM in a functional-first way.
+
+```js
+import {form, input, label} from 'jiffies/dom/html';
+
+export const Form({
+        title,
+        action="#",
+        onSubmit = (event) => {},
+    },
+    ...children
+) =>
+    form({
+            action,
+            events: {
+              submit: (event) => {
+                event.preventDefault();
+                onSubmit(event);
+              }
+            }
+        },
+        h3(title),
+        ...children,
+        button({type: "submit"}, "Submit")
+    );
+
+export const Input(name, type="string") => {
+    let id = name.replace(/\s+/g, '_').toLowerCase();
+    return label(
+        {for: id},
+        name,
+        input({name, id, type})
+    )
+}
+
+document.body.append(
+    Form(
+        {
+            title: "Details",
+            onSubmit: (event) => {
+                console.log(event.target);
+            }
+        },
+        Input({name: "First Name"}),
+        Input({name: "Last Name"}),
+        Input({name: "Number of cats", type: "number"})
+    )
+);
+```
+
+Exposing HTML as a tree of function calls makes it very easy to compose units of HTML.
+Creating new functions which pass HTML fragments is natural and intuitive, and creating reusable chunks of common HTML patterns is easy.
+
+## Functional Components
+
+Exposing HTML as functions makes it easy on the programmer to create and compose HTML, but those functions lose context when they return.
+To capture HTML chunks and update them, use the `FC` function.
+The `FC` function creates new WebComponent elements in the DOM, and exposes an interface that matches native HTML elements.
+
+```js
+export const GameSquare = FC<{piece: Piece}>('game-square', (el, {piece}) => {
+    el.textContent = piece;
+    // `el` is retained between updates
+    return el;
+});
+
+export const GameBoard = FC<{pieces: Piece[]}>('game-board', (el, {pieces} => {
+    return el;
+}));
+```
+
+## Style Blocks
+
+The `compileFstyle` function streamlines creating nested style rules.
+When used with the `style` HTML tag, this can create complex layouts inline with components.
+
+```js
+const MyPage = () => [
+  style(
+    compileFstyle({
+      main: {
+        display: "flex",
+        flexDirection: "row",
+      },
+      "@media max-width(768px)": {
+        main: {
+          flexDirection: "column",
+        },
+      },
+    })
+  ),
+  section("..."),
+  section("..."),
+  section("..."),
+];
+```
+
+## Pico CSS
+
+Including [Pico.css](https://picocss.com/) provides a high-quality semantic HTML base to begin styling from.

package/src/dom/css/border.ts

@@ -0,0 +1,47 @@
+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)) {
+    side = size;
+    size = "";
+  }
+  const sized = getSize(size);
+  return getSide(side).reduce((prev, curr) => {
+    if (curr === "") {
+      prev.borderRadius = sized;
+    } else {
+      // @ts-ignore
+      prev[`border${curr}Radius`] = sized;
+    }
+    return prev;
+  }, {} as Properties);
+}
+
+export function border({
+  side = "",
+  style = "solid",
+  radius = "",
+  width = 1,
+  color = "black",
+}: {
+  side?: Side;
+  style?: "solid" | "dotted" | "dashed" | "double" | "none";
+  radius?: Size;
+  width?: 0 | 1 | 2 | 4 | 8;
+  color?: string;
+}) {
+  return {};
+}
+
+export function inset(
+  width: 0 | 1 | 2 | 4 | 8,
+  color1: string = "gray",
+  color2: string = "lightgray"
+) {
+  return {
+    ...border({ side: "tl", width, color: color1, radius: "none" }),
+    ...border({ side: "br", width, color: color2, radius: "none" }),
+  };
+}

package/src/dom/css/constants.ts

@@ -0,0 +1,34 @@
+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

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

@@ -0,0 +1,42 @@
+import { dashCase } from "../../case.js";
+import { Properties } from "../types/css.js";
+
+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

@@ -0,0 +1,11 @@
+import { Width, Widths } from "./constants.js";
+
+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

@@ -0,0 +1,153 @@
+import * as CSS from "./types/css";
+
+const Events = Symbol("events");
+export const CLEAR = Symbol("Clear children");
+
+export type EventHandler = EventListenerOrEventListenerObject;
+export type DenormChildren = Node | string | typeof CLEAR;
+
+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>;
+  events: Partial<{
+    [K in keyof HTMLElementEventMap]: EventHandler;
+  }>;
+};
+
+export type Attrs<E extends Element, S = {}> = Partial<E & S & DomAttrs>;
+
+export type DenormAttrs<E extends Element, S = {}> =
+  | Attrs<E, S>
+  | DenormChildren;
+
+function isAttrs<E extends Element>(
+  attrs: DenormAttrs<E> | undefined
+): attrs is Attrs<E> {
+  if (!attrs) {
+    return false;
+  }
+  if (typeof attrs === "string") {
+    return false;
+  }
+  return !(attrs as Node).nodeType;
+}
+
+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;
+  }
+  return [attributes, children.flat()];
+}
+
+export function up<E extends DOMElement>(
+  element: E,
+  attrs?: DenormAttrs<E>,
+  ...children: DenormChildren[]
+): Updatable<E> {
+  return update(element, ...normalizeArguments(attrs, children));
+}
+
+export function update<E extends DOMElement>(
+  element: Updater<E>,
+  attrs: Attrs<E>,
+  children: DenormChildren[]
+): Updatable<E> {
+  // 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)) {
+        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;
+    } else {
+      Object.entries(style as Partial<CSSStyleDeclaration>).forEach(
+        ([k, v]) => {
+          // @ts-ignore Object.entries is unable to statically look into args
+          _style[k] = v;
+        }
+      );
+    }
+  }
+
+  Object.entries(rest).forEach(([k, v]) => {
+    if (k === "class" && typeof v === "string") {
+      v.split(/\s+/m)
+        .filter((s) => s !== "")
+        .forEach((c) => element.classList.add(c));
+    }
+
+    let useAttributes =
+      k.startsWith("aria-") ||
+      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);
+          }
+      }
+    } else {
+      // @ts-ignore Object.entries is unable to statically look into args
+      element[k] = v;
+    }
+  });
+
+  if (children?.length > 0) {
+    if (children[0] === CLEAR) {
+      element.replaceChildren();
+    } else {
+      element.replaceChildren(...(children as (string | Node)[]));
+    }
+  }
+
+  element.update ??= (attrs, ...children) =>
+    update(element, ...normalizeArguments(attrs, children));
+
+  return element as Updatable<E>;
+}

package/src/dom/fc.test.ts

@@ -0,0 +1,43 @@
+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", () => {
+    const Input = FC<{
+      placeholder: string;
+      name: string;
+      required?: boolean;
+      type?: string;
+    }>("fc-input", (el, attrs, children) =>
+      label(attrs.placeholder ?? attrs.name, input(attrs), ...children)
+    );
+
+    const f = form(
+      { action: "#", method: "POST" },
+      div(
+        { class: "grid" },
+        Input({
+          name: "firstName",
+          placeholder: "First Name",
+          required: true,
+        }),
+        Input({
+          name: "lastName",
+          placeholder: "Last Name",
+          required: true,
+        })
+      ),
+      Input(
+        { name: "email", type: "email", placeholder: "E-Mail" },
+        small("We'll never share your information.")
+      ),
+      button({ type: "submit" }, "Submit")
+    );
+
+    // document.body.appendChild(f);
+    expect(f.children.length).toBe(3);
+    expect(f.querySelectorAll("input[required]").length).toBe(2);
+    expect(f.querySelectorAll('input[name="firstName"]').length).toBe(1);
+  });
+});

package/src/dom/fc.ts

@@ -0,0 +1,79 @@
+import {
+  CLEAR,
+  DenormChildren,
+  DomAttrs,
+  normalizeArguments,
+  Updatable,
+  update,
+} 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>;
+  update(
+    attrs?: Partial<Attrs<P>> | DenormChildren,
+    ...children: DenormChildren[]
+  ): void;
+}
+export interface RenderFn<P extends object, S extends object> {
+  (el: FCComponent<P, S>, attrs: Attrs<P>, children: DenormChildren[]):
+    | Updatable<Element>
+    | Updatable<Element>[];
+}
+
+export interface FCComponentCtor<P extends object, S extends object> {
+  (
+    attrs?: Attrs<P> | DenormChildren,
+    ...children: DenormChildren[]
+  ): FCComponent<P, S>;
+}
+
+export function FC<P extends object, S extends object = {}>(
+  name: string,
+  component: RenderFn<P, S>
+): FCComponentCtor<P, S> {
+  class FCImpl extends HTMLElement {
+    constructor() {
+      super();
+    }
+
+    [State]: Partial<S> = {};
+    #attrs: Attrs<P> = {} as Attrs<P>;
+    #children: DenormChildren[] = [];
+
+    update(attrs?: Attrs<P> | DenormChildren, ...children: DenormChildren[]) {
+      [attrs, children] = normalizeArguments(attrs, children) as [
+        Attrs<P>,
+        DenormChildren[]
+      ];
+      if (children[0] === CLEAR) {
+        this.#children = [];
+      } else if (children.length > 0) {
+        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());
+    }
+  }
+
+  customElements.define(name, FCImpl);
+
+  const ctor: FCComponentCtor<P, S> = (
+    attrs?: Attrs<P> | DenormChildren,
+    ...children: DenormChildren[]
+  ): FCComponent<P, S> => {
+    const element = document.createElement(name) as FCComponent<P, S>;
+    element.update(attrs, ...children);
+    return element;
+  };
+
+  return ctor;
+}

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

@@ -0,0 +1,50 @@
+import { article, button, div, main, small } from "../html.js";
+import { Form, Input } from "./form.js";
+
+export const App = () =>
+  main(
+    { class: "container" },
+    article(
+      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 })
+        )
+        // 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}}),
+      )
+    )
+  );