element-vir 26.16.0 → 26.17.0

package/README.md

@@ -38,7 +38,7 @@ All of [`lit`](https://lit.dev)'s syntax and functionality is available for use
 
 Use `defineElement` to define your element. Here is a bare-minimum example custom element:
 
-<!-- example-link: src/readme-examples/my-simple.element.ts -->
+<!-- example-link: src/readme-examples/my-simple.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -60,12 +60,12 @@ Make sure to export your element definition if you need to use it in other files
 
 To use already defined elements (like the example above), they must be interpolated into HTML templates like so:
 
-<!-- example-link: src/readme-examples/my-app.element.ts -->
+<!-- example-link: src/readme-examples/my-app.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
 import {html} from 'element-vir';
-import {MySimple} from './my-simple.element.js';
+import {MySimple} from './my-simple.example.js';
 
 export const MyApp = defineElement()({
     tagName: 'my-app',
@@ -84,7 +84,7 @@ This requirement ensures that the element is properly imported and registered wi
 
 Styles are added through the `styles` property when defining a declarative element (similar to [how they are defined in `lit`](https://lit.dev/docs/components/styles/)):
 
-<!-- example-link: src/readme-examples/my-with-styles.element.ts -->
+<!-- example-link: src/readme-examples/my-with-styles.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -116,12 +116,12 @@ export const MyWithStyles = defineElement()({
 
 Declarative element definitions can be used in the `css` tagged template just like in the `html` tagged template. This will be replaced by the element's tag name:
 
-<!-- example-link: src/readme-examples/my-with-styles-and-interpolated-selector.element.ts -->
+<!-- example-link: src/readme-examples/my-with-styles-and-interpolated-selector.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
 import {css, html} from 'element-vir';
-import {MySimple} from './my-simple.element.js';
+import {MySimple} from './my-simple.example.js';
 
 export const MyWithStylesAndInterpolatedSelector = defineElement()({
     tagName: 'my-with-styles-and-interpolated-selector',
@@ -144,7 +144,7 @@ Define element inputs by using `defineElement` to define a declarative element.
 
 To use an element's inputs for use in its template, grab `inputs` from `render`'s parameters and interpolate it into your HTML template:
 
-<!-- example-link: src/readme-examples/my-with-inputs.element.ts -->
+<!-- example-link: src/readme-examples/my-with-inputs.example.ts -->
 
 ```TypeScript
 import {defineElement, html} from 'element-vir';
@@ -166,7 +166,7 @@ export const MyWithInputs = defineElement<{
 
 Define initial internal state values and types with the `stateInit` property when defining an element. Grab it with `state` in `render` to use state. Grab `updateState` in `render` to update state:
 
-<!-- example-link: src/readme-examples/my-with-update-state.element.ts -->
+<!-- example-link: src/readme-examples/my-with-update-state.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -204,12 +204,12 @@ export const MyWithUpdateState = defineElement()({
 
 Use the `assign` directive to assign values to child custom elements inputs:
 
-<!-- example-link: src/readme-examples/my-with-assignment.element.ts -->
+<!-- example-link: src/readme-examples/my-with-assignment.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
 import {html} from 'element-vir';
-import {MyWithInputs} from './my-with-inputs.element.js';
+import {MyWithInputs} from './my-with-inputs.example.js';
 
 export const MyWithAssignment = defineElement()({
     tagName: 'my-with-assignment',
@@ -232,7 +232,7 @@ There are two other callbacks you can define that are sort of similar to lifecyc
 -   `init`: called right before the first render and has all state and inputs setup. (This is similar to `connectedCallback` in standard HTMLElement classes but is fired much later, after inputs are assigned, to avoid race conditions.)
 -   `cleanup`: called when an element is removed from the DOM. (This is the same as the `disconnectedCallback` in standard HTMLElement classes.)
 
-<!-- example-link: src/readme-examples/my-with-cleanup-callback.element.ts -->
+<!-- example-link: src/readme-examples/my-with-cleanup-callback.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -262,7 +262,7 @@ When defining a declarative element, use `events` to setup event names and types
 
 To dispatch an event, grab `dispatch` and `events` from `render`'s parameters.
 
-<!-- example-link: src/readme-examples/my-with-events.element.ts -->
+<!-- example-link: src/readme-examples/my-with-events.example.ts -->
 
 ```TypeScript
 import {randomInteger} from '@augment-vir/common';
@@ -301,12 +301,12 @@ export const MyWithEvents = defineElement()({
 
 Use the `listen` directive to listen to events emitted by your custom elements:
 
-<!-- example-link: src/readme-examples/my-with-event-listening.element.ts -->
+<!-- example-link: src/readme-examples/my-with-event-listening.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
 import {html, listen} from 'element-vir';
-import {MyWithEvents} from './my-with-events.element.js';
+import {MyWithEvents} from './my-with-events.example.js';
 
 export const MyWithEventListening = defineElement()({
     tagName: 'my-with-event-listening',
@@ -340,7 +340,7 @@ export const MyWithEventListening = defineElement()({
 
 Create a custom event type with `defineTypedEvent`. Make sure to include the type parameter and call it twice, the second time with the event type name string to ensure type safety when using your event. Note that event type names should be unique, or they will clash with each other.
 
-<!-- example-link: src/readme-examples/my-custom-action.event.ts -->
+<!-- example-link: src/readme-examples/my-custom-action.example.ts -->
 
 ```TypeScript
 import {defineTypedEvent} from 'element-vir';
@@ -352,13 +352,13 @@ export const MyCustomActionEvent = defineTypedEvent<number>()('my-custom-action'
 
 Dispatching a custom event and listening to a custom event is the same as doing so for element events:
 
-<!-- example-link: src/readme-examples/my-with-custom-events.element.ts -->
+<!-- example-link: src/readme-examples/my-with-custom-events.example.ts -->
 
 ```TypeScript
 import {randomInteger} from '@augment-vir/common';
 import {defineElement} from 'element-vir';
 import {html, listen} from 'element-vir';
-import {MyCustomActionEvent} from './my-custom-action.event.js';
+import {MyCustomActionEvent} from './my-custom-action.example.js';
 
 export const MyWithCustomEvents = defineElement()({
     tagName: 'my-with-custom-events',
@@ -400,7 +400,7 @@ Host classes are defined by passing an object to `hostClasses` at element defini
 
 Apply host classes in the element's stylesheet by using a callback for the styles property:
 
-<!-- example-link: src/readme-examples/my-with-host-class-definition.element.ts -->
+<!-- example-link: src/readme-examples/my-with-host-class-definition.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -452,12 +452,12 @@ export const MyWithHostClassDefinition = defineElement()({
 
 To apply a host class in a consumer, access the child element's `.hostClasses` property:
 
-<!-- example-link: src/readme-examples/my-with-host-class-usage.element.ts -->
+<!-- example-link: src/readme-examples/my-with-host-class-usage.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
 import {html} from 'element-vir';
-import {MyWithHostClassDefinition} from './my-with-host-class-definition.element.js';
+import {MyWithHostClassDefinition} from './my-with-host-class-definition.example.js';
 
 export const MyWithHostClassUsage = defineElement()({
     tagName: 'my-with-host-class-usage',
@@ -475,7 +475,7 @@ export const MyWithHostClassUsage = defineElement()({
 
 Typed CSS variables are created in a similar manner to host classes:
 
-<!-- example-link: src/readme-examples/my-with-css-vars.element.ts -->
+<!-- example-link: src/readme-examples/my-with-css-vars.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -510,7 +510,7 @@ export const MyWithCssVars = defineElement()({
 
 Use `wrapDefineElement` to compose `defineElement`. This is particularly useful to adding restrictions on the element `tagName`, but it can be used for restricting any of the type parameters:
 
-<!-- example-link: src/readme-examples/my-custom-define.ts -->
+<!-- example-link: src/readme-examples/my-custom-define.example.ts -->
 
 ```TypeScript
 import {wrapDefineElement} from 'element-vir';
@@ -549,7 +549,7 @@ All [built-in `lit` directives](https://lit.dev/docs/templates/directives/) are
 
 This triggers only once when the element it's attached to has actually been created in the DOM. If the attached element changes, the callback will be triggered again.
 
-<!-- example-link: src/readme-examples/my-with-on-dom-created.element.ts -->
+<!-- example-link: src/readme-examples/my-with-on-dom-created.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -576,7 +576,7 @@ export const MyWithOnDomCreated = defineElement()({
 
 This directive fires its callback whenever the element it's attached to resizes. The callback is passed an object with a portion of the [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) properties.
 
-<!-- example-link: src/readme-examples/my-with-on-resize.element.ts -->
+<!-- example-link: src/readme-examples/my-with-on-resize.example.ts -->
 
 ```TypeScript
 import {defineElement} from 'element-vir';
@@ -608,7 +608,7 @@ Listen to a specific event. This is explained in the **Listening to element even
 
 Use the `renderIf` directive to easily render a template if a given condition is true.
 
-<!-- example-link: src/readme-examples/my-with-render-if.element.ts -->
+<!-- example-link: src/readme-examples/my-with-render-if.example.ts -->
 
 ```TypeScript
 import {defineElement, html, renderIf} from 'element-vir';
@@ -632,7 +632,7 @@ export const MyWithRenderIf = defineElement<{shouldRender: boolean}>()({
 
 Use `renderAsync` or `isResolved` in conjunction with `asyncProp` to seamlessly render and update element state based on async values:
 
-<!-- example-link: src/readme-examples/my-with-async-prop.element.ts -->
+<!-- example-link: src/readme-examples/my-with-async-prop.example.ts -->
 
 ```TypeScript
 import {asyncProp, defineElement, html, listen, renderAsync} from 'element-vir';
@@ -694,18 +694,6 @@ export const MyWithAsyncProp = defineElement<{endpoint: string}>()({
 });
 ```
 
-## Require all child custom elements to be declarative elements
-
-To require all child elements to be declarative elements defined by this package, call `requireAllCustomElementsToBeDeclarativeElements` anywhere in your app. This is a global setting so do not enable it unless you want it to be true _everywhere_ in your current run-time. This should not be used if you're using custom elements from other libraries (unless they happen to also use this package to define their custom elements).
-
-<!-- example-link: src/readme-examples/require-declarative-element.ts -->
-
-```TypeScript
-import {requireAllCustomElementsToBeDeclarativeElements} from 'element-vir';
-
-requireAllCustomElementsToBeDeclarativeElements();
-```
-
 # Dev
 
 ## markdown out of date

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

@@ -100,7 +100,7 @@ export type StaticDeclarativeElementProperties<TagName extends CustomElementTagN
     /** Pass through the render callback for direct unit testability */
     readonly render: RenderCallback<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
     readonly events: EventDescriptorMap<TagName, EventsInit>;
-    readonly slotNames: SlotNamesMap<SlotNames>;
+    readonly slotNames: SlotNamesMap<TagName, SlotNames>;
     readonly testIds: Readonly<StringNameMap<TagName, 'test-id', TestIds>>;
     readonly init: DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
     readonly elementOptions: DeclarativeElementDefinitionOptions;

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

@@ -42,7 +42,7 @@ export function defineElement(
     return (initInput) => {
         const init = initInput;
         if (!check.isObject(init)) {
-            throw new TypeError('Cannot define element with non-object init: ${init}');
+            throw new TypeError(`Cannot define element with non-object init: ${String(init)}`);
         }
         return internalDefineElement({
             ...init,
@@ -54,7 +54,7 @@ export function defineElement(
 }
 function internalDefineElement(init) {
     if (!check.isObject(init)) {
-        throw new TypeError('Cannot define element with non-object init: ${init}');
+        throw new TypeError(`Cannot define element with non-object init: ${String(init)}`);
     }
     else if (!check.isString(init.tagName)) {
         throw new TypeError('Missing valid tagName (expected a string).');
@@ -148,7 +148,7 @@ function internalDefineElement(init) {
                     this._stateCalled = true;
                     const stateInit = init.state(renderParams);
                     if (stateInit instanceof Promise) {
-                        throw new TypeError('init cannot be asynchronous');
+                        throw new TypeError('state cannot be asynchronous');
                     }
                     getObjectTypedKeys(stateInit).forEach((stateKey) => {
                         bindReactiveProperty(this, stateKey);
@@ -206,18 +206,27 @@ function internalDefineElement(init) {
                     stateValue.destroy();
                 }
             });
+            this._initCalled = false;
+            this._stateCalled = false;
         }
         disconnectedCallback() {
             super.disconnectedCallback();
-            if (init.cleanup && this._stateCalled) {
-                const renderParams = this.createRenderParams();
-                if (init.cleanup(renderParams) instanceof Promise) {
-                    throw new TypeError(`cleanup in '${init.tagName}' cannot be asynchronous`);
+            /**
+             * Always reset bookkeeping and run `destroy()`, even when `cleanup` throws — otherwise
+             * a throwing cleanup leaves `_initCalled` / `_stateCalled` stuck and corrupts the next
+             * mount.
+             */
+            try {
+                if (init.cleanup && this._stateCalled) {
+                    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;
+            finally {
+                this.destroy();
+            }
         }
         // this is set below in Object.defineProperties
         definition = {};

package/dist/declarative-element/directives/directive-helpers.js

@@ -29,9 +29,5 @@ export function assertIsElementPartInfo(partInfo, directiveName) {
     const hostTagMessage = hostTagName ? `: in ${hostTagName}` : '';
     if (partInfo.type !== PartType.ELEMENT) {
         throw new Error(`${directiveName} directive can only be attached directly to an element${hostTagMessage}.`);
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    }
-    else if (!partInfo.element) {
-        throw new Error(`${directiveName} directive found no element${hostTagMessage}.`);
     }
 }

package/dist/declarative-element/directives/on-intersect.directive.d.ts

@@ -59,6 +59,11 @@ export declare const onIntersect: (options: IntersectionObserverInit, callback:
         fireCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void;
         update(partInfo: PartInfo, [options, callback,]: [OnIntersectOptions, OnIntersectCallback]): undefined;
         render(options: OnIntersectOptions, callback: OnIntersectCallback): undefined;
+        disconnected(): void;
+        reconnected(): void;
+        isConnected: boolean;
+        _$initialize(part: import("lit-html").Part, parent: import("lit-html").Disconnectable, attributeIndex: number | undefined): void;
+        setValue(value: unknown): void;
         get _$isConnected(): boolean;
     };
 }>;

package/dist/declarative-element/directives/on-intersect.directive.js

@@ -1,5 +1,5 @@
 import { assert, assertWrap, check } from '@augment-vir/assert';
-import { directive, Directive } from '../../lit-exports/all-lit-exports.js';
+import { AsyncDirective, directive } from '../../lit-exports/all-lit-exports.js';
 import { assertIsElementPartInfo } from './directive-helpers.js';
 const directiveName = 'onIntersect';
 /**
@@ -35,7 +35,7 @@ const directiveName = 'onIntersect';
  * });
  * ```
  */
-export const onIntersect = directive(class extends Directive {
+export const onIntersect = directive(class extends AsyncDirective {
     element;
     options;
     intersectionObserver;
@@ -86,4 +86,12 @@ export const onIntersect = directive(class extends Directive {
     render(options, callback) {
         return undefined;
     }
+    disconnected() {
+        this.intersectionObserver?.disconnect();
+    }
+    reconnected() {
+        if (this.element && this.intersectionObserver) {
+            this.intersectionObserver.observe(this.element);
+        }
+    }
 });

package/dist/declarative-element/directives/on-resize.directive.d.ts

@@ -42,6 +42,11 @@ export declare const onResize: (callback: OnResizeCallback) => import("lit-html/
         callback: OnResizeCallback | undefined;
         update(partInfo: PartInfo, [callback]: [OnResizeCallback]): undefined;
         render(callback: OnResizeCallback): undefined;
+        disconnected(): void;
+        reconnected(): void;
+        isConnected: boolean;
+        _$initialize(part: import("lit-html").Part, parent: import("lit-html").Disconnectable, attributeIndex: number | undefined): void;
+        setValue(value: unknown): void;
         get _$isConnected(): boolean;
     };
 }>;

package/dist/declarative-element/directives/on-resize.directive.js

@@ -1,4 +1,4 @@
-import { directive, Directive } from '../../lit-exports/all-lit-exports.js';
+import { AsyncDirective, directive } from '../../lit-exports/all-lit-exports.js';
 import { assertIsElementPartInfo } from './directive-helpers.js';
 const directiveName = 'onResize';
 /**
@@ -28,7 +28,7 @@ const directiveName = 'onResize';
  * });
  * ```
  */
-export const onResize = directive(class extends Directive {
+export const onResize = directive(class extends AsyncDirective {
     element;
     resizeObserver = new ResizeObserver((entries) => {
         if (this.element && this.callback) {
@@ -59,6 +59,14 @@ export const onResize = directive(class extends Directive {
     render(callback) {
         return undefined;
     }
+    disconnected() {
+        this.resizeObserver.disconnect();
+    }
+    reconnected() {
+        if (this.element) {
+            this.resizeObserver.observe(this.element);
+        }
+    }
 });
 function handleOnResizeCallback(element, callback, entries) {
     const resizeEntry = entries[0];

package/dist/declarative-element/properties/property-proxy.js

@@ -77,7 +77,7 @@ export function createElementPropertyProxy(element, shouldAlreadyExist) {
             }
             else if (isObservableBase(oldValue)) {
                 /** Clear out old listener that is no longer used. */
-                element.observablePropertyListenerMap[propertyKey] = undefined;
+                delete element.observablePropertyListenerMap[propertyKey];
             }
             setValueOnElement(newValue);
             return true;

package/dist/declarative-element/properties/string-names.d.ts

@@ -27,16 +27,14 @@ export type StringNameMap<ElementTagName extends CustomElementTagName, NameType
  */
 export declare function createStringNameMap<ElementTagName extends CustomElementTagName, NameType extends string, StringNames extends ReadonlyArray<string>>(elementTagName: ElementTagName, nameType: NameType, stringNames: StringNames | undefined): StringNameMap<ElementTagName, NameType, StringNames>;
 /**
- * Identity map of slot names. Slot names are defined with the element's tag name as a prefix, so no
- * extra string generation is required: each map key maps to itself.
- *
- * Note that if a slot name is _incorrectly_ defined without the element's tag name as the prefix,
- * then the runtime value will actually be `${ElementTagName}-slot-${Name}`.
+ * Map of slot names to their runtime values. Slot names that already start with the element's tag
+ * name are kept as-is; legacy slot names without the tag-name prefix are auto-rewritten at runtime
+ * to `${ElementTagName}-slot-${Name}` and this type reflects that.
  *
  * @category Internal
  */
-export type SlotNamesMap<SlotNames extends ReadonlyArray<string>> = Readonly<{
-    [Name in ArrayElement<SlotNames>]: Name;
+export type SlotNamesMap<ElementTagName extends string, SlotNames extends ReadonlyArray<string>> = Readonly<{
+    [Name in ArrayElement<SlotNames>]: Name extends `${ElementTagName}-${string}` ? Name : `${ElementTagName}-slot-${Name}`;
 }>;
 /**
  * Converts an array of slot names into a {@link SlotNamesMap}.
@@ -47,4 +45,4 @@ export type SlotNamesMap<SlotNames extends ReadonlyArray<string>> = Readonly<{
  *
  * @category Internal
  */
-export declare function createSlotNamesMap<ElementTagName extends CustomElementTagName, SlotNames extends ReadonlyArray<string>>(elementTagName: ElementTagName, slotNames: SlotNames | undefined): SlotNamesMap<SlotNames>;
+export declare function createSlotNamesMap<ElementTagName extends CustomElementTagName, SlotNames extends ReadonlyArray<string>>(elementTagName: ElementTagName, slotNames: SlotNames | undefined): SlotNamesMap<ElementTagName, SlotNames>;

package/dist/declarative-element/properties/styles.d.ts

@@ -38,7 +38,7 @@ export type StylesCallback<TagName extends CustomElementTagName, HostClassKeys e
 export declare function createStylesCallbackInput<TagName extends CustomElementTagName, HostClassKeys extends BaseStringName<NoInfer<TagName>>, CssVarKeys extends BaseStringName<NoInfer<TagName>>, SlotNames extends ReadonlyArray<string>>({ hostClassNames, cssVars, slotNamesMap, }: {
     hostClassNames: HostClassNamesMap<TagName, HostClassKeys>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
-    slotNamesMap: SlotNamesMap<SlotNames>;
+    slotNamesMap: SlotNamesMap<TagName, SlotNames>;
 }): StylesCallbackInput<TagName, HostClassKeys, CssVarKeys, SlotNames>;
 /**
  * Used inside of an element instance to apply host classes on each render.

package/dist/declarative-element/render-callback.d.ts

@@ -35,7 +35,7 @@ export type RenderParams<TagName extends CustomElementTagName, Inputs extends Pr
     updateState: UpdateStateCallback<State>;
     events: EventDescriptorMap<TagName, EventsInit>;
     host: DeclarativeElementHost<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
-    slotNames: SlotNamesMap<SlotNames>;
+    slotNames: SlotNamesMap<TagName, SlotNames>;
     testIds: Readonly<StringNameMap<TagName, 'test-id', TestIds>>;
     /** Dispatch an event from the current element. */
     dispatch: <EventTypeName extends keyof EventsInit>(event: TypedEvent<EventTypeName extends string ? EventTypeName : never, EventInitMapEventDetailExtractor<EventTypeName, EventsInit>> | Event) => boolean;
@@ -51,6 +51,6 @@ export declare function createRenderParams<TagName extends CustomElementTagName,
     element: DeclarativeElement<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
     eventsMap: EventDescriptorMap<TagName, EventsInit>;
     cssVars: Readonly<CssVars<TagName, CssVarKeys>>;
-    slotNamesMap: SlotNamesMap<SlotNames>;
+    slotNamesMap: SlotNamesMap<TagName, SlotNames>;
     testIdsMap: Readonly<StringNameMap<TagName, 'test-id', TestIds>>;
 }): RenderParams<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

package/dist/index.d.ts

@@ -32,7 +32,6 @@ export * from './declarative-element/properties/tag-name.js';
 export * from './declarative-element/render-callback.js';
 export * from './declarative-element/wrap-define-element.js';
 export * from './lit-exports/all-lit-exports.js';
-export * from './require-declarative-element.js';
 export * from './template-transforms/minimal-element-definition.js';
 export * from './template-transforms/vir-css/vir-css.js';
 export * from './template-transforms/vir-html/html-interpolation.js';

package/dist/index.js

@@ -32,7 +32,6 @@ export * from './declarative-element/properties/tag-name.js';
 export * from './declarative-element/render-callback.js';
 export * from './declarative-element/wrap-define-element.js';
 export * from './lit-exports/all-lit-exports.js';
-export * from './require-declarative-element.js';
 export * from './template-transforms/minimal-element-definition.js';
 export * from './template-transforms/vir-css/vir-css.js';
 export * from './template-transforms/vir-html/html-interpolation.js';

package/dist/template-transforms/vir-html/html-transform.js

@@ -1,8 +1,7 @@
 /* eslint-disable @typescript-eslint/no-deprecated */
 import { check } from '@augment-vir/assert';
-import { collapseWhiteSpace, getOrSet, safeMatch } from '@augment-vir/common';
+import { getOrSet } from '@augment-vir/common';
 import { assign } from '../../declarative-element/directives/assign.directive.js';
-import { declarativeElementRequired } from '../../require-declarative-element.js';
 import { hasTagName, isMinimalDefinitionWithInputs, } from '../minimal-element-definition.js';
 import { transformTemplate } from '../transform-template.js';
 import { tagNameKeys } from './tag-name-keys.js';
@@ -74,25 +73,6 @@ function transformHtml(...[lastNewString, currentTemplateString, rawCurrentValue
         },
     };
 }
-function extractCustomElementTags(input) {
-    const tagNameMatches = safeMatch(input, /<\/\s*[^\s><]+\s*>/g);
-    return tagNameMatches.reduce((accum, match) => {
-        const tagName = collapseWhiteSpace(match.replace(/\n/g, ' ')).replace(/<\/|>/g, '');
-        // custom elements always have a dash in them
-        if (tagName.includes('-')) {
-            return accum.concat(tagName);
-        }
-        return accum;
-    }, []);
-}
-function stringValidator(input) {
-    if (declarativeElementRequired) {
-        const customElementTagNames = extractCustomElementTags(input);
-        if (customElementTagNames.length) {
-            console.error(`Custom element tags must be interpolated from declarative elements: ${customElementTagNames.join(', ')}`);
-        }
-    }
-}
 export function transformHtmlTemplate(litTemplate) {
-    return transformTemplate(litTemplate.strings, litTemplate.values, transformHtml, stringValidator);
+    return transformTemplate(litTemplate.strings, litTemplate.values, transformHtml);
 }

package/package.json

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

package/dist/readme-examples/my-app.element.d.ts

@@ -1 +0,0 @@
-export declare const MyApp: import("element-vir").DeclarativeElementDefinition<"my-app", {}, {}, {}, "my-app-", "my-app-", readonly [], readonly []>;

package/dist/readme-examples/my-app.element.js

@@ -1,12 +0,0 @@
-import { defineElement } from 'element-vir';
-import { html } from '../index.js';
-import { MySimple } from './my-simple.element.js';
-export const MyApp = defineElement()({
-    tagName: 'my-app',
-    render() {
-        return html `
-            <h1>My App</h1>
-            <${MySimple}></${MySimple}>
-        `;
-    },
-});

package/dist/readme-examples/my-custom-action.event.d.ts

@@ -1 +0,0 @@
-export declare const MyCustomActionEvent: import("../index.js").DefinedTypedEvent<"my-custom-action", number>;

package/dist/readme-examples/my-custom-action.event.js

@@ -1,2 +0,0 @@
-import { defineTypedEvent } from '../index.js';
-export const MyCustomActionEvent = defineTypedEvent()('my-custom-action');

package/dist/readme-examples/my-custom-define.d.ts

@@ -1,4 +0,0 @@
-export type VirTagName = `vir-${string}`;
-export declare const defineVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
-export declare const defineVerifiedVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;
-export declare const defineTransformedVirElement: <Inputs extends {}>(...errorParams: import("../index.js").DeclarativeElementInputErrorParams<Inputs>) => <const TagName extends `vir-${string}`, State extends {}, EventsInit extends {}, const HostClassKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const CssVarKeys extends import("../index.js").BaseStringName<TagName> = `${TagName}-`, const SlotNames extends ReadonlyArray<string> = Readonly<[]>, const TestIds extends ReadonlyArray<string> = Readonly<[]>>(inputs: import("../index.js").DeclarativeElementInit<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>) => import("../index.js").DeclarativeElementDefinition<TagName, Inputs, State, EventsInit, HostClassKeys, CssVarKeys, SlotNames, TestIds>;

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

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

package/dist/readme-examples/my-simple.element.d.ts

@@ -1 +0,0 @@
-export declare const MySimple: import("element-vir").DeclarativeElementDefinition<"my-simple", {}, {}, {}, "my-simple-", "my-simple-", readonly [], readonly []>;

package/dist/readme-examples/my-simple.element.js

@@ -1,10 +0,0 @@
-import { defineElement } from 'element-vir';
-import { html } from '../index.js';
-export const MySimple = defineElement()({
-    tagName: 'my-simple',
-    render() {
-        return html `
-            <span>Hello there!</span>
-        `;
-    },
-});

package/dist/readme-examples/my-with-assignment.element.d.ts

@@ -1 +0,0 @@
-export declare const MyWithAssignment: import("element-vir").DeclarativeElementDefinition<"my-with-assignment", {}, {}, {}, "my-with-assignment-", "my-with-assignment-", readonly [], readonly []>;

package/dist/readme-examples/my-with-assignment.element.js

@@ -1,15 +0,0 @@
-import { defineElement } from 'element-vir';
-import { html } from '../index.js';
-import { MyWithInputs } from './my-with-inputs.element.js';
-export const MyWithAssignment = defineElement()({
-    tagName: 'my-with-assignment',
-    render() {
-        return html `
-            <h1>My App</h1>
-            <${MyWithInputs.assign({
-            email: 'user@example.com',
-            username: 'user',
-        })}></${MyWithInputs}>
-        `;
-    },
-});

package/dist/readme-examples/my-with-async-prop.element.d.ts

@@ -1,10 +0,0 @@
-type EndpointData = number[];
-export declare const MyWithAsyncProp: import("../index.js").DeclarativeElementDefinition<"my-with-async-prop", {
-    endpoint: string;
-}, {
-    data: import("../index.js").AsyncProp<EndpointData, {
-        endpoint: string;
-    }>;
-    hi: string;
-}, {}, "my-with-async-prop-", "my-with-async-prop-", readonly [], readonly []>;
-export {};

package/dist/readme-examples/my-with-async-prop.element.js

@@ -1,49 +0,0 @@
-import { asyncProp, defineElement, html, listen, renderAsync } from '../index.js';
-async function loadSomething(endpoint) {
-    // load something from the network
-    const data = await (await fetch([
-        '',
-        'api',
-        endpoint,
-    ].join('/'))).json();
-    return data;
-}
-export const MyWithAsyncProp = defineElement()({
-    tagName: 'my-with-async-prop',
-    state() {
-        return {
-            data: asyncProp({
-                async updateCallback({ endpoint }) {
-                    return loadSomething(endpoint);
-                },
-            }),
-            hi: '',
-        };
-    },
-    render({ inputs, state }) {
-        /**
-         * This causes the a promise which automatically updates the state.data prop once the
-         * promise resolves. It only creates a new promise if the first input, the trigger, value
-         * changes from previous calls.
-         */
-        state.data.update(inputs);
-        return html `
-            Here's the data:
-            <br />
-            ${renderAsync(state.data, 'Loading...', (loadedData) => {
-            return html `
-                    Got the data: ${loadedData}
-                `;
-        })}
-            <br />
-            <button
-                ${listen('click', () => {
-            /** You can force asyncProp to update by calling forceUpdate. */
-            state.data.forceUpdate(inputs);
-        })}
-            >
-                Refresh
-            </button>
-        `;
-    },
-});

package/dist/readme-examples/my-with-cleanup-callback.element.d.ts

@@ -1,3 +0,0 @@
-export declare const MyWithAssignmentCleanupCallback: import("element-vir").DeclarativeElementDefinition<"my-with-cleanup-callback", {}, {
-    intervalId: number;
-}, {}, "my-with-cleanup-callback-", "my-with-cleanup-callback-", readonly [], readonly []>;

package/dist/readme-examples/my-with-cleanup-callback.element.js

@@ -1,18 +0,0 @@
-import { defineElement } from 'element-vir';
-import { html } from '../index.js';
-export const MyWithAssignmentCleanupCallback = defineElement()({
-    tagName: 'my-with-cleanup-callback',
-    state() {
-        return {
-            intervalId: window.setInterval(() => console.info('hi'), 1000),
-        };
-    },
-    render() {
-        return html `
-            <h1>My App</h1>
-        `;
-    },
-    cleanup({ state }) {
-        window.clearInterval(state.intervalId);
-    },
-});

package/dist/readme-examples/my-with-css-vars.element.d.ts

@@ -1 +0,0 @@
-export declare const MyWithCssVars: import("element-vir").DeclarativeElementDefinition<"my-with-css-vars", {}, {}, {}, "my-with-css-vars-", "my-with-css-vars-my-var", readonly [], readonly []>;

package/dist/readme-examples/my-with-css-vars.element.js

@@ -1,25 +0,0 @@
-import { defineElement } from 'element-vir';
-import { css, html } from '../index.js';
-export const MyWithCssVars = defineElement()({
-    tagName: 'my-with-css-vars',
-    cssVars: {
-        /** The value assigned here ('blue') becomes the fallback value for this CSS var. */
-        'my-with-css-vars-my-var': 'blue',
-    },
-    styles: ({ cssVars }) => css `
-        :host {
-            /*
-                Set CSS vars (or reference the name directly) via the ".name" property
-            */
-            ${cssVars['my-with-css-vars-my-var'].name}: yellow;
-            /*
-                Use CSS vars with the ".value" property. This includes a "var" wrapper and the
-                assigned fallback value (which in this case is 'blue').
-            */
-            color: ${cssVars['my-with-css-vars-my-var'].value};
-        }
-    `,
-    render() {
-        return html ``;
-    },
-});

package/dist/readme-examples/my-with-custom-events.element.d.ts

@@ -1 +0,0 @@
-export declare const MyWithCustomEvents: import("element-vir").DeclarativeElementDefinition<"my-with-custom-events", {}, {}, {}, "my-with-custom-events-", "my-with-custom-events-", readonly [], readonly []>;

package/dist/readme-examples/my-with-custom-events.element.js

@@ -1,25 +0,0 @@
-import { randomInteger } from '@augment-vir/common';
-import { defineElement } from 'element-vir';
-import { html, listen } from '../index.js';
-import { MyCustomActionEvent } from './my-custom-action.event.js';
-export const MyWithCustomEvents = defineElement()({
-    tagName: 'my-with-custom-events',
-    render({ dispatch }) {
-        return html `
-            <div
-                ${listen(MyCustomActionEvent, (event) => {
-            console.info(`Got a number! ${event.detail}`);
-        })}
-            >
-                <div
-                    ${listen('click', () => {
-            dispatch(new MyCustomActionEvent(randomInteger({
-                min: 0,
-                max: 1_000_000,
-            })));
-        })}
-                ></div>
-            </div>
-        `;
-    },
-});

package/dist/readme-examples/my-with-event-listening.element.d.ts

@@ -1,3 +0,0 @@
-export declare const MyWithEventListening: import("element-vir").DeclarativeElementDefinition<"my-with-event-listening", {}, {
-    myNumber: number;
-}, {}, "my-with-event-listening-", "my-with-event-listening-", readonly [], readonly []>;

package/dist/readme-examples/my-with-event-listening.element.js

@@ -1,27 +0,0 @@
-import { defineElement } from 'element-vir';
-import { html, listen } from '../index.js';
-import { MyWithEvents } from './my-with-events.element.js';
-export const MyWithEventListening = defineElement()({
-    tagName: 'my-with-event-listening',
-    state() {
-        return {
-            myNumber: -1,
-        };
-    },
-    render({ state, updateState }) {
-        return html `
-            <h1>My App</h1>
-            <${MyWithEvents}
-                ${listen(MyWithEvents.events.logoutClick, () => {
-            console.info('logout triggered');
-        })}
-                ${listen(MyWithEvents.events.randomNumber, (event) => {
-            updateState({
-                myNumber: event.detail,
-            });
-        })}
-            ></${MyWithEvents}>
-            <span>${state.myNumber}</span>
-        `;
-    },
-});

package/dist/readme-examples/my-with-events.element.d.ts

@@ -1,4 +0,0 @@
-export declare const MyWithEvents: import("element-vir").DeclarativeElementDefinition<"my-with-events", {}, {}, {
-    logoutClick: import("element-vir").DefineEvent<void>;
-    randomNumber: import("element-vir").DefineEvent<number>;
-}, "my-with-events-", "my-with-events-", readonly [], readonly []>;

package/dist/readme-examples/my-with-events.element.js

@@ -1,23 +0,0 @@
-import { randomInteger } from '@augment-vir/common';
-import { defineElement } from 'element-vir';
-import { defineElementEvent, html, listen } from '../index.js';
-export const MyWithEvents = defineElement()({
-    tagName: 'my-with-events',
-    events: {
-        logoutClick: defineElementEvent(),
-        randomNumber: defineElementEvent(),
-    },
-    render({ dispatch, events }) {
-        return html `
-            <button ${listen('click', () => dispatch(new events.logoutClick()))}>log out</button>
-            <button
-                ${listen('click', () => dispatch(new events.randomNumber(randomInteger({
-            min: 0,
-            max: 1_000_000,
-        }))))}
-            >
-                generate random number
-            </button>
-        `;
-    },
-});

package/dist/readme-examples/my-with-host-class-definition.element.d.ts

@@ -1,3 +0,0 @@
-export declare const MyWithHostClassDefinition: import("element-vir").DeclarativeElementDefinition<"my-with-host-class-definition", {}, {
-    myProp: string;
-}, {}, "my-with-host-class-definition-a" | "my-with-host-class-definition-automatic", "my-with-host-class-definition-", readonly [], readonly []>;

package/dist/readme-examples/my-with-host-class-definition.element.js

@@ -1,42 +0,0 @@
-import { defineElement } from 'element-vir';
-import { css, html } from '../index.js';
-export const MyWithHostClassDefinition = defineElement()({
-    tagName: 'my-with-host-class-definition',
-    state() {
-        return {
-            myProp: 'hello there',
-        };
-    },
-    hostClasses: {
-        /**
-         * Setting the value to false means this host class will never be automatically applied. It
-         * will simply be a static member on the element for manual application in consumers.
-         */
-        'my-with-host-class-definition-a': false,
-        /**
-         * This host class will be automatically applied if the given callback is evaluated to true
-         * after a call to render.
-         */
-        'my-with-host-class-definition-automatic': ({ state }) => {
-            return state.myProp === 'foo';
-        },
-    },
-    /**
-     * Apply styles to the host classes by using a callback for "styles". The callback's argument
-     * contains the host classes defined above in the "hostClasses" property.
-     */
-    styles: ({ hostClasses }) => css `
-        ${hostClasses['my-with-host-class-definition-automatic'].selector} {
-            color: blue;
-        }
-
-        ${hostClasses['my-with-host-class-definition-a'].selector} {
-            color: red;
-        }
-    `,
-    render({ state }) {
-        return html `
-            ${state.myProp}
-        `;
-    },
-});

package/dist/readme-examples/my-with-host-class-usage.element.d.ts

@@ -1 +0,0 @@
-export declare const MyWithHostClassUsage: import("element-vir").DeclarativeElementDefinition<"my-with-host-class-usage", {}, {}, {}, "my-with-host-class-usage-", "my-with-host-class-usage-", readonly [], readonly []>;

package/dist/readme-examples/my-with-host-class-usage.element.js

@@ -1,13 +0,0 @@
-import { defineElement } from 'element-vir';
-import { html } from '../index.js';
-import { MyWithHostClassDefinition } from './my-with-host-class-definition.element.js';
-export const MyWithHostClassUsage = defineElement()({
-    tagName: 'my-with-host-class-usage',
-    render() {
-        return html `
-            <${MyWithHostClassDefinition}
-                class=${MyWithHostClassDefinition.hostClasses['my-with-host-class-definition-a']}
-            ></${MyWithHostClassDefinition}>
-        `;
-    },
-});

package/dist/readme-examples/my-with-inputs.element.d.ts

@@ -1,4 +0,0 @@
-export declare const MyWithInputs: import("../index.js").DeclarativeElementDefinition<"my-with-inputs", {
-    username: string;
-    email: string;
-}, {}, {}, "my-with-inputs-", "my-with-inputs-", readonly [], readonly []>;

package/dist/readme-examples/my-with-inputs.element.js

@@ -1,9 +0,0 @@
-import { defineElement, html } from '../index.js';
-export const MyWithInputs = defineElement()({
-    tagName: 'my-with-inputs',
-    render({ inputs }) {
-        return html `
-            <span>Hello there ${inputs.username}!</span>
-        `;
-    },
-});

package/dist/readme-examples/my-with-on-dom-created.element.d.ts

@@ -1 +0,0 @@
-export declare const MyWithOnDomCreated: import("element-vir").DeclarativeElementDefinition<"my-with-on-dom-created", {}, {}, {}, "my-with-on-dom-created-", "my-with-on-dom-created-", readonly [], readonly []>;

package/dist/readme-examples/my-with-on-dom-created.element.js

@@ -1,17 +0,0 @@
-import { defineElement } from 'element-vir';
-import { html, onDomCreated } from '../index.js';
-export const MyWithOnDomCreated = defineElement()({
-    tagName: 'my-with-on-dom-created',
-    render() {
-        return html `
-            <span
-                ${onDomCreated((element) => {
-            // logs a span element
-            console.info(element);
-        })}
-            >
-                Hello there!
-            </span>
-        `;
-    },
-});

package/dist/readme-examples/my-with-on-resize.element.d.ts

@@ -1 +0,0 @@
-export declare const MyWithOnResize: import("element-vir").DeclarativeElementDefinition<"my-with-on-resize", {}, {}, {}, "my-with-on-resize-", "my-with-on-resize-", readonly [], readonly []>;

package/dist/readme-examples/my-with-on-resize.element.js

@@ -1,18 +0,0 @@
-import { defineElement } from 'element-vir';
-import { html, onResize } from '../index.js';
-export const MyWithOnResize = defineElement()({
-    tagName: 'my-with-on-resize',
-    render() {
-        return html `
-            <span
-                ${onResize((entry) => {
-            // this will track resizing of this span
-            // the entry parameter contains target and contentRect properties
-            console.info(entry);
-        })}
-            >
-                Hello there!
-            </span>
-        `;
-    },
-});

package/dist/readme-examples/my-with-render-if.element.d.ts

@@ -1,3 +0,0 @@
-export declare const MyWithRenderIf: import("../index.js").DeclarativeElementDefinition<"my-with-render-if", {
-    shouldRender: boolean;
-}, {}, {}, "my-with-render-if-", "my-with-render-if-", readonly [], readonly []>;

package/dist/readme-examples/my-with-render-if.element.js

@@ -1,11 +0,0 @@
-import { defineElement, html, renderIf } from '../index.js';
-export const MyWithRenderIf = defineElement()({
-    tagName: 'my-with-render-if',
-    render({ inputs }) {
-        return html `
-            ${renderIf(inputs.shouldRender, html `
-                    I'm conditionally rendered!
-                `)}
-        `;
-    },
-});

package/dist/readme-examples/my-with-styles-and-interpolated-selector.element.d.ts

@@ -1 +0,0 @@
-export declare const MyWithStylesAndInterpolatedSelector: import("element-vir").DeclarativeElementDefinition<"my-with-styles-and-interpolated-selector", {}, {}, {}, "my-with-styles-and-interpolated-selector-", "my-with-styles-and-interpolated-selector-", readonly [], readonly []>;

package/dist/readme-examples/my-with-styles-and-interpolated-selector.element.js

@@ -1,16 +0,0 @@
-import { defineElement } from 'element-vir';
-import { css, html } from '../index.js';
-import { MySimple } from './my-simple.element.js';
-export const MyWithStylesAndInterpolatedSelector = defineElement()({
-    tagName: 'my-with-styles-and-interpolated-selector',
-    styles: css `
-        ${MySimple} {
-            background-color: blue;
-        }
-    `,
-    render() {
-        return html `
-            <${MySimple}></${MySimple}>
-        `;
-    },
-});

package/dist/readme-examples/my-with-styles.element.d.ts

@@ -1 +0,0 @@
-export declare const MyWithStyles: import("element-vir").DeclarativeElementDefinition<"my-with-styles", {}, {}, {}, "my-with-styles-", "my-with-styles-", readonly [], readonly []>;

package/dist/readme-examples/my-with-styles.element.js

@@ -1,22 +0,0 @@
-import { defineElement } from 'element-vir';
-import { css, html } from '../index.js';
-export const MyWithStyles = defineElement()({
-    tagName: 'my-with-styles',
-    styles: css `
-        :host {
-            display: flex;
-            flex-direction: column;
-            font-family: sans-serif;
-        }
-
-        span + span {
-            margin-top: 16px;
-        }
-    `,
-    render() {
-        return html `
-            <span>Hello there!</span>
-            <span>How are you doing?</span>
-        `;
-    },
-});

package/dist/readme-examples/my-with-update-state.element.d.ts

@@ -1,8 +0,0 @@
-export declare const MyWithUpdateState: import("element-vir").DeclarativeElementDefinition<"my-with-update-state", {}, {
-    username: string;
-    /**
-     * Use "as" to create state properties that can be types other than the initial value's
-     * type. This is particularly useful when, as below, the initial value is undefined.
-     */
-    email: string | undefined;
-}, {}, "my-with-update-state-", "my-with-update-state-", readonly [], readonly []>;

package/dist/readme-examples/my-with-update-state.element.js

@@ -1,28 +0,0 @@
-import { defineElement } from 'element-vir';
-import { html, listen } from '../index.js';
-export const MyWithUpdateState = defineElement()({
-    tagName: 'my-with-update-state',
-    state() {
-        return {
-            username: 'dev',
-            /**
-             * Use "as" to create state properties that can be types other than the initial value's
-             * type. This is particularly useful when, as below, the initial value is undefined.
-             */
-            email: undefined,
-        };
-    },
-    render({ state, updateState }) {
-        return html `
-            <span
-                ${listen('click', () => {
-            updateState({
-                username: 'new name!',
-            });
-        })}
-            >
-                Hello there ${state.username}!
-            </span>
-        `;
-    },
-});

package/dist/readme-examples/require-declarative-element.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/readme-examples/require-declarative-element.js

@@ -1,2 +0,0 @@
-import { requireAllCustomElementsToBeDeclarativeElements } from '../index.js';
-requireAllCustomElementsToBeDeclarativeElements();

package/dist/require-declarative-element.d.ts

@@ -1,14 +0,0 @@
-/**
- * Set by {@link requireAllCustomElementsToBeDeclarativeElements} and read in the HTML tagged
- * template function.
- *
- * @category Internal
- */
-export declare let declarativeElementRequired: boolean;
-/**
- * Calling this requires all custom element children to be declarative elements defined by
- * element-vir.
- *
- * @category Util
- */
-export declare function requireAllCustomElementsToBeDeclarativeElements(): void;

package/dist/require-declarative-element.js

@@ -1,16 +0,0 @@
-/**
- * Set by {@link requireAllCustomElementsToBeDeclarativeElements} and read in the HTML tagged
- * template function.
- *
- * @category Internal
- */
-export let declarativeElementRequired = false;
-/**
- * Calling this requires all custom element children to be declarative elements defined by
- * element-vir.
- *
- * @category Util
- */
-export function requireAllCustomElementsToBeDeclarativeElements() {
-    declarativeElementRequired = true;
-}