element-vir 25.15.0 → 26.0.1

package/README.md

@@ -499,10 +499,10 @@ import {wrapDefineElement} from 'element-vir';
 
 export type VirTagName = `vir-${string}`;
 
-export const {defineElement: defineVirElement} = wrapDefineElement<VirTagName>();
+export const defineVirElement = wrapDefineElement<VirTagName>();
 
 // add an optional assert callback
-export const {defineElement: defineVerifiedVirElement} = wrapDefineElement<VirTagName>({
+export const defineVerifiedVirElement = wrapDefineElement<VirTagName>({
     assertInputs: (inputs) => {
         if (!inputs.tagName.startsWith('vir-')) {
             throw new Error(`all custom elements must start with "vir-"`);
@@ -511,7 +511,7 @@ export const {defineElement: defineVerifiedVirElement} = wrapDefineElement<VirTa
 });
 
 // add an optional transform callback
-export const {defineElement: defineTransformedVirElement} = wrapDefineElement<VirTagName>({
+export const defineTransformedVirElement = wrapDefineElement<VirTagName>({
     transformInputs: (inputs) => {
         return {
             ...inputs,

package/dist/declarative-element/define-element.js

@@ -1,7 +1,18 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 import { assert, check } from '@augment-vir/assert';
-// eslint-disable-next-line sonarjs/deprecation
-import { defineElementNoInputs } from './define-element-no-inputs.js';
+import { ensureErrorAndPrependMessage, extractErrorMessage, getObjectTypedKeys, kebabCaseToCamelCase, } from '@augment-vir/common';
+import { defineCssVars } from 'lit-css-vars';
+import { css } from '../template-transforms/vir-css/vir-css.js';
+import { DeclarativeElement, } from './declarative-element.js';
+import { defaultDeclarativeElementDefinitionOptions, } from './definition-options.js';
+import { assignInputs } from './properties/assign-inputs.js';
+import { assertValidCssProperties } from './properties/css-properties.js';
+import { createEventDescriptorMap, } from './properties/element-events.js';
+import { createHostClassNamesMap } from './properties/host-classes.js';
+import { bindReactiveProperty, createElementPropertyProxy } from './properties/property-proxy.js';
+import { applyHostClasses, createStylesCallbackInput } from './properties/styles.js';
+import { createRenderParams } from './render-callback.js';
+import { createSlotNamesMap } from './slot-names.js';
 /**
  * Defines an element with inputs. Note that this function must be called twice, due to TypeScript
  * type inference limitations.
@@ -34,8 +45,7 @@ export function defineElement(
         if (!check.isObject(init)) {
             throw new TypeError('Cannot define element with non-object init: ${init}');
         }
-        // eslint-disable-next-line sonarjs/deprecation, @typescript-eslint/no-deprecated
-        return defineElementNoInputs({
+        return internalDefineElement({
             ...init,
             options: {
                 ...init.options,
@@ -43,3 +53,182 @@ export function defineElement(
         });
     };
 }
+function internalDefineElement(init) {
+    if (!check.isObject(init)) {
+        throw new TypeError('Cannot define element with non-object init: ${init}');
+    }
+    if (!check.isString(init.tagName)) {
+        throw new TypeError('Missing valid tagName (expected a string).');
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (!init.render || typeof init.render === 'string') {
+        throw new Error(`Failed to define element '${init.tagName}': render is not a function`);
+    }
+    const elementOptions = {
+        ...defaultDeclarativeElementDefinitionOptions,
+        ...init.options,
+    };
+    const eventsMap = createEventDescriptorMap(init.tagName, init.events);
+    const hostClassNames = createHostClassNamesMap(init.hostClasses);
+    if (init.hostClasses) {
+        assertValidCssProperties(init.tagName, init.hostClasses);
+    }
+    if (init.cssVars) {
+        assertValidCssProperties(init.tagName, init.cssVars);
+    }
+    /**
+     * As casts here are to prevent defineCssVars from complaining that our CSS var names are too
+     * generic or the names not being in kebab-case. (Which, in this line of code, are indeed true
+     * errors. However, this is for internal types only and the user will actually see much more
+     * specific types externally.)
+     */
+    const cssVars = (init.cssVars ? defineCssVars(init.cssVars) : {});
+    const slotNamesMap = createSlotNamesMap(init.slotNames);
+    const calculatedStyles = typeof init.styles === 'function'
+        ? init.styles(createStylesCallbackInput({ hostClassNames, cssVars }))
+        : init.styles || css ``;
+    const typedRenderCallback = init.render;
+    function typedAssignCallback(...[inputs]) {
+        const wrappedDefinition = {
+            _elementVirIsMinimalDefinitionWithInputs: true,
+            definition: anonymousClass,
+            inputs,
+        };
+        return wrappedDefinition;
+    }
+    const anonymousClass = class extends DeclarativeElement {
+        static elementOptions = elementOptions;
+        static tagName = init.tagName;
+        static styles = calculatedStyles;
+        _lastRenderError = undefined;
+        _internalRenderCount = 0;
+        createRenderParams() {
+            return createRenderParams({ element: this, eventsMap, cssVars, slotNamesMap });
+        }
+        static assign = typedAssignCallback;
+        static events = eventsMap;
+        static render = typedRenderCallback;
+        static hostClasses = hostClassNames;
+        static cssVars = cssVars;
+        static init = init;
+        static slotNames = slotNamesMap;
+        get InstanceType() {
+            throw new Error(`'InstanceType' was called on ${init.tagName} as a value but it is only a type.`);
+        }
+        static get InputsType() {
+            throw new Error(`'InputsType' was called on ${init.tagName} as a value but it is only a type.`);
+        }
+        static get StateType() {
+            throw new Error(`'StateType' was called on ${init.tagName} as a value but it is only a type.`);
+        }
+        static get UpdateStateType() {
+            throw new Error(`'UpdateStateType' was called on ${init.tagName} as a value but it is only a type.`);
+        }
+        _initCalled = false;
+        _stateCalled = false;
+        _hasRendered = false;
+        _lastRenderedProps = undefined;
+        render() {
+            this._internalRenderCount++;
+            try {
+                this._hasRendered = true;
+                const renderParams = this.createRenderParams();
+                if (!this._stateCalled && init.state) {
+                    this._stateCalled = true;
+                    const stateInit = init.state(renderParams);
+                    if (stateInit instanceof Promise) {
+                        throw new TypeError('init cannot be asynchronous');
+                    }
+                    getObjectTypedKeys(stateInit).forEach((stateKey) => {
+                        bindReactiveProperty(this, stateKey);
+                        this.instanceState[stateKey] = stateInit[stateKey];
+                    });
+                }
+                if (!this._initCalled && init.init) {
+                    this._initCalled = true;
+                    if (init.init(renderParams) instanceof Promise) {
+                        throw new TypeError('init cannot be asynchronous');
+                    }
+                }
+                const renderResult = typedRenderCallback(renderParams);
+                if (renderResult instanceof Promise) {
+                    throw new TypeError('render cannot be asynchronous');
+                }
+                applyHostClasses({
+                    host: renderParams.host,
+                    hostClassesInit: init.hostClasses,
+                    hostClassNames,
+                    state: renderParams.state,
+                    inputs: renderParams.inputs,
+                });
+                this._lastRenderedProps = {
+                    inputs: { ...renderParams.inputs },
+                    state: { ...renderParams.state },
+                };
+                return renderResult;
+            }
+            catch (caught) {
+                const error = ensureErrorAndPrependMessage(caught, `Failed to render ${init.tagName}`);
+                console.error(error);
+                this._lastRenderError = error;
+                return extractErrorMessage(error);
+            }
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            if (this._hasRendered && !this._initCalled && init.init) {
+                this._initCalled = true;
+                const renderParams = this.createRenderParams();
+                if (init.init(renderParams) instanceof Promise) {
+                    throw new TypeError(`init in '${init.tagName}' cannot be asynchronous`);
+                }
+            }
+        }
+        destroy() {
+            Object.values(this.instanceState).forEach((stateValue) => {
+                if (check.hasKey(stateValue, 'destroy') && check.isFunction(stateValue.destroy)) {
+                    stateValue.destroy();
+                }
+            });
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            if (init.cleanup) {
+                const renderParams = this.createRenderParams();
+                if (init.cleanup(renderParams) instanceof Promise) {
+                    throw new TypeError(`cleanup in '${init.tagName}' cannot be asynchronous`);
+                }
+            }
+            this.destroy();
+            this._initCalled = false;
+            this._stateCalled = false;
+        }
+        // this is set below in Object.defineProperties
+        definition = {};
+        assignInputs(inputs) {
+            assignInputs(this, inputs);
+        }
+        observablePropertyListenerMap = {};
+        instanceInputs = createElementPropertyProxy(this, false);
+        instanceState = createElementPropertyProxy(this, !elementOptions.allowPolymorphicState);
+        constructor() {
+            super();
+            this.definition = anonymousClass;
+        }
+    };
+    Object.defineProperties(anonymousClass, {
+        name: {
+            value: kebabCaseToCamelCase(init.tagName, {
+                capitalizeFirstLetter: true,
+            }),
+            writable: true,
+        },
+    });
+    if (window.customElements.get(init.tagName)) {
+        console.warn(`Tried to define custom element '${init.tagName}' but it is already defined.`);
+    }
+    else {
+        window.customElements.define(init.tagName, anonymousClass);
+    }
+    return anonymousClass;
+}

package/dist/declarative-element/wrap-define-element.d.ts

@@ -33,13 +33,4 @@ export type WrapDefineElementOptions<TagNameRequirement extends CustomElementTag
  *
  * @category Element Definition
  */
-export declare function wrapDefineElement<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}>(options?: WrapDefineElementOptions | undefined): {
-    /** A wrapped function for defining an element with inputs. */
-    defineElement: <Inputs extends InputsRequirement>(...errorParams: DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends TagNameRequirement, State extends StateRequirement, EventsInit extends EventsInitRequirement, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(inputs: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("./declarative-element.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-    /**
-     * A wrapped function for defining an element without inputs.
-     *
-     * @deprecated Use `defineElement` instead.
-     */
-    defineElementNoInputs: <const TagName extends TagNameRequirement, Inputs extends InputsRequirement, State extends StateRequirement, EventsInit extends EventsInitRequirement, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = readonly []>(inputs: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("./declarative-element.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;
-};
+export declare function wrapDefineElement<TagNameRequirement extends CustomElementTagName = CustomElementTagName, InputsRequirement extends PropertyInitMapBase = {}, StateRequirement extends PropertyInitMapBase = {}, EventsInitRequirement extends EventsInitMap = {}>(options?: WrapDefineElementOptions | undefined): <Inputs extends InputsRequirement>(...errorParams: DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends TagNameRequirement, State extends StateRequirement, EventsInit extends EventsInitRequirement, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(inputs: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>) => import("./declarative-element.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;

package/dist/declarative-element/wrap-define-element.js

@@ -1,7 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 import { defineElement } from './define-element.js';
-// eslint-disable-next-line sonarjs/deprecation
-import { defineElementNoInputs } from './define-element-no-inputs.js';
 /**
  * Wraps {@link defineElement} in a superset of requirements. For example:
  *
@@ -18,23 +16,10 @@ export function wrapDefineElement(options) {
         assertInputs: options?.assertInputs ?? (() => { }),
         transformInputs: options?.transformInputs ?? ((inputs) => inputs),
     };
-    return {
-        /** A wrapped function for defining an element with inputs. */
-        defineElement: (...errorParams) => {
-            return (inputs) => {
-                assertInputs(inputs);
-                return defineElement(...errorParams)(transformInputs(inputs));
-            };
-        },
-        /**
-         * A wrapped function for defining an element without inputs.
-         *
-         * @deprecated Use `defineElement` instead.
-         */
-        defineElementNoInputs: (inputs) => {
+    return (...errorParams) => {
+        return (inputs) => {
             assertInputs(inputs);
-            // eslint-disable-next-line sonarjs/deprecation, @typescript-eslint/no-deprecated
-            return defineElementNoInputs(transformInputs(inputs));
-        },
+            return defineElement(...errorParams)(transformInputs(inputs));
+        };
     };
 }

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export * from 'observavir';
 export * from './declarative-element/custom-tag-name.js';
 export * from './declarative-element/declarative-element-init.js';
 export * from './declarative-element/declarative-element.js';
-export * from './declarative-element/define-element-no-inputs.js';
 export * from './declarative-element/define-element.js';
 export * from './declarative-element/definition-options.js';
 export * from './declarative-element/directives/async-prop.js';

package/dist/index.js

@@ -2,7 +2,6 @@ export * from 'observavir';
 export * from './declarative-element/custom-tag-name.js';
 export * from './declarative-element/declarative-element-init.js';
 export * from './declarative-element/declarative-element.js';
-export * from './declarative-element/define-element-no-inputs.js';
 export * from './declarative-element/define-element.js';
 export * from './declarative-element/definition-options.js';
 export * from './declarative-element/directives/async-prop.js';

package/dist/readme-examples/my-custom-define.js

@@ -1,7 +1,7 @@
 import { wrapDefineElement } from '../index.js';
-export const { defineElement: defineVirElement } = wrapDefineElement();
+export const defineVirElement = wrapDefineElement();
 // add an optional assert callback
-export const { defineElement: defineVerifiedVirElement } = wrapDefineElement({
+export const defineVerifiedVirElement = wrapDefineElement({
     assertInputs: (inputs) => {
         if (!inputs.tagName.startsWith('vir-')) {
             throw new Error(`all custom elements must start with "vir-"`);
@@ -9,7 +9,7 @@ export const { defineElement: defineVerifiedVirElement } = wrapDefineElement({
     },
 });
 // add an optional transform callback
-export const { defineElement: defineTransformedVirElement } = wrapDefineElement({
+export const defineTransformedVirElement = wrapDefineElement({
     transformInputs: (inputs) => {
         return {
             ...inputs,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "25.15.0",
+    "version": "26.0.1",
     "keywords": [
         "custom",
         "web",

package/dist/declarative-element/define-element-no-inputs.d.ts

@@ -1,13 +0,0 @@
-import { type CustomElementTagName } from './custom-tag-name.js';
-import { type DeclarativeElementInit } from './declarative-element-init.js';
-import { type DeclarativeElementDefinition } from './declarative-element.js';
-import { type BaseCssPropertyName } from './properties/css-properties.js';
-import { type EventsInitMap } from './properties/element-events.js';
-import { type PropertyInitMapBase } from './properties/element-properties.js';
-/**
- * Defines an element without any inputs.
- *
- * @deprecated Use plain `defineElement` instead.
- * @category Internal
- */
-export declare function defineElementNoInputs<const TagName extends CustomElementTagName = '-', Inputs extends PropertyInitMapBase = {}, State extends PropertyInitMapBase = {}, EventsInit extends EventsInitMap = {}, const HostClassKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const CssVarKeys extends BaseCssPropertyName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>>(init: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>): DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames>;

package/dist/declarative-element/define-element-no-inputs.js

@@ -1,200 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-import { check } from '@augment-vir/assert';
-import { ensureErrorAndPrependMessage, extractErrorMessage, getObjectTypedKeys, kebabCaseToCamelCase, } from '@augment-vir/common';
-import { defineCssVars } from 'lit-css-vars';
-import { css } from '../template-transforms/vir-css/vir-css.js';
-import { DeclarativeElement, } from './declarative-element.js';
-import { defaultDeclarativeElementDefinitionOptions, } from './definition-options.js';
-import { assignInputs } from './properties/assign-inputs.js';
-import { assertValidCssProperties } from './properties/css-properties.js';
-import { createEventDescriptorMap, } from './properties/element-events.js';
-import { createHostClassNamesMap } from './properties/host-classes.js';
-import { bindReactiveProperty, createElementPropertyProxy } from './properties/property-proxy.js';
-import { applyHostClasses, createStylesCallbackInput } from './properties/styles.js';
-import { createRenderParams } from './render-callback.js';
-import { createSlotNamesMap } from './slot-names.js';
-/**
- * Defines an element without any inputs.
- *
- * @deprecated Use plain `defineElement` instead.
- * @category Internal
- */
-export function defineElementNoInputs(init) {
-    if (!check.isObject(init)) {
-        throw new TypeError('Cannot define element with non-object init: ${init}');
-    }
-    if (!check.isString(init.tagName)) {
-        throw new TypeError('Missing valid tagName (expected a string).');
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (!init.render || typeof init.render === 'string') {
-        throw new Error(`Failed to define element '${init.tagName}': render is not a function`);
-    }
-    const elementOptions = {
-        ...defaultDeclarativeElementDefinitionOptions,
-        ...init.options,
-    };
-    const eventsMap = createEventDescriptorMap(init.tagName, init.events);
-    const hostClassNames = createHostClassNamesMap(init.hostClasses);
-    if (init.hostClasses) {
-        assertValidCssProperties(init.tagName, init.hostClasses);
-    }
-    if (init.cssVars) {
-        assertValidCssProperties(init.tagName, init.cssVars);
-    }
-    /**
-     * As casts here are to prevent defineCssVars from complaining that our CSS var names are too
-     * generic or the names not being in kebab-case. (Which, in this line of code, are indeed true
-     * errors. However, this is for internal types only and the user will actually see much more
-     * specific types externally.)
-     */
-    const cssVars = (init.cssVars ? defineCssVars(init.cssVars) : {});
-    const slotNamesMap = createSlotNamesMap(init.slotNames);
-    const calculatedStyles = typeof init.styles === 'function'
-        ? init.styles(createStylesCallbackInput({ hostClassNames, cssVars }))
-        : init.styles || css ``;
-    const typedRenderCallback = init.render;
-    function typedAssignCallback(...[inputs]) {
-        const wrappedDefinition = {
-            _elementVirIsMinimalDefinitionWithInputs: true,
-            definition: anonymousClass,
-            inputs,
-        };
-        return wrappedDefinition;
-    }
-    const anonymousClass = class extends DeclarativeElement {
-        static elementOptions = elementOptions;
-        static tagName = init.tagName;
-        static styles = calculatedStyles;
-        _lastRenderError = undefined;
-        _internalRenderCount = 0;
-        createRenderParams() {
-            return createRenderParams({ element: this, eventsMap, cssVars, slotNamesMap });
-        }
-        static assign = typedAssignCallback;
-        static events = eventsMap;
-        static render = typedRenderCallback;
-        static hostClasses = hostClassNames;
-        static cssVars = cssVars;
-        static init = init;
-        static slotNames = slotNamesMap;
-        get InstanceType() {
-            throw new Error(`'InstanceType' was called on ${init.tagName} as a value but it is only a type.`);
-        }
-        static get InputsType() {
-            throw new Error(`'InputsType' was called on ${init.tagName} as a value but it is only a type.`);
-        }
-        static get StateType() {
-            throw new Error(`'StateType' was called on ${init.tagName} as a value but it is only a type.`);
-        }
-        static get UpdateStateType() {
-            throw new Error(`'UpdateStateType' was called on ${init.tagName} as a value but it is only a type.`);
-        }
-        _initCalled = false;
-        _stateCalled = false;
-        _hasRendered = false;
-        _lastRenderedProps = undefined;
-        render() {
-            this._internalRenderCount++;
-            try {
-                this._hasRendered = true;
-                const renderParams = this.createRenderParams();
-                if (!this._stateCalled && init.state) {
-                    this._stateCalled = true;
-                    const stateInit = init.state(renderParams);
-                    if (stateInit instanceof Promise) {
-                        throw new TypeError('init cannot be asynchronous');
-                    }
-                    getObjectTypedKeys(stateInit).forEach((stateKey) => {
-                        bindReactiveProperty(this, stateKey);
-                        this.instanceState[stateKey] = stateInit[stateKey];
-                    });
-                }
-                if (!this._initCalled && init.init) {
-                    this._initCalled = true;
-                    if (init.init(renderParams) instanceof Promise) {
-                        throw new TypeError('init cannot be asynchronous');
-                    }
-                }
-                const renderResult = typedRenderCallback(renderParams);
-                if (renderResult instanceof Promise) {
-                    throw new TypeError('render cannot be asynchronous');
-                }
-                applyHostClasses({
-                    host: renderParams.host,
-                    hostClassesInit: init.hostClasses,
-                    hostClassNames,
-                    state: renderParams.state,
-                    inputs: renderParams.inputs,
-                });
-                this._lastRenderedProps = {
-                    inputs: { ...renderParams.inputs },
-                    state: { ...renderParams.state },
-                };
-                return renderResult;
-            }
-            catch (caught) {
-                const error = ensureErrorAndPrependMessage(caught, `Failed to render ${init.tagName}`);
-                console.error(error);
-                this._lastRenderError = error;
-                return extractErrorMessage(error);
-            }
-        }
-        connectedCallback() {
-            super.connectedCallback();
-            if (this._hasRendered && !this._initCalled && init.init) {
-                this._initCalled = true;
-                const renderParams = this.createRenderParams();
-                if (init.init(renderParams) instanceof Promise) {
-                    throw new TypeError(`init in '${init.tagName}' cannot be asynchronous`);
-                }
-            }
-        }
-        destroy() {
-            Object.values(this.instanceState).forEach((stateValue) => {
-                if (check.hasKey(stateValue, 'destroy') && check.isFunction(stateValue.destroy)) {
-                    stateValue.destroy();
-                }
-            });
-        }
-        disconnectedCallback() {
-            super.disconnectedCallback();
-            if (init.cleanup) {
-                const renderParams = this.createRenderParams();
-                if (init.cleanup(renderParams) instanceof Promise) {
-                    throw new TypeError(`cleanup in '${init.tagName}' cannot be asynchronous`);
-                }
-            }
-            this.destroy();
-            this._initCalled = false;
-            this._stateCalled = false;
-        }
-        // this is set below in Object.defineProperties
-        definition = {};
-        assignInputs(inputs) {
-            assignInputs(this, inputs);
-        }
-        observablePropertyListenerMap = {};
-        instanceInputs = createElementPropertyProxy(this, false);
-        instanceState = createElementPropertyProxy(this, !elementOptions.allowPolymorphicState);
-        constructor() {
-            super();
-            this.definition = anonymousClass;
-        }
-    };
-    Object.defineProperties(anonymousClass, {
-        name: {
-            value: kebabCaseToCamelCase(init.tagName, {
-                capitalizeFirstLetter: true,
-            }),
-            writable: true,
-        },
-    });
-    if (window.customElements.get(init.tagName)) {
-        console.warn(`Tried to define custom element '${init.tagName}' but it is already defined.`);
-    }
-    else {
-        window.customElements.define(init.tagName, anonymousClass);
-    }
-    return anonymousClass;
-}