@rxdi/lit-html 0.7.135 → 0.7.138

package/README.md

@@ -1,11 +1,11 @@
-# lit-html hard fork prepared for bundlers with removed `.js` files from extensions
-
 #### Install
+
 ```bash
 npm i @rxdi/lit-html
 ```
 
 Example component
+
 ```typescript
 import { LitElement, Component, html, css } from '@rxdi/lit-html';
 
@@ -43,7 +43,79 @@ import { LitElement, Component, html, css } from '@rxdi/lit-html';
         <div class="border" part="border"></div>
       </div>
     `;
-  }
+  },
 })
 export class DescriptionListComponent extends LitElement {}
-```
+```
+
+#### Modifiers
+
+What is a modifier ?
+
+In order to apply some logic before current template is loaded like custom directives, we need to wrap current template and pass it along the actual modifier template
+
+```typescript
+@Component({
+  selector: 'my-modifier',
+  template() {
+    return html`<slot></slot>`;
+  },
+})
+export class MyModifier extends LitElement {
+  OnUpdate() {
+    const slot = this.shadowRoot.querySelector('slot');
+    for (const element of [...slot.assignedElements()]) {
+      /// Do something here with element
+    }
+  }
+
+  public static modifier(template: TemplateResult) {
+    return html`<my-modifier>${template}</my-modifier>`;
+  }
+}
+```
+
+Another real example is to add FlexLayout modifier from `@rhtml/modifiers` which will apply useful directives
+to be used inside of the html inspired from Angular flex-layout https://github.com/angular/flex-layout/wiki/Declarative-API-Overview
+
+```typescript
+import { Component, css, html, LitElement } from '@rxdi/lit-html';
+
+import { FlexLayout } from '@rhtml/modifiers';
+
+/**
+ * @customElement home-component
+ */
+@Component({
+  selector: 'home-component',
+  style: css`
+    .block {
+      background: red;
+      flex: 1;
+    }
+    .container {
+      height: 200px;
+    }
+  `,
+  modifiers: [FlexLayout],
+  template(this: HomeComponent) {
+    return html`
+      <div class="container" fxLayout="row" fxLayoutGap="10px">
+        <div>
+          <div class="block" fxLayoutAlign="center center" fxFlexFill>A</div>
+        </div>
+        <div>
+          <div class="block" fxLayoutAlign="center center" fxFlexFill>B</div>
+        </div>
+        <div>
+          <div class="block" fxLayoutAlign="center center" fxFlexFill>C</div>
+        </div>
+        <div>
+          <div class="block" fxLayoutAlign="center center" fxFlexFill>D</div>
+        </div>
+      </div>
+    `;
+  },
+})
+export class HomeComponent extends LitElement {}
+```

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

@@ -6,6 +6,9 @@ export interface CustomElementConfig<T> {
     style?: CSSResult;
     styles?: CSSResult[];
     extends?: string;
+    modifier?: (Function | {
+        html(template: TemplateResult): TemplateResult;
+    })[];
     /**
      * Intended only for first render inside the DOM
      * for example we want app-component to be rendered

package/dist/decorators/component.decorator.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Component = void 0;
 const lit_html_1 = require("../lit-html/lit-html");
+const helpers_1 = require("./helpers");
 const legacyCustomElement = (tagName, clazz, options) => {
     window.customElements.define(tagName, clazz, options);
     return clazz;
@@ -71,6 +72,10 @@ const customElement = (tag, config = {}) => (Base) => {
                 OnInit.call(this);
             }
             render() {
+                var _a;
+                if ((_a = config.modifier) === null || _a === void 0 ? void 0 : _a.length) {
+                    return (0, helpers_1.pipe)(...(config.modifier.map(v => v['html'])))(config.template.call(this));
+                }
                 return config.template.call(this);
             }
             update() {

package/dist/decorators/helpers/index.d.ts

@@ -0,0 +1,2 @@
+import { TemplateResult } from '../../lit-html/lit-html';
+export declare const pipe: (...fns: Function[]) => (x: TemplateResult) => any;

package/dist/decorators/helpers/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pipe = void 0;
+const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);
+exports.pipe = pipe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdi/lit-html",
-  "version": "0.7.135",
+  "version": "0.7.138",
   "main": "./dist/index.js",
   "author": "Kristiyan Tachev",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "url": "https://github.com/rxdi/lit-html"
   },
   "scripts": {
-    "build": "tsc || true"
+    "build": "npx tsc || true"
   },
   "dependencies": {},
   "devDependencies": {