@maxzima/wa-communicator 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Noname
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# Sender
+
+```javascript
+const communicator = new CommunicatorSender({
+  targetOrigin: 'google.com',
+  otherWindow: window.parent,
+});
+
+communicator.sendMessage({
+  target: 'sign_up',
+  action: [
+    {
+      key: 'goto',
+      params: {
+        url: 'clients.google.com',
+        isTargetBlank: true
+      }
+    }
+  ]
+});
+```
+
+# Receiver
+
+```javascript
+const communicator = new CommunicatorReceiver({
+  callback: (message) => {
+    if (message.target === 'sign_up' && message.action.length) {
+      message.action.forEach((action) => {
+        if (action.key === CommunicatorActionEnum.GOTO) {
+          window.location = action.params['url'];
+        }
+      })
+    }
+  }
+});
+
+communicator.watch();
+```

package/package.json

@@ -0,0 +1,19 @@
+{
+  "version": "0.0.2",
+  "name": "@maxzima/wa-communicator",
+  "description": "",
+  "author": "Noname",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "engines": {
+    "node": ">=14"
+  },
+  "scripts": {
+    "postinstall": "npm run build",
+    "build": "tsc --project tsconfig.json"
+  },
+  "devDependencies": {
+    "typescript": "^4.7.4"
+  }
+}

package/src/engine/CommunicatorReceiver.ts

@@ -0,0 +1,50 @@
+import {TCommunicatorMessage, TReceiverProps} from '../types';
+
+export class CommunicatorReceiver {
+  private readonly callback: any;
+
+  constructor(props: TReceiverProps) {
+    this.callback = props.callback;
+  }
+
+  /**
+   * Watch Messages
+   */
+  public watch() {
+    window.addEventListener('message', this.onMessageReceive, false);
+  }
+
+  /**
+   *
+   * @param event
+   */
+  private onMessageReceive = (event: MessageEvent) => {
+    if (!event || !event.origin || !event.data) {
+      return;
+    }
+
+    let message: TCommunicatorMessage;
+
+    try {
+      message = JSON.parse(event.data);
+    } catch (error) {
+      console.log('PostMessage read error');
+      return;
+    }
+
+    if (window.origin !== event.origin) {
+      return;
+    }
+
+    if (!Array.isArray(message.action)) {
+      message.action = [message.action];
+    }
+
+    if (typeof this.callback !== 'function') {
+      return;
+    }
+
+    this.callback(message);
+  };
+}
+

package/src/engine/CommunicatorSender.ts

@@ -0,0 +1,26 @@
+import {TCommunicatorMessage, TSenderProps} from '../types';
+import {modifyUrl} from '../utils';
+import {CommunicatorTargetEnum} from '../enums/CommunicatorTargetEnum';
+
+export class CommunicatorSender {
+  private readonly otherWindow: Window;
+  private readonly targetOrigin: string;
+
+  constructor(props: TSenderProps) {
+    this.otherWindow = props.otherWindow;
+    this.targetOrigin = modifyUrl(props.targetOrigin);
+  }
+
+  public sendMessage(message: TCommunicatorMessage) {
+    if (
+      !this.targetOrigin ||
+      !CommunicatorTargetEnum.isCorrect(message.target)
+    ) {
+      return;
+    }
+
+    const jsonMessage = JSON.stringify(message);
+    this.otherWindow.postMessage(jsonMessage, this.targetOrigin);
+  }
+}
+

package/src/enums/BaseEnum.ts

@@ -0,0 +1,36 @@
+export default abstract class BaseEnum {
+  public static array: string[] = null;
+
+  public static isCorrect(value: string): boolean {
+    return value && value.trim() && this.getAsArray().indexOf(value) !== -1;
+  }
+
+  /**
+   * Gets array of all possible values
+   */
+  public static getAsArray(): string[] {
+    if (!this.array) {
+      let props = Object.getOwnPropertyNames(this);
+      let obj = Object.getPrototypeOf(this);
+
+      this.array = [];
+
+      while (Object.prototype.isPrototypeOf.call(BaseEnum, obj)) {
+        props = [...props, ...Object.getOwnPropertyNames(obj)];
+        obj = Object.getPrototypeOf(obj);
+      }
+
+      for (const prop of props) {
+        if (['caller', 'arguments', 'name', 'length', 'prototype'].indexOf(prop) !== -1) {
+          continue;
+        }
+        const self = this as {[index: string]: any};
+        const propValue = self[prop];
+        if (typeof propValue === 'string' && prop.indexOf('CONTEXT') === -1) {
+          this.array.push(propValue);
+        }
+      }
+    }
+    return this.array;
+  }
+}

package/src/enums/CommunicatorActionEnum.ts

@@ -0,0 +1,9 @@
+import {TCommunicatorActionKey} from '../types';
+import BaseEnum from './BaseEnum';
+
+export class CommunicatorActionEnum extends BaseEnum {
+  public static CLOSE: TCommunicatorActionKey = 'close';
+  public static OPEN: TCommunicatorActionKey = 'open';
+  public static GOTO: TCommunicatorActionKey = 'goto';
+  public static RESIZE: TCommunicatorActionKey = 'resize';
+}

package/src/enums/CommunicatorTargetEnum.ts

@@ -0,0 +1,7 @@
+import {TCommunicatorTargetKey} from '../types';
+import BaseEnum from './BaseEnum';
+
+export class CommunicatorTargetEnum extends BaseEnum {
+  public static SIGN_UP: TCommunicatorTargetKey = 'sign_up';
+  public static SIGN_IN: TCommunicatorTargetKey = 'sign_in';
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+import {CommunicatorReceiver} from "./engine/CommunicatorReceiver"
+import {CommunicatorSender} from "./engine/CommunicatorSender"
+import {CommunicatorTargetEnum} from "./enums/CommunicatorTargetEnum"
+import {CommunicatorActionEnum} from "./enums/CommunicatorActionEnum"
+import * as types from "./types";
+
+export {
+  CommunicatorReceiver,
+  CommunicatorSender,
+  CommunicatorTargetEnum,
+  CommunicatorActionEnum,
+  types,
+}

package/src/types.ts

@@ -0,0 +1,43 @@
+export type TSenderProps = {
+  targetOrigin: string,
+  otherWindow: Window,
+}
+
+export type TReceiverProps = {
+  callback: (message: TCommunicatorMessageReceiver) => void,
+}
+
+export type TCommunicatorTargetKey = 'sign_up' | 'sign_in';
+export type TCommunicatorActionKey = keyof TCommunicatorSenderActionMap;
+
+export type TCommunicatorActionResizeParams = {
+  width?: number,
+  height?: number,
+}
+
+export type TCommunicatorActionGotoParams = {
+  url: string,
+  isTargetBlank?: boolean,
+}
+
+export type TCommunicatorSenderActionMap = {
+  'resize': TCommunicatorActionResizeParams,
+  'goto': TCommunicatorActionGotoParams,
+  'close': null,
+  'open': TCommunicatorTargetKey,
+}
+
+export type TCommunicatorMessage = {
+  target: TCommunicatorTargetKey,
+  action: TCommunicatorActionItem | TCommunicatorActionItem[]
+}
+
+export type TCommunicatorMessageReceiver = {
+  target: TCommunicatorTargetKey,
+  action: TCommunicatorActionItem[]
+}
+
+export type TCommunicatorActionItem = {
+  key: TCommunicatorActionKey,
+  params?: TCommunicatorSenderActionMap[TCommunicatorActionKey]
+};

package/src/utils.ts

@@ -0,0 +1,11 @@
+export function modifyUrl(address: string): string {
+  let url: URL;
+  try {
+    let targetOrigin = address.trim();
+    targetOrigin = (targetOrigin.indexOf('://') === -1) ? 'https://' + targetOrigin : targetOrigin;
+    url = new URL(targetOrigin);
+  } catch (_) {
+    return null;
+  }
+  return url.toString();
+}

package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "lib": [
+      "DOM",
+      "ES6",
+      "ESNext"
+    ],
+    "target": "ES6",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strictNullChecks": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": "./src",
+    "outDir": "dist",
+    "declaration": true,
+    "alwaysStrict": true,
+    "removeComments": false,
+    "noImplicitReturns": true,
+    "noEmit": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "importHelpers": true,
+    "sourceMap": false,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./src/types"
+    ],
+  },
+  "exclude": [
+    "dist",
+    "node_modules",
+  ]
+}