| 706 | }); |
| 707 | } |
| 708 | function registerComponent(templateEl, componentScript) { |
| 709 | const tagName = templateEl.getAttribute("component"); |
| 710 | if (!tagName.includes("-")) { |
| 711 | console.error("component name must contain a dash: '" + tagName + "'"); |
| 712 | return; |
| 713 | } |
| 714 | var raw = templateEl.textContent; |
| 715 | var combined = ""; |
| 716 | var styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi; |
| 717 | var match; |
| 718 | while ((match = styleRegex.exec(raw)) !== null) { |
| 719 | combined += match[1] + "\n"; |
| 720 | } |
| 721 | if (combined) { |
| 722 | raw = raw.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, ""); |
| 723 | templateEl.textContent = raw; |
| 724 | var scopedStyle = document.createElement("style"); |
| 725 | scopedStyle.setAttribute("data-hyperscript-component", tagName); |
| 726 | scopedStyle.textContent = "@scope (" + tagName + ") {\n" + combined + "}"; |
| 727 | document.head.appendChild(scopedStyle); |
| 728 | } |
| 729 | const templateSource = templateEl.textContent; |
| 730 | const ComponentClass = class extends HTMLElement { |
| 731 | connectedCallback() { |
| 732 | if (this._hypercomp_initialized) return; |
| 733 | this._hypercomp_initialized = true; |
| 734 | this.setAttribute("dom-scope", "isolated"); |
| 735 | this._slotContent = this.innerHTML; |
| 736 | this.innerHTML = ""; |
| 737 | var internalData = runtime.getInternalData(this); |
| 738 | if (!internalData.elementScope) internalData.elementScope = {}; |
| 739 | internalData.elementScope.attrs = createAttrs(this); |
| 740 | if (componentScript) { |
| 741 | this.setAttribute("_", componentScript); |
| 742 | _hyperscript.process(this); |
| 743 | } |
| 744 | const self2 = this; |
| 745 | var source = substituteSlots(templateSource, self2._slotContent, tagName); |
| 746 | queueMicrotask(function() { |
| 747 | var result = self2._renderTemplate(source); |
| 748 | if (result && result.then) { |
| 749 | result.then(function(html) { |
| 750 | self2._stampTemplate(html); |
| 751 | self2._setupReactiveEffect(source); |
| 752 | }); |
| 753 | } else { |
| 754 | self2._stampTemplate(result); |
| 755 | self2._setupReactiveEffect(source); |
| 756 | } |
| 757 | }); |
| 758 | } |
| 759 | disconnectedCallback() { |
| 760 | reactivity.stopElementEffects(this); |
| 761 | runtime.cleanup(this); |
| 762 | this._hypercomp_initialized = false; |
| 763 | this._hypercomp_stamped = false; |
| 764 | } |
| 765 | _setupReactiveEffect(source) { |