@rhtml/decorators 0.0.134 → 0.0.136

package/README.md

@@ -13,7 +13,7 @@ import { Attribute, Options, Input } from '@rhtml/custom-attributes';
 import { HostListener } from '@rhtml/decorators';
 
 @Modifier({
-  selector: 'test'
+  selector: 'test',
 })
 export class TestDirective extends Attribute {
   @Input()
@@ -34,9 +34,7 @@ export class TestDirective extends Attribute {
 ```
 
 ```html
-<div test myProperty="12312">
-  111
-</div>
+<div test myProperty="12312">111</div>
 ```
 
 #### Usage inside @rxdi/lit-html
@@ -52,10 +50,8 @@ import { HostListener } from '@rhtml/decorators';
 @Component({
   selector: 'home-component',
   template(this) {
-    return html`
-      Home Component
-    `;
-  }
+    return html` Home Component `;
+  },
 })
 export class HomeComponent extends LitElement {
   @HostListener('mouseenter') onEnter() {
@@ -68,6 +64,35 @@ export class HomeComponent extends LitElement {
 }
 ```
 
+#### Add window event listener
+
+```typescript
+import { Component, html, LitElement } from '@rxdi/lit-html';
+
+import { HostListener } from '@rhtml/decorators';
+
+/**
+ * @customElement home-component
+ */
+@Component({
+  selector: 'home-component',
+  template(this) {
+    return html` Home Component `;
+  },
+})
+export class HomeComponent extends LitElement {
+  @HostListener('window:mouseenter')
+  onEnter() {
+    console.log('Enter home');
+  }
+
+  @HostListener('window:mouseleave')
+  onLeave() {
+    console.log('Leave home');
+  }
+}
+```
+
 #### @HostBinding and @Input decorators
 
 Specifiyng Input and HostBinding decorator gives you an reactive ability to assign styles directly to input properties
@@ -79,7 +104,7 @@ import { Attribute, Input, Modifier } from '@rhtml/custom-attributes';
 import { HostBinding } from '@rhtml/decorators';
 
 @Modifier({
-  selector: 'layout'
+  selector: 'layout',
 })
 export class CustomLayout extends Attribute {
   @Input({ observe: true })

package/dist/host-listener.d.ts

@@ -1,3 +1,3 @@
-export declare const HostListener: (event: keyof DocumentEventMap) => (target: unknown, key: string, propertyDescriptor: PropertyDescriptor) => {
+export declare const HostListener: (event: keyof DocumentEventMap | `window:${keyof DocumentEventMap}`) => (target: unknown, key: string, propertyDescriptor: PropertyDescriptor) => {
     get: () => (...args: unknown[]) => any;
 };

package/dist/host-listener.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HostListener = void 0;
 const HostListener = (event) => (target, key, propertyDescriptor) => {
+    const [type, eventName] = event.split(':');
     const wrapper = function (...args) {
         return propertyDescriptor.value.apply(this, args);
     };
@@ -16,8 +17,9 @@ const HostListener = (event) => (target, key, propertyDescriptor) => {
     Object.defineProperty(target, 'OnInit', {
         value: function (...args) {
             var _a;
-            const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
-            element.addEventListener(event, (...args) => wrapper.apply(this, args));
+            const element = type === 'window' ? window : (_a = this.element) !== null && _a !== void 0 ? _a : this;
+            const e = type === 'window' ? eventName : event;
+            element.addEventListener(e, (...args) => wrapper.apply(this, args));
             return OnInit.apply(this, args);
         },
         configurable: true,
@@ -26,8 +28,9 @@ const HostListener = (event) => (target, key, propertyDescriptor) => {
     Object.defineProperty(target, 'OnDestroy', {
         value: function (...args) {
             var _a;
-            const element = (_a = this.element) !== null && _a !== void 0 ? _a : this;
-            element.removeEventListener(event, (...args) => wrapper.apply(this, args));
+            const element = type === 'window' ? window : (_a = this.element) !== null && _a !== void 0 ? _a : this;
+            const e = type === 'window' ? eventName : event;
+            element.removeEventListener(e, (...args) => wrapper.apply(this, args));
             return OnDestroy.apply(this, args);
         },
         configurable: true,

package/dist/host-listener.js.map

@@ -1 +1 @@
-{"version":3,"file":"host-listener.js","sourceRoot":"","sources":["../src/host-listener.ts"],"names":[],"mappings":";;;AAAO,MAAM,YAAY,GACvB,CAAC,KAA6B,EAAE,EAAE,CAClC,CAAC,MAAe,EAAE,GAAW,EAAE,kBAAsC,EAAE,EAAE;IACvE,MAAM,OAAO,GAAG,UAAU,GAAG,IAAe;QAC1C,OAAO,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACpD,CAAC,CAAC;IACF,MAAM,MAAM,GACV,MAAM,CAAC,QAAQ,CAAC;QAChB;YACE,MAAM;QACR,CAAC,CAAC;IACJ,MAAM,SAAS,GACb,MAAM,CAAC,WAAW,CAAC;QACnB;YACE,MAAM;QACR,CAAC,CAAC;IAEJ,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE;QACtC,KAAK,EAAE,UAAU,GAAG,IAAe;;YACjC,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC;YACrC,OAAO,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC,GAAG,IAAe,EAAE,EAAE,CACrD,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAC1B,CAAC;YACF,OAAO,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAClC,CAAC;QACD,YAAY,EAAE,IAAI;QAClB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,WAAW,EAAE;QACzC,KAAK,EAAE,UAAU,GAAG,IAAe;;YACjC,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC;YACrC,OAAO,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC,GAAG,IAAe,EAAE,EAAE,CACxD,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAC1B,CAAC;YACF,OAAO,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACrC,CAAC;QACD,YAAY,EAAE,IAAI;QAClB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IACH,OAAO;QACL,GAAG,EAAE,GAAG,EAAE,CAAC,OAAO;KACnB,CAAC;AACJ,CAAC,CAAC;AA3CS,QAAA,YAAY,gBA2CrB"}
+{"version":3,"file":"host-listener.js","sourceRoot":"","sources":["../src/host-listener.ts"],"names":[],"mappings":";;;AAAO,MAAM,YAAY,GACvB,CAAC,KAAkE,EAAE,EAAE,CACvE,CAAC,MAAe,EAAE,GAAW,EAAE,kBAAsC,EAAE,EAAE;IACvE,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAE3C,MAAM,OAAO,GAAG,UAAU,GAAG,IAAe;QAC1C,OAAO,kBAAkB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACpD,CAAC,CAAC;IACF,MAAM,MAAM,GACV,MAAM,CAAC,QAAQ,CAAC;QAChB;YACE,MAAM;QACR,CAAC,CAAC;IACJ,MAAM,SAAS,GACb,MAAM,CAAC,WAAW,CAAC;QACnB;YACE,MAAM;QACR,CAAC,CAAC;IAEJ,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE;QACtC,KAAK,EAAE,UAAU,GAAG,IAAe;;YACjC,MAAM,OAAO,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC;YAClE,MAAM,CAAC,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;YAEhD,OAAO,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,GAAG,IAAe,EAAE,EAAE,CACjD,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAC1B,CAAC;YACF,OAAO,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAClC,CAAC;QACD,YAAY,EAAE,IAAI;QAClB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IAEH,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,WAAW,EAAE;QACzC,KAAK,EAAE,UAAU,GAAG,IAAe;;YACjC,MAAM,OAAO,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,CAAC;YAClE,MAAM,CAAC,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;YAEhD,OAAO,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAC,GAAG,IAAe,EAAE,EAAE,CACpD,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAC1B,CAAC;YACF,OAAO,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACrC,CAAC;QACD,YAAY,EAAE,IAAI;QAClB,QAAQ,EAAE,IAAI;KACf,CAAC,CAAC;IACH,OAAO;QACL,GAAG,EAAE,GAAG,EAAE,CAAC,OAAO;KACnB,CAAC;AACJ,CAAC,CAAC;AAjDS,QAAA,YAAY,gBAiDrB"}

package/package.json

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

package/src/host-listener.ts

@@ -1,6 +1,8 @@
 export const HostListener =
-  (event: keyof DocumentEventMap) =>
+  (event: keyof DocumentEventMap | `window:${keyof DocumentEventMap}`) =>
   (target: unknown, key: string, propertyDescriptor: PropertyDescriptor) => {
+    const [type, eventName] = event.split(':');
+
     const wrapper = function (...args: unknown[]) {
       return propertyDescriptor.value.apply(this, args);
     };
@@ -17,8 +19,10 @@ export const HostListener =
 
     Object.defineProperty(target, 'OnInit', {
       value: function (...args: unknown[]) {
-        const element = this.element ?? this;
-        element.addEventListener(event, (...args: unknown[]) =>
+        const element = type === 'window' ? window : this.element ?? this;
+        const e = type === 'window' ? eventName : event;
+
+        element.addEventListener(e, (...args: unknown[]) =>
           wrapper.apply(this, args)
         );
         return OnInit.apply(this, args);
@@ -29,8 +33,10 @@ export const HostListener =
 
     Object.defineProperty(target, 'OnDestroy', {
       value: function (...args: unknown[]) {
-        const element = this.element ?? this;
-        element.removeEventListener(event, (...args: unknown[]) =>
+        const element = type === 'window' ? window : this.element ?? this;
+        const e = type === 'window' ? eventName : event;
+
+        element.removeEventListener(e, (...args: unknown[]) =>
           wrapper.apply(this, args)
         );
         return OnDestroy.apply(this, args);