thunderous 1.1.0 → 1.1.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.
Files changed (5) hide show
  1. package/dist/index.cjs +10 -26
  2. package/dist/index.d.cts +4 -3
  3. package/dist/index.d.ts +4 -3
  4. package/dist/index.js +10 -26
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -358,8 +358,6 @@ if (typeof window !== "undefined") {
358
358
  installScopedCreationMethod(ShadowRoot, "createElement", document);
359
359
  installScopedCreationMethod(ShadowRoot, "importNode", document);
360
360
  installScopedCreationMethod(Element, "insertAdjacentHTML");
361
- installScopedCreationMethod(Node, "appendChild");
362
- installScopedCreationMethod(Element, "append");
363
361
  const installScopedCreationSetter = (ctor, name) => {
364
362
  const descriptor = Object.getOwnPropertyDescriptor(ctor.prototype, name);
365
363
  Object.defineProperty(ctor.prototype, name, {
@@ -701,20 +699,19 @@ var clientOnlyCallback = (fn) => {
701
699
  };
702
700
 
703
701
  // src/render.ts
702
+ var renderState = {
703
+ currentShadowRoot: null
704
+ };
704
705
  var clearHTML = (element) => {
705
706
  while (element.childNodes.length > 0) {
706
707
  element.childNodes[0].remove();
707
708
  }
708
709
  };
709
710
  var parseFragment = (htmlStr) => {
710
- const range = document.createRange();
711
- range.selectNode(document.body);
712
- return range.createContextualFragment(htmlStr);
713
- };
714
- var setInnerHTML = (element, html2) => {
715
- clearHTML(element);
716
- const fragment = typeof html2 === "string" ? parseFragment(html2) : html2;
717
- element.append(fragment);
711
+ const template = document.createElement("template");
712
+ template.innerHTML = htmlStr;
713
+ const fragment = renderState.currentShadowRoot === null ? template.content : renderState.currentShadowRoot.importNode(template.content, true);
714
+ return fragment;
718
715
  };
719
716
  var logValueError = (value) => {
720
717
  console.error(
@@ -1024,6 +1021,7 @@ var customElement = (render, options) => {
1024
1021
  });
1025
1022
  #render() {
1026
1023
  const root = this.#shadowRoot ?? this;
1024
+ renderState.currentShadowRoot = this.#shadowRoot;
1027
1025
  const fragment = render({
1028
1026
  elementRef: this,
1029
1027
  root,
@@ -1120,25 +1118,11 @@ You must set an initial value before calling a property signal's getter.
1120
1118
  }
1121
1119
  });
1122
1120
  fragment.host = this;
1123
- const registry = shadowRootOptions.registry instanceof CustomElementRegistry ? shadowRootOptions.registry : shadowRootOptions.registry?.eject();
1124
- const tempContainer = document.createElement("div");
1125
- tempContainer.append(fragment.cloneNode(true));
1126
- const fragmentContent = tempContainer.innerHTML;
1127
- root.innerHTML = fragmentContent;
1128
- if (registry?.__tagNames !== void 0) {
1129
- for (const tagName of registry.__tagNames) {
1130
- const upgradedElements = root.querySelectorAll(tagName);
1131
- const nonUpgradedElements = fragment.querySelectorAll(tagName);
1132
- upgradedElements.forEach((upgradedElement, index) => {
1133
- const nonUpgradedElement = nonUpgradedElements[index];
1134
- nonUpgradedElement.replaceWith(upgradedElement);
1135
- });
1136
- }
1137
- }
1138
1121
  for (const fn of this.#clientOnlyCallbackFns) {
1139
1122
  fn();
1140
1123
  }
1141
- setInnerHTML(root, fragment);
1124
+ clearHTML(root);
1125
+ root.append(fragment);
1142
1126
  }
1143
1127
  static get formAssociated() {
1144
1128
  return formAssociated;
package/dist/index.d.cts CHANGED
@@ -439,9 +439,6 @@ if (typeof window !== 'undefined') {
439
439
  installScopedCreationMethod(ShadowRoot, 'createElement', document);
440
440
  installScopedCreationMethod(ShadowRoot, 'importNode', document);
441
441
  installScopedCreationMethod(Element, 'insertAdjacentHTML');
442
- installScopedCreationMethod(Node, 'appendChild');
443
- installScopedCreationMethod(Element, 'append');
444
-
445
442
 
446
443
  // Install scoped innerHTML on Element & ShadowRoot
447
444
  const installScopedCreationSetter = (ctor, name) => {
@@ -589,6 +586,10 @@ declare global {
589
586
  interface CustomElementRegistry {
590
587
  __tagNames: Set<string>;
591
588
  }
589
+ interface ShadowRoot {
590
+ // missing from typescript but present in the spec
591
+ importNode: <T = Node>(node: T, deep: boolean) => T;
592
+ }
592
593
  }
593
594
 
594
595
  type TagName = `${string}-${string}`;
package/dist/index.d.ts CHANGED
@@ -439,9 +439,6 @@ if (typeof window !== 'undefined') {
439
439
  installScopedCreationMethod(ShadowRoot, 'createElement', document);
440
440
  installScopedCreationMethod(ShadowRoot, 'importNode', document);
441
441
  installScopedCreationMethod(Element, 'insertAdjacentHTML');
442
- installScopedCreationMethod(Node, 'appendChild');
443
- installScopedCreationMethod(Element, 'append');
444
-
445
442
 
446
443
  // Install scoped innerHTML on Element & ShadowRoot
447
444
  const installScopedCreationSetter = (ctor, name) => {
@@ -589,6 +586,10 @@ declare global {
589
586
  interface CustomElementRegistry {
590
587
  __tagNames: Set<string>;
591
588
  }
589
+ interface ShadowRoot {
590
+ // missing from typescript but present in the spec
591
+ importNode: <T = Node>(node: T, deep: boolean) => T;
592
+ }
592
593
  }
593
594
 
594
595
  type TagName = `${string}-${string}`;
package/dist/index.js CHANGED
@@ -323,8 +323,6 @@ if (typeof window !== "undefined") {
323
323
  installScopedCreationMethod(ShadowRoot, "createElement", document);
324
324
  installScopedCreationMethod(ShadowRoot, "importNode", document);
325
325
  installScopedCreationMethod(Element, "insertAdjacentHTML");
326
- installScopedCreationMethod(Node, "appendChild");
327
- installScopedCreationMethod(Element, "append");
328
326
  const installScopedCreationSetter = (ctor, name) => {
329
327
  const descriptor = Object.getOwnPropertyDescriptor(ctor.prototype, name);
330
328
  Object.defineProperty(ctor.prototype, name, {
@@ -666,20 +664,19 @@ var clientOnlyCallback = (fn) => {
666
664
  };
667
665
 
668
666
  // src/render.ts
667
+ var renderState = {
668
+ currentShadowRoot: null
669
+ };
669
670
  var clearHTML = (element) => {
670
671
  while (element.childNodes.length > 0) {
671
672
  element.childNodes[0].remove();
672
673
  }
673
674
  };
674
675
  var parseFragment = (htmlStr) => {
675
- const range = document.createRange();
676
- range.selectNode(document.body);
677
- return range.createContextualFragment(htmlStr);
678
- };
679
- var setInnerHTML = (element, html2) => {
680
- clearHTML(element);
681
- const fragment = typeof html2 === "string" ? parseFragment(html2) : html2;
682
- element.append(fragment);
676
+ const template = document.createElement("template");
677
+ template.innerHTML = htmlStr;
678
+ const fragment = renderState.currentShadowRoot === null ? template.content : renderState.currentShadowRoot.importNode(template.content, true);
679
+ return fragment;
683
680
  };
684
681
  var logValueError = (value) => {
685
682
  console.error(
@@ -989,6 +986,7 @@ var customElement = (render, options) => {
989
986
  });
990
987
  #render() {
991
988
  const root = this.#shadowRoot ?? this;
989
+ renderState.currentShadowRoot = this.#shadowRoot;
992
990
  const fragment = render({
993
991
  elementRef: this,
994
992
  root,
@@ -1085,25 +1083,11 @@ You must set an initial value before calling a property signal's getter.
1085
1083
  }
1086
1084
  });
1087
1085
  fragment.host = this;
1088
- const registry = shadowRootOptions.registry instanceof CustomElementRegistry ? shadowRootOptions.registry : shadowRootOptions.registry?.eject();
1089
- const tempContainer = document.createElement("div");
1090
- tempContainer.append(fragment.cloneNode(true));
1091
- const fragmentContent = tempContainer.innerHTML;
1092
- root.innerHTML = fragmentContent;
1093
- if (registry?.__tagNames !== void 0) {
1094
- for (const tagName of registry.__tagNames) {
1095
- const upgradedElements = root.querySelectorAll(tagName);
1096
- const nonUpgradedElements = fragment.querySelectorAll(tagName);
1097
- upgradedElements.forEach((upgradedElement, index) => {
1098
- const nonUpgradedElement = nonUpgradedElements[index];
1099
- nonUpgradedElement.replaceWith(upgradedElement);
1100
- });
1101
- }
1102
- }
1103
1086
  for (const fn of this.#clientOnlyCallbackFns) {
1104
1087
  fn();
1105
1088
  }
1106
- setInnerHTML(root, fragment);
1089
+ clearHTML(root);
1090
+ root.append(fragment);
1107
1091
  }
1108
1092
  static get formAssociated() {
1109
1093
  return formAssociated;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "thunderous",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",