@unhead/dom 0.6.1 → 0.6.3

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.
Files changed (3) hide show
  1. package/dist/index.cjs +29 -14
  2. package/dist/index.mjs +29 -14
  3. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -58,8 +58,9 @@ async function renderDOMHead(head, options = {}) {
58
58
  dom.title = tag.children;
59
59
  return dom.head.querySelector("title");
60
60
  }
61
+ const tagRenderId = tag._d || tag._p;
61
62
  const markSideEffect = (key, fn) => {
62
- key = `${tag._d || tag._p}:${key}`;
63
+ key = `${tagRenderId}:${key}`;
63
64
  entry._sde[key] = fn;
64
65
  delete staleSideEffects[key];
65
66
  };
@@ -81,7 +82,7 @@ async function renderDOMHead(head, options = {}) {
81
82
  if ($el.getAttribute(k) !== value)
82
83
  $el.setAttribute(k, value);
83
84
  });
84
- if (TagsWithInnerContent.includes(tag.tag))
85
+ if (TagsWithInnerContent.includes(tag.tag) && $el.innerHTML !== (tag.children || ""))
85
86
  $el.innerHTML = tag.children || "";
86
87
  };
87
88
  if (tag.tag === "htmlAttrs" || tag.tag === "bodyAttrs") {
@@ -91,21 +92,35 @@ async function renderDOMHead(head, options = {}) {
91
92
  }
92
93
  let $newEl = dom.createElement(tag.tag);
93
94
  setAttrs($newEl, false);
94
- let $previousEl;
95
- for (const $el of dom[tag.tagPosition?.startsWith("body") ? "body" : "head"].children) {
96
- const key = $el.getAttribute("data-h-key") || tagDedupeKey({
97
- tag: $el.tagName.toLowerCase(),
98
- props: Array.from($el.attributes).map((attr) => [attr.name, attr.value]).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
99
- });
100
- if (key === tag._d || $el.isEqualNode($newEl)) {
101
- $previousEl = $el;
102
- break;
95
+ let $previousEl = head._elMap[tagRenderId];
96
+ const $target = dom[tag.tagPosition?.startsWith("body") ? "body" : "head"];
97
+ if (!$previousEl && tag._hash) {
98
+ $previousEl = $target.querySelector(`${tag.tag}[data-h-${tag._hash}]`);
99
+ }
100
+ if (!$previousEl) {
101
+ for (const $el of tag.tagPosition === "bodyClose" ? [...$target.children].reverse() : $target.children) {
102
+ const elTag = $el.tagName.toLowerCase();
103
+ if (elTag !== tag.tag)
104
+ continue;
105
+ const key = tagDedupeKey({
106
+ tag: elTag,
107
+ props: $el.getAttributeNames().reduce((props, name) => ({ ...props, [name]: $el.getAttribute(name) }), {})
108
+ });
109
+ if (key === tag._d || $el.isEqualNode($newEl)) {
110
+ $previousEl = $el;
111
+ break;
112
+ }
103
113
  }
104
114
  }
105
- if ($previousEl) {
115
+ const markEl = ($el) => {
116
+ head._elMap[tagRenderId] = $el;
106
117
  markSideEffect("el", () => {
107
- $previousEl?.remove();
118
+ $el?.remove();
119
+ delete head._elMap[tagRenderId];
108
120
  });
121
+ };
122
+ if ($previousEl) {
123
+ markEl($previousEl);
109
124
  setAttrs($previousEl, false);
110
125
  return $previousEl;
111
126
  }
@@ -121,7 +136,7 @@ async function renderDOMHead(head, options = {}) {
121
136
  $newEl = dom.head.appendChild($newEl);
122
137
  break;
123
138
  }
124
- markSideEffect("el", () => $newEl?.remove());
139
+ markEl($newEl);
125
140
  return $newEl;
126
141
  };
127
142
  for (const tag of await head.resolveTags()) {
package/dist/index.mjs CHANGED
@@ -56,8 +56,9 @@ async function renderDOMHead(head, options = {}) {
56
56
  dom.title = tag.children;
57
57
  return dom.head.querySelector("title");
58
58
  }
59
+ const tagRenderId = tag._d || tag._p;
59
60
  const markSideEffect = (key, fn) => {
60
- key = `${tag._d || tag._p}:${key}`;
61
+ key = `${tagRenderId}:${key}`;
61
62
  entry._sde[key] = fn;
62
63
  delete staleSideEffects[key];
63
64
  };
@@ -79,7 +80,7 @@ async function renderDOMHead(head, options = {}) {
79
80
  if ($el.getAttribute(k) !== value)
80
81
  $el.setAttribute(k, value);
81
82
  });
82
- if (TagsWithInnerContent.includes(tag.tag))
83
+ if (TagsWithInnerContent.includes(tag.tag) && $el.innerHTML !== (tag.children || ""))
83
84
  $el.innerHTML = tag.children || "";
84
85
  };
85
86
  if (tag.tag === "htmlAttrs" || tag.tag === "bodyAttrs") {
@@ -89,21 +90,35 @@ async function renderDOMHead(head, options = {}) {
89
90
  }
90
91
  let $newEl = dom.createElement(tag.tag);
91
92
  setAttrs($newEl, false);
92
- let $previousEl;
93
- for (const $el of dom[tag.tagPosition?.startsWith("body") ? "body" : "head"].children) {
94
- const key = $el.getAttribute("data-h-key") || tagDedupeKey({
95
- tag: $el.tagName.toLowerCase(),
96
- props: Array.from($el.attributes).map((attr) => [attr.name, attr.value]).reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
97
- });
98
- if (key === tag._d || $el.isEqualNode($newEl)) {
99
- $previousEl = $el;
100
- break;
93
+ let $previousEl = head._elMap[tagRenderId];
94
+ const $target = dom[tag.tagPosition?.startsWith("body") ? "body" : "head"];
95
+ if (!$previousEl && tag._hash) {
96
+ $previousEl = $target.querySelector(`${tag.tag}[data-h-${tag._hash}]`);
97
+ }
98
+ if (!$previousEl) {
99
+ for (const $el of tag.tagPosition === "bodyClose" ? [...$target.children].reverse() : $target.children) {
100
+ const elTag = $el.tagName.toLowerCase();
101
+ if (elTag !== tag.tag)
102
+ continue;
103
+ const key = tagDedupeKey({
104
+ tag: elTag,
105
+ props: $el.getAttributeNames().reduce((props, name) => ({ ...props, [name]: $el.getAttribute(name) }), {})
106
+ });
107
+ if (key === tag._d || $el.isEqualNode($newEl)) {
108
+ $previousEl = $el;
109
+ break;
110
+ }
101
111
  }
102
112
  }
103
- if ($previousEl) {
113
+ const markEl = ($el) => {
114
+ head._elMap[tagRenderId] = $el;
104
115
  markSideEffect("el", () => {
105
- $previousEl?.remove();
116
+ $el?.remove();
117
+ delete head._elMap[tagRenderId];
106
118
  });
119
+ };
120
+ if ($previousEl) {
121
+ markEl($previousEl);
107
122
  setAttrs($previousEl, false);
108
123
  return $previousEl;
109
124
  }
@@ -119,7 +134,7 @@ async function renderDOMHead(head, options = {}) {
119
134
  $newEl = dom.head.appendChild($newEl);
120
135
  break;
121
136
  }
122
- markSideEffect("el", () => $newEl?.remove());
137
+ markEl($newEl);
123
138
  return $newEl;
124
139
  };
125
140
  for (const tag of await head.resolveTags()) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@unhead/dom",
3
3
  "type": "module",
4
- "version": "0.6.1",
4
+ "version": "0.6.3",
5
5
  "packageManager": "pnpm@7.14.0",
6
6
  "author": "Harlan Wilton <harlan@harlanzw.com>",
7
7
  "license": "MIT",
@@ -30,7 +30,7 @@
30
30
  "dist"
31
31
  ],
32
32
  "dependencies": {
33
- "@unhead/schema": "0.6.1"
33
+ "@unhead/schema": "0.6.3"
34
34
  },
35
35
  "devDependencies": {
36
36
  "zhead": "1.0.0-beta.13"