@unhead/dom 0.6.2 → 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 -17
  2. package/dist/index.mjs +29 -17
  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,24 +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 elTag = $el.tagName.toLowerCase();
97
- if (elTag !== tag.tag)
98
- continue;
99
- const key = $el.getAttribute("data-h-key") || tagDedupeKey({
100
- tag: elTag,
101
- props: $el.getAttributeNames().reduce((props, name) => ({ ...props, [name]: $el.getAttribute(name) }), {})
102
- });
103
- if (key === tag._d || $el.isEqualNode($newEl)) {
104
- $previousEl = $el;
105
- 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
+ }
106
113
  }
107
114
  }
108
- if ($previousEl) {
115
+ const markEl = ($el) => {
116
+ head._elMap[tagRenderId] = $el;
109
117
  markSideEffect("el", () => {
110
- $previousEl?.remove();
118
+ $el?.remove();
119
+ delete head._elMap[tagRenderId];
111
120
  });
121
+ };
122
+ if ($previousEl) {
123
+ markEl($previousEl);
112
124
  setAttrs($previousEl, false);
113
125
  return $previousEl;
114
126
  }
@@ -124,7 +136,7 @@ async function renderDOMHead(head, options = {}) {
124
136
  $newEl = dom.head.appendChild($newEl);
125
137
  break;
126
138
  }
127
- markSideEffect("el", () => $newEl?.remove());
139
+ markEl($newEl);
128
140
  return $newEl;
129
141
  };
130
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,24 +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 elTag = $el.tagName.toLowerCase();
95
- if (elTag !== tag.tag)
96
- continue;
97
- const key = $el.getAttribute("data-h-key") || tagDedupeKey({
98
- tag: elTag,
99
- props: $el.getAttributeNames().reduce((props, name) => ({ ...props, [name]: $el.getAttribute(name) }), {})
100
- });
101
- if (key === tag._d || $el.isEqualNode($newEl)) {
102
- $previousEl = $el;
103
- 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
+ }
104
111
  }
105
112
  }
106
- if ($previousEl) {
113
+ const markEl = ($el) => {
114
+ head._elMap[tagRenderId] = $el;
107
115
  markSideEffect("el", () => {
108
- $previousEl?.remove();
116
+ $el?.remove();
117
+ delete head._elMap[tagRenderId];
109
118
  });
119
+ };
120
+ if ($previousEl) {
121
+ markEl($previousEl);
110
122
  setAttrs($previousEl, false);
111
123
  return $previousEl;
112
124
  }
@@ -122,7 +134,7 @@ async function renderDOMHead(head, options = {}) {
122
134
  $newEl = dom.head.appendChild($newEl);
123
135
  break;
124
136
  }
125
- markSideEffect("el", () => $newEl?.remove());
137
+ markEl($newEl);
126
138
  return $newEl;
127
139
  };
128
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.2",
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.2"
33
+ "@unhead/schema": "0.6.3"
34
34
  },
35
35
  "devDependencies": {
36
36
  "zhead": "1.0.0-beta.13"