@thi.ng/hiccup-html 2.3.0 → 2.3.2

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-12-09T19:12:03Z
+- **Last updated**: 2023-12-18T13:41:19Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.

package/README.md

@@ -213,6 +213,7 @@ directory are using this package:
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/layout-gridgen.png" width="240"/>      | Randomized space-filling, nested grid layout generator                                                  | [Demo](https://demo.thi.ng/umbrella/layout-gridgen/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/layout-gridgen)      |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/lispy-repl.png" width="240"/>          | Browser REPL for a Lispy S-expression based mini language                                               | [Demo](https://demo.thi.ng/umbrella/lispy-repl/)          | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/lispy-repl)          |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/mastodon-feed.jpg" width="240"/>       | Mastodon API feed reader with support for different media types, fullscreen media modal, HTML rewriting | [Demo](https://demo.thi.ng/umbrella/mastodon-feed/)       | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/mastodon-feed)       |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/meta-css-basics.png" width="240"/>     | Basic thi.ng/meta-css usage & testbed                                                                   | [Demo](https://demo.thi.ng/umbrella/meta-css-basics/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/meta-css-basics)     |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/parse-playground.png" width="240"/>    | Parser grammar livecoding editor/playground & codegen                                                   | [Demo](https://demo.thi.ng/umbrella/parse-playground/)    | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/parse-playground)    |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/pixel-gradients.jpg" width="240"/>     | Randomized 4-point 2D color gradient image generator                                                    | [Demo](https://demo.thi.ng/umbrella/pixel-gradients/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/pixel-gradients)     |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/pixel-sorting.png" width="240"/>       | Interactive pixel sorting tool using thi.ng/color & thi.ng/pixel                                        | [Demo](https://demo.thi.ng/umbrella/pixel-sorting/)       | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/pixel-sorting)       |

package/api.js

@@ -1 +0,0 @@
-export {};

package/blocks.js

@@ -1,12 +1,23 @@
 import { defElement, defElements } from "./def.js";
-export const blockquote = defElement("blockquote");
-export const [div, figure, figcaption, para, pre, template] = defElements([
-    "div",
-    "figure",
-    "figcaption",
-    "p",
-    "pre",
-    "template",
+const blockquote = defElement("blockquote");
+const [div, figure, figcaption, para, pre, template] = defElements([
+  "div",
+  "figure",
+  "figcaption",
+  "p",
+  "pre",
+  "template"
 ]);
-export const hr = defElement("hr");
-export const iframe = defElement("iframe");
+const hr = defElement("hr");
+const iframe = defElement("iframe");
+export {
+  blockquote,
+  div,
+  figcaption,
+  figure,
+  hr,
+  iframe,
+  para,
+  pre,
+  template
+};

package/def.js

@@ -1,23 +1,11 @@
-/**
- * HOF element. Returns new optimized element factory for given tag
- * name, optional `baseAttribs` defaults and generics for defining
- * supported attributes and children. See {@link ElementFactory} for
- * supported call formats of the resulting function..
- *
- * @param tag -
- * @param baseAttribs -
- */
-export const defElement = (tag, baseAttribs) => (...args) => {
-    const $tag = typeof args[0] === "string" ? tag + args.shift() : tag;
-    const n = args.length;
-    const attribs = n > 0
-        ? baseAttribs
-            ? { ...baseAttribs, ...args[0] }
-            : args[0]
-        : baseAttribs || null;
-    return n > 1 ? [$tag, attribs, ...args.slice(1)] : [$tag, attribs];
+const defElement = (tag, baseAttribs) => (...args) => {
+  const $tag = typeof args[0] === "string" ? tag + args.shift() : tag;
+  const n = args.length;
+  const attribs = n > 0 ? baseAttribs ? { ...baseAttribs, ...args[0] } : args[0] : baseAttribs || null;
+  return n > 1 ? [$tag, attribs, ...args.slice(1)] : [$tag, attribs];
+};
+const defElements = (tags) => tags.map((t) => defElement(t));
+export {
+  defElement,
+  defElements
 };
-/**
- * @internal
- */
-export const defElements = (tags) => tags.map((t) => defElement(t));

package/forms.js

@@ -1,35 +1,69 @@
 import { defElement } from "./def.js";
-export const form = defElement("form");
-export const fieldset = defElement("fieldset");
-export const legend = defElement("legend");
-export const button = defElement("button");
-export const checkbox = defElement("input", {
-    type: "checkbox",
+const form = defElement("form");
+const fieldset = defElement("fieldset");
+const legend = defElement("legend");
+const button = defElement("button");
+const checkbox = defElement(
+  "input",
+  {
+    type: "checkbox"
+  }
+);
+const radio = defElement("input", {
+  type: "radio"
 });
-export const radio = defElement("input", {
-    type: "radio",
+const inputColor = defElement("input", {
+  type: "color"
 });
-export const inputColor = defElement("input", {
-    type: "color",
+const inputFile = defElement("input", {
+  type: "file"
 });
-export const inputFile = defElement("input", {
-    type: "file",
+const inputPass = defElement("input", {
+  type: "password"
 });
-export const inputPass = defElement("input", {
-    type: "password",
+const inputNumber = defElement(
+  "input",
+  { type: "number" }
+);
+const inputRange = defElement(
+  "input",
+  { type: "range" }
+);
+const inputSearch = defElement(
+  "input",
+  {
+    type: "search"
+  }
+);
+const inputText = defElement("input", {
+  type: "text"
 });
-export const inputNumber = defElement("input", { type: "number" });
-export const inputRange = defElement("input", { type: "range" });
-export const inputSearch = defElement("input", {
-    type: "search",
-});
-export const inputText = defElement("input", {
-    type: "text",
-});
-export const textArea = defElement("textarea");
-export const option = defElement("option");
-export const optGroup = defElement("optgroup");
-export const select = defElement("select");
-export const label = defElement("label");
-export const meter = defElement("meter");
-export const progress = defElement("progress");
+const textArea = defElement("textarea");
+const option = defElement("option");
+const optGroup = defElement("optgroup");
+const select = defElement("select");
+const label = defElement("label");
+const meter = defElement("meter");
+const progress = defElement("progress");
+export {
+  button,
+  checkbox,
+  fieldset,
+  form,
+  inputColor,
+  inputFile,
+  inputNumber,
+  inputPass,
+  inputRange,
+  inputSearch,
+  inputText,
+  label,
+  legend,
+  meter,
+  optGroup,
+  option,
+  progress,
+  radio,
+  select,
+  textArea
+};

package/head.js

@@ -1,34 +1,51 @@
 import { defElement, defElements } from "./def.js";
-export const [head, title] = defElements(["head", "title"]);
-export const base = defElement("base");
-export const meta = defElement("meta");
-export const metaViewport = (opts = {}) => meta({
-    name: "viewport",
-    content: [
-        opts.width &&
-            `width=${opts.width < 0 ? "device-width" : opts.width}`,
-        opts.height &&
-            `height=${opts.height < 0 ? "device-height" : opts.height}`,
-        `initial-scale=${opts.init || 1}`,
-        opts.min && `minimum-scale=${opts.min}`,
-        opts.max && `maximum-scale=${opts.max}`,
-        `user-scalable=${opts.user !== false ? "yes" : "no"}`,
-        opts.fit != null && `viewport-fit=${opts.fit}`,
-    ]
-        .filter((x) => !!x)
-        .join(","),
+const [head, title] = defElements(["head", "title"]);
+const base = defElement("base");
+const meta = defElement("meta");
+const metaViewport = (opts = {}) => meta({
+  name: "viewport",
+  content: [
+    opts.width && `width=${opts.width < 0 ? "device-width" : opts.width}`,
+    opts.height && `height=${opts.height < 0 ? "device-height" : opts.height}`,
+    `initial-scale=${opts.init || 1}`,
+    opts.min && `minimum-scale=${opts.min}`,
+    opts.max && `maximum-scale=${opts.max}`,
+    `user-scalable=${opts.user !== false ? "yes" : "no"}`,
+    opts.fit != null && `viewport-fit=${opts.fit}`
+  ].filter((x) => !!x).join(",")
 });
-export const metaRobots = (type) => meta({ name: "robots", content: type });
-export const metaReferrer = (type) => meta({ name: "referrer", content: type });
-export const metaRefresh = (delay, url) => meta({
-    "http-equiv": "refresh",
-    content: url ? `${delay}; url=${url}` : String(delay),
+const metaRobots = (type) => meta({ name: "robots", content: type });
+const metaReferrer = (type) => meta({ name: "referrer", content: type });
+const metaRefresh = (delay, url) => meta({
+  "http-equiv": "refresh",
+  content: url ? `${delay}; url=${url}` : String(delay)
 });
-export const metaUTF8 = () => meta({ charset: "utf-8" });
-export const metaXUA = () => meta({ "http-equiv": "x-ua-compatible", content: "IE=edge" });
-export const link = defElement("link");
-export const linkCSS = (href) => link({ href, rel: "stylesheet" });
-export const style = defElement("style", {
-    type: "text/css",
-});
-export const script = defElement("script");
+const metaUTF8 = () => meta({ charset: "utf-8" });
+const metaXUA = () => meta({ "http-equiv": "x-ua-compatible", content: "IE=edge" });
+const link = defElement("link");
+const linkCSS = (href) => link({ href, rel: "stylesheet" });
+const style = defElement(
+  "style",
+  {
+    type: "text/css"
+  }
+);
+const script = defElement(
+  "script"
+);
+export {
+  base,
+  head,
+  link,
+  linkCSS,
+  meta,
+  metaReferrer,
+  metaRefresh,
+  metaRobots,
+  metaUTF8,
+  metaViewport,
+  metaXUA,
+  script,
+  style,
+  title
+};

package/inline.js

@@ -1,21 +1,46 @@
 import { defElement, defElements } from "./def.js";
-export const anchor = defElement("a");
-export const abbr = defElement("abbr");
-export const br = defElement("br");
-export const data = defElement("data");
-export const quote = defElement("q");
-export const time = defElement("time");
-export const [cite, code, em, i, kbd, mark, small, span, strong, sub, sup] = defElements([
-    "cite",
-    "code",
-    "em",
-    "i",
-    "kbd",
-    "mark",
-    "small",
-    "span",
-    "strong",
-    "sub",
-    "sup",
+const anchor = defElement("a");
+const abbr = defElement(
+  "abbr"
+);
+const br = defElement("br");
+const data = defElement("data");
+const quote = defElement("q");
+const time = defElement(
+  "time"
+);
+const [cite, code, em, i, kbd, mark, small, span, strong, sub, sup] = defElements([
+  "cite",
+  "code",
+  "em",
+  "i",
+  "kbd",
+  "mark",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup"
 ]);
-export const [del, ins] = defElements(["del", "ins"]);
+const [del, ins] = defElements(["del", "ins"]);
+export {
+  abbr,
+  anchor,
+  br,
+  cite,
+  code,
+  data,
+  del,
+  em,
+  i,
+  ins,
+  kbd,
+  mark,
+  quote,
+  small,
+  span,
+  strong,
+  sub,
+  sup,
+  time
+};

package/lists.js

@@ -1,10 +1,19 @@
 import { defElement, defElements } from "./def.js";
-export const ol = defElement("ol");
-export const li = defElement("li");
-export const [ul, dl, dt, dd, datalist] = defElements([
-    "ul",
-    "dl",
-    "dt",
-    "dd",
-    "datalist",
+const ol = defElement("ol");
+const li = defElement("li");
+const [ul, dl, dt, dd, datalist] = defElements([
+  "ul",
+  "dl",
+  "dt",
+  "dd",
+  "datalist"
 ]);
+export {
+  datalist,
+  dd,
+  dl,
+  dt,
+  li,
+  ol,
+  ul
+};

package/media.js

@@ -1,8 +1,17 @@
 import { defElement } from "./def.js";
-export const canvas = defElement("canvas");
-export const img = defElement("img");
-export const picture = defElement("picture");
-export const source = defElement("source");
-export const audio = defElement("audio");
-export const video = defElement("video");
-export const track = defElement("track");
+const canvas = defElement("canvas");
+const img = defElement("img");
+const picture = defElement("picture");
+const source = defElement("source");
+const audio = defElement("audio");
+const video = defElement("video");
+const track = defElement("track");
+export {
+  audio,
+  canvas,
+  img,
+  picture,
+  source,
+  track,
+  video
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/hiccup-html",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "100+ type-checked HTML5 element functions for @thi.ng/hiccup related infrastructure",
   "type": "module",
   "module": "./index.js",
@@ -24,7 +24,9 @@
   "author": "Karsten Schmidt (https://thi.ng)",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "yarn clean && tsc --declaration",
+    "build": "yarn build:esbuild && yarn build:decl",
+    "build:decl": "tsc --declaration --emitDeclarationOnly",
+    "build:esbuild": "esbuild --format=esm --platform=neutral --target=es2022 --tsconfig=tsconfig.json --outdir=. src/**/*.ts",
     "clean": "rimraf --glob '*.js' '*.d.ts' '*.map' doc",
     "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
     "doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
@@ -33,10 +35,11 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.11"
+    "@thi.ng/api": "^8.9.13"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
+    "esbuild": "^0.19.8",
     "rimraf": "^5.0.5",
     "tools": "^0.0.1",
     "typedoc": "^0.25.4",
@@ -58,7 +61,7 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=12.7"
+    "node": ">=18"
   },
   "files": [
     "./*.js",
@@ -108,5 +111,5 @@
     ],
     "year": 2020
   },
-  "gitHead": "25f2ac8ff795a432a930119661b364d4d93b59a0\n"
+  "gitHead": "25a42a81fac8603a1e440a7aa8bc343276211ff4\n"
 }

package/sections.js

@@ -1,20 +1,55 @@
 import { defElement, defElements } from "./def.js";
-export const html = defElement("html");
-export const body = defElement("body");
-export const [address, article, aside, footer, header, hgroup, main, nav, noscript, section,] = defElements([
-    "address",
-    "article",
-    "aside",
-    "footer",
-    "header",
-    "hgroup",
-    "main",
-    "nav",
-    "noscript",
-    "section",
+const html = defElement("html");
+const body = defElement("body");
+const [
+  address,
+  article,
+  aside,
+  footer,
+  header,
+  hgroup,
+  main,
+  nav,
+  noscript,
+  section
+] = defElements([
+  "address",
+  "article",
+  "aside",
+  "footer",
+  "header",
+  "hgroup",
+  "main",
+  "nav",
+  "noscript",
+  "section"
 ]);
-export const [h1, h2, h3, h4, h5, h6] = [1, 2, 3, 4, 5, 6].map((i) => defElement("h" + i));
-export const comment = (...body) => [
-    "__COMMENT__", // keep tag in sync with thi.ng/hiccup
-    ...body,
+const [h1, h2, h3, h4, h5, h6] = [1, 2, 3, 4, 5, 6].map(
+  (i) => defElement("h" + i)
+);
+const comment = (...body2) => [
+  "__COMMENT__",
+  // keep tag in sync with thi.ng/hiccup
+  ...body2
 ];
+export {
+  address,
+  article,
+  aside,
+  body,
+  comment,
+  footer,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  header,
+  hgroup,
+  html,
+  main,
+  nav,
+  noscript,
+  section
+};

package/table.js

@@ -1,15 +1,27 @@
 import { defElement, defElements } from "./def.js";
-export const [table, tbody, tfoot, thead, tr, caption] = defElements([
-    "table",
-    "tbody",
-    "tfoot",
-    "thead",
-    "tr",
-    "caption",
+const [table, tbody, tfoot, thead, tr, caption] = defElements([
+  "table",
+  "tbody",
+  "tfoot",
+  "thead",
+  "tr",
+  "caption"
 ]);
-export const td = defElement("td");
-export const th = defElement("th");
-export const [col, colgroup] = defElements([
-    "col",
-    "colgroup",
+const td = defElement("td");
+const th = defElement("th");
+const [col, colgroup] = defElements([
+  "col",
+  "colgroup"
 ]);
+export {
+  caption,
+  col,
+  colgroup,
+  table,
+  tbody,
+  td,
+  tfoot,
+  th,
+  thead,
+  tr
+};