element-vir 26.12.0 → 26.12.1

package/dist/typed-event/typed-event.js

@@ -0,0 +1,50 @@
+/**
+ * A custom event with strict types for details and the event's `type` property.
+ *
+ * @category Internal
+ */
+export class TypedEvent extends CustomEvent {
+    _type = '';
+    get type() {
+        return this._type;
+    }
+    constructor(type, value) {
+        super(typeof type === 'string' ? type : type.type, {
+            detail: value,
+            bubbles: true,
+            composed: true,
+        });
+    }
+}
+/**
+ * Define a stand-alone typed event that can be emitted and listened to inside of HTML templates.
+ *
+ * Make sure to use currying and call this function twice! (This is required by TypeScript's type
+ * parameter inference system.)
+ *
+ * @category Element Definition
+ * @example
+ *
+ * ```ts
+ * import {defineTypedEvent} from 'element-vir';
+ *
+ * const myCustomEvent = defineTypedEvent<number>()('my-custom-event');
+ *
+ * const myCustomEvent2 = defineTypedEvent<// the event's `.detail` type
+ * number>()(
+ *     // the event's `.type` string
+ *     'my-custom-event2',
+ * );
+ * ```
+ */
+export function defineTypedEvent() {
+    return (eventType) => {
+        return class extends TypedEvent {
+            static type = eventType;
+            _type = eventType;
+            constructor(value) {
+                super(eventType, value);
+            }
+        };
+    };
+}

package/dist/util/array.d.ts

@@ -0,0 +1,5 @@
+export type ArrayInsertion<T> = {
+    index: number;
+    values: ReadonlyArray<T>;
+};
+export declare function insertAndRemoveValues<Entry>(originalArray: ReadonlyArray<Entry>, valuesToInsert: ReadonlyArray<ArrayInsertion<Entry>>, indexesToRemove: ReadonlyArray<number>): Entry[];

package/{src/util/array.ts → dist/util/array.js}

@@ -1,34 +1,23 @@
-export type ArrayInsertion<T> = {index: number; values: ReadonlyArray<T>};
-
-export function insertAndRemoveValues<Entry>(
-    originalArray: ReadonlyArray<Entry>,
-    valuesToInsert: ReadonlyArray<ArrayInsertion<Entry>>,
-    indexesToRemove: ReadonlyArray<number>,
-): Entry[] {
-    const noOperations: boolean = !valuesToInsert.length && !indexesToRemove.length;
-    const nothingToDoBecauseEmptyArray: boolean = originalArray.length
+export function insertAndRemoveValues(originalArray, valuesToInsert, indexesToRemove) {
+    const noOperations = !valuesToInsert.length && !indexesToRemove.length;
+    const nothingToDoBecauseEmptyArray = originalArray.length
         ? false
         : !valuesToInsert.filter((value) => !!value.index).length;
-
     if (noOperations || nothingToDoBecauseEmptyArray) {
         // there's nothing to do
         return [...originalArray];
     }
-
-    const arrayValues: Entry[][] = originalArray.map((entry) => {
+    const arrayValues = originalArray.map((entry) => {
         return [entry];
     });
-
     if (!arrayValues.length) {
         arrayValues[0] = [];
     }
-
     indexesToRemove.forEach((index) => {
         if (index >= 0 && index < originalArray.length) {
             arrayValues[index] = [];
         }
     });
-
     valuesToInsert.forEach((valueWrapper) => {
         const indexEntry = arrayValues[valueWrapper.index];
         if (indexEntry) {
@@ -36,8 +25,6 @@ export function insertAndRemoveValues<Entry>(
             indexEntry.splice(0, 0, ...valueWrapper.values);
         }
     });
-
-    const finalArray: Entry[] = arrayValues.flat();
-
+    const finalArray = arrayValues.flat();
     return finalArray;
 }

package/{src/util/increment.ts → dist/util/increment.d.ts}

@@ -1,6 +1,5 @@
-import {type ArrayElement} from '@augment-vir/common';
-import {type IsNever} from 'type-fest';
-
+import { type ArrayElement } from '@augment-vir/common';
+import { type IsNever } from 'type-fest';
 /**
  * The largest number in this tuple is the largest number of nestings of the same element that
  * `element-vir` will support with types (in runtime it'll support any level of nesting the same
@@ -39,36 +38,18 @@ export type Incrementable = [
     27,
     28,
     29,
-    30,
+    30
 ];
-
 /**
  * Increments the given number. If an invalid type parameter is given, it is treated as `0` and this
  * will output `1`. If the upper bound of increments has been reached, this will output `never`.
  *
  * @category Internal
  */
-export type Increment<T> =
-    IsNever<Extract<ArrayElement<Incrementable>, T>> extends true
-        ? IsNever<T> extends true
-            ? 1
-            : never
-        : Incrementable extends [any, ...infer Rest]
-          ? T extends keyof Rest
-              ? Rest[T] extends undefined
-                  ? never
-                  : Rest[T]
-              : 1
-          : 1;
-
+export type Increment<T> = IsNever<Extract<ArrayElement<Incrementable>, T>> extends true ? IsNever<T> extends true ? 1 : never : Incrementable extends [any, ...infer Rest] ? T extends keyof Rest ? Rest[T] extends undefined ? never : Rest[T] : 1 : 1;
 /**
  * Decrements the given number. If an invalid type parameter is given, `never` is the output.
  *
  * @category Internal
  */
-export type Decrement<T> =
-    IsNever<Extract<ArrayElement<Incrementable>, T>> extends true
-        ? never
-        : T extends keyof Incrementable
-          ? [never, ...Incrementable][T]
-          : never;
+export type Decrement<T> = IsNever<Extract<ArrayElement<Incrementable>, T>> extends true ? never : T extends keyof Incrementable ? [never, ...Incrementable][T] : never;

package/dist/util/increment.js

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

package/dist/util/lit-template.d.ts

@@ -0,0 +1,9 @@
+import { type TemplateResult, type unsafeHTML, type unsafeSVG } from '../lit-exports/all-lit-exports.js';
+/**
+ * Converts an HTML or SVG template into a raw string.
+ *
+ * @category Util
+ */
+export declare function convertTemplateToString(template: TemplateResult | ReturnType<typeof unsafeSVG> | ReturnType<typeof unsafeHTML> | {
+    templateString: string;
+}): string;

package/{src/util/lit-template.ts → dist/util/lit-template.js}

@@ -1,62 +1,42 @@
-import {collapseWhiteSpace} from '@augment-vir/common';
-import {
-    type TemplateResult,
-    type unsafeHTML,
-    type unsafeSVG,
-} from '../lit-exports/all-lit-exports.js';
-
+import { collapseWhiteSpace } from '@augment-vir/common';
 /**
  * Converts an HTML or SVG template into a raw string.
  *
  * @category Util
  */
-export function convertTemplateToString(
-    template:
-        | TemplateResult
-        | ReturnType<typeof unsafeSVG>
-        | ReturnType<typeof unsafeHTML>
-        | {templateString: string},
-): string {
+export function convertTemplateToString(template) {
     if ('templateString' in template) {
         return template.templateString;
     }
-
-    const {strings, values} = template as
-        | TemplateResult
-        | {
-              strings: undefined | string[];
-              values: undefined | unknown[];
-          };
-
+    const { strings, values } = template;
     if (!strings?.length && !values?.length) {
         return '';
     }
-
     const valueList = [
         ...(values || []),
         '', // this last empty string is so it's easier to deal with indexes
     ];
     const stringsList = strings ?? [''];
-
     const all = stringsList.map((stringValue, index) => {
         const value = extractValue(stringValue, valueList[index]);
         return `${stringValue}${value}`;
     });
-
     return collapseWhiteSpace(all.join(''));
 }
-
-function extractValue(previousString: string, value: any) {
+function extractValue(previousString, value) {
     if (value._$litType$ != undefined || value._$litDirective$ != undefined) {
         // nested templates
         return convertTemplateToString(value);
-    } else if (Array.isArray(value)) {
+    }
+    else if (Array.isArray(value)) {
         // array of strings or templates.
         const values = value.map((innerValue) => convertTemplateToString(innerValue));
         return values.join('');
-    } else if (previousString.endsWith('=')) {
+    }
+    else if (previousString.endsWith('=')) {
         return `"${value}"`;
-    } else {
+    }
+    else {
         return value;
     }
 }

package/dist/util/map-async-value.d.ts

@@ -0,0 +1,7 @@
+import { type AsyncValue } from 'observavir';
+/**
+ * Maps an async value to a new async value.
+ *
+ * @category Util
+ */
+export declare function mapAsyncValue<const OriginalValue, const MappedValue>(asyncValue: AsyncValue<OriginalValue>, mapper: (value: NoInfer<OriginalValue>) => MappedValue): AsyncValue<MappedValue>;

package/{src/util/map-async-value.ts → dist/util/map-async-value.js}

@@ -1,32 +1,30 @@
-import {isNotNoUpdate, type AsyncValue} from 'observavir';
-
+import { isNotNoUpdate } from 'observavir';
 /**
  * Maps an async value to a new async value.
  *
  * @category Util
  */
-export function mapAsyncValue<const OriginalValue, const MappedValue>(
-    asyncValue: AsyncValue<OriginalValue>,
-    mapper: (value: NoInfer<OriginalValue>) => MappedValue,
-): AsyncValue<MappedValue> {
+export function mapAsyncValue(asyncValue, mapper) {
     if (asyncValue instanceof Error) {
         return asyncValue;
-    } else if (asyncValue instanceof Promise) {
+    }
+    else if (asyncValue instanceof Promise) {
         return asyncValue.then((value) => {
             const mapped = mapper(value);
-
             if (isNotNoUpdate(mapped)) {
                 return mapped;
-            } else {
+            }
+            else {
                 throw new Error('Cannot map to no update.');
             }
         });
-    } else {
+    }
+    else {
         const mapped = mapper(asyncValue);
-
         if (isNotNoUpdate(mapped)) {
             return mapped;
-        } else {
+        }
+        else {
             throw new Error('Cannot map to no update.');
         }
     }

package/dist/util/type.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "26.12.0",
+    "version": "26.12.1",
     "keywords": [
         "custom",
         "web",
@@ -27,9 +27,9 @@
     },
     "sideEffects": false,
     "type": "module",
-    "main": "src/index.ts",
-    "module": "src/index.ts",
-    "types": "src/index.ts",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
     "scripts": {
         "build": "npm run docs",
         "compile": "virmator compile",

package/src/declarative-element/declarative-element-init.ts

@@ -1,115 +0,0 @@
-import {type CSSResult} from '../lit-exports/base-lit-exports.js';
-import {type CustomElementTagName} from './custom-tag-name.js';
-import {type DeclarativeElementDefinitionOptions} from './definition-options.js';
-import {type CssVarsInitMap} from './properties/css-vars.js';
-import {type EventsInitMap} from './properties/element-events.js';
-import {type PropertyInitMapBase} from './properties/element-properties.js';
-import {type HostClassesInitMap} from './properties/host-classes.js';
-import {type BaseStringName} from './properties/string-names.js';
-import {type StylesCallback} from './properties/styles.js';
-import {type InitCallback, type RenderCallback, type RenderParams} from './render-callback.js';
-
-/**
- * Initialization for an element-vir declarative element. This defines all the pieces required for
- * rendering the element.
- *
- * @category Internal
- */
-export type DeclarativeElementInit<
-    TagName extends CustomElementTagName,
-    Inputs extends PropertyInitMapBase,
-    State extends PropertyInitMapBase,
-    EventsInit extends EventsInitMap,
-    HostClassKeys extends BaseStringName<TagName>,
-    CssVarKeys extends BaseStringName<TagName>,
-    SlotNames extends ReadonlyArray<string>,
-    TestIds extends ReadonlyArray<string>,
-> = {
-    /**
-     * HTML tag name. This should not be used directly, as interpolating it with the html tagged
-     * template from this package is preferred.
-     */
-    tagName: TagName;
-    /** Static styles. These should not and cannot change. */
-    styles?: CSSResult | StylesCallback<TagName, HostClassKeys, CssVarKeys> | undefined;
-    /** Events that the element can dispatch. (These can be thought of as "outputs".) */
-    events?: EventsInit | undefined;
-    slotNames?: SlotNames | undefined;
-    testIds?: TestIds | undefined;
-    /**
-     * HTML host classes. Values can be callbacks to determine when a host class should be defined,
-     * based on current instance state or inputs, or just false to indicate that the host class will
-     * only be manually set.
-     */
-    hostClasses?: HostClassesInitMap<TagName, HostClassKeys, Inputs, State> | undefined;
-    /**
-     * CSS Vars for the component. Keys of this object should be kebab-case and start with the
-     * element's tag name.
-     *
-     * Values of this object represent the default fallback value for the given CSS var. These are
-     * then passed to the styles property, which must be a callback to take advantage of these.
-     */
-    cssVars?: CssVarsInitMap<TagName, CssVarKeys>;
-    /**
-     * Make sure to define this at the top of your element init object or TypeScript will fail to
-     * infer the element's state type.
-     *
-     * Setup the element's initial state. This is only called once per element instance, before the
-     * first render. The return type of this method becomes the element's state type.
-     */
-    state?: (
-        params: Omit<
-            RenderParams<
-                TagName,
-                Inputs,
-                any,
-                EventsInit,
-                HostClassKeys,
-                CssVarKeys,
-                SlotNames,
-                TestIds
-            >,
-            'state' | 'updateState'
-        >,
-    ) => Extract<keyof State, keyof HTMLElement> extends never
-        ? Extract<keyof State, keyof Inputs> extends never
-            ? State
-            : `ERROR: Cannot define an element state property that clashes with input properties: ${Extract<keyof State, keyof Inputs> extends string | number | bigint | boolean | null | undefined ? Extract<keyof State, keyof Inputs> : ''}`
-        : `ERROR: Cannot define an element state property that clashes with native HTMLElement properties: ${Extract<keyof State, keyof HTMLElement>}`;
-    /** Called as part of the first render call, before the first render call. */
-    init?:
-        | InitCallback<
-              TagName,
-              Inputs,
-              State,
-              EventsInit,
-              HostClassKeys,
-              CssVarKeys,
-              SlotNames,
-              TestIds
-          >
-        | undefined;
-    render: RenderCallback<
-        TagName,
-        Inputs,
-        State,
-        EventsInit,
-        HostClassKeys,
-        CssVarKeys,
-        SlotNames,
-        TestIds
-    >;
-    cleanup?:
-        | InitCallback<
-              TagName,
-              Inputs,
-              State,
-              EventsInit,
-              HostClassKeys,
-              CssVarKeys,
-              SlotNames,
-              TestIds
-          >
-        | undefined;
-    options?: Partial<DeclarativeElementDefinitionOptions> | undefined;
-};