From 5e3f8f1f70fd06aab5ab64683546d5febe16a0f4 Mon Sep 17 00:00:00 2001 From: Karsten Schmidt Date: Wed, 24 Jun 2020 22:15:14 +0100 Subject: [PATCH] feat(hiccup-html): add more elements, update readme --- packages/hiccup-html/README.md | 29 +++++++---- packages/hiccup-html/src/api.ts | 37 ++++++++++++++ packages/hiccup-html/src/forms.ts | 68 ++++++++++++++++++++++--- packages/hiccup-html/src/head.ts | 74 ++++++++++++++++++++++++++++ packages/hiccup-html/src/index.ts | 1 + packages/hiccup-html/src/inline.ts | 7 ++- packages/hiccup-html/src/lists.ts | 8 ++- packages/hiccup-html/src/media.ts | 23 ++++++--- packages/hiccup-html/src/sections.ts | 25 ++++++++++ packages/hiccup-html/tpl.readme.md | 26 ++++++---- 10 files changed, 260 insertions(+), 38 deletions(-) create mode 100644 packages/hiccup-html/src/head.ts diff --git a/packages/hiccup-html/README.md b/packages/hiccup-html/README.md index 73c8a9a05d..291e5a25c0 100644 --- 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 ``` -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 index facd98c75b..1c46f524db 100644 --- 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; } + +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; +} diff --git a/packages/hiccup-html/src/forms.ts b/packages/hiccup-html/src/forms.ts index 825e19bdd2..fb88477cea 100644 --- 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; + action: AttribVal; + autocomplete: AttribVal<"on" | "off">; + enctype: AttribVal; + method: AttribVal; + novalidate: AttribVal; + target: AttribVal; +} + +export const form = defElement>("form"); + +export interface FieldsetAttribs extends Attribs { + disabled: AttribVal; + form: AttribVal; + name: AttribVal; +} + +export const fieldset = defElement>("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; autofocus: AttribVal; - disabled: AttribVal; - form: AttribVal; list: AttribVal; - name: AttribVal; readonly: AttribVal; required: AttribVal; type: AttribVal; @@ -21,6 +40,16 @@ export interface InputCheckboxAttribs extends InputAttribs { indeterminate: AttribVal; } +export interface InputRadioAttribs extends InputAttribs { + checked: AttribVal; +} + +export interface InputFileAttribs extends InputAttribs { + accept: AttribVal; + capture: AttribVal<"user" | "environment">; + multiple: AttribVal; +} + export interface InputTextAttribs extends InputAttribs { dirname: AttribVal; minlength: AttribVal; @@ -37,6 +66,8 @@ export interface InputNumericAttribs extends InputAttribs { value: AttribVal; } +export const button = defElement>("button"); + export const checkbox = defElement, never>( "input", { @@ -44,17 +75,25 @@ export const checkbox = defElement, never>( } ); -export const radio = defElement, never>("input", { +export const radio = defElement, never>("input", { type: "radio", }); +export const inputColor = defElement, never>("input", { + type: "color", +}); + +export const inputFile = defElement, never>("input", { + type: "file", +}); + export const inputPass = defElement, never>("input", { type: "password", }); export const inputNumber = defElement, never>( "input", - { type: "numeric" } + { type: "number" } ); export const inputRange = defElement, never>( @@ -62,6 +101,13 @@ export const inputRange = defElement, never>( { type: "range" } ); +export const inputSearch = defElement, never>( + "input", + { + type: "search", + } +); + export const inputText = defElement, never>("input", { type: "text", }); @@ -91,6 +137,7 @@ export const select = defElement>("select"); export interface LabelAttribs extends Partial { for: AttribVal; + form?: AttribVal; } export const label = defElement("label"); @@ -106,3 +153,10 @@ export interface MeterAttribs extends Attribs { } export const meter = defElement>("meter"); + +export interface ProgressAttribs extends Attribs { + max: AttribVal; + value: AttribVal; +} + +export const progress = defElement>("progress"); diff --git a/packages/hiccup-html/src/head.ts b/packages/hiccup-html/src/head.ts new file mode 100644 index 0000000000..c98b0ffbab --- /dev/null +++ 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; + target: AttribVal; +} + +export const base = defElement, never>("base"); + +export interface MetaAttribs extends Attribs { + charset: AttribVal; + content: AttribVal; + "http-equiv": AttribVal< + | "content-language" + | "content-security-policy" + | "content-type" + | "default-style" + | "refresh" + | "set-cookie" + | "x-ua-compatible" + >; + name: AttribVal; +} + +export const meta = defElement, 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; + href: AttribVal; + hreflang: AttribVal; + integrity: AttribVal; + media: AttribVal; + sizes: AttribVal; + type: AttribVal; +} + +export const link = defElement, never>("link"); + +export interface StyleAttribs extends Attribs { + media: AttribVal; + nonce: AttribVal; + type: AttribVal; +} + +export const style = defElement, string>("style"); diff --git a/packages/hiccup-html/src/index.ts b/packages/hiccup-html/src/index.ts index ec99e1b083..99f22151bd 100644 --- 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 index d356b827b6..3b5cbc513c 100644 --- 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; href: AttribVal; hreflang: AttribVal; - ping: AttribVal; // space - rel: AttribVal; + ping: AttribVal; target: AttribVal; type: AttribVal; } diff --git a/packages/hiccup-html/src/lists.ts b/packages/hiccup-html/src/lists.ts index 0ed39fa342..5222eccaed 100644 --- a/packages/hiccup-html/src/lists.ts +++ b/packages/hiccup-html/src/lists.ts @@ -15,4 +15,10 @@ export const ol = defElement>("ol"); export const li = defElement>("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 index 0d6578069a..bc11194a68 100644 --- 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; decoding: AttribVal<"sync" | "async" | "auto">; height: AttribVal; - importance: AttribVal<"high" | "low" | "auto">; ismap: AttribVal; loading: AttribVal<"eager" | "lazy">; - sizes: AttribVal; // comma + sizes: AttribVal; src: AttribVal; - srcset: AttribVal; // comma + srcset: AttribVal; usemap: AttribVal; width: AttribVal; } @@ -22,8 +31,8 @@ export const picture = defElement("picture"); export interface SourceAttribs extends Attribs { media: AttribVal; src: AttribVal; - sizes: AttribVal; // comma - srcset: AttribVal; // comma + sizes: AttribVal; + srcset: AttribVal; type: AttribVal; } diff --git a/packages/hiccup-html/src/sections.ts b/packages/hiccup-html/src/sections.ts index 6aafeada65..35b35ff9c4 100644 --- a/packages/hiccup-html/src/sections.ts +++ b/packages/hiccup-html/src/sections.ts @@ -1,4 +1,28 @@ import { defElement, defElements } from "./def"; +import { EventAttribs, Attribs } from "./api"; + +export type BodyEventAttribs = EventAttribs< + | "onafterprint" + | "onbeforeprint" + | "onbeforeunload" + | "onerror" + | "onhashchange" + | "onlanguagechange" + | "onload" + | "onmessage" + | "onoffline" + | "ononline" + | "onpopstate" + | "onredo" + | "onstorage" + | "onundo" + | "onunload", + Event +>; + +export interface BodyAttribs extends Attribs, BodyEventAttribs {} + +export const body = defElement>("body"); export const [ address, @@ -11,6 +35,7 @@ export const [ nav, section, ] = defElements([ + "address", "article", "aside", "footer", diff --git a/packages/hiccup-html/tpl.readme.md b/packages/hiccup-html/tpl.readme.md index 994e5b764a..e17760ec43 100644 --- a/packages/hiccup-html/tpl.readme.md +++ b/packages/hiccup-html/tpl.readme.md @@ -13,30 +13,36 @@ This project is part of the ${pkg.description} -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 @@ -49,8 +55,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