feat(hiccup-html): add new elems, add/update types

packages/hiccup-html/src/api.ts

@@ -2,6 +2,12 @@ import type { Fn, IObjectOf, MaybeDeref, NumOrString } from "@thi.ng/api";
 
 export type AttribVal<T> = MaybeDeref<T | undefined>;
 
+export type BooleanAttrib = AttribVal<boolean>;
+
+export type NumericAttrib = AttribVal<number>;
+
+export type StringAttrib = AttribVal<string>;
+
 export type EventAttribVal<T> =
     | Fn<T, any>
     | [Fn<T, any>, boolean | AddEventListenerOptions]
@@ -110,36 +116,36 @@ export interface GlobalEventAttribs
 }
 
 export interface MicroformatAttribs {
-    itemid: AttribVal<string>;
-    itemprop: AttribVal<string>;
-    itemref: AttribVal<string>;
-    itemscope: AttribVal<boolean>;
-    itemtype: AttribVal<string>;
+    itemid: StringAttrib;
+    itemprop: StringAttrib;
+    itemref: StringAttrib;
+    itemscope: BooleanAttrib;
+    itemtype: StringAttrib;
 }
 
 export interface Attribs extends GlobalEventAttribs, MicroformatAttribs {
-    accesskey: AttribVal<string>;
+    accesskey: StringAttrib;
     autocapitalize: AttribVal<
         "off" | "on" | "sentences" | "words" | "characters"
     >;
-    class: AttribVal<string | IObjectOf<AttribVal<boolean>>>;
-    contenteditable: AttribVal<boolean>;
+    class: AttribVal<string | IObjectOf<BooleanAttrib>>;
+    contenteditable: BooleanAttrib;
     data: IObjectOf<AttribVal<string | number | boolean>>;
     dir: AttribVal<"rtl" | "ltr">;
-    draggable: AttribVal<boolean>;
-    hidden: AttribVal<boolean>;
-    id: AttribVal<string>;
-    is: AttribVal<string>;
-    lang: AttribVal<string>;
-    scrollLeft: AttribVal<number>;
-    scrollTop: AttribVal<number>;
-    spellcheck: AttribVal<boolean>;
+    draggable: BooleanAttrib;
+    hidden: BooleanAttrib;
+    id: StringAttrib;
+    is: StringAttrib;
+    lang: StringAttrib;
+    scrollLeft: NumericAttrib;
+    scrollTop: NumericAttrib;
+    spellcheck: BooleanAttrib;
     style: AttribVal<
         string | IObjectOf<AttribVal<NumOrString | Fn<any, NumOrString>>>
     >;
-    tabindex: AttribVal<number>;
-    title: AttribVal<string>;
-    translate: AttribVal<boolean>;
+    tabindex: NumericAttrib;
+    title: StringAttrib;
+    translate: BooleanAttrib;
     [id: string]: any;
 }
 
@@ -187,3 +193,12 @@ export type LinkRel =
 export interface RelAttribs {
     rel: AttribVal<LinkRel | LinkRel[]>;
 }
+
+export interface DimensionAttribs {
+    width: NumericAttrib;
+    height: NumericAttrib;
+}
+
+export interface LoadingAttribs {
+    loading: AttribVal<"eager" | "lazy">;
+}

packages/hiccup-html/src/blocks.ts

@@ -1,8 +1,22 @@
-import type { Attribs } from "./api";
+import type {
+    Attribs,
+    AttribVal,
+    BooleanAttrib,
+    DimensionAttribs,
+    ImportanceAttribs,
+    LoadingAttribs,
+    ReferrerAttribs,
+    StringAttrib,
+} from "./api";
 import { defElement, defElements } from "./def";
 
-export const [blockquote, div, figure, figcaption, para, pre] = defElements([
-    "blockquote",
+export interface BlockquoteAttribs extends Attribs {
+    cite: StringAttrib;
+}
+
+export const blockquote = defElement<Partial<BlockquoteAttribs>>("blockquote");
+
+export const [div, figure, figcaption, para, pre] = defElements([
     "div",
     "figure",
     "figcaption",
@@ -11,3 +25,35 @@ export const [blockquote, div, figure, figcaption, para, pre] = defElements([
 ]);
 
 export const hr = defElement<Partial<Attribs>, never>("hr");
+
+export interface IFrameAttribs
+    extends Attribs,
+        DimensionAttribs,
+        ImportanceAttribs,
+        LoadingAttribs,
+        ReferrerAttribs {
+    allow: StringAttrib;
+    allowfullscreen: BooleanAttrib;
+    allowpaymentrequest: BooleanAttrib;
+    csp: StringAttrib;
+    name: StringAttrib;
+    sandbox: AttribVal<
+        | "allow-downloads-without-user-activation"
+        | "allow-forms"
+        | "allow-modals"
+        | "allow-orientation-lock"
+        | "allow-pointer-lock"
+        | "allow-popups"
+        | "allow-popups-to-escape-sandbox"
+        | "allow-presentation"
+        | "allow-same-origin"
+        | "allow-scripts"
+        | "allow-storage-access-by-user-activation"
+        | "allow-top-navigation"
+        | "allow-top-navigation-by-user-activation"
+    >;
+    src: StringAttrib;
+    srcdoc: StringAttrib;
+}
+
+export const iframe = defElement<Partial<IFrameAttribs>>("iframe");

packages/hiccup-html/src/forms.ts

@@ -1,23 +1,30 @@
-import { NumOrString } from "@thi.ng/api";
-import { Attribs, AttribVal, RelAttribs } from "./api";
+import type { NumOrString } from "@thi.ng/api";
+import type {
+    Attribs,
+    AttribVal,
+    BooleanAttrib,
+    NumericAttrib,
+    RelAttribs,
+    StringAttrib,
+} from "./api";
 import { defElement } from "./def";
 
 export interface FormAttribs extends Attribs, RelAttribs {
     "accept-charset": AttribVal<string | string[]>;
-    action: AttribVal<string>;
+    action: StringAttrib;
     autocomplete: AttribVal<"on" | "off">;
-    enctype: AttribVal<string>;
-    method: AttribVal<string>;
-    novalidate: AttribVal<boolean>;
-    target: AttribVal<string>;
+    enctype: StringAttrib;
+    method: StringAttrib;
+    novalidate: BooleanAttrib;
+    target: StringAttrib;
 }
 
 export const form = defElement<Partial<FormAttribs>>("form");
 
 export interface FieldsetAttribs extends Attribs {
-    disabled: AttribVal<boolean>;
-    form: AttribVal<string>;
-    name: AttribVal<string>;
+    disabled: BooleanAttrib;
+    form: StringAttrib;
+    name: StringAttrib;
 }
 
 export const fieldset = defElement<Partial<FieldsetAttribs>>("fieldset");
@@ -26,50 +33,50 @@ export const legend = defElement("legend");
 
 export interface InputAttribs extends Attribs, FieldsetAttribs {
     // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
-    autocomplete: AttribVal<string>;
-    autofocus: AttribVal<boolean>;
-    list: AttribVal<string>;
-    readonly: AttribVal<boolean>;
-    required: AttribVal<boolean>;
-    type: AttribVal<string>;
+    autocomplete: StringAttrib;
+    autofocus: BooleanAttrib;
+    list: StringAttrib;
+    readonly: BooleanAttrib;
+    required: BooleanAttrib;
+    type: StringAttrib;
     value: AttribVal<NumOrString>;
 }
 
 export interface InputCheckboxAttribs extends InputAttribs {
-    checked: AttribVal<boolean>;
-    indeterminate: AttribVal<boolean>;
+    checked: BooleanAttrib;
+    indeterminate: BooleanAttrib;
 }
 
 export interface InputRadioAttribs extends InputAttribs {
-    checked: AttribVal<boolean>;
+    checked: BooleanAttrib;
 }
 
 export interface InputFileAttribs extends InputAttribs {
     accept: AttribVal<string | string[]>;
     capture: AttribVal<"user" | "environment">;
-    multiple: AttribVal<boolean>;
+    multiple: BooleanAttrib;
 }
 
 export interface InputTextAttribs extends InputAttribs {
-    dirname: AttribVal<string>;
-    minlength: AttribVal<number>;
-    maxlength: AttribVal<number>;
-    pattern: AttribVal<string>;
-    placeholder: AttribVal<string>;
-    size: AttribVal<number>;
+    dirname: StringAttrib;
+    minlength: NumericAttrib;
+    maxlength: NumericAttrib;
+    pattern: StringAttrib;
+    placeholder: StringAttrib;
+    size: NumericAttrib;
 }
 
 export interface TextAreaAttribs extends InputTextAttribs {
-    cols: AttribVal<number>;
-    rows: AttribVal<number>;
+    cols: NumericAttrib;
+    rows: NumericAttrib;
     wrap: AttribVal<"hard" | "soft" | "off">;
 }
 
 export interface InputNumericAttribs extends InputAttribs {
-    min: AttribVal<number>;
-    max: AttribVal<number>;
-    step: AttribVal<number>;
-    value: AttribVal<number>;
+    min: NumericAttrib;
+    max: NumericAttrib;
+    step: NumericAttrib;
+    value: NumericAttrib;
 }
 
 export const button = defElement<Partial<InputAttribs>>("button");
@@ -121,50 +128,50 @@ export const inputText = defElement<Partial<InputTextAttribs>, never>("input", {
 export const textArea = defElement<Partial<TextAreaAttribs>, never>("textarea");
 
 export interface OptionAttribs {
-    disabled: AttribVal<boolean>;
-    label: AttribVal<string>;
-    selected: AttribVal<boolean>;
+    disabled: BooleanAttrib;
+    label: StringAttrib;
+    selected: BooleanAttrib;
     value: AttribVal<NumOrString>;
 }
 
 export const option = defElement<Partial<OptionAttribs>, string>("option");
 
 export interface OptGroupAttribs {
-    disabled: AttribVal<boolean>;
-    label: AttribVal<string>;
+    disabled: BooleanAttrib;
+    label: StringAttrib;
 }
 
 export const optGroup = defElement<Partial<OptGroupAttribs>>("optgroup");
 
 export interface SelectAttribs extends InputAttribs {
-    multiple: AttribVal<boolean>;
-    size: AttribVal<number>;
+    multiple: BooleanAttrib;
+    size: NumericAttrib;
 }
 
 export const select = defElement<Partial<SelectAttribs>>("select");
 
 export interface LabelAttribs extends Partial<Attribs> {
-    for: AttribVal<string>;
-    form?: AttribVal<string>;
+    for: StringAttrib;
+    form?: StringAttrib;
 }
 
 export const label = defElement<LabelAttribs>("label");
 
 export interface MeterAttribs extends Attribs {
-    min: AttribVal<number>;
-    max: AttribVal<number>;
-    low: AttribVal<number>;
-    high: AttribVal<number>;
-    optimum: AttribVal<number>;
-    value: AttribVal<number>;
-    form: AttribVal<string>;
+    min: NumericAttrib;
+    max: NumericAttrib;
+    low: NumericAttrib;
+    high: NumericAttrib;
+    optimum: NumericAttrib;
+    value: NumericAttrib;
+    form: StringAttrib;
 }
 
 export const meter = defElement<Partial<MeterAttribs>>("meter");
 
 export interface ProgressAttribs extends Attribs {
-    max: AttribVal<number>;
-    value: AttribVal<number>;
+    max: NumericAttrib;
+    value: NumericAttrib;
 }
 
 export const progress = defElement<Partial<ProgressAttribs>>("progress");