@rxdi/lit-html 0.7.139 → 0.7.142

package/dist/decorators/component.decorator.d.ts

@@ -1,15 +1,26 @@
-import { CSSResult } from '../reactive-element/css-tag';
 import { TemplateResult } from '../lit-html/lit-html';
-export declare const pipe: (...fns: Function[]) => (x: TemplateResult) => any;
+import { CSSResult } from '../reactive-element/css-tag';
+export interface CustomAttributeRegistry {
+    define(name: string, modifier: Function | Modifier): void;
+    get(element: HTMLElement, attrName: string): any;
+    unsubscribe(): void;
+}
+export interface ModifierOptions {
+    name: string;
+    registry?: CustomAttributeRegistry;
+}
+export interface Modifier extends Function {
+    name: string;
+    options(): ModifierOptions;
+}
 export interface CustomElementConfig<T> {
     selector: string;
-    template?: (self: T) => TemplateResult;
+    template?: (this: T) => TemplateResult;
     style?: CSSResult;
     styles?: CSSResult[];
     extends?: string;
-    modifiers?: (Function | {
-        html(template: TemplateResult): TemplateResult;
-    })[];
+    registry?: (this: T) => CustomAttributeRegistry;
+    modifiers?: Modifier[];
     /**
      * Intended only for first render inside the DOM
      * for example we want app-component to be rendered

package/dist/decorators/component.decorator.js

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Component = exports.pipe = void 0;
+exports.Component = void 0;
 const lit_html_1 = require("../lit-html/lit-html");
-const pipe = (...fns) => (x) => fns.reduce((v, f) => f.call(this, v), x);
-exports.pipe = pipe;
 const legacyCustomElement = (tagName, clazz, options) => {
     window.customElements.define(tagName, clazz, options);
     return clazz;
@@ -16,9 +14,10 @@ const standardCustomElement = (tagName, descriptor, options) => {
         // This callback is called once the class is otherwise fully defined
         finisher(clazz) {
             window.customElements.define(tagName, clazz, options);
-        },
+        }
     };
 };
+const isFunction = (v) => typeof v === 'function';
 const customElement = (tag, config = {}) => (Base) => {
     var _a;
     if (!tag || (tag && tag.indexOf('-') <= 0)) {
@@ -33,6 +32,7 @@ const customElement = (tag, config = {}) => (Base) => {
     const disconnectedCallback = Base.prototype.disconnectedCallback || function () { };
     const update = Base.prototype.update || function () { };
     const firstUpdated = Base.prototype.firstUpdated || function () { };
+    let registry;
     if (!config.template) {
         config.template = Base.prototype.render || (() => (0, lit_html_1.html) ``);
     }
@@ -67,16 +67,41 @@ const customElement = (tag, config = {}) => (Base) => {
             disconnectedCallback() {
                 OnDestroy.call(this);
                 disconnectedCallback.call(this);
+                registry === null || registry === void 0 ? void 0 : registry.unsubscribe();
+                registry = null;
             }
             connectedCallback() {
+                var _a;
                 connectedCallback.call(this);
                 OnInit.call(this);
-            }
-            render() {
-                var _a;
                 if ((_a = config.modifiers) === null || _a === void 0 ? void 0 : _a.length) {
-                    return (0, exports.pipe)(...(config.modifiers.map(v => v['modifier'])))(config.template.call(this));
+                    for (const modifier of config.modifiers) {
+                        if (!modifier) {
+                            throw new Error(`Provided null value inside modifiers for component "${config.selector}"`);
+                        }
+                        if (!modifier.options) {
+                            throw new Error(`Missing options for attribute inside ${modifier.name}`);
+                        }
+                        if (typeof modifier.options !== 'function') {
+                            throw new Error(`Modifier options is not a function ${modifier.name} and component "${config.selector}"`);
+                        }
+                        const options = modifier.options.call(this);
+                        if (!(options === null || options === void 0 ? void 0 : options.name)) {
+                            throw new Error(`Missing attribute name for ${modifier.name} inside component "${config.selector}"`);
+                        }
+                        if (!registry) {
+                            registry = (isFunction(config.registry)
+                                ? config.registry.call(this)
+                                : options.registry);
+                        }
+                        if (!registry) {
+                            throw new Error(`Missing attribute registry for attribute "${options.name}" and no default registry specified inside component "${config.selector}"`);
+                        }
+                        registry.define(options.name, modifier);
+                    }
                 }
+            }
+            render() {
                 return config.template.call(this);
             }
             update() {
@@ -93,21 +118,21 @@ const customElement = (tag, config = {}) => (Base) => {
     const registeredElement = window.customElements.get(tag);
     if (registeredElement) {
         console.error(`** IMPORTANT!!! **
-------------------------------------------
-<${tag}></${tag}> Component re-defined multiple times and it is already registered inside customElements registry
+              ------------------------------------------
+< ${tag} > </${tag}> Component re-defined multiple times and it is already registered inside customElements registry
 Possible Solutions:
 * Bundle problem where multiple versions of the component are used
-* @Component decorator is used twice for the same component
-* Defined "selector" with the same name in multiple components
+            * @Component decorator is used twice for the same component
+              * Defined "selector" with the same name in multiple components
 
-** If this is Server Side Rendering you can ignore this message **
-------------------------------------------
-`);
+                ** If this is Server Side Rendering you can ignore this message **
+                  ------------------------------------------
+                    `);
         return registeredElement;
     }
     if (typeof ModifiedClass === 'function') {
         legacyCustomElement(tag, ModifiedClass, {
-            extends: config.extends,
+            extends: config.extends
         });
     }
     else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdi/lit-html",
-  "version": "0.7.139",
+  "version": "0.7.142",
   "main": "./dist/index.js",
   "author": "Kristiyan Tachev",
   "license": "MIT",