@davidsouther/jiffies 1.0.0 → 1.1.0

package/build/dom/css/constants.js

@@ -1,28 +1,28 @@
-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 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%",
+};

package/build/dom/css/core.d.ts

@@ -1,5 +1,5 @@
-import { Side, Size, Sizes } from "./constants.js";
-export declare function isSide(v: string): v is Side;
-export declare function isSize(v: string): v is Size;
-export declare function getSize(size: keyof typeof Sizes): string;
-export declare function getSide(side: Side): string[];
+import { Side, Size, Sizes } from "./constants.js";
+export declare function isSide(v: string): v is Side;
+export declare function isSize(v: string): v is Size;
+export declare function getSize(size: keyof typeof Sizes): string;
+export declare function getSide(side: Side): string[];

package/build/dom/css/core.js

@@ -1,24 +1,24 @@
-import { Sides, Sizes } from "./constants.js";
-export function isSide(v) {
-    return Sides[v] !== undefined;
-}
-export function isSize(v) {
-    return Sizes[v] !== undefined;
-}
-export function getSize(size) {
-    return Sizes[size];
-}
-export function getSide(side) {
-    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]];
-    }
-}
+import { Sides, Sizes } from "./constants.js";
+export function isSide(v) {
+    return Sides[v] !== undefined;
+}
+export function isSize(v) {
+    return Sizes[v] !== undefined;
+}
+export function getSize(size) {
+    return Sizes[size];
+}
+export function getSide(side) {
+    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/build/dom/css/fstyle.d.ts

@@ -1,5 +1,5 @@
-import { Properties } from "../types/css.js";
-export declare type FStyle = Properties | {
-    [k: string]: FStyle;
-};
-export declare function compileFStyle(fstyle: FStyle, prefix?: string): string;
+import { Properties } from "../types/css.js";
+export declare type FStyle = Properties | {
+    [k: string]: FStyle;
+};
+export declare function compileFStyle(fstyle: FStyle, prefix?: string): string;

package/build/dom/css/fstyle.js

@@ -1,32 +1,32 @@
-import { dashCase } from "../../case.js";
-export function compileFStyle(fstyle, prefix = "") {
-    const properties = [];
-    const rules = [];
-    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;
-}
+import { dashCase } from "../../case.js";
+export function compileFStyle(fstyle, prefix = "") {
+    const properties = [];
+    const rules = [];
+    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/build/dom/css/sizing.d.ts

@@ -1,5 +1,5 @@
-import { Width } from "./constants.js";
-export declare function width(amount: Width, block?: "inline"): {
-    width: string;
-    display?: string | undefined;
-};
+import { Width } from "./constants.js";
+export declare function width(amount: Width, block?: "inline"): {
+    width: string;
+    display?: string | undefined;
+};

package/build/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/build/dom/dom.d.ts

@@ -1,27 +1,26 @@
-import * as CSS from "./types/css";
-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 Updater<E extends DOMElement> = Omit<E, "style"> & {
-    [Events]?: Map<string, EventHandler>;
-    update?: (attrs?: DenormAttrs<E>, ...children: DenormChildren[]) => Node;
-};
-export declare type Updatable<E extends Element> = Omit<E, "style"> & {
-    [Events]: Map<string, EventHandler>;
-    update: (attrs?: DenormAttrs<E>, ...children: DenormChildren[]) => Node;
-};
-export declare type DomAttrs = {
-    class: string;
-    style: Partial<CSS.Properties>;
-    events: Partial<{
-        [K in keyof HTMLElementEventMap]: EventHandler;
-    }>;
-};
-export declare type Attrs<E extends Element, S = {}> = Partial<E & S & DomAttrs>;
-export declare type DenormAttrs<E extends Element, S = {}> = Attrs<E, S> | 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 DOMElement>(element: E, attrs?: DenormAttrs<E>, ...children: DenormChildren[]): Updatable<E>;
-export declare function update<E extends DOMElement>(element: Updater<E>, attrs: Attrs<E>, children: DenormChildren[]): Updatable<E>;
-export {};
+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;
+    style: Partial<Properties> | string;
+    role: "button" | "list";
+    events: Partial<{
+        [K in keyof HTMLElementEventMap]: EventHandler;
+    }>;
+};
+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 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/dom/dom.js

@@ -1,95 +1,95 @@
-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 === "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;
+}

package/build/dom/fc.d.ts

@@ -1,14 +1,14 @@
-import { DenormChildren, DomAttrs, Updatable } 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 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 declare function FC<P extends object, S extends object = {}>(name: string, component: RenderFn<P, S>): FCComponentCtor<P, S>;
+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/dom/fc.js

@@ -1,35 +1,36 @@
-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());
-        }
-    }
-    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
+            // @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;
+}

package/build/dom/fc.test.d.ts

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

package/build/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/build/dom/form/form.app.d.ts

@@ -1 +1 @@
-export declare const App: () => import("../html.js").UHTMLElement<HTMLElement>;
+export declare const App: () => HTMLElement;