@rxdi/lit-html 0.7.140 → 0.7.141

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

@@ -1,14 +1,25 @@
-import { CSSResult } from '../reactive-element/css-tag';
 import { TemplateResult } from '../lit-html/lit-html';
+import { CSSResult } from '../reactive-element/css-tag';
+export interface CustomAttributeRegistry {
+    define(name: string, modifier: Function | Modifier): void;
+    get(element: HTMLElement, attrName: string): any;
+}
+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

@@ -14,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)) {
@@ -73,8 +74,28 @@ const customElement = (tag, config = {}) => (Base) => {
             render() {
                 var _a;
                 if ((_a = config.modifiers) === null || _a === void 0 ? void 0 : _a.length) {
-                    const pipe = (...fns) => (x) => fns.reduce((v, f) => f.call(this, v), x);
-                    return 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}"`);
+                        }
+                        const 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);
+                    }
                 }
                 return config.template.call(this);
             }
@@ -92,21 +113,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.140",
+  "version": "0.7.141",
   "main": "./dist/index.js",
   "author": "Kristiyan Tachev",
   "license": "MIT",