@rhtml/modifiers 0.0.87

package/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+    // Specifies the ESLint parser
+    parser: "@typescript-eslint/parser",
+    extends: [
+        // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+        "plugin:@typescript-eslint/recommended",
+        // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+        "prettier/@typescript-eslint",
+        // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+        "plugin:prettier/recommended"
+    ],
+    parserOptions: {
+        // Allows for the parsing of modern ECMAScript features
+        ecmaVersion: 2018,
+        // Allows for the use of imports
+        sourceType: "module"
+    },
+    rules: {
+        "@typescript-eslint/explicit-function-return-type": 0,
+        "simple-import-sort/sort": "error",
+        "sort-imports": "off",
+        "import/order": "off",
+        "@typescript-eslint/camelcase": 0
+    },
+    plugins: ["simple-import-sort"]
+};

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+    "singleQuote": true,
+    "printWidth": 80
+}

package/README.md

@@ -0,0 +1,83 @@
+# @rhtml/modifiers
+
+#### Installation
+
+```bash
+npm i @rhtml/modifiers
+```
+
+#### 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 html(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/index.d.ts

@@ -0,0 +1,12 @@
+import { LitElement, TemplateResult } from '@rxdi/lit-html';
+import { AsyncDirective } from '@rxdi/lit-html/dist/lit-html/async-directive';
+import { AttributePart } from '@rxdi/lit-html/dist/lit-html/directive';
+export declare class LayoutDirective extends AsyncDirective {
+    render(): symbol;
+    update(part: AttributePart): symbol;
+}
+export declare class FlexLayout extends LitElement {
+    OnUpdate(): void;
+    static modifier(template: TemplateResult): TemplateResult;
+}
+export declare const layout: import("@rxdi/lit-html/dist/lit-html/directive").DirectiveResult<typeof LayoutDirective>;

package/dist/index.js

@@ -0,0 +1,52 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.layout = exports.FlexLayout = exports.LayoutDirective = void 0;
+const lit_html_1 = require("@rxdi/lit-html");
+const async_directive_1 = require("@rxdi/lit-html/dist/lit-html/async-directive");
+const directive_1 = require("@rxdi/lit-html/dist/lit-html/directive");
+const modifiers_1 = require("./modifiers");
+class LayoutDirective extends async_directive_1.AsyncDirective {
+    render() {
+        return lit_html_1.noChange;
+    }
+    update(part) {
+        const divs = [...part.element.children];
+        for (const div of divs) {
+            modifiers_1.recursion(div);
+        }
+        return this.render();
+    }
+}
+exports.LayoutDirective = LayoutDirective;
+let FlexLayout = class FlexLayout extends lit_html_1.LitElement {
+    OnUpdate() {
+        const slot = this.shadowRoot.querySelector('slot');
+        for (const div of [...slot === null || slot === void 0 ? void 0 : slot.assignedElements()]) {
+            modifiers_1.recursion(div);
+        }
+    }
+    static modifier(template) {
+        return lit_html_1.html `
+      <flex-layout>${template}</flex-layout>
+    `;
+    }
+};
+FlexLayout = __decorate([
+    lit_html_1.Component({
+        selector: 'flex-layout',
+        template() {
+            return lit_html_1.html `
+      <slot></slot>
+    `;
+        }
+    })
+], FlexLayout);
+exports.FlexLayout = FlexLayout;
+exports.layout = directive_1.directive(LayoutDirective)();
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6CAMwB;AACxB,kFAA8E;AAC9E,sEAGgD;AAEhD,2CAAwC;AAExC,MAAa,eAAgB,SAAQ,gCAAc;IACjD,MAAM;QACJ,OAAO,mBAAQ,CAAC;IAClB,CAAC;IACD,MAAM,CAAC,IAAmB;QACxB,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAkB,CAAC;QACzD,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE;YACtB,qBAAS,CAAC,GAAG,CAAC,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC;IACvB,CAAC;CACF;AAXD,0CAWC;AAUD,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,qBAAU;IACxC,QAAQ;QACN,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACnD,KAAK,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,CAAC,EAAE;YAC/C,qBAAS,CAAC,GAAY,CAAC,CAAC;SACzB;IACH,CAAC;IAEM,MAAM,CAAC,QAAQ,CAAC,QAAwB;QAC7C,OAAO,eAAI,CAAA;qBACM,QAAQ;KACxB,CAAC;IACJ,CAAC;CACF,CAAA;AAbY,UAAU;IARtB,oBAAS,CAAC;QACT,QAAQ,EAAE,aAAa;QACvB,QAAQ;YACN,OAAO,eAAI,CAAA;;KAEV,CAAC;QACJ,CAAC;KACF,CAAC;GACW,UAAU,CAatB;AAbY,gCAAU;AAeV,QAAA,MAAM,GAAG,qBAAS,CAAC,eAAe,CAAC,EAAE,CAAC"}

package/dist/modifiers.d.ts

@@ -0,0 +1,9 @@
+export declare type FxLayout = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export declare type MainAxis = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
+export declare type CrossAxis = 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' | 'baseline';
+export declare const isAttribute: (attr: string) => boolean | string;
+export declare const setFxLayoutAlign: (element: HTMLElement) => (fxLayoutAlign?: string) => void;
+export declare const setChildrensFlexFill: (div: HTMLElement) => void;
+export declare const setChildrensFlex: (div: HTMLElement) => (fxFlex: string) => void;
+export declare const setFxLayout: (element: HTMLElement) => (fxLayout?: string) => void;
+export declare const recursion: (div: HTMLElement) => void;

package/dist/modifiers.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.recursion = exports.setFxLayout = exports.setChildrensFlex = exports.setChildrensFlexFill = exports.setFxLayoutAlign = exports.isAttribute = void 0;
+/* TODO we need to update to typescript 4 */
+// export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
+exports.isAttribute = (attr) => typeof attr === 'string' && (attr || attr === '');
+exports.setFxLayoutAlign = (element) => {
+    return (fxLayoutAlign = '') => {
+        const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
+        element.style['place-content'] = `${crossAxis} ${mainAxis}`;
+        element.style['align-items'] = crossAxis;
+        element.style['display'] = 'flex';
+    };
+};
+exports.setChildrensFlexFill = (div) => {
+    div.style['margin'] = '0';
+    div.style['width'] = '100%';
+    div.style['height'] = '100%';
+    div.style['min-width'] = '100%';
+    div.style['min-height	'] = '100%';
+};
+exports.setChildrensFlex = (div) => {
+    return (fxFlex) => {
+        div.style['flex'] = '1 1 100%';
+        div.style['box-sizing'] = 'border-box';
+        if (fxFlex) {
+            div.style['max-width'] = fxFlex;
+        }
+    };
+};
+exports.setFxLayout = (element) => {
+    return (fxLayout = '') => {
+        // element.style['flex-direction'] = fxLayout;
+        element.style['box-sizing'] = 'flex';
+        element.style['display'] = 'flex';
+        element.style['flex-flow'] = `${fxLayout} wrap`;
+    };
+};
+exports.recursion = (div) => {
+    const fxFlex = div.getAttribute('fxFlex');
+    const fxFlexFill = div.getAttribute('fxFlexFill');
+    const fxLayout = div.getAttribute('fxLayout');
+    const fxLayoutAlign = div.getAttribute('fxLayoutAlign');
+    const fxLayoutGap = div.getAttribute('fxLayoutGap');
+    if (exports.isAttribute(fxFlex)) {
+        exports.setChildrensFlex(div)(fxFlex);
+    }
+    if (exports.isAttribute(fxFlexFill)) {
+        exports.setChildrensFlexFill(div);
+    }
+    if (exports.isAttribute(fxLayout)) {
+        exports.setFxLayout(div)(fxLayout);
+    }
+    if (exports.isAttribute(fxLayoutAlign)) {
+        exports.setFxLayoutAlign(div)(fxLayoutAlign);
+    }
+    if (exports.isAttribute(fxLayoutGap)) {
+        const divs = [...div.children];
+        for (const div of divs) {
+            div.style['padding'] = `0px ${fxLayoutGap} ${fxLayoutGap} 0px`;
+            div.style.flex = '1 1 25%';
+        }
+    }
+    const divs = [...div.children];
+    for (const div of divs) {
+        exports.recursion(div);
+    }
+};
+//# sourceMappingURL=modifiers.js.map

package/dist/modifiers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modifiers.js","sourceRoot":"","sources":["../src/modifiers.ts"],"names":[],"mappings":"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"}

package/jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  testEnvironment: 'node',
+  testPathIgnorePatterns: ['/node_modules/'],
+  coverageReporters: ['lcov', 'html'],
+  rootDir: './',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'node'],
+  globals: {
+    __DEV__: true
+  },
+  transform: {
+    '\\.(ts|tsx)$': 'ts-jest'
+  },
+  testRegex: '/src/.*\\.spec.(ts|tsx|js)$',
+  verbose: true,
+  collectCoverage: true
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@rhtml/modifiers",
+  "version": "0.0.87",
+  "description": "Reactive HyperText Markup Language",
+  "scripts": {
+    "start": "npx parcel ./examples/index.html --out-dir build/examples",
+    "patch": "npm run build && npm version patch && npm publish --update-readme --access public && npm run delete-dist",
+    "delete-dist": "rm -rf dist",
+    "clean": "git clean -dxf",
+    "lint": "npx eslint . --ext .ts",
+    "lint-fix": "npx eslint . --fix --ext .ts",
+    "build": "rm -rf dist && npx npx tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:rhtml/rhtml.git"
+  },
+  "dependencies": {
+    "@rxdi/lit-html": "^0.7.133"
+  },
+  "devDependencies": {
+    "eslint": "^6.7.2",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-simple-import-sort": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^2.10.0",
+    "@typescript-eslint/parser": "^2.10.0",
+    "prettier": "^1.19.1",
+    "ts-jest": "25.2.1"
+  },
+  "author": "Kristiyan Tachev",
+  "license": "MIT",
+  "browserslist": [
+    "last 1 chrome versions"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "typings": "./dist/index.d.ts"
+}

package/src/index.ts

@@ -0,0 +1,52 @@
+import {
+  Component,
+  html,
+  LitElement,
+  noChange,
+  TemplateResult
+} from '@rxdi/lit-html';
+import { AsyncDirective } from '@rxdi/lit-html/dist/lit-html/async-directive';
+import {
+  AttributePart,
+  directive
+} from '@rxdi/lit-html/dist/lit-html/directive';
+
+import { recursion } from './modifiers';
+
+export class LayoutDirective extends AsyncDirective {
+  render(): symbol {
+    return noChange;
+  }
+  update(part: AttributePart): symbol {
+    const divs = [...part.element.children] as HTMLElement[];
+    for (const div of divs) {
+      recursion(div);
+    }
+    return this.render();
+  }
+}
+
+@Component({
+  selector: 'flex-layout',
+  template() {
+    return html`
+      <slot></slot>
+    `;
+  }
+})
+export class FlexLayout extends LitElement {
+  OnUpdate(): void {
+    const slot = this.shadowRoot.querySelector('slot');
+    for (const div of [...slot?.assignedElements()]) {
+      recursion(div as never);
+    }
+  }
+
+  public static modifier(template: TemplateResult): TemplateResult {
+    return html`
+      <flex-layout>${template}</flex-layout>
+    `;
+  }
+}
+
+export const layout = directive(LayoutDirective)();

package/src/modifiers.ts

@@ -0,0 +1,95 @@
+export type FxLayout = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+
+export type MainAxis =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'space-around'
+  | 'space-between'
+  | 'space-evenly';
+export type CrossAxis =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'stretch'
+  | 'space-between'
+  | 'space-around'
+  | 'baseline';
+/* TODO we need to update to typescript 4 */
+// export type FxLayoutAlign = `${MainAxis} ${CrossAxis}`;
+
+export const isAttribute = (attr: string): boolean | string =>
+  typeof attr === 'string' && (attr || attr === '');
+
+export const setFxLayoutAlign = (element: HTMLElement) => {
+  return (fxLayoutAlign = ''): void => {
+    const [mainAxis, crossAxis] = fxLayoutAlign.split(' ');
+    element.style['place-content'] = `${crossAxis} ${mainAxis}`;
+    element.style['align-items'] = crossAxis;
+    element.style['display'] = 'flex';
+  };
+};
+
+export const setChildrensFlexFill = (div: HTMLElement): void => {
+  div.style['margin'] = '0';
+  div.style['width'] = '100%';
+  div.style['height'] = '100%';
+  div.style['min-width'] = '100%';
+  div.style['min-height	'] = '100%';
+};
+
+export const setChildrensFlex = (div: HTMLElement) => {
+  return (fxFlex: string): void => {
+    div.style['flex'] = '1 1 100%';
+    div.style['box-sizing'] = 'border-box';
+    if (fxFlex) {
+      div.style['max-width'] = fxFlex;
+    }
+  };
+};
+
+export const setFxLayout = (element: HTMLElement) => {
+  return (fxLayout = ''): void => {
+    // element.style['flex-direction'] = fxLayout;
+    element.style['box-sizing'] = 'flex';
+    element.style['display'] = 'flex';
+    element.style['flex-flow'] = `${fxLayout} wrap`;
+  };
+};
+
+export const recursion = (div: HTMLElement): void => {
+  const fxFlex = div.getAttribute('fxFlex');
+  const fxFlexFill = div.getAttribute('fxFlexFill');
+  const fxLayout = div.getAttribute('fxLayout');
+  const fxLayoutAlign = div.getAttribute('fxLayoutAlign');
+  const fxLayoutGap = div.getAttribute('fxLayoutGap');
+
+  if (isAttribute(fxFlex)) {
+    setChildrensFlex(div)(fxFlex);
+  }
+
+  if (isAttribute(fxFlexFill)) {
+    setChildrensFlexFill(div);
+  }
+
+  if (isAttribute(fxLayout)) {
+    setFxLayout(div)(fxLayout);
+  }
+
+  if (isAttribute(fxLayoutAlign)) {
+    setFxLayoutAlign(div)(fxLayoutAlign);
+  }
+
+  if (isAttribute(fxLayoutGap)) {
+    const divs = [...div.children] as HTMLElement[];
+    for (const div of divs) {
+      div.style['padding'] = `0px ${fxLayoutGap} ${fxLayoutGap} 0px`;
+      div.style.flex = '1 1 25%';
+    }
+  }
+
+  const divs = [...div.children] as HTMLElement[];
+  for (const div of divs) {
+    recursion(div);
+  }
+};

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "sourceMap": true,
+    "module": "commonjs",
+    "declaration": true,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "target": "es6",
+    "outDir": "dist",
+    "typeRoots": ["node_modules/@types", "./typings.d.ts"],
+    "lib": [
+      "es2015",
+      "es2016",
+      "es6",
+      "esnext.asynciterable",
+      "dom.Iterable",
+      "es2017",
+      "dom"
+    ]
+  },
+  "include": ["./typings.d.ts", "src/**/*"]
+}