thunderous 0.4.3 → 0.6.0

package/dist/index.cjs

@@ -1233,6 +1233,8 @@ var customElement = (render, options) => {
     shadowRootOptions: _shadowRootOptions
   } = { ...DEFAULT_RENDER_OPTIONS, ...options };
   const shadowRootOptions = { ...DEFAULT_RENDER_OPTIONS.shadowRootOptions, ..._shadowRootOptions };
+  shadowRootOptions.registry = shadowRootOptions.customElements = shadowRootOptions.registry instanceof CustomElementRegistry ? shadowRootOptions.registry : shadowRootOptions.registry?.eject();
+  console.log(shadowRootOptions);
   const observedAttributesSet = new Set(_observedAttributes);
   const attributesAsPropertiesMap = /* @__PURE__ */ new Map();
   for (const [attrName, coerce] of attributesAsProperties) {
@@ -1372,6 +1374,7 @@ You must set an initial value before calling a property signal's getter.
       });
       fragment.host = this;
       setInnerHTML(root, fragment);
+      root.innerHTML = root.innerHTML;
     }
     static get formAssociated() {
       return formAssociated;
@@ -1467,39 +1470,66 @@ You must set an initial value before calling a property signal's getter.
       }
     }
   }
-  let _tagname = null;
-  return {
-    define(tagname) {
-      if (customElements.get(tagname) !== void 0) {
-        console.warn(`Custom element "${tagname}" was already defined. Skipping...`);
+  let _tagName = null;
+  let _registry = null;
+  let _registered = false;
+  const register = () => {
+    if (_tagName === null || _registry === null || _registered) return;
+    _registry.register(_tagName, CustomElement);
+    _registry.register(_tagName, elementResult);
+    _registered = true;
+  };
+  const elementResult = {
+    define(tagName) {
+      const registry = _registry?.scoped ? _registry.eject() : customElements;
+      console.log(tagName, registry);
+      if (registry.get(tagName) !== void 0) {
+        console.warn(`Custom element "${tagName}" was already defined. Skipping...`);
         return this;
       }
-      customElements.define(tagname, CustomElement);
-      _tagname = tagname;
+      registry.define(tagName, CustomElement);
+      _tagName = tagName;
+      register();
       return this;
     },
     register(registry) {
-      if (_tagname === null) {
-        console.error("Custom element must be defined before registering.");
+      if (_tagName !== null && registry.scoped) {
+        console.error("Must call `register()` before `define()` for scoped registries.");
         return this;
       }
-      registry.register(_tagname, CustomElement);
+      _registry = registry;
+      register();
       return this;
     },
     eject: () => CustomElement
   };
+  return elementResult;
 };
-var createRegistry = () => {
-  const registry = /* @__PURE__ */ new Map();
+var createRegistry = (args) => {
+  const { scoped = false } = args ?? {};
+  const registryResult = /* @__PURE__ */ new Map();
+  const registry = (() => {
+    try {
+      return new CustomElementRegistry();
+    } catch (error) {
+      if (scoped)
+        console.error(
+          "Scoped custom element registries are not supported in this environment. Please install `@webcomponents/scoped-custom-element-registry` to use this feature."
+        );
+      return customElements;
+    }
+  })();
   return {
     register: (tagName, element) => {
-      if (registry.has(element)) {
+      if (registryResult.has(element)) {
         console.warn(`Custom element class "${element.constructor.name}" was already registered. Skipping...`);
         return;
       }
-      registry.set(element, tagName.toUpperCase());
+      registryResult.set(element, tagName.toUpperCase());
     },
-    getTagName: (element) => registry.get(element)
+    getTagName: (element) => registryResult.get(element),
+    eject: () => registry,
+    scoped
   };
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.d.cts

@@ -52,7 +52,7 @@ declare global {
 }
 type ElementResult = {
     define: (tagname: `${string}-${string}`) => ElementResult;
-    register: (registry: Registry) => ElementResult;
+    register: (registry: RegistryResult) => ElementResult;
     eject: () => CustomElementConstructor;
 };
 type AttributeChangedCallback = (name: string, oldValue: string | null, newValue: string | null) => void;
@@ -83,7 +83,10 @@ type RenderOptions = {
     observedAttributes: string[];
     attributesAsProperties: [string, Coerce][];
     attachShadow: boolean;
-    shadowRootOptions: ShadowRootInit;
+    shadowRootOptions: Partial<ShadowRootInit> & {
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry | RegistryResult;
+    };
 };
 type RenderFunction<Props extends CustomElementProps> = (args: RenderArgs<Props>) => DocumentFragment;
 /**
@@ -97,12 +100,22 @@ type RenderFunction<Props extends CustomElementProps> = (args: RenderArgs<Props>
  * ```
  */
 declare const customElement: <Props extends CustomElementProps>(render: RenderFunction<Props>, options?: Partial<RenderOptions>) => ElementResult;
-type Registry = {
-    register: (tagName: string, element: CustomElementConstructor) => void;
-    getTagName: (element: CustomElementConstructor) => string | undefined;
+type RegistryResult = {
+    register: (tagName: string, CustomElement: CustomElementConstructor | ElementResult) => void;
+    getTagName: (CustomElement: CustomElementConstructor | ElementResult) => string | undefined;
+    eject: () => CustomElementRegistry;
+    scoped: boolean;
+};
+type RegistryArgs = {
+    scoped: boolean;
 };
 /**
  * Create a registry for custom elements.
+ *
+ * This allows you to delegate custom element definitions to the consumer of your library,
+ * by using their associated classes to look up tag names dynamically.
+ *
+ * This can be useful when you need to select a custom element whose tag name is variable.
  * @example
  * ```ts
  * const registry = createRegistry();
@@ -111,6 +124,6 @@ type Registry = {
  * console.log(tagName); // 'MY-ELEMENT'
  * ```
  */
-declare const createRegistry: () => Registry;
+declare const createRegistry: (args?: RegistryArgs) => RegistryResult;
 
 export { type RenderArgs, type RenderFunction, type RenderArgs as RenderProps, type Signal, type SignalGetter, type SignalSetter, createEffect, createRegistry, createSignal, css, customElement, derived, html };

package/dist/index.d.ts

@@ -52,7 +52,7 @@ declare global {
 }
 type ElementResult = {
     define: (tagname: `${string}-${string}`) => ElementResult;
-    register: (registry: Registry) => ElementResult;
+    register: (registry: RegistryResult) => ElementResult;
     eject: () => CustomElementConstructor;
 };
 type AttributeChangedCallback = (name: string, oldValue: string | null, newValue: string | null) => void;
@@ -83,7 +83,10 @@ type RenderOptions = {
     observedAttributes: string[];
     attributesAsProperties: [string, Coerce][];
     attachShadow: boolean;
-    shadowRootOptions: ShadowRootInit;
+    shadowRootOptions: Partial<ShadowRootInit> & {
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry | RegistryResult;
+    };
 };
 type RenderFunction<Props extends CustomElementProps> = (args: RenderArgs<Props>) => DocumentFragment;
 /**
@@ -97,12 +100,22 @@ type RenderFunction<Props extends CustomElementProps> = (args: RenderArgs<Props>
  * ```
  */
 declare const customElement: <Props extends CustomElementProps>(render: RenderFunction<Props>, options?: Partial<RenderOptions>) => ElementResult;
-type Registry = {
-    register: (tagName: string, element: CustomElementConstructor) => void;
-    getTagName: (element: CustomElementConstructor) => string | undefined;
+type RegistryResult = {
+    register: (tagName: string, CustomElement: CustomElementConstructor | ElementResult) => void;
+    getTagName: (CustomElement: CustomElementConstructor | ElementResult) => string | undefined;
+    eject: () => CustomElementRegistry;
+    scoped: boolean;
+};
+type RegistryArgs = {
+    scoped: boolean;
 };
 /**
  * Create a registry for custom elements.
+ *
+ * This allows you to delegate custom element definitions to the consumer of your library,
+ * by using their associated classes to look up tag names dynamically.
+ *
+ * This can be useful when you need to select a custom element whose tag name is variable.
  * @example
  * ```ts
  * const registry = createRegistry();
@@ -111,6 +124,6 @@ type Registry = {
  * console.log(tagName); // 'MY-ELEMENT'
  * ```
  */
-declare const createRegistry: () => Registry;
+declare const createRegistry: (args?: RegistryArgs) => RegistryResult;
 
 export { type RenderArgs, type RenderFunction, type RenderArgs as RenderProps, type Signal, type SignalGetter, type SignalSetter, createEffect, createRegistry, createSignal, css, customElement, derived, html };

package/dist/index.js

@@ -1201,6 +1201,8 @@ var customElement = (render, options) => {
     shadowRootOptions: _shadowRootOptions
   } = { ...DEFAULT_RENDER_OPTIONS, ...options };
   const shadowRootOptions = { ...DEFAULT_RENDER_OPTIONS.shadowRootOptions, ..._shadowRootOptions };
+  shadowRootOptions.registry = shadowRootOptions.customElements = shadowRootOptions.registry instanceof CustomElementRegistry ? shadowRootOptions.registry : shadowRootOptions.registry?.eject();
+  console.log(shadowRootOptions);
   const observedAttributesSet = new Set(_observedAttributes);
   const attributesAsPropertiesMap = /* @__PURE__ */ new Map();
   for (const [attrName, coerce] of attributesAsProperties) {
@@ -1340,6 +1342,7 @@ You must set an initial value before calling a property signal's getter.
       });
       fragment.host = this;
       setInnerHTML(root, fragment);
+      root.innerHTML = root.innerHTML;
     }
     static get formAssociated() {
       return formAssociated;
@@ -1435,39 +1438,66 @@ You must set an initial value before calling a property signal's getter.
       }
     }
   }
-  let _tagname = null;
-  return {
-    define(tagname) {
-      if (customElements.get(tagname) !== void 0) {
-        console.warn(`Custom element "${tagname}" was already defined. Skipping...`);
+  let _tagName = null;
+  let _registry = null;
+  let _registered = false;
+  const register = () => {
+    if (_tagName === null || _registry === null || _registered) return;
+    _registry.register(_tagName, CustomElement);
+    _registry.register(_tagName, elementResult);
+    _registered = true;
+  };
+  const elementResult = {
+    define(tagName) {
+      const registry = _registry?.scoped ? _registry.eject() : customElements;
+      console.log(tagName, registry);
+      if (registry.get(tagName) !== void 0) {
+        console.warn(`Custom element "${tagName}" was already defined. Skipping...`);
         return this;
       }
-      customElements.define(tagname, CustomElement);
-      _tagname = tagname;
+      registry.define(tagName, CustomElement);
+      _tagName = tagName;
+      register();
       return this;
     },
     register(registry) {
-      if (_tagname === null) {
-        console.error("Custom element must be defined before registering.");
+      if (_tagName !== null && registry.scoped) {
+        console.error("Must call `register()` before `define()` for scoped registries.");
         return this;
       }
-      registry.register(_tagname, CustomElement);
+      _registry = registry;
+      register();
       return this;
     },
     eject: () => CustomElement
   };
+  return elementResult;
 };
-var createRegistry = () => {
-  const registry = /* @__PURE__ */ new Map();
+var createRegistry = (args) => {
+  const { scoped = false } = args ?? {};
+  const registryResult = /* @__PURE__ */ new Map();
+  const registry = (() => {
+    try {
+      return new CustomElementRegistry();
+    } catch (error) {
+      if (scoped)
+        console.error(
+          "Scoped custom element registries are not supported in this environment. Please install `@webcomponents/scoped-custom-element-registry` to use this feature."
+        );
+      return customElements;
+    }
+  })();
   return {
     register: (tagName, element) => {
-      if (registry.has(element)) {
+      if (registryResult.has(element)) {
         console.warn(`Custom element class "${element.constructor.name}" was already registered. Skipping...`);
         return;
       }
-      registry.set(element, tagName.toUpperCase());
+      registryResult.set(element, tagName.toUpperCase());
     },
-    getTagName: (element) => registry.get(element)
+    getTagName: (element) => registryResult.get(element),
+    eject: () => registry,
+    scoped
   };
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "0.4.3",
+	"version": "0.6.0",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -50,5 +50,13 @@
 	},
 	"dependencies": {
 		"dompurify": "^3.2.1"
+	},
+	"peerDependenciesMeta": {
+		"@webcomponents/scoped-custom-element-registry": {
+			"optional": true
+		}
+	},
+	"peerDependencies": {
+		"@webcomponents/scoped-custom-element-registry": "^0.0.9"
 	}
 }