@davidsouther/jiffies 2.2.4 → 2.3.0

package/src/dom/fc.ts

@@ -1,59 +1,56 @@
 import {
   CLEAR,
-  DenormChildren,
-  DomAttrs,
+  type DenormChildren,
+  type DomAttrs,
   normalizeArguments,
   update,
-} from "./dom.js";
+} from "./dom.ts";
 
 export type Attrs<S> = S & Partial<DomAttrs>;
 
 export const State = Symbol();
-export interface FCComponent<P extends object, S extends object>
+export interface FCComponent<Props extends object, State extends object>
   extends Element {
-  [State]?: Partial<S>;
+  [State]?: Partial<State>;
   update(
-    attrs?: Partial<Attrs<P> & DomAttrs> | DenormChildren,
+    attrs?: Partial<Attrs<Props> & 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 type RenderFn<Props extends object, State extends object> = (
+  el: FCComponent<Props, State>,
+  attrs: Attrs<Props>,
+  children: DenormChildren[],
+) => Element | Element[];
 
-export interface FCComponentCtor<P extends object, S extends object> {
-  (
-    attrs?: Attrs<P> | DenormChildren,
-    ...children: DenormChildren[]
-  ): FCComponent<P, S>;
-}
+export type FCComponentCtor<Props extends object, State extends object> = (
+  attrs?: Attrs<Props> | DenormChildren,
+  ...children: DenormChildren[]
+) => FCComponent<Props, State>;
 
-export function FC<P extends object, S extends object = {}>(
+export function FC<Props extends object, State extends object = object>(
   name: string,
-  component: RenderFn<P, S>
-): FCComponentCtor<P, S> {
-  class FCImpl extends HTMLElement implements FCComponent<P, S> {
-    constructor() {
-      super();
-    }
-
-    [State]: Partial<S> = {};
-    #attrs: Attrs<P> = {} as Attrs<P>;
+  component: RenderFn<Props, State>,
+): FCComponentCtor<Props, State> {
+  class FCImpl extends HTMLElement implements FCComponent<Props, State> {
+    [State]: Partial<State> = {};
+    #attrs: Attrs<Props> = {} as Attrs<Props>;
     #children: DenormChildren[] = [];
 
-    update(attrs?: Attrs<P> | DenormChildren, ...children: DenormChildren[]) {
+    update(
+      attrs?: Attrs<Props> | DenormChildren,
+      ...children: DenormChildren[]
+    ) {
       [attrs, children] = normalizeArguments(attrs, children) as [
-        Attrs<P>,
-        DenormChildren[]
+        Attrs<Props>,
+        DenormChildren[],
       ];
       if (children[0] === CLEAR) {
         this.#children = [];
       } else if (children.length > 0) {
         this.#children = children;
       }
-      this.#attrs = { ...this.#attrs, ...(attrs as Attrs<P>) };
+      this.#attrs = { ...this.#attrs, ...(attrs as Attrs<Props>) };
 
       // Apply updates from the attrs to the dom node itself
       update(this, this.#attrs, []);
@@ -67,11 +64,11 @@ export function FC<P extends object, S extends object = {}>(
 
   customElements.define(name, FCImpl);
 
-  const ctor: FCComponentCtor<P, S> = (
-    attrs?: Attrs<P> | DenormChildren,
+  const ctor: FCComponentCtor<Props, State> = (
+    attrs?: Attrs<Props> | DenormChildren,
     ...children: DenormChildren[]
-  ): FCComponent<P, S> => {
-    const element = document.createElement(name) as FCComponent<P, S>;
+  ): FCComponent<Props, State> => {
+    const element = document.createElement(name) as FCComponent<Props, State>;
     element.update(attrs, ...children);
     return element;
   };

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

@@ -1,5 +1,5 @@
-import { article, button, div, main, small } from "../html.js"
-import { Form, Input } from "./form.js"
+import { article, button, div, main, small } from "../html.ts";
+import { Form, Input } from "./form.ts";
 
 export const App = () =>
   main(
@@ -10,7 +10,7 @@ export const App = () =>
           events: {
             submit(event) {
               console.log(
-                "Should see fields for firstname, lastname, email, etc"
+                "Should see fields for firstname, lastname, email, etc",
               );
               console.log(event);
             },
@@ -19,7 +19,7 @@ export const App = () =>
         div(
           { class: "grid" },
           Input({ id: "firstname", placeholder: "First name" }),
-          Input({ id: "lastname", placeholder: "Last name" })
+          Input({ id: "lastname", placeholder: "Last name" }),
         ),
         Input(
           {
@@ -28,7 +28,7 @@ export const App = () =>
             placeholder: "Email address",
             required: true,
           },
-          small("We will never share your email with anyone.")
+          small("We will never share your email with anyone."),
         ),
         button({ type: "submit" }, "Submit"),
         div(
@@ -40,11 +40,11 @@ export const App = () =>
             "aria-invalid": "true",
           }),
           Input({ id: "disabled", placeholder: "Disabled", disabled: true }),
-          Input({ id: "readonly", value: "Readonly", readOnly: 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/src/dom/form/form.ts

@@ -1,12 +1,12 @@
-import { Attrs, DenormChildren } from "../dom.js"
-import { form, input, label, option, select } from "../html.js"
-import {
+import type { Attrs, DenormChildren } from "../dom.ts";
+import { form, input, label, option, select } from "../html.ts";
+import type {
   FormAttributes,
   InputAttributes,
   LabelAttributes,
   OptionAttributes,
   SelectAttributes,
-} from "../types/html"
+} from "../types/html";
 
 export const Form = (attrs: FormAttributes, ...children: DenormChildren[]) => {
   if (attrs.events?.submit) {
@@ -19,18 +19,24 @@ export const Form = (attrs: FormAttributes, ...children: DenormChildren[]) => {
   return form(attrs as Attrs<HTMLFormElement>, ...children);
 };
 export const Input = (attrs: InputAttributes, ...children: DenormChildren[]) =>
-  label(input(attrs as Attrs<HTMLInputElement>), ...children);
+  label(
+    input(
+      // @ts-expect-error
+      attrs as Attrs<HTMLInputElement>,
+    ),
+    ...children,
+  );
 
 export const Select = (
-  attrs: { options: string[] | {}; selected?: string } & SelectAttributes &
-    LabelAttributes
+  attrs: { options: string[] | object; selected?: string } & SelectAttributes &
+    LabelAttributes,
 ) =>
   label(
     { style: attrs.style ?? {} },
     select(
       { events: attrs.events ?? {} },
-      ...prepareOptions(attrs.options, attrs.selected).map(Option)
-    )
+      ...prepareOptions(attrs.options as string[], attrs.selected).map(Option),
+    ),
   );
 export const Button = () => {};
 
@@ -41,21 +47,24 @@ const prepareOptions = (
         string,
         string | { label: string; disabled?: boolean; selected?: boolean }
       >,
-  selected?: string
+  selected?: string,
 ): Parameters<typeof Option>[0][] =>
   Array.isArray(attrs)
     ? attrs.map((value) => ({
         value,
         label: value,
-        selected: selected == value,
+        selected: selected === value,
       }))
     : Object.entries(attrs).map(([value, label]) =>
         typeof label === "string"
           ? { value, label, selected: selected === value }
-          : { value, ...label }
+          : { value, ...label },
       );
 export const Option = (attrs: OptionAttributes) =>
-  option(attrs as Attrs<HTMLOptionElement>);
+  option(
+    // @ts-expect-error
+    attrs as Attrs<HTMLOptionElement>,
+  );
 
 export const Dropdown = (
   attrs: SelectAttributes | { selected?: string },
@@ -63,14 +72,14 @@ export const Dropdown = (
 ) =>
   Select({
     ...attrs,
-    options: typeof options[0] == "string" ? options : options[0],
+    options: typeof options[0] === "string" ? options : options[0],
   });
 export const Radios = () => {};
 export const Checks = () => {};
 export const Switches = () => {};
 
-export const Radio = (attrs: Omit<InputAttributes, "type">) =>
+export const Radio = (_attrs: Omit<InputAttributes, "type">) =>
   Input({ type: "radio" });
-export const Checkbox = (attrs: Omit<InputAttributes, "type">) =>
+export const Checkbox = (_attrs: Omit<InputAttributes, "type">) =>
   Input({ type: "checkbox" });
 export const Switch = () => Checkbox({ role: "switch" });

package/src/dom/form/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en-us">
   <head>
     <title>Jiffies Form</title>
     <base href="/dom/form/" />
@@ -7,7 +7,8 @@
   </head>
   <body>
     <script type="module">
-        import {App} from './form.app.js';
+        import {App} from './form.app.ts';
+
         document.body.appendChild(App());
     </script>
   </body>

package/src/dom/html.test.ts

@@ -1,14 +1,12 @@
-import { describe, it } from "../scope/describe.js"
-import { expect } from "../scope/expect.js"
-import { table, tbody, td, th, thead, tr, button } from "./html.js"
+import { describe, it } from "../scope/describe.ts";
+import { expect } from "../scope/expect.ts";
+import { button, table, tbody, td, th, thead, tr } from "./html.ts";
 
 describe("html", () => {
   it("creates HTML Elements", () => {
-    let tableBody;
-    const myTable = table(
-      thead(tr(th("Col A"), th("Col B"))),
-      (tableBody = tbody())
-    );
+    const tableBody = tbody();
+    const tableHead = thead(tr(th("Col A"), th("Col B")));
+    const myTable = table(tableHead, tableBody);
     for (let x = 1; x <= 3; x++) {
       tableBody.appendChild(tr(td(`${x}`), td(`${x * 2}`)));
     }
@@ -59,13 +57,17 @@ describe("html", () => {
     const btn = button({
       class: "test-class",
       style: { flexDirection: "column" },
-      events: { click: () => (clicked = true) },
+      events: {
+        click: () => {
+          clicked = true;
+        },
+      },
     });
     btn.dispatchEvent(new Event("click"));
 
     expect(btn.classList.contains("test-class")).toBe(true);
     expect((btn as unknown as HTMLButtonElement).style.flexDirection).toBe(
-      "column"
+      "column",
     );
     expect(clicked).toBe(true);
   });

package/src/dom/html.ts

@@ -1,4 +1,4 @@
-import { DenormAttrs, DenormChildren, up } from "./dom.js"
+import { type DenormAttrs, type DenormChildren, up } from "./dom.ts";
 
 const makeHTMLElement =
   <K extends keyof HTMLElementTagNameMap>(name: K) =>
@@ -9,7 +9,7 @@ const makeHTMLElement =
     up(
       document.createElement(name),
       attrs,
-      ...children
+      ...children,
     ) as HTMLElementTagNameMap[K];
 
 export const a = makeHTMLElement("a");
@@ -85,7 +85,6 @@ export const optgroup = makeHTMLElement("optgroup");
 export const option = makeHTMLElement("option");
 export const output = makeHTMLElement("output");
 export const p = makeHTMLElement("p");
-export const param = makeHTMLElement("param");
 export const picture = makeHTMLElement("picture");
 export const pre = makeHTMLElement("pre");
 export const progress = makeHTMLElement("progress");

package/src/dom/observable.test.ts

@@ -1,9 +1,9 @@
-import { O } from "./observable.js"
-import { Subject, map } from "../observable/observable.js"
-import { describe, it } from "../scope/describe.js"
-import { expect } from "../scope/expect.js"
-import { div, span } from "./html.js"
-import { DOMUpdates } from "./dom.js"
+import { map, Subject } from "../observable/observable.ts";
+import { describe, it } from "../scope/describe.ts";
+import { expect } from "../scope/expect.ts";
+import type { DOMUpdates } from "./dom.ts";
+import { div, span } from "./html.ts";
+import { O } from "./observable.ts";
 
 describe("DOM Observable", () => {
   it("updates a dom node with observable results", async () => {

package/src/dom/observable.ts

@@ -1,8 +1,8 @@
-import { Observable } from "../observable/observable.js"
+import type { Observable } from "../observable/observable.ts";
 
 export function O<E extends Element>(
   element: E,
-  observable: Observable<Parameters<E["update"]>>
+  observable: Observable<Parameters<E["update"]>>,
 ): E {
   observable.subscribe((t) => {
     element.update(...t);

package/src/dom/provide.ts

@@ -1,4 +1,4 @@
-import { Option } from "../result.js"
+import type { Option } from "../result.ts";
 
 let registry: Record<string, unknown> = {};
 

package/src/dom/router/link.ts

@@ -1,5 +1,5 @@
-import { a } from "../html.js"
-import { Router } from "./router.js"
+import { a } from "../html.ts";
+import { Router } from "./router.ts";
 
 export interface Link {
   href: string;
@@ -10,5 +10,5 @@ export interface Link {
 export const link = ({ href, link }: Link) =>
   a(
     { href: Router.href(href), events: { click: Router.navigate(href) } },
-    link
+    link,
   );

package/src/dom/router/router.ts

@@ -1,5 +1,5 @@
-import { DOMElement } from "../dom.js";
-import { Link } from "./link.js";
+import type { DOMElement } from "../dom.ts";
+import type { Link } from "./link.ts";
 
 export interface Router {
   current?: string;
@@ -7,9 +7,9 @@ export interface Router {
   (target: DOMElement): DOMElement;
 }
 
-let baseURI = `${document.baseURI}`;
+const baseURI = `${document.baseURI}`;
 const normalizeHref = () => {
-  return location.href + "/" === baseURI ? baseURI : location.href;
+  return `${location.href}/` === baseURI ? baseURI : location.href;
 };
 
 let globalRouter: Router;
@@ -40,7 +40,7 @@ export const Router = {
         (
           links.find(({ href }) => link.endsWith(href))?.target ??
           (() => undefined)
-        )()
+        )(),
       );
       return true;
     };

package/src/dom/svg.ts

@@ -1,4 +1,9 @@
-import { DenormAttrs, DenormChildren, up } from "./dom.js"
+import {
+  type DenormAttrs,
+  type DenormChildren,
+  SVG_NAMESPACE_URI,
+  up,
+} from "./dom.js";
 
 const makeSVGElement =
   <K extends keyof SVGElementTagNameMap>(name: K) =>
@@ -6,11 +11,7 @@ const makeSVGElement =
     attrs?: DenormAttrs<SVGElementTagNameMap[K]>,
     ...children: DenormChildren[]
   ) =>
-    up(
-      document.createElementNS("http://www.w3.org/2000/svg", name),
-      attrs,
-      ...children
-    );
+    up(document.createElementNS(SVG_NAMESPACE_URI, name), attrs, ...children);
 
 export const a = makeSVGElement("a");
 export const animate = makeSVGElement("animate");

package/src/dom/test.ts

@@ -1,4 +1,7 @@
+import { IsBrowser } from "../is_browser.js";
+
 export async function loadTests() {
+  if (!IsBrowser) return;
   if (process?.env.CI?.toLowerCase() === "true") return;
   await Promise.all([
     import("./html.test.js"),