@thi.ng/hiccup-html 2.3.0 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/api.js +0 -1
- package/blocks.js +21 -10
- package/def.js +10 -22
- package/forms.js +63 -29
- package/head.js +48 -31
- package/inline.js +44 -19
- package/lists.js +17 -8
- package/media.js +16 -7
- package/package.json +7 -4
- package/sections.js +52 -17
- package/table.js +24 -12
package/CHANGELOG.md
CHANGED
package/api.js
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/blocks.js
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
import { defElement, defElements } from "./def.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
const blockquote = defElement("blockquote");
|
|
3
|
+
const [div, figure, figcaption, para, pre, template] = defElements([
|
|
4
|
+
"div",
|
|
5
|
+
"figure",
|
|
6
|
+
"figcaption",
|
|
7
|
+
"p",
|
|
8
|
+
"pre",
|
|
9
|
+
"template"
|
|
10
10
|
]);
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
const hr = defElement("hr");
|
|
12
|
+
const iframe = defElement("iframe");
|
|
13
|
+
export {
|
|
14
|
+
blockquote,
|
|
15
|
+
div,
|
|
16
|
+
figcaption,
|
|
17
|
+
figure,
|
|
18
|
+
hr,
|
|
19
|
+
iframe,
|
|
20
|
+
para,
|
|
21
|
+
pre,
|
|
22
|
+
template
|
|
23
|
+
};
|
package/def.js
CHANGED
|
@@ -1,23 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
const $tag = typeof args[0] === "string" ? tag + args.shift() : tag;
|
|
12
|
-
const n = args.length;
|
|
13
|
-
const attribs = n > 0
|
|
14
|
-
? baseAttribs
|
|
15
|
-
? { ...baseAttribs, ...args[0] }
|
|
16
|
-
: args[0]
|
|
17
|
-
: baseAttribs || null;
|
|
18
|
-
return n > 1 ? [$tag, attribs, ...args.slice(1)] : [$tag, attribs];
|
|
1
|
+
const defElement = (tag, baseAttribs) => (...args) => {
|
|
2
|
+
const $tag = typeof args[0] === "string" ? tag + args.shift() : tag;
|
|
3
|
+
const n = args.length;
|
|
4
|
+
const attribs = n > 0 ? baseAttribs ? { ...baseAttribs, ...args[0] } : args[0] : baseAttribs || null;
|
|
5
|
+
return n > 1 ? [$tag, attribs, ...args.slice(1)] : [$tag, attribs];
|
|
6
|
+
};
|
|
7
|
+
const defElements = (tags) => tags.map((t) => defElement(t));
|
|
8
|
+
export {
|
|
9
|
+
defElement,
|
|
10
|
+
defElements
|
|
19
11
|
};
|
|
20
|
-
/**
|
|
21
|
-
* @internal
|
|
22
|
-
*/
|
|
23
|
-
export const defElements = (tags) => tags.map((t) => defElement(t));
|
package/forms.js
CHANGED
|
@@ -1,35 +1,69 @@
|
|
|
1
1
|
import { defElement } from "./def.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
const form = defElement("form");
|
|
3
|
+
const fieldset = defElement("fieldset");
|
|
4
|
+
const legend = defElement("legend");
|
|
5
|
+
const button = defElement("button");
|
|
6
|
+
const checkbox = defElement(
|
|
7
|
+
"input",
|
|
8
|
+
{
|
|
9
|
+
type: "checkbox"
|
|
10
|
+
}
|
|
11
|
+
);
|
|
12
|
+
const radio = defElement("input", {
|
|
13
|
+
type: "radio"
|
|
8
14
|
});
|
|
9
|
-
|
|
10
|
-
|
|
15
|
+
const inputColor = defElement("input", {
|
|
16
|
+
type: "color"
|
|
11
17
|
});
|
|
12
|
-
|
|
13
|
-
|
|
18
|
+
const inputFile = defElement("input", {
|
|
19
|
+
type: "file"
|
|
14
20
|
});
|
|
15
|
-
|
|
16
|
-
|
|
21
|
+
const inputPass = defElement("input", {
|
|
22
|
+
type: "password"
|
|
17
23
|
});
|
|
18
|
-
|
|
19
|
-
|
|
24
|
+
const inputNumber = defElement(
|
|
25
|
+
"input",
|
|
26
|
+
{ type: "number" }
|
|
27
|
+
);
|
|
28
|
+
const inputRange = defElement(
|
|
29
|
+
"input",
|
|
30
|
+
{ type: "range" }
|
|
31
|
+
);
|
|
32
|
+
const inputSearch = defElement(
|
|
33
|
+
"input",
|
|
34
|
+
{
|
|
35
|
+
type: "search"
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
const inputText = defElement("input", {
|
|
39
|
+
type: "text"
|
|
20
40
|
});
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
41
|
+
const textArea = defElement("textarea");
|
|
42
|
+
const option = defElement("option");
|
|
43
|
+
const optGroup = defElement("optgroup");
|
|
44
|
+
const select = defElement("select");
|
|
45
|
+
const label = defElement("label");
|
|
46
|
+
const meter = defElement("meter");
|
|
47
|
+
const progress = defElement("progress");
|
|
48
|
+
export {
|
|
49
|
+
button,
|
|
50
|
+
checkbox,
|
|
51
|
+
fieldset,
|
|
52
|
+
form,
|
|
53
|
+
inputColor,
|
|
54
|
+
inputFile,
|
|
55
|
+
inputNumber,
|
|
56
|
+
inputPass,
|
|
57
|
+
inputRange,
|
|
58
|
+
inputSearch,
|
|
59
|
+
inputText,
|
|
60
|
+
label,
|
|
61
|
+
legend,
|
|
62
|
+
meter,
|
|
63
|
+
optGroup,
|
|
64
|
+
option,
|
|
65
|
+
progress,
|
|
66
|
+
radio,
|
|
67
|
+
select,
|
|
68
|
+
textArea
|
|
69
|
+
};
|
package/head.js
CHANGED
|
@@ -1,34 +1,51 @@
|
|
|
1
1
|
import { defElement, defElements } from "./def.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
opts.fit != null && `viewport-fit=${opts.fit}`,
|
|
17
|
-
]
|
|
18
|
-
.filter((x) => !!x)
|
|
19
|
-
.join(","),
|
|
2
|
+
const [head, title] = defElements(["head", "title"]);
|
|
3
|
+
const base = defElement("base");
|
|
4
|
+
const meta = defElement("meta");
|
|
5
|
+
const metaViewport = (opts = {}) => meta({
|
|
6
|
+
name: "viewport",
|
|
7
|
+
content: [
|
|
8
|
+
opts.width && `width=${opts.width < 0 ? "device-width" : opts.width}`,
|
|
9
|
+
opts.height && `height=${opts.height < 0 ? "device-height" : opts.height}`,
|
|
10
|
+
`initial-scale=${opts.init || 1}`,
|
|
11
|
+
opts.min && `minimum-scale=${opts.min}`,
|
|
12
|
+
opts.max && `maximum-scale=${opts.max}`,
|
|
13
|
+
`user-scalable=${opts.user !== false ? "yes" : "no"}`,
|
|
14
|
+
opts.fit != null && `viewport-fit=${opts.fit}`
|
|
15
|
+
].filter((x) => !!x).join(",")
|
|
20
16
|
});
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
17
|
+
const metaRobots = (type) => meta({ name: "robots", content: type });
|
|
18
|
+
const metaReferrer = (type) => meta({ name: "referrer", content: type });
|
|
19
|
+
const metaRefresh = (delay, url) => meta({
|
|
20
|
+
"http-equiv": "refresh",
|
|
21
|
+
content: url ? `${delay}; url=${url}` : String(delay)
|
|
26
22
|
});
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
23
|
+
const metaUTF8 = () => meta({ charset: "utf-8" });
|
|
24
|
+
const metaXUA = () => meta({ "http-equiv": "x-ua-compatible", content: "IE=edge" });
|
|
25
|
+
const link = defElement("link");
|
|
26
|
+
const linkCSS = (href) => link({ href, rel: "stylesheet" });
|
|
27
|
+
const style = defElement(
|
|
28
|
+
"style",
|
|
29
|
+
{
|
|
30
|
+
type: "text/css"
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
const script = defElement(
|
|
34
|
+
"script"
|
|
35
|
+
);
|
|
36
|
+
export {
|
|
37
|
+
base,
|
|
38
|
+
head,
|
|
39
|
+
link,
|
|
40
|
+
linkCSS,
|
|
41
|
+
meta,
|
|
42
|
+
metaReferrer,
|
|
43
|
+
metaRefresh,
|
|
44
|
+
metaRobots,
|
|
45
|
+
metaUTF8,
|
|
46
|
+
metaViewport,
|
|
47
|
+
metaXUA,
|
|
48
|
+
script,
|
|
49
|
+
style,
|
|
50
|
+
title
|
|
51
|
+
};
|
package/inline.js
CHANGED
|
@@ -1,21 +1,46 @@
|
|
|
1
1
|
import { defElement, defElements } from "./def.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
2
|
+
const anchor = defElement("a");
|
|
3
|
+
const abbr = defElement(
|
|
4
|
+
"abbr"
|
|
5
|
+
);
|
|
6
|
+
const br = defElement("br");
|
|
7
|
+
const data = defElement("data");
|
|
8
|
+
const quote = defElement("q");
|
|
9
|
+
const time = defElement(
|
|
10
|
+
"time"
|
|
11
|
+
);
|
|
12
|
+
const [cite, code, em, i, kbd, mark, small, span, strong, sub, sup] = defElements([
|
|
13
|
+
"cite",
|
|
14
|
+
"code",
|
|
15
|
+
"em",
|
|
16
|
+
"i",
|
|
17
|
+
"kbd",
|
|
18
|
+
"mark",
|
|
19
|
+
"small",
|
|
20
|
+
"span",
|
|
21
|
+
"strong",
|
|
22
|
+
"sub",
|
|
23
|
+
"sup"
|
|
20
24
|
]);
|
|
21
|
-
|
|
25
|
+
const [del, ins] = defElements(["del", "ins"]);
|
|
26
|
+
export {
|
|
27
|
+
abbr,
|
|
28
|
+
anchor,
|
|
29
|
+
br,
|
|
30
|
+
cite,
|
|
31
|
+
code,
|
|
32
|
+
data,
|
|
33
|
+
del,
|
|
34
|
+
em,
|
|
35
|
+
i,
|
|
36
|
+
ins,
|
|
37
|
+
kbd,
|
|
38
|
+
mark,
|
|
39
|
+
quote,
|
|
40
|
+
small,
|
|
41
|
+
span,
|
|
42
|
+
strong,
|
|
43
|
+
sub,
|
|
44
|
+
sup,
|
|
45
|
+
time
|
|
46
|
+
};
|
package/lists.js
CHANGED
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
import { defElement, defElements } from "./def.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
const ol = defElement("ol");
|
|
3
|
+
const li = defElement("li");
|
|
4
|
+
const [ul, dl, dt, dd, datalist] = defElements([
|
|
5
|
+
"ul",
|
|
6
|
+
"dl",
|
|
7
|
+
"dt",
|
|
8
|
+
"dd",
|
|
9
|
+
"datalist"
|
|
10
10
|
]);
|
|
11
|
+
export {
|
|
12
|
+
datalist,
|
|
13
|
+
dd,
|
|
14
|
+
dl,
|
|
15
|
+
dt,
|
|
16
|
+
li,
|
|
17
|
+
ol,
|
|
18
|
+
ul
|
|
19
|
+
};
|
package/media.js
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
import { defElement } from "./def.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
const canvas = defElement("canvas");
|
|
3
|
+
const img = defElement("img");
|
|
4
|
+
const picture = defElement("picture");
|
|
5
|
+
const source = defElement("source");
|
|
6
|
+
const audio = defElement("audio");
|
|
7
|
+
const video = defElement("video");
|
|
8
|
+
const track = defElement("track");
|
|
9
|
+
export {
|
|
10
|
+
audio,
|
|
11
|
+
canvas,
|
|
12
|
+
img,
|
|
13
|
+
picture,
|
|
14
|
+
source,
|
|
15
|
+
track,
|
|
16
|
+
video
|
|
17
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@thi.ng/hiccup-html",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.1",
|
|
4
4
|
"description": "100+ type-checked HTML5 element functions for @thi.ng/hiccup related infrastructure",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./index.js",
|
|
@@ -24,7 +24,9 @@
|
|
|
24
24
|
"author": "Karsten Schmidt (https://thi.ng)",
|
|
25
25
|
"license": "Apache-2.0",
|
|
26
26
|
"scripts": {
|
|
27
|
-
"build": "yarn
|
|
27
|
+
"build": "yarn build:esbuild && yarn build:decl",
|
|
28
|
+
"build:decl": "tsc --declaration --emitDeclarationOnly",
|
|
29
|
+
"build:esbuild": "esbuild --format=esm --platform=neutral --target=es2022 --tsconfig=tsconfig.json --outdir=. src/**/*.ts",
|
|
28
30
|
"clean": "rimraf --glob '*.js' '*.d.ts' '*.map' doc",
|
|
29
31
|
"doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
|
|
30
32
|
"doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
|
|
@@ -33,10 +35,11 @@
|
|
|
33
35
|
"test": "bun test"
|
|
34
36
|
},
|
|
35
37
|
"dependencies": {
|
|
36
|
-
"@thi.ng/api": "^8.9.
|
|
38
|
+
"@thi.ng/api": "^8.9.12"
|
|
37
39
|
},
|
|
38
40
|
"devDependencies": {
|
|
39
41
|
"@microsoft/api-extractor": "^7.38.3",
|
|
42
|
+
"esbuild": "^0.19.8",
|
|
40
43
|
"rimraf": "^5.0.5",
|
|
41
44
|
"tools": "^0.0.1",
|
|
42
45
|
"typedoc": "^0.25.4",
|
|
@@ -108,5 +111,5 @@
|
|
|
108
111
|
],
|
|
109
112
|
"year": 2020
|
|
110
113
|
},
|
|
111
|
-
"gitHead": "
|
|
114
|
+
"gitHead": "5e7bafedfc3d53bc131469a28de31dd8e5b4a3ff\n"
|
|
112
115
|
}
|
package/sections.js
CHANGED
|
@@ -1,20 +1,55 @@
|
|
|
1
1
|
import { defElement, defElements } from "./def.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
2
|
+
const html = defElement("html");
|
|
3
|
+
const body = defElement("body");
|
|
4
|
+
const [
|
|
5
|
+
address,
|
|
6
|
+
article,
|
|
7
|
+
aside,
|
|
8
|
+
footer,
|
|
9
|
+
header,
|
|
10
|
+
hgroup,
|
|
11
|
+
main,
|
|
12
|
+
nav,
|
|
13
|
+
noscript,
|
|
14
|
+
section
|
|
15
|
+
] = defElements([
|
|
16
|
+
"address",
|
|
17
|
+
"article",
|
|
18
|
+
"aside",
|
|
19
|
+
"footer",
|
|
20
|
+
"header",
|
|
21
|
+
"hgroup",
|
|
22
|
+
"main",
|
|
23
|
+
"nav",
|
|
24
|
+
"noscript",
|
|
25
|
+
"section"
|
|
15
26
|
]);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
27
|
+
const [h1, h2, h3, h4, h5, h6] = [1, 2, 3, 4, 5, 6].map(
|
|
28
|
+
(i) => defElement("h" + i)
|
|
29
|
+
);
|
|
30
|
+
const comment = (...body2) => [
|
|
31
|
+
"__COMMENT__",
|
|
32
|
+
// keep tag in sync with thi.ng/hiccup
|
|
33
|
+
...body2
|
|
20
34
|
];
|
|
35
|
+
export {
|
|
36
|
+
address,
|
|
37
|
+
article,
|
|
38
|
+
aside,
|
|
39
|
+
body,
|
|
40
|
+
comment,
|
|
41
|
+
footer,
|
|
42
|
+
h1,
|
|
43
|
+
h2,
|
|
44
|
+
h3,
|
|
45
|
+
h4,
|
|
46
|
+
h5,
|
|
47
|
+
h6,
|
|
48
|
+
header,
|
|
49
|
+
hgroup,
|
|
50
|
+
html,
|
|
51
|
+
main,
|
|
52
|
+
nav,
|
|
53
|
+
noscript,
|
|
54
|
+
section
|
|
55
|
+
};
|
package/table.js
CHANGED
|
@@ -1,15 +1,27 @@
|
|
|
1
1
|
import { defElement, defElements } from "./def.js";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
const [table, tbody, tfoot, thead, tr, caption] = defElements([
|
|
3
|
+
"table",
|
|
4
|
+
"tbody",
|
|
5
|
+
"tfoot",
|
|
6
|
+
"thead",
|
|
7
|
+
"tr",
|
|
8
|
+
"caption"
|
|
9
9
|
]);
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
const td = defElement("td");
|
|
11
|
+
const th = defElement("th");
|
|
12
|
+
const [col, colgroup] = defElements([
|
|
13
|
+
"col",
|
|
14
|
+
"colgroup"
|
|
15
15
|
]);
|
|
16
|
+
export {
|
|
17
|
+
caption,
|
|
18
|
+
col,
|
|
19
|
+
colgroup,
|
|
20
|
+
table,
|
|
21
|
+
tbody,
|
|
22
|
+
td,
|
|
23
|
+
tfoot,
|
|
24
|
+
th,
|
|
25
|
+
thead,
|
|
26
|
+
tr
|
|
27
|
+
};
|