element-vir 0.1.1 → 1.0.0

package/dist/functional-element/define-functional-element.d.ts

@@ -1,5 +1,4 @@
 import { EventsInitMap } from './element-events';
 import { PropertyInitMapBase } from './element-properties';
-import { FunctionalElementConstructor } from './functional-element';
-import { FunctionalElementInit } from './functional-element-init';
-export declare function defineFunctionalElement<EventsInitGeneric extends EventsInitMap = never, PropertyInitGeneric extends PropertyInitMapBase = never>(functionalElementInit: FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric>): FunctionalElementConstructor<PropertyInitGeneric, EventsInitGeneric>;
+import { FunctionalElement, FunctionalElementInit } from './functional-element';
+export declare function defineFunctionalElement<EventsInitGeneric extends EventsInitMap = {}, PropertyInitGeneric extends PropertyInitMapBase = {}>(functionalElementInit: FunctionalElementInit<PropertyInitGeneric, EventsInitGeneric>): FunctionalElement<PropertyInitGeneric, EventsInitGeneric>;

package/dist/functional-element/directives/assign-with-clean-up.directive.d.ts

@@ -0,0 +1,19 @@
+import { AsyncDirective } from 'lit/async-directive.js';
+import { PartInfo } from 'lit/directive.js';
+import { StaticElementPropertyDescriptor } from '../element-properties';
+/**
+ * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
+ * the directive call is wrapped in this function.
+ */
+export declare function assignWithCleanup<PropName extends string, PropValue>(propertyDescriptor: StaticElementPropertyDescriptor<PropName, PropValue>, value: typeof propertyDescriptor['initValue'], cleanupCallback: CleanupCallback<typeof propertyDescriptor['initValue']>): import("lit-html/directive").DirectiveResult<typeof AssignWithCleanupDirectiveClass>;
+export declare type CleanupCallback<T> = (oldValue: T) => void;
+export declare type EqualityCheckCallback<T> = (oldValue: T, newValue: T) => boolean;
+declare class AssignWithCleanupDirectiveClass extends AsyncDirective {
+    private readonly element;
+    private lastValue;
+    private lastCallback;
+    constructor(partInfo: PartInfo);
+    disconnected(): void;
+    render(propName: string, value: unknown, cleanupCallback: CleanupCallback<any>, equalityCheck?: EqualityCheckCallback<any>): symbol;
+}
+export {};

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

@@ -0,0 +1,36 @@
+import { noChange } from 'lit';
+import { AsyncDirective } from 'lit/async-directive.js';
+import { directive } from 'lit/directive.js';
+import { extractFunctionalElement } from './directive-util';
+/**
+ * The directive generics (in listenDirective) are not strong enough to maintain their values. Thus,
+ * the directive call is wrapped in this function.
+ */
+export function assignWithCleanup(propertyDescriptor, value, cleanupCallback) {
+    return assignWithCleanupDirective(propertyDescriptor.propName, value, cleanupCallback);
+}
+class AssignWithCleanupDirectiveClass extends AsyncDirective {
+    constructor(partInfo) {
+        super(partInfo);
+        this.element = 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 noChange;
+    }
+}
+const assignWithCleanupDirective = directive(AssignWithCleanupDirectiveClass);

package/dist/functional-element/directives/assign.directive.d.ts

@@ -1,5 +1,4 @@
 import { PartInfo } from 'lit/directive.js';
-import { ElementEvent } from '../element-events';
 import { PropertyInitMapBase, StaticElementPropertyDescriptor } from '../element-properties';
 import { FunctionalElementInstance } from '../functional-element';
 /**
@@ -9,15 +8,8 @@ import { FunctionalElementInstance } from '../functional-element';
 export declare function assign<PropName extends string, PropValue>(propertyDescriptor: StaticElementPropertyDescriptor<PropName, PropValue>, value: typeof propertyDescriptor['initValue']): import("lit-html/directive").DirectiveResult<{
     new (partInfo: PartInfo): {
         readonly element: FunctionalElementInstance<PropertyInitMapBase>;
-        lastListenerMetaData: ListenerMetaData<any> | undefined;
         render(propName: string, value: unknown): symbol;
         readonly _$isConnected: boolean;
         update(_part: import("lit-html").Part, props: unknown[]): unknown;
     };
 }>;
-declare type ListenerMetaData<EventDetail> = {
-    eventType: string;
-    callback: (event: ElementEvent<string, EventDetail>) => void;
-    listener: (event: any) => void;
-};
-export {};

package/dist/functional-element/directives/cssSelector.d.ts

@@ -0,0 +1,3 @@
+import { CSSResult } from 'lit';
+import { FunctionalElement } from '../functional-element';
+export declare function cssSelector(element: FunctionalElement): CSSResult;

package/dist/functional-element/directives/cssSelector.js

@@ -0,0 +1,6 @@
+import { unsafeCSS } from 'lit';
+export function cssSelector(element) {
+    // This is actually safe because it's not user input.
+    // If the dev using this package allows user input for tag names... all hope is lost anyway.
+    return unsafeCSS(element.tagName);
+}

package/dist/functional-element/directives/directive-util.d.ts

@@ -1,6 +1,14 @@
 import { ElementPartInfo, PartInfo } from 'lit/directive.js';
-import { ExtraPartInfoProperties } from '../../vir-html/directive';
 import { PropertyInitMapBase } from '../element-properties';
 import { FunctionalElementInstance } from '../functional-element';
+/** For some reason these aren't defined in lit's types already. */
+export declare type ExtraPartInfoProperties = {
+    element: Element;
+    options: {
+        host: Element;
+        renderBefore: Element;
+        isConnected: boolean;
+    };
+};
 export declare function extractFunctionalElement<PropertyInitGeneric extends PropertyInitMapBase>(partInfo: PartInfo, directiveName: string): FunctionalElementInstance<PropertyInitGeneric>;
 export declare function assertsIsElementPartInfo(partInfo: PartInfo, directiveName: string): asserts partInfo is ElementPartInfo & ExtraPartInfoProperties;

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

@@ -2,6 +2,20 @@ import { CSSResult, LitElement, TemplateResult } from 'lit';
 import { EventDescriptorMap, EventsInitMap } from './element-events';
 import { ElementPropertyDescriptorMap, PropertyInitMapBase } from './element-properties';
 import { RenderCallback } from './render-callback';
+export declare type FunctionalElementInit<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = {
+    /**
+     * HTML tag name. This should not be used directly, as interpolating it with the html tagged
+     * template from this package is preferred.
+     */
+    tagName: string;
+    /** Static styles. These should not and cannot change. */
+    styles?: CSSResult | undefined;
+    /** Initializer for element properties. (These can be thought of as "inputs".) */
+    props?: PropertyInitGeneric | undefined;
+    /** Initializer for events that the element can dispatch. (These can be thought of as "outputs".) */
+    events?: EventsInitGeneric | undefined;
+    renderCallback: RenderCallback<PropertyInitGeneric, EventsInitGeneric>;
+};
 export declare abstract class FunctionalElementBaseClass<PropertyInitGeneric extends PropertyInitMapBase> extends LitElement {
     static readonly tagName: string;
     static readonly styles: CSSResult;
@@ -9,8 +23,8 @@ export declare abstract class FunctionalElementBaseClass<PropertyInitGeneric ext
     abstract render(): TemplateResult | Promise<TemplateResult>;
     abstract readonly instanceProps: PropertyInitGeneric;
 }
-export declare type FunctionalElementInstance<PropertyInitGeneric extends PropertyInitMapBase> = FunctionalElementBaseClass<PropertyInitGeneric> & PropertyInitGeneric;
-export declare type FunctionalElementConstructor<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = (new () => FunctionalElementInstance<PropertyInitGeneric>) & ExtraStaticFunctionalElementProperties<PropertyInitGeneric, EventsInitGeneric>;
+export declare type FunctionalElementInstance<PropertyInitGeneric extends PropertyInitMapBase = {}> = FunctionalElementBaseClass<PropertyInitGeneric> & PropertyInitGeneric;
+export declare type FunctionalElement<PropertyInitGeneric extends PropertyInitMapBase = any, EventsInitGeneric extends EventsInitMap = any> = (new () => FunctionalElementInstance<PropertyInitGeneric>) & ExtraStaticFunctionalElementProperties<PropertyInitGeneric, EventsInitGeneric>;
 export declare type ExtraStaticFunctionalElementProperties<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = Readonly<{
     /** Pass through the render callback for direct unit testability */
     renderCallback: RenderCallback<PropertyInitGeneric, EventsInitGeneric>;

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 export * from './functional-element/define-functional-element';
+export * from './functional-element/directives/assign-with-clean-up.directive';
 export * from './functional-element/directives/assign.directive';
+export * from './functional-element/directives/cssSelector';
 export * from './functional-element/directives/listen.directive';
 export * from './functional-element/directives/on-dom-created.directive';
 export * from './functional-element/directives/on-resize.directive';
 export * from './functional-element/element-events';
 export * from './functional-element/element-properties';
 export * from './functional-element/functional-element';
-export * from './functional-element/functional-element-init';
 export * from './functional-element/render-callback';
-export * from './vir-html/directive';
 export * from './vir-html/vir-html';

package/dist/index.js

@@ -1,12 +1,12 @@
 export * from './functional-element/define-functional-element';
+export * from './functional-element/directives/assign-with-clean-up.directive';
 export * from './functional-element/directives/assign.directive';
+export * from './functional-element/directives/cssSelector';
 export * from './functional-element/directives/listen.directive';
 export * from './functional-element/directives/on-dom-created.directive';
 export * from './functional-element/directives/on-resize.directive';
 export * from './functional-element/element-events';
 export * from './functional-element/element-properties';
 export * from './functional-element/functional-element';
-export * from './functional-element/functional-element-init';
 export * from './functional-element/render-callback';
-export * from './vir-html/directive';
 export * from './vir-html/vir-html';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-vir",
-    "version": "0.1.1",
+    "version": "1.0.0",
     "keywords": [
         "custom",
         "web",
@@ -38,8 +38,9 @@
     },
     "devDependencies": {
         "@snowpack/plugin-typescript": "^1.2.1",
+        "augment-vir": "^1.0.0",
         "snowpack": "^3.8.8",
         "typescript": "^4.4.3",
-        "virmator": "^1.1.15"
+        "virmator": "^1.2.0"
     }
 }

package/dist/functional-element/functional-element-init.d.ts

@@ -1,18 +0,0 @@
-import { CSSResult } from 'lit';
-import { EventsInitMap } from './element-events';
-import { PropertyInitMapBase } from './element-properties';
-import { RenderCallback } from './render-callback';
-export declare type FunctionalElementInit<PropertyInitGeneric extends PropertyInitMapBase, EventsInitGeneric extends EventsInitMap> = {
-    /**
-     * HTML tag name. This should not be used directly, as interpolating it with the html tagged
-     * template from this package is preferred.
-     */
-    tagName: string;
-    /** Static styles. These should not and cannot change. */
-    styles?: CSSResult | undefined;
-    /** Initializer for element properties. (These can be thought of as "inputs".) */
-    props?: PropertyInitGeneric | undefined;
-    /** Initializer for events that the element can dispatch. (These can be thought of as "outputs".) */
-    events?: EventsInitGeneric | undefined;
-    renderCallback: RenderCallback<PropertyInitGeneric, EventsInitGeneric>;
-};

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

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

package/dist/vir-html/directive.d.ts

@@ -1,9 +0,0 @@
-/** For some reason these aren't defined in lit's types already. */
-export declare type ExtraPartInfoProperties = {
-    element: Element;
-    options: {
-        host: Element;
-        renderBefore: Element;
-        isConnected: boolean;
-    };
-};

package/dist/vir-html/directive.js

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