Release 1.0.2

davychhouk · Nov 28, 2022 · 266e11f · 266e11f
1 parent ca124ff
commit 266e11f
Show file tree

Hide file tree

Showing 28 changed files with 66 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -40,7 +40,11 @@ In `App1`:
 
 ```javascript
 import { useEffect, useState } from "react";
-import { attachParamsToUrl, Iframe, initRequester } from "react-postmessage";
+import {
+  attachParamsToUrl,
+  Iframe,
+  initRequester,
+} from "@chhoukdavy/react-postmessage";
 import "./App.css";
 
 const URL = "http://localhost:3001";
@@ -104,7 +108,7 @@ import {
   cleanUp,
   postMessage,
   signalClose,
-} from "react-postmessage";
+} from "@chhoukdavy/react-postmessage";
 import "./App.css";
 
 type HookData = {
@@ -122,10 +126,7 @@ function App() {
       hook: setData,
       checkOrigin: true,
     });
-
-    return () => {
-      cleanUp();
-    };
+    return cleanUp();
   }, [fromOrigin]);
 
   return (

diff --git a/example/app1/package.json b/example/app1/package.json
@@ -8,6 +8,7 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
+    "@chhoukdavy/react-postmessage": "^1.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-postmessage": "link:../..",

diff --git a/example/app1/src/App.tsx b/example/app1/src/App.tsx
@@ -1,9 +1,13 @@
 import { useEffect, useState } from "react";
-import { attachParamsToUrl, Iframe, initRequester } from "react-postmessage";
+import {
+  attachParamsToUrl,
+  initRequester,
+  Iframe,
+} from "@chhoukdavy/react-postmessage";
 import "./App.css";
 
 const URL = "http://localhost:3001";
-const testData = {
+const TEST_DATA = {
   test: "sth from app1",
 };
 
@@ -18,8 +22,8 @@ function App() {
   useEffect(() => {
     initRequester<Data>({
       url: URL,
+      data: TEST_DATA,
       checkOrigin: true,
-      data: testData,
       hook: setData,
       close: () => setShow(false),
     });
@@ -28,7 +32,7 @@ function App() {
   const formedURL = attachParamsToUrl(URL, [
     {
       name: "fromOrigin",
-      value: "http://localhost:3000",
+      value: window?.location?.origin,
     },
   ]);
 

diff --git a/example/app1/yarn.lock b/example/app1/yarn.lock
@@ -1082,6 +1082,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@chhoukdavy/react-postmessage@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chhoukdavy/react-postmessage/-/react-postmessage-1.0.1.tgz#bf5c9fb5092acf27b25fe591897fb24dc95a442d"
+  integrity sha512-UmlNeAbmpGGajg5EN/xBuTtRcMkNLL2B0IxUp5OGzymLVcQj5j2drKVDtiCgV2gvwbsOd8nWnBdaDk+FGJeNjg==
+
 "@csstools/normalize.css@*":
   version "12.0.0"
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4"

diff --git a/example/app2/package.json b/example/app2/package.json
@@ -8,6 +8,7 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
+    "@chhoukdavy/react-postmessage": "^1.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-postmessage": "link:../..",

diff --git a/example/app2/src/App.tsx b/example/app2/src/App.tsx
@@ -4,7 +4,7 @@ import {
   cleanUp,
   postMessage,
   signalClose,
-} from "react-postmessage";
+} from "@chhoukdavy/react-postmessage";
 import "./App.css";
 
 type HookData = {
@@ -22,10 +22,7 @@ function App() {
       hook: setData,
       checkOrigin: true,
     });
-
-    return () => {
-      cleanUp();
-    };
+    return cleanUp();
   }, [fromOrigin]);
 
   return (

diff --git a/example/app2/yarn.lock b/example/app2/yarn.lock
@@ -1082,6 +1082,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@chhoukdavy/react-postmessage@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@chhoukdavy/react-postmessage/-/react-postmessage-1.0.1.tgz#bf5c9fb5092acf27b25fe591897fb24dc95a442d"
+  integrity sha512-UmlNeAbmpGGajg5EN/xBuTtRcMkNLL2B0IxUp5OGzymLVcQj5j2drKVDtiCgV2gvwbsOd8nWnBdaDk+FGJeNjg==
+
 "@csstools/normalize.css@*":
   version "12.0.0"
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4"

diff --git a/lib/cjs/components/Iframe.d.ts b/lib/cjs/components/Iframe.d.ts
@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type Props = {
+type Props = {
     url: string;
     height?: number | string | undefined;
     width?: number | string | undefined;

diff --git a/lib/cjs/components/Iframe.js b/lib/cjs/components/Iframe.js
@@ -8,6 +8,6 @@ var react_1 = __importDefault(require("react"));
 var constants_1 = require("../constants");
 var Iframe = function (_a) {
     var url = _a.url, _b = _a.height, height = _b === void 0 ? 450 : _b, _c = _a.width, width = _c === void 0 ? 450 : _c;
-    return (react_1.default.createElement("iframe", { id: constants_1.IFRAME_ID, src: url, width: width, height: height }));
+    return (react_1.default.createElement("iframe", { id: constants_1.TARGET_ID, src: url, width: width, height: height }));
 };
 exports.Iframe = Iframe;
diff --git a/lib/cjs/constants.d.ts b/lib/cjs/constants.d.ts
@@ -1,4 +1,4 @@
-export declare const IFRAME_ID = "react-postmessage-iframe";
+export declare const TARGET_ID = "@chhoukdavy/react-postmessage-target-window-id";
 export declare const TYPES: {
     handshake: string;
     request: string;

diff --git a/lib/cjs/constants.js b/lib/cjs/constants.js
@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TYPES = exports.IFRAME_ID = void 0;
-exports.IFRAME_ID = "react-postmessage-iframe";
+exports.TYPES = exports.TARGET_ID = void 0;
+exports.TARGET_ID = "@chhoukdavy/react-postmessage-target-window-id";
 exports.TYPES = {
     handshake: "handshake",
     request: "request",

diff --git a/lib/cjs/utils/params.d.ts b/lib/cjs/utils/params.d.ts
@@ -1,6 +1,6 @@
 export declare const getOriginFromUrl: (url: string) => string;
 export declare const getParam: (href: string, name: string) => string | null;
-declare type Param = {
+type Param = {
     name: string;
     value: string | undefined;
 };

diff --git a/lib/cjs/utils/params.js b/lib/cjs/utils/params.js
@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.attachParamsToUrl = exports.getParam = exports.getOriginFromUrl = void 0;
 var getOriginFromUrl = function (url) {
     var _a;
-    return (_a = new URL(url)) === null || _a === void 0 ? void 0 : _a.origin;
+    var cleanedHref = url === null || url === void 0 ? void 0 : url.replace("#", "");
+    return (_a = new URL(cleanedHref)) === null || _a === void 0 ? void 0 : _a.origin;
 };
 exports.getOriginFromUrl = getOriginFromUrl;
 var getParam = function (href, name) {

diff --git a/lib/cjs/utils/utilities.d.ts b/lib/cjs/utils/utilities.d.ts
@@ -1,4 +1,4 @@
-declare type RequesterArgs = {
+type RequesterArgs = {
     url: string;
     checkOrigin?: boolean;
 };
@@ -7,7 +7,7 @@ export declare function initRequester<Data>({ url, checkOrigin, data, hook, clos
     hook?: (args: Data) => void;
     close?: () => void;
 }): void;
-declare type ResponderArgs = {
+type ResponderArgs = {
     fromOrigin: string;
     setFromOrigin: (o: string) => void;
     checkOrigin?: boolean;

diff --git a/lib/cjs/utils/utilities.js b/lib/cjs/utils/utilities.js
@@ -6,7 +6,7 @@ var params_1 = require("./params");
 function initRequester(_a) {
     var url = _a.url, checkOrigin = _a.checkOrigin, data = _a.data, hook = _a.hook, close = _a.close;
     if (window && document) {
-        var iframeElement = document === null || document === void 0 ? void 0 : document.getElementById(constants_1.IFRAME_ID);
+        var iframeElement = document === null || document === void 0 ? void 0 : document.getElementById(constants_1.TARGET_ID);
         var iframeWindow_1 = iframeElement === null || iframeElement === void 0 ? void 0 : iframeElement.contentWindow;
         /**
          * Register listener
@@ -63,7 +63,7 @@ function initReceiver(_a) {
             var type = (_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a.type;
             var payload = (_b = e === null || e === void 0 ? void 0 : e.data) === null || _b === void 0 ? void 0 : _b.payload;
             if (type === constants_1.TYPES.request && payload) {
-                hook(payload);
+                hook && hook(payload);
                 return;
             }
         }, false);
@@ -72,8 +72,8 @@ function initReceiver(_a) {
          */
         var origin_1 = (0, params_1.getParam)((_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href, "fromOrigin");
         if (origin_1) {
-            setFromOrigin(origin_1);
             (_c = window === null || window === void 0 ? void 0 : window.parent) === null || _c === void 0 ? void 0 : _c.postMessage({ type: constants_1.TYPES.handshake }, origin_1);
+            setFromOrigin(origin_1);
         }
     }
 }

diff --git a/lib/esm/components/Iframe.d.ts b/lib/esm/components/Iframe.d.ts
@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type Props = {
+type Props = {
     url: string;
     height?: number | string | undefined;
     width?: number | string | undefined;

diff --git a/lib/esm/components/Iframe.js b/lib/esm/components/Iframe.js
@@ -1,6 +1,6 @@
 import React from "react";
-import { IFRAME_ID } from "../constants";
+import { TARGET_ID } from "../constants";
 export var Iframe = function (_a) {
     var url = _a.url, _b = _a.height, height = _b === void 0 ? 450 : _b, _c = _a.width, width = _c === void 0 ? 450 : _c;
-    return (React.createElement("iframe", { id: IFRAME_ID, src: url, width: width, height: height }));
+    return (React.createElement("iframe", { id: TARGET_ID, src: url, width: width, height: height }));
 };
diff --git a/lib/esm/constants.d.ts b/lib/esm/constants.d.ts
@@ -1,4 +1,4 @@
-export declare const IFRAME_ID = "react-postmessage-iframe";
+export declare const TARGET_ID = "@chhoukdavy/react-postmessage-target-window-id";
 export declare const TYPES: {
     handshake: string;
     request: string;

diff --git a/lib/esm/constants.js b/lib/esm/constants.js
@@ -1,4 +1,4 @@
-export var IFRAME_ID = "react-postmessage-iframe";
+export var TARGET_ID = "@chhoukdavy/react-postmessage-target-window-id";
 export var TYPES = {
     handshake: "handshake",
     request: "request",

diff --git a/lib/esm/utils/params.d.ts b/lib/esm/utils/params.d.ts
@@ -1,6 +1,6 @@
 export declare const getOriginFromUrl: (url: string) => string;
 export declare const getParam: (href: string, name: string) => string | null;
-declare type Param = {
+type Param = {
     name: string;
     value: string | undefined;
 };

diff --git a/lib/esm/utils/params.js b/lib/esm/utils/params.js
@@ -1,6 +1,7 @@
 export var getOriginFromUrl = function (url) {
     var _a;
-    return (_a = new URL(url)) === null || _a === void 0 ? void 0 : _a.origin;
+    var cleanedHref = url === null || url === void 0 ? void 0 : url.replace("#", "");
+    return (_a = new URL(cleanedHref)) === null || _a === void 0 ? void 0 : _a.origin;
 };
 export var getParam = function (href, name) {
     var _a;

diff --git a/lib/esm/utils/utilities.d.ts b/lib/esm/utils/utilities.d.ts
@@ -1,4 +1,4 @@
-declare type RequesterArgs = {
+type RequesterArgs = {
     url: string;
     checkOrigin?: boolean;
 };
@@ -7,7 +7,7 @@ export declare function initRequester<Data>({ url, checkOrigin, data, hook, clos
     hook?: (args: Data) => void;
     close?: () => void;
 }): void;
-declare type ResponderArgs = {
+type ResponderArgs = {
     fromOrigin: string;
     setFromOrigin: (o: string) => void;
     checkOrigin?: boolean;

diff --git a/lib/esm/utils/utilities.js b/lib/esm/utils/utilities.js
@@ -1,9 +1,9 @@
-import { IFRAME_ID, TYPES } from "../constants";
+import { TARGET_ID, TYPES } from "../constants";
 import { getOriginFromUrl, getParam } from "./params";
 export function initRequester(_a) {
     var url = _a.url, checkOrigin = _a.checkOrigin, data = _a.data, hook = _a.hook, close = _a.close;
     if (window && document) {
-        var iframeElement = document === null || document === void 0 ? void 0 : document.getElementById(IFRAME_ID);
+        var iframeElement = document === null || document === void 0 ? void 0 : document.getElementById(TARGET_ID);
         var iframeWindow_1 = iframeElement === null || iframeElement === void 0 ? void 0 : iframeElement.contentWindow;
         /**
          * Register listener
@@ -59,7 +59,7 @@ export function initReceiver(_a) {
             var type = (_a = e === null || e === void 0 ? void 0 : e.data) === null || _a === void 0 ? void 0 : _a.type;
             var payload = (_b = e === null || e === void 0 ? void 0 : e.data) === null || _b === void 0 ? void 0 : _b.payload;
             if (type === TYPES.request && payload) {
-                hook(payload);
+                hook && hook(payload);
                 return;
             }
         }, false);
@@ -68,8 +68,8 @@ export function initReceiver(_a) {
          */
         var origin_1 = getParam((_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href, "fromOrigin");
         if (origin_1) {
-            setFromOrigin(origin_1);
             (_c = window === null || window === void 0 ? void 0 : window.parent) === null || _c === void 0 ? void 0 : _c.postMessage({ type: TYPES.handshake }, origin_1);
+            setFromOrigin(origin_1);
         }
     }
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@chhoukdavy/react-postmessage",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "author": "Davy CHHOUK",
   "scripts": {
     "build": "yarn build:esm && yarn build:cjs",

diff --git a/src/components/Iframe.tsx b/src/components/Iframe.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { IFRAME_ID } from "../constants";
+import { TARGET_ID } from "../constants";
 
 type Props = {
   url: string;
@@ -12,5 +12,5 @@ export const Iframe = ({
   height = 450,
   width = 450,
 }: Props): JSX.Element => (
-  <iframe id={IFRAME_ID} src={url} width={width} height={height} />
+  <iframe id={TARGET_ID} src={url} width={width} height={height} />
 );
diff --git a/src/constants.ts b/src/constants.ts
@@ -1,4 +1,4 @@
-export const IFRAME_ID = "react-postmessage-iframe";
+export const TARGET_ID = "@chhoukdavy/react-postmessage-target-window-id";
 export const TYPES = {
   handshake: "handshake",
   request: "request",

diff --git a/src/utils/params.ts b/src/utils/params.ts
@@ -1,5 +1,6 @@
 export const getOriginFromUrl = (url: string) => {
-  return new URL(url)?.origin;
+  const cleanedHref = url?.replace("#", "");
+  return new URL(cleanedHref)?.origin;
 };
 
 export const getParam = (href: string, name: string): string | null => {
@@ -36,6 +37,5 @@ export const attachParamsToUrl = (url: string, params: Param[]): string => {
       }
     }
   });
-
   return attachedUrl;
 };
diff --git a/src/utils/utilities.ts b/src/utils/utilities.ts
@@ -1,4 +1,4 @@
-import { IFRAME_ID, TYPES } from "../constants";
+import { TARGET_ID, TYPES } from "../constants";
 import { getOriginFromUrl, getParam } from "./params";
 
 type RequesterArgs = {
@@ -18,7 +18,7 @@ export function initRequester<Data>({
 }) {
   if (window && document) {
     const iframeElement = document?.getElementById(
-      IFRAME_ID
+      TARGET_ID
     ) as HTMLIFrameElement;
     const iframeWindow = iframeElement?.contentWindow;
 
@@ -92,7 +92,7 @@ export function initReceiver<Data>({
         const type = e?.data?.type;
         const payload = e?.data?.payload;
         if (type === TYPES.request && payload) {
-          hook(payload);
+          hook && hook(payload);
           return;
         }
       },
@@ -104,8 +104,8 @@ export function initReceiver<Data>({
      */
     const origin = getParam(window?.location?.href, "fromOrigin");
     if (origin) {
-      setFromOrigin(origin);
       window?.parent?.postMessage({ type: TYPES.handshake }, origin);
+      setFromOrigin(origin);
     }
   }
 }