@davidsouther/jiffies 1.0.0 → 2.0.1

package/lib/cjs/display.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.display = exports.isDisplay = void 0;
+const isDisplay = (/** @type unknown */ a) => typeof a.toString === "function" ||
+    typeof a === "string";
+exports.isDisplay = isDisplay;
+const display = (a) => {
+    if ((0, exports.isDisplay)(a)) {
+        const str = a.toString();
+        if (str === "[object Object]")
+            return JSON.stringify(a);
+        return str;
+    }
+    return JSON.stringify(a);
+};
+exports.display = display;

package/lib/cjs/dom/css/border.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inset = exports.border = exports.rounded = void 0;
+const core_js_1 = require("./core.js");
+function rounded(size = "", side = "") {
+    if ((0, core_js_1.isSide)(size)) {
+        side = size;
+        size = "";
+    }
+    const sized = (0, core_js_1.getSize)(size);
+    return (0, core_js_1.getSide)(side).reduce((prev, curr) => {
+        if (curr === "") {
+            prev.borderRadius = sized;
+        }
+        else {
+            // @ts-ignore
+            prev[`border${curr}Radius`] = sized;
+        }
+        return prev;
+    }, {});
+}
+exports.rounded = rounded;
+function border({ side = "", style = "solid", radius = "", width = 1, color = "black", }) {
+    return {};
+}
+exports.border = border;
+function inset(width, color1 = "gray", color2 = "lightgray") {
+    return {
+        ...border({ side: "tl", width, color: color1, radius: "none" }),
+        ...border({ side: "br", width, color: color2, radius: "none" }),
+    };
+}
+exports.inset = inset;

package/lib/cjs/dom/css/constants.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Widths = exports.Sides = exports.Sizes = void 0;
+exports.Sizes = {
+    none: "0px",
+    sm: "0.125rem",
+    "": "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px",
+};
+exports.Sides = {
+    "": "",
+    t: "Top",
+    r: "Right",
+    l: "Left",
+    b: "Bottom",
+    tl: "TopLeft",
+    tr: "TopRight",
+    bl: "BottomLeft",
+    br: "BottomRight",
+};
+exports.Widths = {
+    "1/4": "25%",
+    "1/2": "50%",
+    "3/4": "75%",
+    full: "100%",
+};

package/lib/cjs/dom/css/core.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSide = exports.getSize = exports.isSize = exports.isSide = void 0;
+const constants_js_1 = require("./constants.js");
+function isSide(v) {
+    return constants_js_1.Sides[v] !== undefined;
+}
+exports.isSide = isSide;
+function isSize(v) {
+    return constants_js_1.Sizes[v] !== undefined;
+}
+exports.isSize = isSize;
+function getSize(size) {
+    return constants_js_1.Sizes[size];
+}
+exports.getSize = getSize;
+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 [constants_js_1.Sides[side]];
+    }
+}
+exports.getSide = getSide;

package/lib/cjs/dom/css/fstyle.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compileFStyle = void 0;
+const case_js_1 = require("../../case.js");
+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 += `  ${(0, case_js_1.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;
+}
+exports.compileFStyle = compileFStyle;

package/lib/cjs/dom/css/sizing.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.width = void 0;
+const constants_js_1 = require("./constants.js");
+function width(amount, block) {
+    if (amount === undefined && constants_js_1.Widths[block] !== undefined) {
+        amount = block;
+    }
+    return {
+        ...(block === "inline" ? { display: "inline-block" } : {}),
+        width: constants_js_1.Widths[amount] ?? "0",
+    };
+}
+exports.width = width;

package/lib/cjs/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/lib/cjs/dom/dom.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.update = exports.up = exports.normalizeArguments = exports.CLEAR = void 0;
+const Events = Symbol("events");
+exports.CLEAR = Symbol("Clear children");
+function isAttrs(attrs) {
+    if (!attrs) {
+        return false;
+    }
+    if (typeof attrs === "object") {
+        return !attrs.nodeType;
+    }
+    return false;
+}
+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()];
+}
+exports.normalizeArguments = normalizeArguments;
+function up(element, attrs, ...children) {
+    return update(element, ...normalizeArguments(attrs, children));
+}
+exports.up = up;
+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] === exports.CLEAR ? [] : children));
+    }
+    element.update ??= (attrs, ...children) => update(element, ...normalizeArguments(attrs, children));
+    return element;
+}
+exports.update = update;

package/{build → lib/cjs}/dom/fc.d.ts

@@ -1,12 +1,12 @@
-import { DenormChildren, DomAttrs, Updatable } from "./dom.js";
+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 HTMLElement {
-    [State]: Partial<S>;
-    update(attrs?: Partial<Attrs<P>> | DenormChildren, ...children: DenormChildren[]): void;
+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[]): Updatable<Element> | Updatable<Element>[];
+    (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>;

package/lib/cjs/dom/fc.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FC = exports.State = void 0;
+const dom_js_1 = require("./dom.js");
+exports.State = Symbol();
+function FC(name, component) {
+    class FCImpl extends HTMLElement {
+        constructor() {
+            super();
+        }
+        [exports.State] = {};
+        #attrs = {};
+        #children = [];
+        update(attrs, ...children) {
+            [attrs, children] = (0, dom_js_1.normalizeArguments)(attrs, children);
+            if (children[0] === dom_js_1.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
+            (0, dom_js_1.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;
+}
+exports.FC = FC;

package/lib/cjs/dom/fc.test.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_js_1 = require("../scope/index.js");
+const fc_js_1 = require("./fc.js");
+const html_js_1 = require("./html.js");
+(0, index_js_1.describe)("FC", () => {
+    (0, index_js_1.it)("creates FCs", () => {
+        const Input = (0, fc_js_1.FC)("fc-input", (el, attrs, children) => (0, html_js_1.label)(attrs.placeholder ?? attrs.name, (0, html_js_1.input)(attrs), ...children));
+        const f = (0, html_js_1.form)({ action: "#", method: "POST" }, (0, html_js_1.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" }, (0, html_js_1.small)("We'll never share your information.")), (0, html_js_1.button)({ type: "submit" }, "Submit"));
+        // document.body.appendChild(f);
+        (0, index_js_1.expect)(f.children.length).toBe(3);
+        (0, index_js_1.expect)(f.querySelectorAll("input[required]").length).toBe(2);
+        (0, index_js_1.expect)(f.querySelectorAll('input[name="firstName"]').length).toBe(1);
+    });
+});

package/lib/cjs/dom/form/form.app.d.ts

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

package/lib/cjs/dom/form/form.app.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.App = void 0;
+const html_js_1 = require("../html.js");
+const form_js_1 = require("./form.js");
+const App = () => (0, html_js_1.main)({ class: "container" }, (0, html_js_1.article)((0, form_js_1.Form)({
+    events: {
+        submit(event) {
+            console.log("Should see fields for firstname, lastname, email, etc");
+            console.log(event);
+        },
+    },
+}, (0, html_js_1.div)({ class: "grid" }, (0, form_js_1.Input)({ id: "firstname", placeholder: "First name" }), (0, form_js_1.Input)({ id: "lastname", placeholder: "Last name" })), (0, form_js_1.Input)({
+    id: "email",
+    type: "email",
+    placeholder: "Email address",
+    required: true,
+}, (0, html_js_1.small)("We will never share your email with anyone.")), (0, html_js_1.button)({ type: "submit" }, "Submit"), (0, html_js_1.div)({ class: "grid" }, (0, form_js_1.Input)({ id: "valid", placeholder: "Valid", "aria-invalid": "false" }), (0, form_js_1.Input)({
+    id: "invalid",
+    placeholder: "Invalid",
+    "aria-invalid": "true",
+}), (0, form_js_1.Input)({ id: "disabled", placeholder: "Disabled", disabled: true }), (0, form_js_1.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}}),
+)));
+exports.App = App;

package/{build → lib/cjs}/dom/form/form.d.ts

@@ -1,26 +1,26 @@
 import { DenormChildren } from "../dom.js";
 import { label } from "../html.js";
-import { FormAttributes, InputAttributes, LabelAttributes, OptionAttributes, SelectAttributes } from "../types/html.js";
-export declare const Form: (attrs: FormAttributes, ...children: DenormChildren[]) => import("../html.js").UHTMLElement<HTMLFormElement>;
-export declare const Input: (attrs: InputAttributes, ...children: DenormChildren[]) => import("../html.js").UHTMLElement<HTMLLabelElement>;
+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) => import("../html.js").UHTMLElement<HTMLLabelElement>;
+} & 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) => import("../html.js").UHTMLElement<HTMLOptionElement>;
+export declare const Option: (attrs: OptionAttributes) => HTMLOptionElement;
 export declare const Dropdown: (attrs: SelectAttributes | {
     selected?: string;
-}, ...options: Parameters<typeof prepareOptions>[0][]) => import("../html.js").UHTMLElement<HTMLLabelElement>;
+}, ...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">) => import("../html.js").UHTMLElement<HTMLLabelElement>;
-export declare const Checkbox: (attrs: Omit<InputAttributes, "type">) => import("../html.js").UHTMLElement<HTMLLabelElement>;
-export declare const Switch: () => import("../html.js").UHTMLElement<HTMLLabelElement>;
+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/lib/cjs/dom/form/form.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = exports.Checkbox = exports.Radio = exports.Switches = exports.Checks = exports.Radios = exports.Dropdown = exports.Option = exports.Button = exports.Select = exports.Input = exports.Form = void 0;
+const html_js_1 = require("../html.js");
+const Form = (attrs, ...children) => {
+    if (attrs.events?.submit) {
+        const submit = attrs.events.submit;
+        attrs.events.submit = (event) => {
+            event.preventDefault();
+            submit(event);
+        };
+    }
+    return (0, html_js_1.form)(attrs, ...children);
+};
+exports.Form = Form;
+const Input = (attrs, ...children) => (0, html_js_1.label)((0, html_js_1.input)(attrs), ...children);
+exports.Input = Input;
+const Select = (attrs) => (0, html_js_1.label)({ style: attrs.style ?? {} }, (0, html_js_1.select)({ events: attrs.events ?? {} }, ...prepareOptions(attrs.options, attrs.selected).map(exports.Option)));
+exports.Select = Select;
+const Button = () => { };
+exports.Button = 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 });
+const Option = (attrs) => (0, html_js_1.option)(attrs);
+exports.Option = Option;
+const Dropdown = (attrs, ...options) => (0, exports.Select)({
+    ...attrs,
+    options: typeof options[0] == "string" ? options : options[0],
+});
+exports.Dropdown = Dropdown;
+const Radios = () => { };
+exports.Radios = Radios;
+const Checks = () => { };
+exports.Checks = Checks;
+const Switches = () => { };
+exports.Switches = Switches;
+const Radio = (attrs) => (0, exports.Input)({ type: "radio" });
+exports.Radio = Radio;
+const Checkbox = (attrs) => (0, exports.Input)({ type: "checkbox" });
+exports.Checkbox = Checkbox;
+const Switch = () => (0, exports.Checkbox)({ role: "switch" });
+exports.Switch = Switch;