@unhead/dom 0.3.1 → 0.4.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/dist/index.cjs +19 -25
- package/dist/index.mjs +19 -25
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -2,15 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
const TagsWithInnerContent = ["script", "style", "noscript"];
|
|
4
4
|
|
|
5
|
-
const createElement = (tag, document) => {
|
|
6
|
-
const $el = document.createElement(tag.tag);
|
|
7
|
-
for (const k in tag.props)
|
|
8
|
-
$el.setAttribute(k, String(tag.props[k]));
|
|
9
|
-
if (tag.children)
|
|
10
|
-
$el.innerHTML = tag.children;
|
|
11
|
-
return $el;
|
|
12
|
-
};
|
|
13
|
-
|
|
14
5
|
async function renderDOMHead(head, options = {}) {
|
|
15
6
|
const dom = options.document || window.document;
|
|
16
7
|
const tags = await head.resolveTags();
|
|
@@ -27,7 +18,7 @@ async function renderDOMHead(head, options = {}) {
|
|
|
27
18
|
const renderTag = (tag, entry) => {
|
|
28
19
|
if (tag.tag === "title" && tag.children) {
|
|
29
20
|
dom.title = tag.children;
|
|
30
|
-
return;
|
|
21
|
+
return dom.head.querySelector("title");
|
|
31
22
|
}
|
|
32
23
|
const markSideEffect = (key, fn) => {
|
|
33
24
|
key = `${tag._s || tag._p}:${key}`;
|
|
@@ -52,12 +43,16 @@ async function renderDOMHead(head, options = {}) {
|
|
|
52
43
|
if ($el.getAttribute(k) !== value)
|
|
53
44
|
$el.setAttribute(k, value);
|
|
54
45
|
});
|
|
46
|
+
if (TagsWithInnerContent.includes(tag.tag))
|
|
47
|
+
$el.innerHTML = tag.children || "";
|
|
55
48
|
};
|
|
56
49
|
if (tag.tag === "htmlAttrs" || tag.tag === "bodyAttrs") {
|
|
57
|
-
|
|
58
|
-
|
|
50
|
+
const $el = dom[tag.tag === "htmlAttrs" ? "documentElement" : "body"];
|
|
51
|
+
setAttrs($el);
|
|
52
|
+
return $el;
|
|
59
53
|
}
|
|
60
|
-
let $newEl = createElement(tag
|
|
54
|
+
let $newEl = dom.createElement(tag.tag);
|
|
55
|
+
setAttrs($newEl);
|
|
61
56
|
let $previousEl;
|
|
62
57
|
for (const $el of dom[tag.tagPosition?.startsWith("body") ? "body" : "head"].children) {
|
|
63
58
|
if ($el.hasAttribute(`${tag._s}`) || $el.isEqualNode($newEl)) {
|
|
@@ -65,18 +60,14 @@ async function renderDOMHead(head, options = {}) {
|
|
|
65
60
|
break;
|
|
66
61
|
}
|
|
67
62
|
}
|
|
63
|
+
if ($newEl.attributes.length === 0 && !$newEl.innerHTML) {
|
|
64
|
+
$previousEl?.remove();
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
68
67
|
if ($previousEl) {
|
|
69
68
|
markSideEffect("el", () => $previousEl?.remove());
|
|
70
|
-
if (Object.keys(tag.props).length === 0) {
|
|
71
|
-
$previousEl.remove();
|
|
72
|
-
return;
|
|
73
|
-
}
|
|
74
|
-
if ($newEl.isEqualNode($previousEl))
|
|
75
|
-
return;
|
|
76
69
|
setAttrs($previousEl);
|
|
77
|
-
|
|
78
|
-
$previousEl.innerHTML = tag.children || "";
|
|
79
|
-
return;
|
|
70
|
+
return $previousEl;
|
|
80
71
|
}
|
|
81
72
|
switch (tag.tagPosition) {
|
|
82
73
|
case "bodyClose":
|
|
@@ -91,13 +82,16 @@ async function renderDOMHead(head, options = {}) {
|
|
|
91
82
|
break;
|
|
92
83
|
}
|
|
93
84
|
markSideEffect("el", () => $newEl?.remove());
|
|
85
|
+
return $newEl;
|
|
94
86
|
};
|
|
95
87
|
for (const tag of ctx.tags) {
|
|
96
|
-
const
|
|
97
|
-
|
|
88
|
+
const entry = head.headEntries().find((e) => e._i === Number(tag._e));
|
|
89
|
+
const renderCtx = { $el: null, shouldRender: true, tag, entry, queuedSideEffects };
|
|
90
|
+
await head.hooks.callHook("dom:beforeRenderTag", renderCtx);
|
|
98
91
|
if (!renderCtx.shouldRender)
|
|
99
92
|
continue;
|
|
100
|
-
renderTag(tag,
|
|
93
|
+
renderCtx.$el = renderTag(renderCtx.tag, renderCtx.entry);
|
|
94
|
+
await head.hooks.callHook("dom:renderTag", renderCtx);
|
|
101
95
|
}
|
|
102
96
|
Object.values(queuedSideEffects).forEach((fn) => fn());
|
|
103
97
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
const TagsWithInnerContent = ["script", "style", "noscript"];
|
|
2
2
|
|
|
3
|
-
const createElement = (tag, document) => {
|
|
4
|
-
const $el = document.createElement(tag.tag);
|
|
5
|
-
for (const k in tag.props)
|
|
6
|
-
$el.setAttribute(k, String(tag.props[k]));
|
|
7
|
-
if (tag.children)
|
|
8
|
-
$el.innerHTML = tag.children;
|
|
9
|
-
return $el;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
3
|
async function renderDOMHead(head, options = {}) {
|
|
13
4
|
const dom = options.document || window.document;
|
|
14
5
|
const tags = await head.resolveTags();
|
|
@@ -25,7 +16,7 @@ async function renderDOMHead(head, options = {}) {
|
|
|
25
16
|
const renderTag = (tag, entry) => {
|
|
26
17
|
if (tag.tag === "title" && tag.children) {
|
|
27
18
|
dom.title = tag.children;
|
|
28
|
-
return;
|
|
19
|
+
return dom.head.querySelector("title");
|
|
29
20
|
}
|
|
30
21
|
const markSideEffect = (key, fn) => {
|
|
31
22
|
key = `${tag._s || tag._p}:${key}`;
|
|
@@ -50,12 +41,16 @@ async function renderDOMHead(head, options = {}) {
|
|
|
50
41
|
if ($el.getAttribute(k) !== value)
|
|
51
42
|
$el.setAttribute(k, value);
|
|
52
43
|
});
|
|
44
|
+
if (TagsWithInnerContent.includes(tag.tag))
|
|
45
|
+
$el.innerHTML = tag.children || "";
|
|
53
46
|
};
|
|
54
47
|
if (tag.tag === "htmlAttrs" || tag.tag === "bodyAttrs") {
|
|
55
|
-
|
|
56
|
-
|
|
48
|
+
const $el = dom[tag.tag === "htmlAttrs" ? "documentElement" : "body"];
|
|
49
|
+
setAttrs($el);
|
|
50
|
+
return $el;
|
|
57
51
|
}
|
|
58
|
-
let $newEl = createElement(tag
|
|
52
|
+
let $newEl = dom.createElement(tag.tag);
|
|
53
|
+
setAttrs($newEl);
|
|
59
54
|
let $previousEl;
|
|
60
55
|
for (const $el of dom[tag.tagPosition?.startsWith("body") ? "body" : "head"].children) {
|
|
61
56
|
if ($el.hasAttribute(`${tag._s}`) || $el.isEqualNode($newEl)) {
|
|
@@ -63,18 +58,14 @@ async function renderDOMHead(head, options = {}) {
|
|
|
63
58
|
break;
|
|
64
59
|
}
|
|
65
60
|
}
|
|
61
|
+
if ($newEl.attributes.length === 0 && !$newEl.innerHTML) {
|
|
62
|
+
$previousEl?.remove();
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
66
65
|
if ($previousEl) {
|
|
67
66
|
markSideEffect("el", () => $previousEl?.remove());
|
|
68
|
-
if (Object.keys(tag.props).length === 0) {
|
|
69
|
-
$previousEl.remove();
|
|
70
|
-
return;
|
|
71
|
-
}
|
|
72
|
-
if ($newEl.isEqualNode($previousEl))
|
|
73
|
-
return;
|
|
74
67
|
setAttrs($previousEl);
|
|
75
|
-
|
|
76
|
-
$previousEl.innerHTML = tag.children || "";
|
|
77
|
-
return;
|
|
68
|
+
return $previousEl;
|
|
78
69
|
}
|
|
79
70
|
switch (tag.tagPosition) {
|
|
80
71
|
case "bodyClose":
|
|
@@ -89,13 +80,16 @@ async function renderDOMHead(head, options = {}) {
|
|
|
89
80
|
break;
|
|
90
81
|
}
|
|
91
82
|
markSideEffect("el", () => $newEl?.remove());
|
|
83
|
+
return $newEl;
|
|
92
84
|
};
|
|
93
85
|
for (const tag of ctx.tags) {
|
|
94
|
-
const
|
|
95
|
-
|
|
86
|
+
const entry = head.headEntries().find((e) => e._i === Number(tag._e));
|
|
87
|
+
const renderCtx = { $el: null, shouldRender: true, tag, entry, queuedSideEffects };
|
|
88
|
+
await head.hooks.callHook("dom:beforeRenderTag", renderCtx);
|
|
96
89
|
if (!renderCtx.shouldRender)
|
|
97
90
|
continue;
|
|
98
|
-
renderTag(tag,
|
|
91
|
+
renderCtx.$el = renderTag(renderCtx.tag, renderCtx.entry);
|
|
92
|
+
await head.hooks.callHook("dom:renderTag", renderCtx);
|
|
99
93
|
}
|
|
100
94
|
Object.values(queuedSideEffects).forEach((fn) => fn());
|
|
101
95
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unhead/dom",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.4.1",
|
|
5
5
|
"packageManager": "pnpm@7.14.0",
|
|
6
6
|
"author": "Harlan Wilton <harlan@harlanzw.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
"dist"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@unhead/schema": "0.
|
|
33
|
+
"@unhead/schema": "0.4.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"zhead": "1.0.0-beta.
|
|
36
|
+
"zhead": "1.0.0-beta.11"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "unbuild .",
|