feat(hiccup-html): add more elements, update readme

thi-ng · Jun 24, 2020 · 5e3f8f1 · 5e3f8f1
1 parent 57c6901
commit 5e3f8f1
Show file tree

Hide file tree

Showing 10 changed files with 260 additions and 38 deletions.
diff --git a/packages/hiccup-html/README.md b/packages/hiccup-html/README.md
@@ -11,6 +11,7 @@ This project is part of the
 
 - [About](#about)
   - [Supported elements](#supported-elements)
+    - [Head / metadata](#head---metadata)
     - [Sections](#sections)
     - [Text content](#text-content)
     - [Lists](#lists)
@@ -32,30 +33,36 @@ This project is part of the
 
 Type-checked HTML5 element functions for [@thi.ng/hiccup](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup) related infrastructure.
 
-The following type-checked factory functions are provided **so far**.
-See [`defElement()`](#defelement) for more details.
+The following type-checked factory functions are provided **so far** and
+in many cases include specialized type definitions for element-specific
+attributes. See [`defElement()`](#defelement) below for more details.
 
 ### Supported elements
 
+#### Head / metadata
+
+[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/head.ts)
+
+`base`, `head`, `link`, `meta`, `style`, `title`
+
 #### Sections
 
 [Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/sections.ts)
 
-`address`, `article`, `aside`, `footer`, `header`, `hgroup`, `main`,
-`nav`, `section`
+`address`, `article`, `aside`, `body`, `footer`, `header`, `hgroup`,
+`main`, `nav`, `section`
 
 #### Text content
 
 [Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/blocks.ts)
 
-`blockquote`, `div`, `figure`, `figcaption`, `hr`, `para`,
-`pre`, `span`
+`blockquote`, `div`, `figure`, `figcaption`, `hr`, `para`, `pre`, `span`
 
 #### Lists
 
 [Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/lists.ts)
 
-`ol`, `ul`, `li`, `dl`, `dt`, `dd`
+`datalist`, `dd`, `dl`, `dt`, `li`, `ol`, `ul`
 
 #### Inline
 
@@ -68,8 +75,10 @@ See [`defElement()`](#defelement) for more details.
 
 [Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/forms.ts)
 
-`checkbox`, `inputNumber`, `inputPass`, `inputRange`, `inputText`,
-`label`, `meter`, `option`, `optGroup`, `radio`, `select`
+`button`, `checkbox`, `fieldset`, `form`, `inputColor`, `inputFile`,
+`inputNumber`, `inputPass`, `inputRange`, `inputSearch`, `inputText`,
+`label`, `legend`, `meter`, `option`, `optGroup`, `progress`, `radio`,
+`select`
 
 #### Media
 
@@ -151,7 +160,7 @@ yarn add @thi.ng/hiccup-html
 <script src="https://unpkg.com/@thi.ng/hiccup-html/lib/index.umd.js" crossorigin></script>
 ```
 
-Package sizes (gzipped, pre-treeshake): ESM: 766 bytes / CJS: 1.01 KB / UMD: 1012 bytes
+Package sizes (gzipped, pre-treeshake): ESM: 943 bytes / CJS: 1.23 KB / UMD: 1.19 KB
 
 ## Dependencies
 

diff --git a/packages/hiccup-html/src/api.ts b/packages/hiccup-html/src/api.ts
@@ -149,3 +149,40 @@ export interface CORSAttribs {
 export interface ReferrerAttribs {
     referrerpolicy: AttribVal<ReferrerPolicy>;
 }
+
+export interface ImportanceAttribs {
+    importance: AttribVal<"high" | "low" | "auto">;
+}
+
+export type LinkRel =
+    | "alternate"
+    | "author"
+    | "bookmark"
+    | "canonical"
+    | "dns-prefetch"
+    | "external"
+    | "help"
+    | "icon"
+    | "import"
+    | "license"
+    | "manifest"
+    | "modulepreload"
+    | "next"
+    | "nofollow"
+    | "noopener"
+    | "noreferrer"
+    | "opener"
+    | "pingback"
+    | "preconnect"
+    | "prefetch"
+    | "preload"
+    | "prerender"
+    | "prev"
+    | "search"
+    | "shortlink"
+    | "stylesheet"
+    | "tag";
+
+export interface RelAttribs {
+    rel: AttribVal<string | LinkRel[]>;
+}
diff --git a/packages/hiccup-html/src/forms.ts b/packages/hiccup-html/src/forms.ts
@@ -1,15 +1,34 @@
 import { NumOrString } from "@thi.ng/api";
-import { Attribs, AttribVal } from "./api";
+import { Attribs, AttribVal, RelAttribs } from "./api";
 import { defElement } from "./def";
 
-export interface InputAttribs extends Attribs {
+export interface FormAttribs extends Attribs, RelAttribs {
+    "accept-charset": AttribVal<string | string[]>;
+    action: AttribVal<string>;
+    autocomplete: AttribVal<"on" | "off">;
+    enctype: AttribVal<string>;
+    method: AttribVal<string>;
+    novalidate: AttribVal<boolean>;
+    target: AttribVal<string>;
+}
+
+export const form = defElement<Partial<FormAttribs>>("form");
+
+export interface FieldsetAttribs extends Attribs {
+    disabled: AttribVal<boolean>;
+    form: AttribVal<string>;
+    name: AttribVal<string>;
+}
+
+export const fieldset = defElement<Partial<FieldsetAttribs>>("fieldset");
+
+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>;
-    disabled: AttribVal<boolean>;
-    form: AttribVal<string>;
     list: AttribVal<string>;
-    name: AttribVal<string>;
     readonly: AttribVal<boolean>;
     required: AttribVal<boolean>;
     type: AttribVal<string>;
@@ -21,6 +40,16 @@ export interface InputCheckboxAttribs extends InputAttribs {
     indeterminate: AttribVal<boolean>;
 }
 
+export interface InputRadioAttribs extends InputAttribs {
+    checked: AttribVal<boolean>;
+}
+
+export interface InputFileAttribs extends InputAttribs {
+    accept: AttribVal<string | string[]>;
+    capture: AttribVal<"user" | "environment">;
+    multiple: AttribVal<boolean>;
+}
+
 export interface InputTextAttribs extends InputAttribs {
     dirname: AttribVal<string>;
     minlength: AttribVal<number>;
@@ -37,31 +66,48 @@ export interface InputNumericAttribs extends InputAttribs {
     value: AttribVal<number>;
 }
 
+export const button = defElement<Partial<InputAttribs>>("button");
+
 export const checkbox = defElement<Partial<InputCheckboxAttribs>, never>(
     "input",
     {
         type: "checkbox",
     }
 );
 
-export const radio = defElement<Partial<InputAttribs>, never>("input", {
+export const radio = defElement<Partial<InputRadioAttribs>, never>("input", {
     type: "radio",
 });
 
+export const inputColor = defElement<Partial<InputAttribs>, never>("input", {
+    type: "color",
+});
+
+export const inputFile = defElement<Partial<InputFileAttribs>, never>("input", {
+    type: "file",
+});
+
 export const inputPass = defElement<Partial<InputTextAttribs>, never>("input", {
     type: "password",
 });
 
 export const inputNumber = defElement<Partial<InputNumericAttribs>, never>(
     "input",
-    { type: "numeric" }
+    { type: "number" }
 );
 
 export const inputRange = defElement<Partial<InputNumericAttribs>, never>(
     "input",
     { type: "range" }
 );
 
+export const inputSearch = defElement<Partial<InputTextAttribs>, never>(
+    "input",
+    {
+        type: "search",
+    }
+);
+
 export const inputText = defElement<Partial<InputTextAttribs>, never>("input", {
     type: "text",
 });
@@ -91,6 +137,7 @@ export const select = defElement<Partial<SelectAttribs>>("select");
 
 export interface LabelAttribs extends Partial<Attribs> {
     for: AttribVal<string>;
+    form?: AttribVal<string>;
 }
 
 export const label = defElement<LabelAttribs>("label");
@@ -106,3 +153,10 @@ export interface MeterAttribs extends Attribs {
 }
 
 export const meter = defElement<Partial<MeterAttribs>>("meter");
+
+export interface ProgressAttribs extends Attribs {
+    max: AttribVal<number>;
+    value: AttribVal<number>;
+}
+
+export const progress = defElement<Partial<ProgressAttribs>>("progress");
diff --git a/packages/hiccup-html/src/head.ts b/packages/hiccup-html/src/head.ts
@@ -0,0 +1,74 @@
+import {
+    Attribs,
+    AttribVal,
+    CORSAttribs,
+    ImportanceAttribs,
+    ReferrerAttribs,
+    RelAttribs,
+} from "./api";
+import { defElement, defElements } from "./def";
+
+export const [head, title] = defElements(["head", "title"]);
+
+export interface BaseAttribs extends Attribs {
+    href: AttribVal<string>;
+    target: AttribVal<string>;
+}
+
+export const base = defElement<Partial<BaseAttribs>, never>("base");
+
+export interface MetaAttribs extends Attribs {
+    charset: AttribVal<string>;
+    content: AttribVal<string>;
+    "http-equiv": AttribVal<
+        | "content-language"
+        | "content-security-policy"
+        | "content-type"
+        | "default-style"
+        | "refresh"
+        | "set-cookie"
+        | "x-ua-compatible"
+    >;
+    name: AttribVal<string>;
+}
+
+export const meta = defElement<Partial<MetaAttribs>, never>("meta");
+
+export interface LinkAttribs
+    extends Attribs,
+        CORSAttribs,
+        ImportanceAttribs,
+        ReferrerAttribs,
+        RelAttribs {
+    as: AttribVal<
+        | "audio"
+        | "document"
+        | "embed"
+        | "fetch"
+        | "font"
+        | "image"
+        | "object"
+        | "script"
+        | "style"
+        | "track"
+        | "video"
+        | "worker"
+    >;
+    disabled: AttribVal<boolean>;
+    href: AttribVal<string>;
+    hreflang: AttribVal<string>;
+    integrity: AttribVal<string>;
+    media: AttribVal<string>;
+    sizes: AttribVal<string | string[]>;
+    type: AttribVal<string>;
+}
+
+export const link = defElement<Partial<LinkAttribs>, never>("link");
+
+export interface StyleAttribs extends Attribs {
+    media: AttribVal<string>;
+    nonce: AttribVal<string>;
+    type: AttribVal<string>;
+}
+
+export const style = defElement<Partial<StyleAttribs>, string>("style");
diff --git a/packages/hiccup-html/src/index.ts b/packages/hiccup-html/src/index.ts
@@ -3,6 +3,7 @@ export * from "./def";
 
 export * from "./blocks";
 export * from "./forms";
+export * from "./head";
 export * from "./inline";
 export * from "./lists";
 export * from "./media";

diff --git a/packages/hiccup-html/src/inline.ts b/packages/hiccup-html/src/inline.ts
@@ -1,13 +1,12 @@
-import { Attribs, AttribVal, ReferrerAttribs } from "./api";
+import { Attribs, AttribVal, ReferrerAttribs, RelAttribs } from "./api";
 import { defElement, defElements } from "./def";
 import { NumOrString } from "@thi.ng/api";
 
-interface AnchorAttribs extends Attribs, ReferrerAttribs {
+interface AnchorAttribs extends Attribs, ReferrerAttribs, RelAttribs {
     download: AttribVal<string>;
     href: AttribVal<string>;
     hreflang: AttribVal<string>;
-    ping: AttribVal<string | string[]>; // space
-    rel: AttribVal<string>;
+    ping: AttribVal<string | string[]>;
     target: AttribVal<string>;
     type: AttribVal<string>;
 }

diff --git a/packages/hiccup-html/src/lists.ts b/packages/hiccup-html/src/lists.ts
@@ -15,4 +15,10 @@ export const ol = defElement<Partial<OrderedListAttribs>>("ol");
 
 export const li = defElement<Partial<ListItemAttribs>>("li");
 
-export const [ul, dl, dt, dd] = defElements(["ul", "dl", "dt", "dd"]);
+export const [ul, dl, dt, dd, datalist] = defElements([
+    "ul",
+    "dl",
+    "dt",
+    "dd",
+    "datalist",
+]);
diff --git a/packages/hiccup-html/src/media.ts b/packages/hiccup-html/src/media.ts
@@ -1,16 +1,25 @@
-import type { Attribs, AttribVal, CORSAttribs, ReferrerAttribs } from "./api";
+import type {
+    Attribs,
+    AttribVal,
+    CORSAttribs,
+    ImportanceAttribs,
+    ReferrerAttribs,
+} from "./api";
 import { defElement } from "./def";
 
-export interface ImageAttribs extends Attribs, CORSAttribs, ReferrerAttribs {
+export interface ImageAttribs
+    extends Attribs,
+        CORSAttribs,
+        ImportanceAttribs,
+        ReferrerAttribs {
     alt: AttribVal<string>;
     decoding: AttribVal<"sync" | "async" | "auto">;
     height: AttribVal<number>;
-    importance: AttribVal<"high" | "low" | "auto">;
     ismap: AttribVal<boolean>;
     loading: AttribVal<"eager" | "lazy">;
-    sizes: AttribVal<string | string[]>; // comma
+    sizes: AttribVal<string | string[]>;
     src: AttribVal<string>;
-    srcset: AttribVal<string | string[]>; // comma
+    srcset: AttribVal<string | string[]>;
     usemap: AttribVal<boolean>;
     width: AttribVal<number>;
 }
@@ -22,8 +31,8 @@ export const picture = defElement("picture");
 export interface SourceAttribs extends Attribs {
     media: AttribVal<string>;
     src: AttribVal<string>;
-    sizes: AttribVal<string | string[]>; // comma
-    srcset: AttribVal<string | string[]>; // comma
+    sizes: AttribVal<string | string[]>;
+    srcset: AttribVal<string | string[]>;
     type: AttribVal<string>;
 }