From 7385075d573f7fea5615cde57562ba616bbfd572 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Franky?= Date: Sun, 27 Oct 2024 22:46:14 +0100 Subject: [PATCH] 39 add event handler for initial setup in the iframe webworker before the connection is established (#40) * add onConnectionSetup event handler * 0.3.0 * await a connection confirmed before resolving the connection in the host * 0.4.0 --- docs/GettingStarted.mdx | 7 +++- docs/examples/WorkerExample.tsx | 34 +++++++++++++++++++ docs/examples/iframe.html | 2 +- docs/examples/worker.ts | 35 +++++++++++++++++++ docs/typings.d.ts | 11 ++++++ package-lock.json | 4 +-- package.json | 2 +- src/guest.ts | 41 ++++++++++------------ src/helpers.ts | 60 ++++++++++++++++++++++++++------- src/host.ts | 14 +++++--- src/rpc.ts | 6 ++-- src/types.ts | 6 +++- src/typings.d.ts | 1 - src/utils.ts | 45 ------------------------- src/vite-env.d.ts | 5 --- 15 files changed, 172 insertions(+), 101 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"; # 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. + +## RPCs on Web webworkers + + 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 ( +
+
+

HOST

+ +

{message}

+
+
+ ); +} + +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 @@ Rimless Guest - +