@rhtml/decorators 0.0.101

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,72 @@
+# @rhtml/decorators
+
+#### Installation
+
+```bash
+npm i @rhtml/decorators
+```
+
+#### Usage
+
+```typescript
+import { Attribute, Options } from '@rhtml/custom-attributes';
+import { Input, HostListener } from '@rhtml/decorators';
+
+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);
+    console.log(this.myProperty);
+  }
+
+  @HostListener('mouseleave')
+  leave(event: Event) {
+    console.log('LEAVE', this, event);
+    console.log(this.myProperty);
+  }
+}
+```
+
+```html
+<div test myProperty="12312">
+  111
+</div>
+```
+
+#### Usage inside @rxdi/lit-html
+
+```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('mouseenter') onEnter() {
+    console.log('Enter home');
+  }
+
+  @HostListener('mouseleave') onLeave() {
+    console.log('Leave home');
+  }
+}
+```

package/dist/host-listener.d.ts

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

package/dist/host-listener.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HostListener = void 0;
+exports.HostListener = (event) => (target, key, propertyDescriptor) => {
+    const wrapper = function (...args) {
+        return propertyDescriptor.value.apply(this, args);
+    };
+    const OnInit = target['OnInit'] ||
+        function () {
+            /*  */
+        };
+    const OnDestroy = target['OnDestroy'] ||
+        function () {
+            /*  */
+        };
+    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));
+            return OnInit.apply(this, args);
+        },
+        configurable: true,
+        writable: true
+    });
+    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));
+            return OnDestroy.apply(this, args);
+        },
+        configurable: true,
+        writable: true
+    });
+    return {
+        get: () => wrapper
+    };
+};
+//# sourceMappingURL=host-listener.js.map

package/dist/host-listener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host-listener.js","sourceRoot":"","sources":["../src/host-listener.ts"],"names":[],"mappings":";;;AAAa,QAAA,YAAY,GAAG,CAAC,KAA6B,EAAE,EAAE,CAAC,CAC7D,MAAe,EACf,GAAW,EACX,kBAAsC,EACtC,EAAE;IACF,MAAM,OAAO,GAAG,UAAS,GAAG,IAAe;QACzC,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,UAAS,GAAG,IAAe;;YAChC,MAAM,OAAO,SAAG,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,UAAS,GAAG,IAAe;;YAChC,MAAM,OAAO,SAAG,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"}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./host-listener"), exports);
+__exportStar(require("./input"), exports);
+//# 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,kDAAgC;AAChC,0CAAwB"}

package/dist/input.d.ts

@@ -0,0 +1 @@
+export declare const Input: () => (target: unknown, memberName: string) => void;

package/dist/input.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+exports.Input = () => (target, memberName) => {
+    Object.defineProperty(target, memberName, {
+        get: function () {
+            return this.element.getAttribute(memberName.toLowerCase());
+        }
+    });
+};
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":";;;AAAa,QAAA,KAAK,GAAG,GAAG,EAAE,CAAC,CAAC,MAAe,EAAE,UAAkB,EAAE,EAAE;IACjE,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,UAAU,EAAE;QACxC,GAAG,EAAE;YACH,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;QAC7D,CAAC;KACF,CAAC,CAAC;AACL,CAAC,CAAC"}

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,37 @@
+{
+  "name": "@rhtml/decorators",
+  "version": "0.0.101",
+  "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"
+  },
+  "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/host-listener.ts

@@ -0,0 +1,46 @@
+export const HostListener = (event: keyof DocumentEventMap) => (
+  target: unknown,
+  key: string,
+  propertyDescriptor: PropertyDescriptor
+) => {
+  const wrapper = function(...args: unknown[]) {
+    return propertyDescriptor.value.apply(this, args);
+  };
+  const OnInit =
+    target['OnInit'] ||
+    function() {
+      /*  */
+    };
+  const OnDestroy =
+    target['OnDestroy'] ||
+    function() {
+      /*  */
+    };
+
+  Object.defineProperty(target, 'OnInit', {
+    value: function(...args: unknown[]) {
+      const element = this.element ?? this;
+      element.addEventListener(event, (...args: unknown[]) =>
+        wrapper.apply(this, args)
+      );
+      return OnInit.apply(this, args);
+    },
+    configurable: true,
+    writable: true
+  });
+
+  Object.defineProperty(target, 'OnDestroy', {
+    value: function(...args: unknown[]) {
+      const element = this.element ?? this;
+      element.removeEventListener(event, (...args: unknown[]) =>
+        wrapper.apply(this, args)
+      );
+      return OnDestroy.apply(this, args);
+    },
+    configurable: true,
+    writable: true
+  });
+  return {
+    get: () => wrapper
+  };
+};

package/src/index.ts

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

package/src/input.ts

@@ -0,0 +1,7 @@
+export const Input = () => (target: unknown, memberName: string) => {
+  Object.defineProperty(target, memberName, {
+    get: function() {
+      return this.element.getAttribute(memberName.toLowerCase());
+    }
+  });
+};

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/**/*"]
+}