@rhtml/modifiers 0.0.138 → 0.0.140

package/dist/angular/index.js

@@ -3,5 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AngularLayout = void 0;
 const if_1 = require("./if");
 const registry_1 = require("./registry");
-exports.AngularLayout = [registry_1.Registry, if_1.IfOperator];
+const routerLink_1 = require("./routerLink");
+exports.AngularLayout = [registry_1.Registry, if_1.IfOperator, routerLink_1.RouterLink];
 //# sourceMappingURL=index.js.map

package/dist/angular/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":";;;AAAA,6BAAkC;AAClC,yCAAsC;AAEzB,QAAA,aAAa,GAAG,CAAC,mBAAQ,EAAE,eAAU,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":";;;AAAA,6BAAkC;AAClC,yCAAsC;AACtC,6CAA0C;AAE7B,QAAA,aAAa,GAAG,CAAC,mBAAQ,EAAE,eAAU,EAAE,uBAAU,CAAC,CAAC"}

package/dist/angular/routerLink.d.ts

@@ -0,0 +1,24 @@
+import { Attribute } from '@rhtml/custom-attributes';
+/**
+ * @customAttribute routerLink
+ */
+export declare class RouterLink extends Attribute {
+    onClick(): void;
+    private get queryParams();
+    private get hasParams();
+    private getFullRoute;
+    private getUrl;
+    private parseParams;
+}
+/**
+ * Method helper for stringifying data so we can pass it to `queryParams` attribute
+ * Without helper: `<div routerLink=${'/projects'} queryParams='{"tracingId": 123}'>CLICK</div>`
+ * With helper: `<div routerLink=${'/projects'} queryParams=${stringify({ tracingId: 123 })}>CLICK</div>`
+ */
+export declare const stringify: (data: Record<string, unknown>) => string;
+/**
+ * Additionally for extracting query parameters we could use this method directly from the router @rhtml/router itself
+ * const params = this.router.getQueryParams<{ tracingId: string }>();
+ * console.log(params.tracingId);
+ */
+export declare const getQueryParams: <T>() => T;

package/dist/angular/routerLink.js

@@ -0,0 +1,77 @@
+"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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getQueryParams = exports.stringify = exports.RouterLink = void 0;
+const custom_attributes_1 = require("@rhtml/custom-attributes");
+const decorators_1 = require("@rhtml/decorators");
+/**
+ * @customAttribute routerLink
+ */
+let RouterLink = class RouterLink extends custom_attributes_1.Attribute {
+    onClick() {
+        const { pathname, search, hash } = this.getFullRoute();
+        window.dispatchEvent(new CustomEvent(`router-go`, {
+            cancelable: true,
+            detail: {
+                pathname,
+                search: search || '',
+                hash: hash || '',
+            },
+        }));
+    }
+    get queryParams() {
+        return this.element.getAttribute('queryParams');
+    }
+    get hasParams() {
+        return this.element.hasAttribute('queryParams');
+    }
+    getFullRoute() {
+        if (this.hasParams) {
+            const params = new URLSearchParams(this.parseParams());
+            return this.getUrl([this.value, '?', params.toString()].join(''));
+        }
+        return this.getUrl(this.value);
+    }
+    getUrl(path) {
+        return new URL(path, 'http://a');
+    }
+    parseParams() {
+        var _a;
+        return JSON.parse((_a = this.queryParams) !== null && _a !== void 0 ? _a : '{}');
+    }
+};
+exports.RouterLink = RouterLink;
+__decorate([
+    (0, decorators_1.HostListener)('click'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], RouterLink.prototype, "onClick", null);
+exports.RouterLink = RouterLink = __decorate([
+    (0, custom_attributes_1.Modifier)({
+        selector: 'routerLink',
+    })
+], RouterLink);
+/**
+ * Method helper for stringifying data so we can pass it to `queryParams` attribute
+ * Without helper: `<div routerLink=${'/projects'} queryParams='{"tracingId": 123}'>CLICK</div>`
+ * With helper: `<div routerLink=${'/projects'} queryParams=${stringify({ tracingId: 123 })}>CLICK</div>`
+ */
+const stringify = (data) => JSON.stringify(data);
+exports.stringify = stringify;
+/**
+ * Additionally for extracting query parameters we could use this method directly from the router @rhtml/router itself
+ * const params = this.router.getQueryParams<{ tracingId: string }>();
+ * console.log(params.tracingId);
+ */
+const getQueryParams = () => [...new URLSearchParams(location.search)].reduce((prev, [key, value]) => (Object.assign(Object.assign({}, prev), { [key]: value })), {});
+exports.getQueryParams = getQueryParams;
+//# sourceMappingURL=routerLink.js.map

package/dist/angular/routerLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"routerLink.js","sourceRoot":"","sources":["../../src/angular/routerLink.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,gEAA+D;AAC/D,kDAAiD;AAEjD;;GAEG;AAII,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,6BAAS;IAEvC,OAAO;QACL,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAEvD,MAAM,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,WAAW,EAAE;YAC3B,UAAU,EAAE,IAAI;YAChB,MAAM,EAAE;gBACN,QAAQ;gBACR,MAAM,EAAE,MAAM,IAAI,EAAE;gBACpB,IAAI,EAAE,IAAI,IAAI,EAAE;aACjB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAClD,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAClD,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,MAAM,MAAM,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;YACvD,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QACpE,CAAC;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAEO,MAAM,CAAC,IAAY;QACzB,OAAO,IAAI,GAAG,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IACnC,CAAC;IAEO,WAAW;;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,CAAC;IAC9C,CAAC;CACF,CAAA;AAzCY,gCAAU;AAErB;IADC,IAAA,yBAAY,EAAC,OAAO,CAAC;;;;yCAcrB;qBAfU,UAAU;IAHtB,IAAA,4BAAQ,EAAC;QACR,QAAQ,EAAE,YAAY;KACvB,CAAC;GACW,UAAU,CAyCtB;AAED;;;;GAIG;AACI,MAAM,SAAS,GAAG,CAAC,IAA6B,EAAE,EAAE,CACzD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AADV,QAAA,SAAS,aACC;AAEvB;;;;GAIG;AACI,MAAM,cAAc,GAAG,GAAM,EAAE,CACpC,CAAC,GAAG,IAAI,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAC9C,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,CAAC,GAAG,CAAC,EAAE,KAAK,IAAG,EACnD,EAAO,CACR,CAAC;AAJS,QAAA,cAAc,kBAIvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhtml/modifiers",
-  "version": "0.0.138",
+  "version": "0.0.140",
   "description": "Reactive HyperText Markup Language",
   "scripts": {
     "start": "npx parcel ./examples/index.html --out-dir build/examples",
@@ -17,7 +17,8 @@
     "url": "git@github.com:rhtml/rhtml.git"
   },
   "dependencies": {
-    "@rhtml/custom-attributes": "0.0.138"
+    "@rhtml/custom-attributes": "0.0.140",
+    "@rhtml/decorators": "0.0.140"
   },
   "devDependencies": {},
   "author": "Kristiyan Tachev",

package/src/angular/index.ts

@@ -1,4 +1,5 @@
 import { IfOperator } from './if';
 import { Registry } from './registry';
+import { RouterLink } from './routerLink';
 
-export const AngularLayout = [Registry, IfOperator];
+export const AngularLayout = [Registry, IfOperator, RouterLink];

package/src/angular/routerLink.ts

@@ -0,0 +1,70 @@
+import { Attribute, Modifier } from '@rhtml/custom-attributes';
+import { HostListener } from '@rhtml/decorators';
+
+/**
+ * @customAttribute routerLink
+ */
+@Modifier({
+  selector: 'routerLink',
+})
+export class RouterLink extends Attribute {
+  @HostListener('click')
+  onClick() {
+    const { pathname, search, hash } = this.getFullRoute();
+
+    window.dispatchEvent(
+      new CustomEvent(`router-go`, {
+        cancelable: true,
+        detail: {
+          pathname,
+          search: search || '',
+          hash: hash || '',
+        },
+      })
+    );
+  }
+
+  private get queryParams() {
+    return this.element.getAttribute('queryParams');
+  }
+
+  private get hasParams() {
+    return this.element.hasAttribute('queryParams');
+  }
+
+  private getFullRoute() {
+    if (this.hasParams) {
+      const params = new URLSearchParams(this.parseParams());
+      return this.getUrl([this.value, '?', params.toString()].join(''));
+    }
+
+    return this.getUrl(this.value);
+  }
+
+  private getUrl(path: string) {
+    return new URL(path, 'http://a');
+  }
+
+  private parseParams() {
+    return JSON.parse(this.queryParams ?? '{}');
+  }
+}
+
+/**
+ * Method helper for stringifying data so we can pass it to `queryParams` attribute
+ * Without helper: `<div routerLink=${'/projects'} queryParams='{"tracingId": 123}'>CLICK</div>`
+ * With helper: `<div routerLink=${'/projects'} queryParams=${stringify({ tracingId: 123 })}>CLICK</div>`
+ */
+export const stringify = (data: Record<string, unknown>) =>
+  JSON.stringify(data);
+
+/**
+ * Additionally for extracting query parameters we could use this method directly from the router @rhtml/router itself
+ * const params = this.router.getQueryParams<{ tracingId: string }>();
+ * console.log(params.tracingId);
+ */
+export const getQueryParams = <T>() =>
+  [...new URLSearchParams(location.search)].reduce(
+    (prev, [key, value]) => ({ ...prev, [key]: value }),
+    {} as T
+  );