@rhtml/decorators 0.0.109 → 0.0.112

package/README.md

@@ -12,16 +12,13 @@ npm i @rhtml/decorators
 import { Attribute, Options, Input } from '@rhtml/custom-attributes';
 import { HostListener } from '@rhtml/decorators';
 
+@Modifier({
+  selector: 'test'
+})
 export class TestDirective extends Attribute {
   @Input()
   myProperty: string;
 
-  public static options(this: HTMLElement): Options {
-    return {
-      name: 'test'
-    };
-  }
-
   @HostListener('mouseenter')
   enter(event: Event) {
     console.log('ENTER', this, event);
@@ -70,3 +67,31 @@ export class HomeComponent extends LitElement {
   }
 }
 ```
+
+#### @HostBinding and @Input decorators
+
+Specifiyng Input and HostBinding decorator gives you an reactive ability to assign styles directly to input properties
+This way by editing `padding`, `color` or `background` will reflect to the style associated with
+By doing this we can skip `OnInit`, `OnDestroy`, `OnUpdate` manual assign inside hooks
+
+```typescript
+import { Attribute, Input, Modifier } from '@rhtml/custom-attributes';
+import { HostBinding } from '@rhtml/decorators';
+
+@Modifier({
+  selector: 'layout'
+})
+export class CustomLayout extends Attribute {
+  @Input({ observe: true })
+  @HostBinding('style.padding')
+  padding: string;
+
+  @Input({ observe: true })
+  @HostBinding('style.color')
+  color: string;
+
+  @Input({ observe: true })
+  @HostBinding('style.background')
+  background: string;
+}
+```

package/dist/host-binding.d.ts

@@ -0,0 +1 @@
+export declare const HostBinding: <T>(binding: string) => (target: any, memberName: string) => void;

package/dist/host-binding.js

@@ -0,0 +1,57 @@
+"use strict";
+// type Class = 'class';
+// type Style = 'style';
+// type Type = Style | Class;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HostBinding = void 0;
+// type Styles = keyof CSSStyleDeclaration;
+// type Binding<T = Type> = T extends Style ? `${T}.${Styles}` : `${Class}.${string}`;
+exports.HostBinding = (binding /* Binding<T> */) => (target, memberName) => {
+    const [type, key] = binding.split('.');
+    const OnInit = target['OnInit'] ||
+        function () {
+            /*  */
+        };
+    const apply = (value) => (element) => {
+        if (type === 'style') {
+            if (!value) {
+                element.style[key] = null;
+            }
+            else {
+                element.style[key] = value;
+            }
+        }
+        if (type === 'class') {
+            if (!value) {
+                element.classList.remove(key);
+            }
+            else {
+                element.classList.add(key);
+            }
+        }
+    };
+    Object.defineProperty(target, 'OnInit', {
+        value: function (...args) {
+            var _a;
+            let currentValue = this[memberName];
+            const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
+            Object.defineProperty(target, memberName, {
+                get: function () {
+                    return currentValue;
+                },
+                set: function (value) {
+                    apply(value)(element);
+                    currentValue = value;
+                },
+                configurable: true
+            });
+            if (currentValue) {
+                apply(currentValue)(element);
+            }
+            return OnInit.apply(this, args);
+        },
+        configurable: true,
+        writable: true
+    });
+};
+//# sourceMappingURL=host-binding.js.map

package/dist/host-binding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host-binding.js","sourceRoot":"","sources":["../src/host-binding.ts"],"names":[],"mappings":";AAAA,wBAAwB;AACxB,wBAAwB;AACxB,6BAA6B;;;AAE7B,2CAA2C;AAE3C,sFAAsF;AAEzE,QAAA,WAAW,GAAG,CAAI,OAAe,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAClE,MAAM,EACN,UAAkB,EAClB,EAAE;IACF,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvC,MAAM,MAAM,GACV,MAAM,CAAC,QAAQ,CAAC;QAChB;YACE,MAAM;QACR,CAAC,CAAC;IACJ,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,OAAoB,EAAE,EAAE;QACxD,IAAI,IAAI,KAAK,OAAO,EAAE;YACpB,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;aAC3B;iBAAM;gBACL,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;aAC5B;SACF;QACD,IAAI,IAAI,KAAK,OAAO,EAAE;YACpB,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;aAC/B;iBAAM;gBACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;aAC5B;SACF;IACH,CAAC,CAAC;IAEF,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE;QACtC,KAAK,EAAE,UAAS,GAAG,IAAe;;YAChC,IAAI,YAAY,GAAW,IAAI,CAAC,UAAU,CAAC,CAAC;YAC5C,MAAM,OAAO,SAAgB,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC;YAElD,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,UAAU,EAAE;gBACxC,GAAG,EAAE;oBACH,OAAO,YAAY,CAAC;gBACtB,CAAC;gBACD,GAAG,EAAE,UAAS,KAAK;oBACjB,KAAK,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;oBACtB,YAAY,GAAG,KAAK,CAAC;gBACvB,CAAC;gBACD,YAAY,EAAE,IAAI;aACnB,CAAC,CAAC;YACH,IAAI,YAAY,EAAE;gBAChB,KAAK,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC;aAC9B;YACD,OAAO,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAClC,CAAC;QACD,YAAY,EAAE,IAAI;QAClB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from './host-listener';
+export * from './host-binding';

package/dist/index.js

@@ -11,4 +11,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./host-listener"), exports);
+__exportStar(require("./host-binding"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,kDAAgC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,kDAAgC;AAChC,iDAA+B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhtml/decorators",
-  "version": "0.0.109",
+  "version": "0.0.112",
   "description": "Reactive HyperText Markup Language",
   "scripts": {
     "start": "npx parcel ./examples/index.html --out-dir build/examples",

package/src/host-binding.ts

@@ -0,0 +1,60 @@
+// type Class = 'class';
+// type Style = 'style';
+// type Type = Style | Class;
+
+// type Styles = keyof CSSStyleDeclaration;
+
+// type Binding<T = Type> = T extends Style ? `${T}.${Styles}` : `${Class}.${string}`;
+
+export const HostBinding = <T>(binding: string /* Binding<T> */) => (
+  target,
+  memberName: string
+) => {
+  const [type, key] = binding.split('.');
+
+  const OnInit =
+    target['OnInit'] ||
+    function() {
+      /*  */
+    };
+  const apply = (value: string) => (element: HTMLElement) => {
+    if (type === 'style') {
+      if (!value) {
+        element.style[key] = null;
+      } else {
+        element.style[key] = value;
+      }
+    }
+    if (type === 'class') {
+      if (!value) {
+        element.classList.remove(key);
+      } else {
+        element.classList.add(key);
+      }
+    }
+  };
+
+  Object.defineProperty(target, 'OnInit', {
+    value: function(...args: unknown[]) {
+      let currentValue: string = this[memberName];
+      const element: HTMLElement = this.element ?? this;
+
+      Object.defineProperty(target, memberName, {
+        get: function() {
+          return currentValue;
+        },
+        set: function(value) {
+          apply(value)(element);
+          currentValue = value;
+        },
+        configurable: true
+      });
+      if (currentValue) {
+        apply(currentValue)(element);
+      }
+      return OnInit.apply(this, args);
+    },
+    configurable: true,
+    writable: true
+  });
+};

package/src/index.ts

@@ -1 +1,2 @@
 export * from './host-listener';
+export * from './host-binding';