diff --git a/packages/hiccup-html/LICENSE b/packages/hiccup-html/LICENSE new file mode 100644 index 0000000000..8dada3edaf --- /dev/null +++ b/packages/hiccup-html/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "{}" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright {yyyy} {name of copyright owner} + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/packages/hiccup-html/README.md b/packages/hiccup-html/README.md new file mode 100644 index 0000000000..5a2f351d11 --- /dev/null +++ b/packages/hiccup-html/README.md @@ -0,0 +1,137 @@ + + +# ![hiccup-html](https://media.thi.ng/umbrella/banners/thing-hiccup-html.svg?cec1e8d8) + +[![npm version](https://img.shields.io/npm/v/@thi.ng/hiccup-html.svg)](https://www.npmjs.com/package/@thi.ng/hiccup-html) +![npm downloads](https://img.shields.io/npm/dm/@thi.ng/hiccup-html.svg) +[![Twitter Follow](https://img.shields.io/twitter/follow/thing_umbrella.svg?style=flat-square&label=twitter)](https://twitter.com/thing_umbrella) + +This project is part of the +[@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo. + +- [About](#about) + - [Supported elements](#supported-elements) + - [Sections](#sections) + - [Text content](#text-content) + - [Forms / inputs](#forms---inputs) + - [Media](#media) + - [Status](#status) + - [Related packages](#related-packages) +- [Installation](#installation) +- [Dependencies](#dependencies) +- [API](#api) +- [Authors](#authors) +- [License](#license) + +## About + +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_. All +functions take zero or more args with the first one an element specific +attribute object (see +[api.ts](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/api.ts#L116) +for common base). + +### Supported elements + +#### 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` + +#### Text content + +[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/blocks.ts) + +`anchor`, `blockquote`, `div`, `figure`, `figcaption`, `hr`, `para`, +`pre`, `span` + +#### Forms / inputs + +[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/input.ts) + +`inputCheck`, `inputNumber`, `inputPass`, `inputRadio`, `inputRange`, +`inputText`, `label`, `option`, `optGroup`, `select` + +#### Media + +[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/media.ts) + +`img` + +### Status + +**ALPHA** - bleeding edge / work-in-progress + +The current aim is not necessarily to have wrappers for *each* possible +HTML5 element, but certainly to support the most commonly used ones. PRs +welcome! + +### Related packages + +- [@thi.ng/hdom](https://github.com/thi-ng/umbrella/tree/develop/packages/hdom) - Lightweight vanilla ES6 UI component trees with customizable branch-local behaviors +- [@thi.ng/hiccup-svg](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-svg) - SVG element functions for [@thi.ng/hiccup](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup) & [@thi.ng/hdom](https://github.com/thi-ng/umbrella/tree/develop/packages/hdom) + +## Installation + +```bash +yarn add @thi.ng/hiccup-html +``` + +```html +// ES module + + +// UMD + +``` + +Package sizes (gzipped, pre-treeshake): ESM: 440 bytes / CJS: 576 bytes / UMD: 630 bytes + +## Dependencies + +- [@thi.ng/api](https://github.com/thi-ng/umbrella/tree/develop/packages/api) + +## API + +[Generated API docs](https://docs.thi.ng/umbrella/hiccup-html/) + +```ts +import { $compile } from "@thi.ng/hdom2020"; +import { div, label, option, select } from "@thi.ng/hiccup-html"; + +const choices = [ + ["#f00", "Red"], + ["#ff0", "Yellow"], + ["#0f0", "Green"], + ["#0ff", "Cyan"], + ["#00f", "Blue"], + ["#f0f", "Magenta"], +]; + +$compile( + div( + null, + label({ for: "colors" }, "Fave color: "), + select( + { + id: "colors", + onchange: (e) => alert((e.target).value), + }, + option(null, "Please choose..."), + ...choices.map((x) => option({ value: x[0] }, x[1])) + ) + ) +).mount(document.body); +``` + +## Authors + +Karsten Schmidt + +## License + +© 2020 Karsten Schmidt // Apache Software License 2.0 diff --git a/packages/hiccup-html/api-extractor.json b/packages/hiccup-html/api-extractor.json new file mode 100644 index 0000000000..94972e6bed --- /dev/null +++ b/packages/hiccup-html/api-extractor.json @@ -0,0 +1,3 @@ +{ + "extends": "../../api-extractor.json" +} diff --git a/packages/hiccup-html/package.json b/packages/hiccup-html/package.json new file mode 100644 index 0000000000..678d025040 --- /dev/null +++ b/packages/hiccup-html/package.json @@ -0,0 +1,80 @@ +{ + "name": "@thi.ng/hiccup-html", + "version": "0.0.1", + "description": "Type-checked HTML5 element functions for @thi.ng/hiccup related infrastructure", + "module": "./index.js", + "main": "./lib/index.js", + "umd:main": "./lib/index.umd.js", + "typings": "./index.d.ts", + "repository": { + "type": "git", + "url": "https://github.com/thi-ng/umbrella.git" + }, + "homepage": "https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html#readme", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/postspectacular" + }, + { + "type": "patreon", + "url": "https://patreon.com/thing_umbrella" + } + ], + "author": "Karsten Schmidt ", + "license": "Apache-2.0", + "scripts": { + "build": "yarn clean && yarn build:es6 && node ../../scripts/bundle-module", + "build:release": "yarn clean && yarn build:es6 && node ../../scripts/bundle-module all", + "build:es6": "tsc --declaration", + "build:test": "rimraf build && tsc -p test/tsconfig.json", + "test": "mocha test", + "cover": "nyc mocha test && nyc report --reporter=lcov", + "clean": "rimraf *.js *.d.ts *.map .nyc_output build coverage doc lib", + "doc:readme": "ts-node -P ../../tools/tsconfig.json ../../tools/src/readme.ts", + "doc:ae": "mkdir -p .ae/doc .ae/temp && node_modules/.bin/api-extractor run --local --verbose", + "doc": "node_modules/.bin/typedoc --mode modules --out doc src", + "pub": "yarn build:release && yarn publish --access public" + }, + "devDependencies": { + "@istanbuljs/nyc-config-typescript": "^1.0.1", + "@microsoft/api-extractor": "^7.8.0", + "@types/mocha": "^7.0.2", + "@types/node": "^14.0.1", + "mocha": "^7.1.2", + "nyc": "^15.0.1", + "ts-node": "^8.10.1", + "typedoc": "^0.17.6", + "typescript": "^3.9.2" + }, + "dependencies": { + "@thi.ng/api": "^6.11.2" + }, + "files": [ + "*.js", + "*.d.ts", + "lib" + ], + "keywords": [ + "es6", + "hiccup", + "html", + "typechecked", + "typescript", + "wrapper" + ], + "publishConfig": { + "access": "public" + }, + "sideEffects": false, + "thi.ng": { + "parent": "@thi.ng/hiccup", + "related": [ + "hdom", + "hdom2020", + "hiccup-svg" + ], + "status": "alpha", + "year": 2020 + } +} diff --git a/packages/hiccup-html/src/anchor.ts b/packages/hiccup-html/src/anchor.ts new file mode 100644 index 0000000000..45b9ade1e5 --- /dev/null +++ b/packages/hiccup-html/src/anchor.ts @@ -0,0 +1,25 @@ +import type { MaybeDeref } from "@thi.ng/api"; +import { Attribs } from "./api"; +import { defElement } from "./def"; + +interface AnchorAttribs extends Attribs { + download: MaybeDeref; + href: MaybeDeref; + hreflang: MaybeDeref; + ping: MaybeDeref; + referrerpolicy: MaybeDeref< + | "no-referrer" + | "no-referrer-when-downgrade" + | "origin" + | "origin-when-cross-origin" + | "same-origin" + | "strict-origin" + | "strict-origin-when-cross-origin" + | "unsafe-url" + >; + rel: MaybeDeref; + target: MaybeDeref; + type: MaybeDeref; +} + +export const anchor = defElement>("a"); diff --git a/packages/hiccup-html/src/api.ts b/packages/hiccup-html/src/api.ts new file mode 100644 index 0000000000..3f6a4c374a --- /dev/null +++ b/packages/hiccup-html/src/api.ts @@ -0,0 +1,140 @@ +import type { Fn, IObjectOf, MaybeDeref, NumOrString } from "@thi.ng/api"; + +export type EventAttribs = Record< + K, + Fn | [Fn, boolean | AddEventListenerOptions] +>; + +export type AnimationEventAttribs = EventAttribs< + | "onanimationcancel" + | "onanimationend" + | "onanimationiteration" + | "onanimationstart", + AnimationEvent +>; + +export type DragEventAttribs = EventAttribs< + | "ondrag" + | "ondragend" + | "ondragenter" + | "ondragexit" + | "ondragleave" + | "ondragover" + | "ondragstart" + | "ondrop", + DragEvent +>; + +export type FocusEventAttribs = EventAttribs< + "onblur" | "onfocus" | "onfocusin" | "onfocusout", + FocusEvent +>; + +export type InputEventAttribs = EventAttribs< + "onchange" | "oninput", + InputEvent +>; + +export type KeyboardEventAttribs = EventAttribs< + "onkeydown" | "onkeypress" | "onkeyup", + KeyboardEvent +>; + +export type MouseEventAttribs = EventAttribs< + | "onclick" + | "ondblclick" + | "oncontextmenu" + | "onmousedown" + | "onmouseenter" + | "onmouseleave" + | "onmousemove" + | "onmouseout" + | "onmouseover" + | "onmouseup", + MouseEvent +>; + +export type PointerEventAttribs = EventAttribs< + | "ongotpointercapture" + | "onlostpointercapture" + | "onpointercancel" + | "onpointerdown" + | "onpointerenter" + | "onpointerleave" + | "onpointermove" + | "onpointerout" + | "onpointerover" + | "onpointerup", + PointerEvent +>; + +export type SelectionEventAttribs = EventAttribs< + "onselect" | "onselectionchange" | "onselectstart", + Event +>; + +export type TouchEventAttribs = EventAttribs< + "ontouchcancel" | "ontouchend" | "ontouchmove" | "ontouchstart", + TouchEvent +>; + +export type TransitionEventAttribs = EventAttribs< + | "ontransitioncancel" + | "ontransitionend" + | "ontransitionrun" + | "ontransitionstart", + TransitionEvent +>; + +export type WheelEventAttribs = EventAttribs<"onwheel", WheelEvent>; + +export interface GlobalEventAttribs + extends AnimationEventAttribs, + DragEventAttribs, + FocusEventAttribs, + InputEventAttribs, + KeyboardEventAttribs, + MouseEventAttribs, + PointerEventAttribs, + SelectionEventAttribs, + TouchEventAttribs, + TransitionEventAttribs, + WheelEventAttribs { + onresize: Fn; + onscroll: Fn; + onsubmit: Fn; +} + +export interface MicroformatAttribs { + itemid: MaybeDeref; + itemprop: MaybeDeref; + itemref: MaybeDeref; + itemscope: MaybeDeref; + itemtype: MaybeDeref; +} + +export interface Attribs extends GlobalEventAttribs, MicroformatAttribs { + accesskey: MaybeDeref; + autocapitalize: MaybeDeref< + "off" | "on" | "sentences" | "words" | "characters" + >; + class: MaybeDeref>>; + contenteditable: MaybeDeref; + data: IObjectOf>; + dir: MaybeDeref<"rtl" | "ltr">; + draggable: MaybeDeref; + hidden: MaybeDeref; + id: MaybeDeref; + is: MaybeDeref; + lang: MaybeDeref; + scrollLeft: MaybeDeref; + scrollTop: MaybeDeref; + spellcheck: MaybeDeref; + style: MaybeDeref< + string | IObjectOf>> + >; + tabindex: MaybeDeref; + title: MaybeDeref; + translate: MaybeDeref; + [id: string]: any; +} diff --git a/packages/hiccup-html/src/blocks.ts b/packages/hiccup-html/src/blocks.ts new file mode 100644 index 0000000000..ac1194ee78 --- /dev/null +++ b/packages/hiccup-html/src/blocks.ts @@ -0,0 +1,18 @@ +import type { Attribs } from "./api"; +import { defElement } from "./def"; + +export const blockquote = defElement("blockquote"); + +export const div = defElement("div"); + +export const figure = defElement("figure"); + +export const figcaption = defElement("figcaption"); + +export const hr = defElement, never>("hr"); + +export const para = defElement("p"); + +export const pre = defElement("pre"); + +export const span = defElement("span"); diff --git a/packages/hiccup-html/src/def.ts b/packages/hiccup-html/src/def.ts new file mode 100644 index 0000000000..b4ca144f23 --- /dev/null +++ b/packages/hiccup-html/src/def.ts @@ -0,0 +1,10 @@ +import type { Nullable } from "@thi.ng/api"; +import type { Attribs } from "./api"; + +export const defElement = , B = any>( + tag: string, + baseAttribs?: Partial +) => (attribs: Nullable, ...body: B[]): [string, Nullable, ...B[]] => + baseAttribs + ? [tag, { ...baseAttribs, ...attribs }, ...body] + : [tag, attribs, ...body]; diff --git a/packages/hiccup-html/src/index.ts b/packages/hiccup-html/src/index.ts new file mode 100644 index 0000000000..17c53ad977 --- /dev/null +++ b/packages/hiccup-html/src/index.ts @@ -0,0 +1,8 @@ +export * from "./api"; +export * from "./def"; + +export * from "./anchor"; +export * from "./blocks"; +export * from "./input"; +export * from "./media"; +export * from "./sections"; diff --git a/packages/hiccup-html/src/input.ts b/packages/hiccup-html/src/input.ts new file mode 100644 index 0000000000..02fc1fe91c --- /dev/null +++ b/packages/hiccup-html/src/input.ts @@ -0,0 +1,108 @@ +import { MaybeDeref, NumOrString } from "@thi.ng/api"; +import { Attribs } from "./api"; +import { defElement } from "./def"; + +export interface InputAttribs extends Attribs { + // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill + autocomplete: MaybeDeref; + autofocus: MaybeDeref; + disabled: MaybeDeref; + form: MaybeDeref; + list: MaybeDeref; + name: MaybeDeref; + readonly: MaybeDeref; + required: MaybeDeref; + type: MaybeDeref; + value: MaybeDeref; +} + +export interface InputCheckboxAttribs extends InputAttribs { + checked: MaybeDeref; + indeterminate: MaybeDeref; +} + +export interface InputTextAttribs extends InputAttribs { + dirname: MaybeDeref; + minlength: MaybeDeref; + maxlength: MaybeDeref; + pattern: MaybeDeref; + placeholder: MaybeDeref; + size: MaybeDeref; +} + +export interface InputNumericAttribs extends InputAttribs { + min: MaybeDeref; + max: MaybeDeref; + step: MaybeDeref; + value: MaybeDeref; +} + +export const inputCheck = defElement, never>( + "input", + { + type: "checkbox", + } +); + +export const inputPass = defElement, never>("input", { + type: "password", +}); + +export const inputNumber = defElement, never>( + "input", + { type: "numeric" } +); + +export const inputRadio = defElement, never>("input", { + type: "radio", +}); + +export const inputRange = defElement, never>( + "input", + { type: "range" } +); + +export const inputText = defElement, never>("input", { + type: "text", +}); + +export interface OptionAttribs { + disabled: MaybeDeref; + label: MaybeDeref; + selected: MaybeDeref; + value: MaybeDeref; +} + +export const option = defElement, string>("option"); + +export interface OptGroupAttribs { + disabled: MaybeDeref; + label: MaybeDeref; +} + +export const optGroup = defElement>("optgroup"); + +export interface SelectAttribs extends InputAttribs { + multiple: MaybeDeref; + size: MaybeDeref; +} + +export const select = defElement>("select"); + +export interface LabelAttribs extends Partial { + for: MaybeDeref; +} + +export const label = defElement("label"); + +export interface MeterAttribs extends Attribs { + min: MaybeDeref; + max: MaybeDeref; + low: MaybeDeref; + high: MaybeDeref; + optimum: MaybeDeref; + value: MaybeDeref; + form: MaybeDeref; +} + +export const meter = defElement>("meter"); diff --git a/packages/hiccup-html/src/media.ts b/packages/hiccup-html/src/media.ts new file mode 100644 index 0000000000..a84a1eb099 --- /dev/null +++ b/packages/hiccup-html/src/media.ts @@ -0,0 +1,12 @@ +import type { MaybeDeref } from "@thi.ng/api"; +import type { Attribs } from "./api"; +import { defElement } from "./def"; + +export interface ImageAttribs extends Attribs { + alt: MaybeDeref; + src: MaybeDeref; + width: MaybeDeref; + height: MaybeDeref; +} + +export const img = defElement, never>("img"); diff --git a/packages/hiccup-html/src/sections.ts b/packages/hiccup-html/src/sections.ts new file mode 100644 index 0000000000..c8bd58eafe --- /dev/null +++ b/packages/hiccup-html/src/sections.ts @@ -0,0 +1,19 @@ +import { defElement } from "./def"; + +export const address = defElement("address"); + +export const article = defElement("article"); + +export const aside = defElement("aside"); + +export const footer = defElement("footer"); + +export const header = defElement("header"); + +export const hgroup = defElement("hgroup"); + +export const main = defElement("main"); + +export const nav = defElement("nav"); + +export const section = defElement("section"); diff --git a/packages/hiccup-html/test/index.ts b/packages/hiccup-html/test/index.ts new file mode 100644 index 0000000000..3b5b948120 --- /dev/null +++ b/packages/hiccup-html/test/index.ts @@ -0,0 +1,6 @@ +// import * as assert from "assert"; +// import { } from "../src"; + +describe("hiccup-html", () => { + it("tests pending"); +}); diff --git a/packages/hiccup-html/test/tsconfig.json b/packages/hiccup-html/test/tsconfig.json new file mode 100644 index 0000000000..f6e63560dd --- /dev/null +++ b/packages/hiccup-html/test/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "outDir": "../build", + "module": "commonjs" + }, + "include": [ + "./**/*.ts", + "../src/**/*.ts" + ] +} diff --git a/packages/hiccup-html/tpl.readme.md b/packages/hiccup-html/tpl.readme.md new file mode 100644 index 0000000000..106269e3a5 --- /dev/null +++ b/packages/hiccup-html/tpl.readme.md @@ -0,0 +1,114 @@ +# ${pkg.banner} + +[![npm version](https://img.shields.io/npm/v/${pkg.name}.svg)](https://www.npmjs.com/package/${pkg.name}) +![npm downloads](https://img.shields.io/npm/dm/${pkg.name}.svg) +[![Twitter Follow](https://img.shields.io/twitter/follow/thing_umbrella.svg?style=flat-square&label=twitter)](https://twitter.com/thing_umbrella) + +This project is part of the +[@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo. + + + +## About + +${pkg.description} + +The following type-checked factory functions are provided _so far_. All +functions take zero or more args with the first one an element specific +attribute object (see +[api.ts](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/api.ts#L116) +for common base). + +### Supported elements + +#### 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` + +#### Text content + +[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/blocks.ts) + +`anchor`, `blockquote`, `div`, `figure`, `figcaption`, `hr`, `para`, +`pre`, `span` + +#### Forms / inputs + +[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/input.ts) + +`inputCheck`, `inputNumber`, `inputPass`, `inputRadio`, `inputRange`, +`inputText`, `label`, `option`, `optGroup`, `select` + +#### Media + +[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/media.ts) + +`img` + +${status} + +The current aim is not necessarily to have wrappers for *each* possible +HTML5 element, but certainly to support the most commonly used ones. PRs +welcome! + +${supportPackages} + +${relatedPackages} + +${blogPosts} + +## Installation + +${pkg.install} + +${pkg.size} + +## Dependencies + +${pkg.deps} + +${examples} + +## API + +${docLink} + +```ts +import { $compile } from "@thi.ng/hdom2020"; +import { div, label, option, select } from "@thi.ng/hiccup-html"; + +const choices = [ + ["#f00", "Red"], + ["#ff0", "Yellow"], + ["#0f0", "Green"], + ["#0ff", "Cyan"], + ["#00f", "Blue"], + ["#f0f", "Magenta"], +]; + +$compile( + div( + null, + label({ for: "colors" }, "Fave color: "), + select( + { + id: "colors", + onchange: (e) => alert((e.target).value), + }, + option(null, "Please choose..."), + ...choices.map((x) => option({ value: x[0] }, x[1])) + ) + ) +).mount(document.body); +``` + +## Authors + +${authors} + +## License + +© ${copyright} // ${license} diff --git a/packages/hiccup-html/tsconfig.json b/packages/hiccup-html/tsconfig.json new file mode 100644 index 0000000000..893b9979c5 --- /dev/null +++ b/packages/hiccup-html/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": ".", + "module": "es6", + "target": "es6" + }, + "include": [ + "./src/**/*.ts" + ] +}