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 - +