@davidsouther/jiffies 1.1.0 → 2.0.0

package/{build → lib/esm}/dom/css/sizing.js

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

package/lib/esm/dom/dom.d.ts

@@ -0,0 +1,27 @@
+import { Properties } from "./types/css.js";
+declare const Events: unique symbol;
+export declare const CLEAR: unique symbol;
+export declare type EventHandler = EventListenerOrEventListenerObject;
+export declare type DenormChildren = Node | string | typeof CLEAR;
+export declare type DOMElement = Element & DocumentAndElementEventHandlers & ElementCSSInlineStyle;
+export declare type DomAttrs = {
+    class: string | string[];
+    style: Partial<Properties> | string;
+    role: "button" | "list" | "listbox";
+    events: Partial<{
+        [K in keyof HTMLElementEventMap]: EventHandler | null;
+    }>;
+};
+export declare type Attrs<E extends Omit<Element, "update">, S = {}> = Partial<Omit<E, "style"> & S & DomAttrs>;
+export declare 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 declare type DOMUpdates<E extends Element = Element> = [DenormAttrs<E>, ...DenormChildren[]] | DenormChildren[];
+export declare function normalizeArguments<E extends Element>(attrs?: DenormAttrs<E>, children?: DenormChildren[], defaultAttrs?: Attrs<E>): [Attrs<E>, DenormChildren[]];
+export declare function up<E extends Element>(element: Omit<E, "update">, attrs?: DenormAttrs<E>, ...children: DenormChildren[]): E;
+export declare function update(element: Omit<Element, "update">, attrs: Attrs<Element>, children: DenormChildren[]): Element;
+export {};

package/{build → lib/esm}/dom/dom.js

@@ -1,95 +1,104 @@
-const Events = Symbol("events");
-export const CLEAR = Symbol("Clear children");
-function isAttrs(attrs) {
-    if (!attrs) {
-        return false;
-    }
-    if (typeof attrs === "string") {
-        return false;
-    }
-    return !attrs.nodeType;
-}
-export function normalizeArguments(attrs, children = [], defaultAttrs = {}) {
-    let attributes;
-    if (isAttrs(attrs)) {
-        attributes = attrs;
-    }
-    else {
-        if (attrs !== undefined) {
-            children.unshift(attrs);
-        }
-        attributes = defaultAttrs;
-    }
-    return [attributes, children.flat()];
-}
-export function up(element, attrs, ...children) {
-    return update(element, ...normalizeArguments(attrs, children));
-}
-export function update(element, attrs, children) {
-    // Track events, to remove later
-    const $events = (element[Events] ??= new Map());
-    const { style = {}, events = {}, ...rest } = attrs;
-    Object.entries(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, v);
-            $events.set(k, v);
-        }
-    });
-    const _style = element.style;
-    if (_style) {
-        if (typeof style === "string") {
-            _style.cssText = style;
-        }
-        else {
-            Object.entries(style).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-") ||
-            k == "role" ||
-            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);
-        }
-    }
-    element.update ??= (attrs, ...children) => update(element, ...normalizeArguments(attrs, children));
-    return element;
-}
+const Events = Symbol("events");
+export const CLEAR = Symbol("Clear children");
+function isAttrs(attrs) {
+    if (!attrs) {
+        return false;
+    }
+    if (typeof attrs === "object") {
+        return !attrs.nodeType;
+    }
+    return false;
+}
+export function normalizeArguments(attrs, children = [], defaultAttrs = {}) {
+    let attributes;
+    if (isAttrs(attrs)) {
+        attributes = attrs;
+    }
+    else {
+        if (attrs !== undefined) {
+            children.unshift(attrs);
+        }
+        attributes = defaultAttrs;
+    }
+    return [attributes, children.flat()];
+}
+export function up(element, attrs, ...children) {
+    return update(element, ...normalizeArguments(attrs, children));
+}
+export function update(element, attrs, children) {
+    // Track events, to remove later
+    const $events = (element[Events] ??= new Map());
+    const { style = {}, events = {}, ...rest } = attrs;
+    Object.entries(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, v);
+            $events.set(k, v);
+        }
+    });
+    const _style = element.style;
+    if (_style) {
+        if (typeof style === "string") {
+            _style.cssText = style;
+        }
+        else {
+            Object.entries(style).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") {
+            v = Array.isArray(v)
+                ? v
+                : (typeof v === "string" ? v : `${v}`).split(/\s+/m);
+            v
+                .filter((s) => s !== "")
+                .forEach((c) => {
+                if (c.startsWith("!")) {
+                    element.classList.remove(c.substring(1));
+                }
+                else {
+                    element.classList.add(c);
+                }
+            });
+            return;
+        }
+        const useNamespace = element.namespaceURI &&
+            element.namespaceURI != "http://www.w3.org/1999/xhtml";
+        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 {
+            if (remove) {
+                element.removeAttribute(k);
+            }
+            else if (v === true) {
+                element.setAttribute(k, k);
+            }
+            else {
+                element.setAttribute(k, v);
+            }
+        }
+    });
+    if (children?.length > 0) {
+        element.replaceChildren(...(children[0] === CLEAR ? [] : children));
+    }
+    element.update ??= (attrs, ...children) => update(element, ...normalizeArguments(attrs, children));
+    return element;
+}

package/lib/esm/dom/fc.d.ts

@@ -0,0 +1,14 @@
+import { DenormChildren, DomAttrs } from "./dom.js";
+export declare type Attrs<S> = S & Partial<DomAttrs>;
+export declare const State: unique symbol;
+export interface FCComponent<P extends object, S extends object> extends Element {
+    [State]?: Partial<S>;
+    update(attrs?: Partial<Attrs<P> & 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 interface FCComponentCtor<P extends object, S extends object> {
+    (attrs?: Attrs<P> | DenormChildren, ...children: DenormChildren[]): FCComponent<P, S>;
+}
+export declare function FC<P extends object, S extends object = {}>(name: string, component: RenderFn<P, S>): FCComponentCtor<P, S>;

package/{build → lib/esm}/dom/fc.js

@@ -1,36 +1,35 @@
-import { CLEAR, normalizeArguments, update, } from "./dom.js";
-export const State = Symbol();
-export function FC(name, component) {
-    class FCImpl extends HTMLElement {
-        constructor() {
-            super();
-        }
-        [State] = {};
-        #attrs = {};
-        #children = [];
-        update(attrs, ...children) {
-            [attrs, children] = normalizeArguments(attrs, children);
-            if (children[0] === CLEAR) {
-                this.#children = [];
-            }
-            else if (children.length > 0) {
-                this.#children = children;
-            }
-            this.#attrs = { ...this.#attrs, ...attrs };
-            // 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;
-        }
-    }
-    customElements.define(name, FCImpl);
-    const ctor = (attrs, ...children) => {
-        const element = document.createElement(name);
-        element.update(attrs, ...children);
-        return element;
-    };
-    return ctor;
-}
+import { CLEAR, normalizeArguments, update, } from "./dom.js";
+export const State = Symbol();
+export function FC(name, component) {
+    class FCImpl extends HTMLElement {
+        constructor() {
+            super();
+        }
+        [State] = {};
+        #attrs = {};
+        #children = [];
+        update(attrs, ...children) {
+            [attrs, children] = normalizeArguments(attrs, children);
+            if (children[0] === CLEAR) {
+                this.#children = [];
+            }
+            else if (children.length > 0) {
+                this.#children = children;
+            }
+            this.#attrs = { ...this.#attrs, ...attrs };
+            // 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 replace = [component(this, this.#attrs, this.#children)];
+            this.replaceChildren(...replace.flat());
+            return this;
+        }
+    }
+    customElements.define(name, FCImpl);
+    const ctor = (attrs, ...children) => {
+        const element = document.createElement(name);
+        element.update(attrs, ...children);
+        return element;
+    };
+    return ctor;
+}

package/lib/esm/dom/fc.test.d.ts

@@ -0,0 +1 @@
+export {};

package/{build → lib/esm}/dom/fc.test.js

@@ -1,21 +1,21 @@
-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("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);
-    });
-});
+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("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/lib/esm/dom/form/form.app.d.ts

@@ -0,0 +1 @@
+export declare const App: () => HTMLElement;

package/{build → lib/esm}/dom/form/form.app.js

@@ -1,23 +1,23 @@
-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}}),
-)));
+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}}),
+)));

package/lib/esm/dom/form/form.d.ts

@@ -0,0 +1,26 @@
+import { DenormChildren } from "../dom.js";
+import { label } from "../html.js";
+import { FormAttributes, InputAttributes, LabelAttributes, OptionAttributes, SelectAttributes } from "../types/html";
+export declare const Form: (attrs: FormAttributes, ...children: DenormChildren[]) => HTMLFormElement;
+export declare const Input: (attrs: InputAttributes, ...children: DenormChildren[]) => HTMLLabelElement;
+export declare const Select: (attrs: {
+    options: string[] | {};
+    selected?: string;
+} & SelectAttributes & LabelAttributes) => HTMLLabelElement;
+export declare const Button: () => void;
+declare const prepareOptions: (attrs: string[] | Record<string, string | {
+    label: string;
+    disabled?: boolean | undefined;
+    selected?: boolean | undefined;
+}>, selected?: string) => Parameters<typeof Option>[0][];
+export declare const Option: (attrs: OptionAttributes) => HTMLOptionElement;
+export declare const Dropdown: (attrs: SelectAttributes | {
+    selected?: string;
+}, ...options: Parameters<typeof prepareOptions>[0][]) => HTMLLabelElement;
+export declare const Radios: () => void;
+export declare const Checks: () => void;
+export declare const Switches: () => void;
+export declare const Radio: (attrs: Omit<InputAttributes, "type">) => HTMLLabelElement;
+export declare const Checkbox: (attrs: Omit<InputAttributes, "type">) => HTMLLabelElement;
+export declare const Switch: () => HTMLLabelElement;
+export {};

package/{build → lib/esm}/dom/form/form.js

@@ -1,34 +1,34 @@
-import { form, input, label, option, select } from "../html.js";
-export const Form = (attrs, ...children) => {
-    if (attrs.events?.submit) {
-        const submit = attrs.events.submit;
-        attrs.events.submit = (event) => {
-            event.preventDefault();
-            submit(event);
-        };
-    }
-    return form(attrs, ...children);
-};
-export const Input = (attrs, ...children) => label(input(attrs), ...children);
-export const Select = (attrs) => label({ style: attrs.style ?? {} }, select({ events: attrs.events ?? {} }, ...prepareOptions(attrs.options, attrs.selected).map(Option)));
-export const Button = () => { };
-const prepareOptions = (attrs, selected) => Array.isArray(attrs)
-    ? attrs.map((value) => ({
-        value,
-        label: value,
-        selected: selected == value,
-    }))
-    : Object.entries(attrs).map(([value, label]) => typeof label === "string"
-        ? { value, label, selected: selected === value }
-        : { value, ...label });
-export const Option = (attrs) => option(attrs);
-export const Dropdown = (attrs, ...options) => Select({
-    ...attrs,
-    options: typeof options[0] == "string" ? options : options[0],
-});
-export const Radios = () => { };
-export const Checks = () => { };
-export const Switches = () => { };
-export const Radio = (attrs) => Input({ type: "radio" });
-export const Checkbox = (attrs) => Input({ type: "checkbox" });
-export const Switch = () => Checkbox({ role: "switch" });
+import { form, input, label, option, select } from "../html.js";
+export const Form = (attrs, ...children) => {
+    if (attrs.events?.submit) {
+        const submit = attrs.events.submit;
+        attrs.events.submit = (event) => {
+            event.preventDefault();
+            submit(event);
+        };
+    }
+    return form(attrs, ...children);
+};
+export const Input = (attrs, ...children) => label(input(attrs), ...children);
+export const Select = (attrs) => label({ style: attrs.style ?? {} }, select({ events: attrs.events ?? {} }, ...prepareOptions(attrs.options, attrs.selected).map(Option)));
+export const Button = () => { };
+const prepareOptions = (attrs, selected) => Array.isArray(attrs)
+    ? attrs.map((value) => ({
+        value,
+        label: value,
+        selected: selected == value,
+    }))
+    : Object.entries(attrs).map(([value, label]) => typeof label === "string"
+        ? { value, label, selected: selected === value }
+        : { value, ...label });
+export const Option = (attrs) => option(attrs);
+export const Dropdown = (attrs, ...options) => Select({
+    ...attrs,
+    options: typeof options[0] == "string" ? options : options[0],
+});
+export const Radios = () => { };
+export const Checks = () => { };
+export const Switches = () => { };
+export const Radio = (attrs) => Input({ type: "radio" });
+export const Checkbox = (attrs) => Input({ type: "checkbox" });
+export const Switch = () => Checkbox({ role: "switch" });

package/lib/esm/dom/form/form.test.js

@@ -0,0 +1 @@
+"use strict";