element-vir 5.1.1 → 5.3.0

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

@@ -0,0 +1,41 @@
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { createEventDescriptorMap } from './element-events';
+import { createPropertyDescriptorMap, createPropertyProxy, } from './element-properties';
+import { FunctionalElementBaseClass, } from './functional-element';
+import { createRenderParams } from './render-callback';
+export function defineFunctionalElement(functionalElementInit) {
+    const eventsMap = createEventDescriptorMap(functionalElementInit.events);
+    const anonymousClass = class extends FunctionalElementBaseClass {
+        static tagName = functionalElementInit.tagName;
+        static styles = functionalElementInit.styles || css ``;
+        createRenderParams() {
+            return createRenderParams(this, eventsMap);
+        }
+        static initInput = functionalElementInit;
+        static events = eventsMap;
+        static renderCallback = functionalElementInit.renderCallback;
+        static props = createPropertyDescriptorMap(functionalElementInit.props);
+        initCalled = false;
+        render() {
+            const renderParams = this.createRenderParams();
+            if (!this.initCalled && functionalElementInit.initCallback) {
+                this.initCalled = true;
+                functionalElementInit.initCallback(renderParams);
+            }
+            return functionalElementInit.renderCallback(renderParams);
+        }
+        instanceProps = createPropertyProxy(functionalElementInit.props, this);
+        constructor() {
+            super();
+            const initProps = functionalElementInit.props || {};
+            Object.keys(initProps).forEach((propName) => {
+                const functionalElementInstance = this;
+                property()(functionalElementInstance, propName);
+                functionalElementInstance[propName] = initProps[propName];
+            });
+        }
+    };
+    window.customElements.define(functionalElementInit.tagName, anonymousClass);
+    return anonymousClass;
+}

package/dist/{esm/functional-element → functional-element}/directives/assign-with-clean-up.directive.js

@@ -10,6 +10,9 @@ export function assignWithCleanup(propertyDescriptor, value, cleanupCallback) {
     return assignWithCleanupDirective(propertyDescriptor.propName, value, cleanupCallback);
 }
 class AssignWithCleanupDirectiveClass extends AsyncDirective {
+    element;
+    lastValue;
+    lastCallback;
     constructor(partInfo) {
         super(partInfo);
         this.element = extractFunctionalElement(partInfo, 'assign');

package/dist/{esm/functional-element → functional-element}/directives/assign.directive.js

@@ -9,6 +9,7 @@ export function assign(propertyDescriptor, value) {
     return assignDirective(propertyDescriptor.propName, value);
 }
 const assignDirective = directive(class extends Directive {
+    element;
     constructor(partInfo) {
         super(partInfo);
         this.element = extractFunctionalElement(partInfo, 'assign');

package/dist/{esm/functional-element → functional-element}/directives/listen.directive.js

@@ -9,6 +9,8 @@ export function listen(eventType, listener) {
  * call is wrapped in the function above.
  */
 const listenDirective = directive(class extends Directive {
+    element;
+    lastListenerMetaData;
     constructor(partInfo) {
         super(partInfo);
         this.element = extractElement(partInfo, 'listen', HTMLElement);
@@ -24,7 +26,7 @@ const listenDirective = directive(class extends Directive {
         return {
             eventType,
             callback,
-            listener: (event) => { var _a; return (_a = this.lastListenerMetaData) === null || _a === void 0 ? void 0 : _a.callback(event); },
+            listener: (event) => this.lastListenerMetaData?.callback(event),
         };
     }
     render(eventTypeInput, callback) {

package/dist/{esm/functional-element → functional-element}/directives/on-dom-created.directive.js

@@ -3,6 +3,7 @@ import { assertsIsElementPartInfo } from './directive-util';
 const directiveName = 'onDomCreated';
 /** Only fires once, when the element has been created. */
 export const onDomCreated = directive(class extends Directive {
+    element;
     constructor(partInfo) {
         super(partInfo);
         assertsIsElementPartInfo(partInfo, directiveName);

package/dist/{esm/functional-element → functional-element}/directives/on-resize.directive.js

@@ -2,19 +2,20 @@ import { directive, Directive } from 'lit/directive.js';
 import { assertsIsElementPartInfo } from './directive-util';
 const directiveName = 'onResize';
 export const onResize = directive(class extends Directive {
+    element;
+    resizeObserver = new ResizeObserver((entries) => this.fireCallback(entries));
+    callback;
     constructor(partInfo) {
         super(partInfo);
-        this.resizeObserver = new ResizeObserver((entries) => this.fireCallback(entries));
         assertsIsElementPartInfo(partInfo, directiveName);
     }
     fireCallback(entries) {
-        var _a;
         const resizeEntry = entries[0];
         if (!resizeEntry) {
             console.error(entries);
             throw new Error(`${directiveName} observation triggered but the first entry was empty.`);
         }
-        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, { target: resizeEntry.target, contentRect: resizeEntry.contentRect });
+        this.callback?.({ target: resizeEntry.target, contentRect: resizeEntry.contentRect });
     }
     update(partInfo, [callback]) {
         assertsIsElementPartInfo(partInfo, directiveName);

package/dist/{esm/functional-element → functional-element}/functional-element.js

@@ -1,3 +1,5 @@
 import { LitElement } from 'lit';
 export class FunctionalElementBaseClass extends LitElement {
+    static tagName;
+    static styles;
 }

package/dist/{esm/template-transforms → template-transforms}/transform-template.js

@@ -17,7 +17,7 @@ export function makeCheckTransform(name, check, transform) {
 const transformedTemplateStrings = new WeakMap();
 export function getTransformedTemplate(templateStringsKey, values, fallbackTransform) {
     const alreadyTransformedTemplateStrings = transformedTemplateStrings.get(templateStringsKey);
-    const templateTransform = alreadyTransformedTemplateStrings !== null && alreadyTransformedTemplateStrings !== void 0 ? alreadyTransformedTemplateStrings : fallbackTransform();
+    const templateTransform = alreadyTransformedTemplateStrings ?? fallbackTransform();
     if (!alreadyTransformedTemplateStrings) {
         transformedTemplateStrings.set(templateStringsKey, templateTransform);
     }
@@ -29,7 +29,6 @@ export function transformTemplate(inputTemplateStrings, inputValues, checksAndTr
     const newRaws = [];
     const valueDeletions = [];
     inputTemplateStrings.forEach((currentTemplateString, index) => {
-        var _a;
         const lastNewStringsIndex = newStrings.length - 1;
         const lastNewString = newStrings[lastNewStringsIndex];
         const currentValueIndex = index - 1;
@@ -37,9 +36,9 @@ export function transformTemplate(inputTemplateStrings, inputValues, checksAndTr
         let validTransform;
         assertValidString && assertValidString(currentTemplateString);
         if (typeof lastNewString === 'string') {
-            validTransform = (_a = checksAndTransforms.find((checkAndTransform) => {
+            validTransform = checksAndTransforms.find((checkAndTransform) => {
                 return checkAndTransform.check(lastNewString, currentTemplateString, currentValue);
-            })) === null || _a === void 0 ? void 0 : _a.transform;
+            })?.transform;
             if (validTransform) {
                 newStrings[lastNewStringsIndex] =
                     lastNewString + validTransform(currentValue) + currentTemplateString;

package/dist/{esm/template-transforms → template-transforms}/vir-html/html-transform.js

@@ -5,7 +5,7 @@ import { makeCheckTransform, transformTemplate, } from '../transform-template';
 const htmlChecksAndTransforms = [
     makeCheckTransform('tag name interpolation', (lastNewString, currentLitString, currentValue) => {
         const shouldHaveTagNameHere = (lastNewString.trim().endsWith('<') && !!currentLitString.match(/^[\s\n>]/)) ||
-            ((lastNewString === null || lastNewString === void 0 ? void 0 : lastNewString.trim().endsWith('</')) && currentLitString.trim().startsWith('>'));
+            (lastNewString?.trim().endsWith('</') && currentLitString.trim().startsWith('>'));
         const staticTagName = hasStaticTagName(currentValue);
         if (shouldHaveTagNameHere && !staticTagName) {
             console.error({

package/dist/{esm/typed-event → typed-event}/typed-event.js

@@ -1,14 +1,14 @@
 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,
         });
-        this._type = '';
-    }
-    get type() {
-        return this._type;
     }
 }
 /**
@@ -19,14 +19,12 @@ export class TypedEvent extends CustomEvent {
  */
 export function defineTypedEvent() {
     return (eventType) => {
-        var _a;
-        return _a = class extends TypedEvent {
-                constructor(value) {
-                    super(eventType, value);
-                    this._type = eventType;
-                }
-            },
-            _a.type = eventType,
-            _a;
+        return class extends TypedEvent {
+            static type = eventType;
+            _type = eventType;
+            constructor(value) {
+                super(eventType, value);
+            }
+        };
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "5.1.1",
+    "version": "5.3.0",
     "keywords": [
         "custom",
         "web",
@@ -22,16 +22,10 @@
         "name": "electrovir",
         "url": "https://github.com/electrovir"
     },
-    "exports": {
-        "import": "./dist/esm/index.js",
-        "require": "./dist/cjs/index.js",
-        "default": "./dist/esm/index.js"
-    },
-    "main": "dist/cjs/index.js",
-    "module": "dist/esm/index.js",
-    "types": "dist/types/index.d.ts",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
     "scripts": {
-        "compile": "rm -rf dist && tsc --project tsconfig.json && tsc --project tsconfig.cjs.json && tsc --project tsconfig.esm.json",
+        "compile": "rm -rf dist && tsc",
         "format": "virmator format write",
         "jest": "jest --config ./src/jest/jest.config.ts",
         "prepublishOnly": "npm run compile && npm run test:full",

package/dist/cjs/augments/array.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.filterOutArrayIndexes = void 0;
-function filterOutArrayIndexes(array, indexes) {
-    return array.filter((_, index) => !indexes.includes(index));
-}
-exports.filterOutArrayIndexes = filterOutArrayIndexes;

package/dist/cjs/augments/type.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/functional-element/define-functional-element.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineFunctionalElement = void 0;
-const lit_1 = require("lit");
-const decorators_js_1 = require("lit/decorators.js");
-const element_events_1 = require("./element-events");
-const element_properties_1 = require("./element-properties");
-const functional_element_1 = require("./functional-element");
-const render_callback_1 = require("./render-callback");
-function defineFunctionalElement(functionalElementInit) {
-    var _a;
-    const eventsMap = (0, element_events_1.createEventDescriptorMap)(functionalElementInit.events);
-    const anonymousClass = (_a = class extends functional_element_1.FunctionalElementBaseClass {
-            constructor() {
-                super();
-                this.initCalled = false;
-                this.instanceProps = (0, element_properties_1.createPropertyProxy)(functionalElementInit.props, this);
-                const initProps = functionalElementInit.props || {};
-                Object.keys(initProps).forEach((propName) => {
-                    const functionalElementInstance = this;
-                    (0, decorators_js_1.property)()(functionalElementInstance, propName);
-                    functionalElementInstance[propName] = initProps[propName];
-                });
-            }
-            createRenderParams() {
-                return (0, render_callback_1.createRenderParams)(this, eventsMap);
-            }
-            render() {
-                const renderParams = this.createRenderParams();
-                if (!this.initCalled && functionalElementInit.initCallback) {
-                    this.initCalled = true;
-                    functionalElementInit.initCallback(renderParams);
-                }
-                return functionalElementInit.renderCallback(renderParams);
-            }
-        },
-        _a.tagName = functionalElementInit.tagName,
-        _a.styles = functionalElementInit.styles || (0, lit_1.css) ``,
-        _a.initInput = functionalElementInit,
-        _a.events = eventsMap,
-        _a.renderCallback = functionalElementInit.renderCallback,
-        _a.props = (0, element_properties_1.createPropertyDescriptorMap)(functionalElementInit.props),
-        _a);
-    window.customElements.define(functionalElementInit.tagName, anonymousClass);
-    return anonymousClass;
-}
-exports.defineFunctionalElement = defineFunctionalElement;

package/dist/cjs/functional-element/directives/assign-with-clean-up.directive.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.assignWithCleanup = void 0;
-const lit_1 = require("lit");
-const async_directive_js_1 = require("lit/async-directive.js");
-const directive_js_1 = require("lit/directive.js");
-const directive_util_1 = require("./directive-util");
-/**
- * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
- * the directive call is wrapped in this function.
- */
-function assignWithCleanup(propertyDescriptor, value, cleanupCallback) {
-    return assignWithCleanupDirective(propertyDescriptor.propName, value, cleanupCallback);
-}
-exports.assignWithCleanup = assignWithCleanup;
-class AssignWithCleanupDirectiveClass extends async_directive_js_1.AsyncDirective {
-    constructor(partInfo) {
-        super(partInfo);
-        this.element = (0, directive_util_1.extractFunctionalElement)(partInfo, 'assign');
-    }
-    disconnected() {
-        if (this.lastValue != undefined && this.lastCallback != undefined) {
-            this.lastCallback(this.lastValue);
-        }
-    }
-    render(propName, value, cleanupCallback, equalityCheck = (a, b) => a === b) {
-        if (!(propName in this.element.instanceProps)) {
-            throw new Error(`${this.element.tagName} element has no property of name "${propName}"`);
-        }
-        // reference equality check!
-        if (!equalityCheck(this.lastValue, value)) {
-            cleanupCallback(this.lastValue);
-        }
-        this.element.instanceProps[propName] = value;
-        this.lastValue = value;
-        this.lastCallback = cleanupCallback;
-        return lit_1.noChange;
-    }
-}
-const assignWithCleanupDirective = (0, directive_js_1.directive)(AssignWithCleanupDirectiveClass);

package/dist/cjs/functional-element/directives/assign.directive.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.assign = void 0;
-const lit_1 = require("lit");
-const directive_js_1 = require("lit/directive.js");
-const directive_util_1 = require("./directive-util");
-/**
- * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
- * the directive call is wrapped in this function.
- */
-function assign(propertyDescriptor, value) {
-    return assignDirective(propertyDescriptor.propName, value);
-}
-exports.assign = assign;
-const assignDirective = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
-    constructor(partInfo) {
-        super(partInfo);
-        this.element = (0, directive_util_1.extractFunctionalElement)(partInfo, 'assign');
-    }
-    render(propName, value) {
-        if (!(propName in this.element.instanceProps)) {
-            throw new Error(`${this.element.tagName} element has no property of name "${propName}"`);
-        }
-        this.element.instanceProps[propName] = value;
-        return lit_1.noChange;
-    }
-});

package/dist/cjs/functional-element/directives/directive-util.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.assertsIsElementPartInfo = exports.extractElement = exports.extractFunctionalElement = void 0;
-const directive_js_1 = require("lit/directive.js");
-const functional_element_1 = require("../functional-element");
-function extractFunctionalElement(partInfo, directiveName) {
-    return extractElement(partInfo, directiveName, functional_element_1.FunctionalElementBaseClass);
-}
-exports.extractFunctionalElement = extractFunctionalElement;
-function extractElement(partInfo, directiveName, constructorClass) {
-    assertsIsElementPartInfo(partInfo, directiveName);
-    const element = partInfo.element;
-    if (!(element instanceof constructorClass)) {
-        throw new Error(`${directiveName} attached to non ${constructorClass.name} element.`);
-    }
-    return element;
-}
-exports.extractElement = extractElement;
-function assertsIsElementPartInfo(partInfo, directiveName) {
-    if (partInfo.type !== directive_js_1.PartType.ELEMENT) {
-        throw new Error(`${directiveName} directive can only be attached directly to an element.`);
-    }
-    if (!partInfo.element) {
-        throw new Error(`${directiveName} directive found no element`);
-    }
-}
-exports.assertsIsElementPartInfo = assertsIsElementPartInfo;

package/dist/cjs/functional-element/directives/listen.directive.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.listen = void 0;
-const lit_1 = require("lit");
-const directive_js_1 = require("lit/directive.js");
-const directive_util_1 = require("./directive-util");
-function listen(eventType, listener) {
-    return listenDirective(eventType, listener);
-}
-exports.listen = listen;
-/**
- * The directive generics here are not strong enough to maintain their values. Thus, the directive
- * call is wrapped in the function above.
- */
-const listenDirective = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
-    constructor(partInfo) {
-        super(partInfo);
-        this.element = (0, directive_util_1.extractElement)(partInfo, 'listen', HTMLElement);
-    }
-    resetListener(listenerMetaData) {
-        if (this.lastListenerMetaData) {
-            this.element.removeEventListener(this.lastListenerMetaData.eventType, this.lastListenerMetaData.listener);
-        }
-        this.element.addEventListener(listenerMetaData.eventType, listenerMetaData.listener);
-        this.lastListenerMetaData = listenerMetaData;
-    }
-    createListenerMetaData(eventType, callback) {
-        return {
-            eventType,
-            callback,
-            listener: (event) => { var _a; return (_a = this.lastListenerMetaData) === null || _a === void 0 ? void 0 : _a.callback(event); },
-        };
-    }
-    render(eventTypeInput, callback) {
-        const eventType = typeof eventTypeInput === 'string' ? eventTypeInput : eventTypeInput.type;
-        if (typeof eventType !== 'string') {
-            throw new Error(`Cannot listen to an event with a name that is not a string. Given event name: "${eventType}"`);
-        }
-        if (this.lastListenerMetaData && this.lastListenerMetaData.eventType === eventType) {
-            /**
-             * Store the callback here so we don't have to update the attached listener every
-             * time the callback is updated.
-             */
-            this.lastListenerMetaData.callback = callback;
-        }
-        else {
-            this.resetListener(this.createListenerMetaData(eventType, callback));
-        }
-        return lit_1.noChange;
-    }
-});

package/dist/cjs/functional-element/directives/on-dom-created.directive.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.onDomCreated = void 0;
-const directive_js_1 = require("lit/directive.js");
-const directive_util_1 = require("./directive-util");
-const directiveName = 'onDomCreated';
-/** Only fires once, when the element has been created. */
-exports.onDomCreated = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
-    constructor(partInfo) {
-        super(partInfo);
-        (0, directive_util_1.assertsIsElementPartInfo)(partInfo, directiveName);
-    }
-    update(partInfo, [callback]) {
-        (0, directive_util_1.assertsIsElementPartInfo)(partInfo, directiveName);
-        const newElement = partInfo.element;
-        if (newElement !== this.element) {
-            // use requestAnimationFrame here so it can fire property changes outside of a render loop
-            requestAnimationFrame(() => callback(newElement));
-            this.element = newElement;
-        }
-        return this.render(callback);
-    }
-    render(callback) {
-        return undefined;
-    }
-});

package/dist/cjs/functional-element/directives/on-resize.directive.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.onResize = void 0;
-const directive_js_1 = require("lit/directive.js");
-const directive_util_1 = require("./directive-util");
-const directiveName = 'onResize';
-exports.onResize = (0, directive_js_1.directive)(class extends directive_js_1.Directive {
-    constructor(partInfo) {
-        super(partInfo);
-        this.resizeObserver = new ResizeObserver((entries) => this.fireCallback(entries));
-        (0, directive_util_1.assertsIsElementPartInfo)(partInfo, directiveName);
-    }
-    fireCallback(entries) {
-        var _a;
-        const resizeEntry = entries[0];
-        if (!resizeEntry) {
-            console.error(entries);
-            throw new Error(`${directiveName} observation triggered but the first entry was empty.`);
-        }
-        (_a = this.callback) === null || _a === void 0 ? void 0 : _a.call(this, { target: resizeEntry.target, contentRect: resizeEntry.contentRect });
-    }
-    update(partInfo, [callback]) {
-        (0, directive_util_1.assertsIsElementPartInfo)(partInfo, directiveName);
-        this.callback = callback;
-        const newElement = partInfo.element;
-        // if the element changes we need to observe the new one
-        if (newElement !== this.element) {
-            if (this.element) {
-                this.resizeObserver.unobserve(this.element);
-            }
-            this.resizeObserver.observe(newElement);
-            this.element = newElement;
-        }
-        return this.render(callback);
-    }
-    render(callback) {
-        return undefined;
-    }
-});

package/dist/cjs/functional-element/element-events.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createEventDescriptorMap = exports.defineElementEvent = void 0;
-const typed_event_1 = require("../typed-event/typed-event");
-function defineElementEvent() {
-    return (0, typed_event_1.defineTypedEvent)();
-}
-exports.defineElementEvent = defineElementEvent;
-function createEventDescriptorMap(eventsInit) {
-    if (!eventsInit) {
-        return {};
-    }
-    return Object.keys(eventsInit)
-        .filter((currentElementEventKey) => {
-        if (typeof currentElementEventKey !== 'string') {
-            throw new Error(`Expected event key of type string but got type "${typeof currentElementEventKey}" for key ${currentElementEventKey}`);
-        }
-        if (currentElementEventKey === '') {
-            throw new Error(`Got empty string for events key.`);
-        }
-        return true;
-    })
-        .reduce((accum, currentElementEventKey) => {
-        const eventObject = (0, typed_event_1.defineTypedEvent)()(currentElementEventKey);
-        accum[currentElementEventKey] = eventObject;
-        return accum;
-    }, {});
-}
-exports.createEventDescriptorMap = createEventDescriptorMap;