From 516b703167fe1a845366d79e25cad922eebd92f1 Mon Sep 17 00:00:00 2001
From: Aurelien Franky <au.re@live.com>
Date: Sat, 26 Oct 2024 16:35:41 +0200
Subject: [PATCH 1/4] add onConnectionSetup event handler

---
 src/guest.ts | 8 +++++---
 src/host.ts  | 1 +
 src/types.ts | 4 ++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/guest.ts b/src/guest.ts
index 3b95cce..194b7ef 100644
--- a/src/guest.ts
+++ b/src/guest.ts
@@ -1,6 +1,6 @@
 import { extractMethods, isWorker } from "./helpers";
 import { registerLocalMethods, registerRemoteMethods } from "./rpc";
-import { actions, events, IConnection, ISchema } from "./types";
+import { actions, EventHandlers, events, IConnection, ISchema } from "./types";
 
 const REQUEST_INTERVAL = 10;
 const TIMEOUT_INTERVAL = 3000;
@@ -8,12 +8,12 @@ const TIMEOUT_INTERVAL = 3000;
 let interval: any = null;
 let connected = false;
 
-function connect(schema: ISchema = {}): Promise<IConnection> {
+function connect(schema: ISchema = {}, eventHandlers?: EventHandlers): Promise<IConnection> {
   return new Promise((resolve, reject) => {
     const localMethods = extractMethods(schema);
 
     // on handshake response
-    function handleHandshakeResponse(event: any) {
+    async function handleHandshakeResponse(event: any) {
       if (event.data.action !== actions.HANDSHAKE_REPLY) return;
 
       // register local methods
@@ -27,6 +27,8 @@ function connect(schema: ISchema = {}): Promise<IConnection> {
         event
       );
 
+      await eventHandlers?.onConnectionSetup?.(remote);
+
       // close the connection and all listeners when called
       const close = () => {
         self.removeEventListener(events.MESSAGE, handleHandshakeResponse);
diff --git a/src/host.ts b/src/host.ts
index 0102a6c..fcd69bd 100644
--- a/src/host.ts
+++ b/src/host.ts
@@ -70,6 +70,7 @@ function connect(guest: HTMLIFrameElement | Worker, schema: ISchema = {}): Promi
         listeners.removeEventListener(events.MESSAGE, handleHandshake);
         unregisterRemote();
         unregisterLocal();
+        if (guestIsWorker) (guest as Worker).terminate();
       };
 
       // resolve connection object
diff --git a/src/types.ts b/src/types.ts
index fab3433..ee4bb73 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -59,3 +59,7 @@ export interface IRPCResolvePayload {
   callName: string;
   connectionID: string;
 }
+
+export interface EventHandlers {
+  onConnectionSetup: (remote: ISchema) => Promise<void>;
+}

From 0b6a3b9ed9dc30be8e5b8858e11b780277131663 Mon Sep 17 00:00:00 2001
From: Aurelien Franky <au.re@live.com>
Date: Sat, 26 Oct 2024 16:35:53 +0200
Subject: [PATCH 2/4] 0.3.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 72250ff..ffc424f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "rimless",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "rimless",
-      "version": "0.2.3",
+      "version": "0.3.0",
       "license": "MIT",
       "devDependencies": {
         "@chromatic-com/storybook": "^1.7.0",
diff --git a/package.json b/package.json
index e83d6ed..8bafa8e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "rimless",
   "author": "Aurélien Franky",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "license": "MIT",
   "homepage": "https://github.com/au-re/rimless",
   "description": "event base communication made easy with a promise-based API wrapping `postMessage`",

From 7566bf59ce1f09238ef6b3376eaef85b03448e35 Mon Sep 17 00:00:00 2001
From: Aurelien Franky <au.re@live.com>
Date: Sun, 27 Oct 2024 22:43:10 +0100
Subject: [PATCH 3/4] await a connection confirmed before resolving the
 connection in the host

---
 docs/GettingStarted.mdx         |  7 +++-
 docs/examples/WorkerExample.tsx | 34 +++++++++++++++++++
 docs/examples/iframe.html       |  2 +-
 docs/examples/worker.ts         | 35 +++++++++++++++++++
 docs/typings.d.ts               | 11 ++++++
 src/guest.ts                    | 33 +++++++-----------
 src/helpers.ts                  | 60 ++++++++++++++++++++++++++-------
 src/host.ts                     | 13 ++++---
 src/rpc.ts                      |  6 ++--
 src/types.ts                    |  2 +-
 src/typings.d.ts                |  1 -
 src/utils.ts                    | 45 -------------------------
 src/vite-env.d.ts               |  5 ---
 13 files changed, 159 insertions(+), 95 deletions(-)
 create mode 100644 docs/examples/WorkerExample.tsx
 create mode 100644 docs/examples/worker.ts
 create mode 100644 docs/typings.d.ts
 delete mode 100644 src/typings.d.ts
 delete mode 100644 src/utils.ts

diff --git a/docs/GettingStarted.mdx b/docs/GettingStarted.mdx
index 5aebe25..0fa72ab 100644
--- a/docs/GettingStarted.mdx
+++ b/docs/GettingStarted.mdx
@@ -1,11 +1,12 @@
 import { Meta } from "@storybook/blocks";
 import SingleIframeExample from "./examples/SingleIframeExample";
+import WorkerExample from "./examples/WorkerExample";
 
 <Meta title="Getting Started" />
 
 # Rimless
 
-Rimless makes event based communication easy with a promise-based API wrapping [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). 
+Rimless makes event based communication easy with a promise-based API wrapping [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage).
 
 Rimless works with both **iframes** and **webworkers**.
 
@@ -18,3 +19,7 @@ In the example below you can invoke remote procedures from an iframe to the host
 versa.
 
 <SingleIframeExample />
+
+## RPCs on Web webworkers
+
+<WorkerExample />
diff --git a/docs/examples/WorkerExample.tsx b/docs/examples/WorkerExample.tsx
new file mode 100644
index 0000000..843373a
--- /dev/null
+++ b/docs/examples/WorkerExample.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+import { host } from "../../src/index";
+import Worker from "./worker?worker";
+
+function WorkerExample() {
+  const [color, setColor] = React.useState("#fff");
+  const [message, setMessage] = React.useState("");
+
+  const onClick = async () => {
+    const options = { initialValue: "initial value from host" };
+    const connection = await host.connect(new Worker(), options);
+
+    const messageRes = await connection?.remote.getMessage();
+    setMessage(messageRes);
+
+    const colorRes = await connection?.remote.createColor();
+    setColor(colorRes);
+  };
+
+  return (
+    <div style={{ background: color }}>
+      <div style={{ flex: 1 }}>
+        <h1>HOST</h1>
+        <button type="button" onClick={onClick}>
+          call web worker function
+        </button>
+        <p>{message}</p>
+      </div>
+    </div>
+  );
+}
+
+export default WorkerExample;
diff --git a/docs/examples/iframe.html b/docs/examples/iframe.html
index 5a92fba..09d0787 100644
--- a/docs/examples/iframe.html
+++ b/docs/examples/iframe.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <title>Rimless Guest</title>
-  <script src="https://unpkg.com/rimless/lib/rimless.min.js"></script>
+  <script src="../../lib/rimless.min.js"></script>
   <style>
     html,
     body {
diff --git a/docs/examples/worker.ts b/docs/examples/worker.ts
new file mode 100644
index 0000000..5f4c7ba
--- /dev/null
+++ b/docs/examples/worker.ts
@@ -0,0 +1,35 @@
+import guest from "../../src/guest";
+
+function createColor() {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+function getMessage() {
+  return "Hello from the worker! Initialized with:" + (self as any).config?.initialValue;
+}
+
+const run = async () => {
+  try {
+    await guest.connect(
+      {
+        createColor,
+        getMessage,
+      },
+      {
+        onConnectionSetup: async (config) => {
+          console.log("Connection setup with config:", config);
+          (self as any).config = config;
+        },
+      }
+    );
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+run();
diff --git a/docs/typings.d.ts b/docs/typings.d.ts
new file mode 100644
index 0000000..4240ce8
--- /dev/null
+++ b/docs/typings.d.ts
@@ -0,0 +1,11 @@
+declare module "*.html?raw" {
+  const content: any;
+  export default content;
+}
+
+declare module "*?worker" {
+  const WorkerFactory: {
+    new (): Worker;
+  };
+  export default WorkerFactory;
+}
diff --git a/src/guest.ts b/src/guest.ts
index 194b7ef..32ca711 100644
--- a/src/guest.ts
+++ b/src/guest.ts
@@ -2,14 +2,8 @@ import { extractMethods, isWorker } from "./helpers";
 import { registerLocalMethods, registerRemoteMethods } from "./rpc";
 import { actions, EventHandlers, events, IConnection, ISchema } from "./types";
 
-const REQUEST_INTERVAL = 10;
-const TIMEOUT_INTERVAL = 3000;
-
-let interval: any = null;
-let connected = false;
-
 function connect(schema: ISchema = {}, eventHandlers?: EventHandlers): Promise<IConnection> {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     const localMethods = extractMethods(schema);
 
     // on handshake response
@@ -29,6 +23,15 @@ function connect(schema: ISchema = {}, eventHandlers?: EventHandlers): Promise<I
 
       await eventHandlers?.onConnectionSetup?.(remote);
 
+      // send a HANDSHAKE REPLY to the host
+      const payload = {
+        action: actions.HANDSHAKE_REPLY,
+        connectionID: event.data.connectionID,
+      };
+
+      if (isWorker()) self.postMessage(payload);
+      else window.parent.postMessage(payload, "*");
+
       // close the connection and all listeners when called
       const close = () => {
         self.removeEventListener(events.MESSAGE, handleHandshakeResponse);
@@ -36,8 +39,6 @@ function connect(schema: ISchema = {}, eventHandlers?: EventHandlers): Promise<I
         unregisterLocal();
       };
 
-      connected = true;
-
       // resolve connection object
       const connection = { remote, close };
       return resolve(connection);
@@ -52,18 +53,8 @@ function connect(schema: ISchema = {}, eventHandlers?: EventHandlers): Promise<I
       schema: JSON.parse(JSON.stringify(schema)),
     };
 
-    interval = setInterval(() => {
-      if (connected) return clearInterval(interval);
-
-      // publish the HANDSHAKE REQUEST
-      if (isWorker()) (self as any).postMessage(payload);
-      else window.parent.postMessage(payload, "*");
-    }, REQUEST_INTERVAL);
-
-    // timeout the connection after a time
-    setTimeout(() => {
-      if (!connected) reject("connection timeout");
-    }, TIMEOUT_INTERVAL);
+    if (isWorker()) (self as any).postMessage(payload);
+    else window.parent.postMessage(payload, "*");
   });
 }
 
diff --git a/src/helpers.ts b/src/helpers.ts
index 079f2c5..9e02672 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -1,22 +1,12 @@
 export const CONNECTION_TIMEOUT = 1000;
 
-/**
- * check if the remote is trusted
- *
- * @param event
- */
-export function isTrustedRemote(_event: any) {
-  // TODO: implement
-  return true;
-}
-
 /**
  * check if run in a webworker
  *
  * @param event
  */
-export function isWorker() {
-  return typeof WorkerGlobalScope !== "undefined" && self instanceof WorkerGlobalScope;
+export function isWorker(): boolean {
+  return typeof window === "undefined" && typeof self !== "undefined";
 }
 
 /**
@@ -81,3 +71,49 @@ export function getOriginFromURL(url: string | null) {
   const portSuffix = port && port !== ports[protocol] ? `:${port}` : "";
   return `${protocol}//${hostname}${portSuffix}`;
 }
+
+export function get(obj: any, path: string | Array<string | number>, defaultValue?: any): any {
+  const keys = Array.isArray(path) ? path : path.split(".").filter(Boolean);
+  let result = obj;
+
+  for (const key of keys) {
+    result = result?.[key];
+    if (result === undefined) {
+      return defaultValue;
+    }
+  }
+
+  return result;
+}
+
+export function set(obj: any, path: string | (string | number)[], value: any): any {
+  if (!obj || typeof obj !== "object") return obj;
+
+  const pathArray = Array.isArray(path) ? path : path.split(".").map((key) => (key.match(/^\d+$/) ? Number(key) : key));
+
+  let current = obj;
+
+  for (let i = 0; i < pathArray.length; i++) {
+    const key = pathArray[i];
+
+    if (i === pathArray.length - 1) {
+      current[key] = value;
+    } else {
+      if (!current[key] || typeof current[key] !== "object") {
+        current[key] = typeof pathArray[i + 1] === "number" ? [] : {};
+      }
+      current = current[key];
+    }
+  }
+
+  return obj;
+}
+
+export function generateId(length: number = 10): string {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}
diff --git a/src/host.ts b/src/host.ts
index fcd69bd..c5b49e3 100644
--- a/src/host.ts
+++ b/src/host.ts
@@ -1,7 +1,6 @@
-import { extractMethods, getOriginFromURL } from "./helpers";
+import { extractMethods, generateId, getOriginFromURL } from "./helpers";
 import { registerLocalMethods, registerRemoteMethods } from "./rpc";
 import { actions, events, IConnection, IConnections, ISchema } from "./types";
-import { generateId } from "./utils";
 
 const connections: IConnections = {};
 
@@ -73,14 +72,20 @@ function connect(guest: HTMLIFrameElement | Worker, schema: ISchema = {}): Promi
         if (guestIsWorker) (guest as Worker).terminate();
       };
 
-      // resolve connection object
       const connection: IConnection = { remote, close };
       connections[connectionID] = connection;
-      return resolve(connection);
     }
 
     // subscribe to HANDSHAKE MESSAGES
     listeners.addEventListener(events.MESSAGE, handleHandshake);
+
+    // on handshake reply
+    function handleHandshakeReply(event: any) {
+      if (event.data.action !== actions.HANDSHAKE_REPLY) return;
+      return resolve(connections[event.data.connectionID]);
+    }
+
+    listeners.addEventListener(events.MESSAGE, handleHandshakeReply);
   });
 }
 
diff --git a/src/rpc.ts b/src/rpc.ts
index 167df9a..b860759 100644
--- a/src/rpc.ts
+++ b/src/rpc.ts
@@ -1,6 +1,5 @@
-import { isTrustedRemote, isWorker } from "./helpers";
+import { generateId, get, isWorker, set } from "./helpers";
 import { actions, events, IRPCRequestPayload, IRPCResolvePayload, ISchema } from "./types";
-import { generateId, get, set } from "./utils";
 
 /**
  * for each function in the schema
@@ -24,7 +23,6 @@ export function registerLocalMethods(
       const { action, callID, connectionID, callName, args = [] } = event.data as IRPCRequestPayload;
 
       if (action !== actions.RPC_REQUEST) return;
-      if (!isTrustedRemote(event)) return;
       if (!callID || !callName) return;
       if (callName !== methodName) return;
       if (connectionID !== _connectionID) return;
@@ -43,6 +41,7 @@ export function registerLocalMethods(
         const result = await get(schema, methodName)(...args);
         payload.result = JSON.parse(JSON.stringify(result));
       } catch (error) {
+        payload.action = actions.RPC_REJECT;
         payload.error = JSON.parse(JSON.stringify(error, Object.getOwnPropertyNames(error)));
       }
 
@@ -88,7 +87,6 @@ export function createRPC(
       function handleResponse(event: any) {
         const { callID, connectionID, callName, result, error, action } = event.data as IRPCResolvePayload;
 
-        if (!isTrustedRemote(event)) return;
         if (!callID || !callName) return;
         if (callName !== _callName) return;
         if (connectionID !== _connectionID) return;
diff --git a/src/types.ts b/src/types.ts
index ee4bb73..2c4e292 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -20,7 +20,7 @@ export interface IConnection {
 }
 
 export interface IConnections {
-  [connectionID: string]: ISchema;
+  [connectionID: string]: IConnection;
 }
 
 export interface IEvent extends EventListener {
diff --git a/src/typings.d.ts b/src/typings.d.ts
deleted file mode 100644
index d2423dc..0000000
--- a/src/typings.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare const WorkerGlobalScope: any;
diff --git a/src/utils.ts b/src/utils.ts
deleted file mode 100644
index 97811e0..0000000
--- a/src/utils.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-export function get(obj: any, path: string | Array<string | number>, defaultValue?: any): any {
-  const keys = Array.isArray(path) ? path : path.split(".").filter(Boolean);
-  let result = obj;
-
-  for (const key of keys) {
-    result = result?.[key];
-    if (result === undefined) {
-      return defaultValue;
-    }
-  }
-
-  return result;
-}
-
-export function set(obj: any, path: string | (string | number)[], value: any): any {
-  if (!obj || typeof obj !== "object") return obj;
-
-  const pathArray = Array.isArray(path) ? path : path.split(".").map((key) => (key.match(/^\d+$/) ? Number(key) : key));
-
-  let current = obj;
-
-  for (let i = 0; i < pathArray.length; i++) {
-    const key = pathArray[i];
-
-    if (i === pathArray.length - 1) {
-      current[key] = value;
-    } else {
-      if (!current[key] || typeof current[key] !== "object") {
-        current[key] = typeof pathArray[i + 1] === "number" ? [] : {};
-      }
-      current = current[key];
-    }
-  }
-
-  return obj;
-}
-
-export function generateId(length: number = 10): string {
-  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  return result;
-}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 658fc99..11f02fe 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,6 +1 @@
 /// <reference types="vite/client" />
-
-declare module "*.html" {
-  const content: any;
-  export default content;
-}

From 6c9befa773134e05823810ba2850801cb278d7dc Mon Sep 17 00:00:00 2001
From: Aurelien Franky <au.re@live.com>
Date: Sun, 27 Oct 2024 22:44:07 +0100
Subject: [PATCH 4/4] 0.4.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ffc424f..c278eba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "rimless",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "rimless",
-      "version": "0.3.0",
+      "version": "0.4.0",
       "license": "MIT",
       "devDependencies": {
         "@chromatic-com/storybook": "^1.7.0",
diff --git a/package.json b/package.json
index 8bafa8e..9fd53ba 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "rimless",
   "author": "Aurélien Franky",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "homepage": "https://github.com/au-re/rimless",
   "description": "event base communication made easy with a promise-based API wrapping `postMessage`",