From 574e831e242f6a4ee3c5d4967c602a0cde2f5cf7 Mon Sep 17 00:00:00 2001 From: Aurelien Franky Date: Wed, 21 Aug 2024 17:29:59 +0200 Subject: [PATCH 1/5] upgrade part 1 --- .eslintrc.json | 7 +- .gitignore | 46 +- .storybook/main.js | 21 - .storybook/main.ts | 17 + .storybook/manager.js | 6 - .storybook/preview.ts | 14 + .storybook/theme.js | 8 - docs/GettingStarted.mdx | 20 + docs/GettingStarted.stories.mdx | 20 - docs/examples/Components.ts | 20 - docs/examples/SingleIframeExample.tsx | 35 +- .../{guest/index.html => iframe.html} | 1 - eslint.config.js | 28 + package-lock.json | 34414 ++++------------ package.json | 106 +- rollup.config.js | 41 - src/guest.ts | 23 +- src/helpers.ts | 8 +- src/host.ts | 32 +- src/rpc.ts | 47 +- src/types.ts | 9 +- src/vite-env.d.ts | 6 + src/worker.ts | 29 +- tsconfig.app.json | 24 + tsconfig.dev.json | 27 - tsconfig.json | 31 +- tsconfig.node.json | 22 + vite.config.ts | 6 + 28 files changed, 8464 insertions(+), 26604 deletions(-) delete mode 100644 .storybook/main.js create mode 100644 .storybook/main.ts delete mode 100644 .storybook/manager.js create mode 100644 .storybook/preview.ts delete mode 100644 .storybook/theme.js create mode 100644 docs/GettingStarted.mdx delete mode 100644 docs/GettingStarted.stories.mdx delete mode 100644 docs/examples/Components.ts rename docs/examples/{guest/index.html => iframe.html} (98%) create mode 100644 eslint.config.js delete mode 100644 rollup.config.js create mode 100644 src/vite-env.d.ts create mode 100644 tsconfig.app.json delete mode 100644 tsconfig.dev.json create mode 100644 tsconfig.node.json create mode 100644 vite.config.ts diff --git a/.eslintrc.json b/.eslintrc.json index fd2082a..efd504b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -6,8 +6,8 @@ "jest": true }, "extends": [ - "plugin:react/recommended", - "airbnb" + "airbnb", + "plugin:storybook/recommended" ], "globals": { "Atomics": "readonly", @@ -22,7 +22,6 @@ "sourceType": "module" }, "plugins": [ - "react", "@typescript-eslint" ], "settings": { @@ -101,4 +100,4 @@ ], "template-tag-spacing": "off" } -} \ No newline at end of file +} diff --git a/.gitignore b/.gitignore index b445a06..bc6d306 100644 --- a/.gitignore +++ b/.gitignore @@ -1,30 +1,26 @@ -# dependencies -node_modules -.pnp -.pnp.js - -# testing -coverage -dependency-map - -# production -build -lib -storybook-static - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - +# Logs +logs +*.log npm-debug.log* yarn-debug.log* yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local -# storybook -.awcache +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? -# dependency map -dependency-map.html \ No newline at end of file +*storybook.log \ No newline at end of file diff --git a/.storybook/main.js b/.storybook/main.js deleted file mode 100644 index 0e98ab8..0000000 --- a/.storybook/main.js +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - stories: ["../docs/**/*.stories.tsx", "../docs/**/*.stories.mdx"], - addons: ["@storybook/addon-docs"], - webpackFinal: async (config) => { - config.module.rules.push({ - test: /\.(ts|tsx)$/, - use: [ - { - loader: require.resolve("awesome-typescript-loader"), - options: { - configFileName: "./tsconfig.dev.json", - transpileOnly: true, - useCache: true, - }, - } - ], - }); - config.resolve.extensions.push(".ts", ".tsx"); - return config; - }, -}; diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 0000000..88bf8bb --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,17 @@ +import type { StorybookConfig } from "@storybook/react-vite"; + +const config: StorybookConfig = { + stories: ["../docs/**/*.mdx", "../docs/**/*.stories.@(js|jsx|mjs|ts|tsx)"], + addons: [ + "@storybook/addon-onboarding", + "@storybook/addon-links", + "@storybook/addon-essentials", + "@chromatic-com/storybook", + "@storybook/addon-interactions", + ], + framework: { + name: "@storybook/react-vite", + options: {}, + }, +}; +export default config; diff --git a/.storybook/manager.js b/.storybook/manager.js deleted file mode 100644 index a044194..0000000 --- a/.storybook/manager.js +++ /dev/null @@ -1,6 +0,0 @@ -import { addons } from "@storybook/addons"; -import theme from "./theme"; - -addons.setConfig({ - theme, -}); diff --git a/.storybook/preview.ts b/.storybook/preview.ts new file mode 100644 index 0000000..37914b1 --- /dev/null +++ b/.storybook/preview.ts @@ -0,0 +1,14 @@ +import type { Preview } from "@storybook/react"; + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; diff --git a/.storybook/theme.js b/.storybook/theme.js deleted file mode 100644 index 567d908..0000000 --- a/.storybook/theme.js +++ /dev/null @@ -1,8 +0,0 @@ -import { create } from "@storybook/theming/create"; - -export default create({ - base: "light", - brandTitle: "rimless", - brandUrl: "https://github.com/au-re/rimless", - brandImage: "https://raw.githubusercontent.com/au-re/rimless/master/assets/icon.png", -}); \ No newline at end of file diff --git a/docs/GettingStarted.mdx b/docs/GettingStarted.mdx new file mode 100644 index 0000000..5aebe25 --- /dev/null +++ b/docs/GettingStarted.mdx @@ -0,0 +1,20 @@ +import { Meta } from "@storybook/blocks"; +import SingleIframeExample from "./examples/SingleIframeExample"; + + + +# 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 works with both **iframes** and **webworkers**. + +You can use `Rimless` to call remote procedures, exchange data or expose local functions +with **iframes**/**webworkers**. + +## RPCs on Iframes + +In the example below you can invoke remote procedures from an iframe to the host website and vice +versa. + + diff --git a/docs/GettingStarted.stories.mdx b/docs/GettingStarted.stories.mdx deleted file mode 100644 index ac9c798..0000000 --- a/docs/GettingStarted.stories.mdx +++ /dev/null @@ -1,20 +0,0 @@ -import { Meta, Story, Preview } from "@storybook/addon-docs/blocks"; -import SingleIframeExample from "./examples/SingleIframeExample"; - - - -# 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). Works with both **iframes** and **webworkers**. - -You can use `Rimless` to call remote procedures, exchange data or expose local functions -with **iframes**/**webworkers**. - -## RPCs on Iframes - -In the example below you can invoke remote procedures from an iframe to the host website and vice -versa. - - - - diff --git a/docs/examples/Components.ts b/docs/examples/Components.ts deleted file mode 100644 index 6a76b27..0000000 --- a/docs/examples/Components.ts +++ /dev/null @@ -1,20 +0,0 @@ -import styled from "styled-components"; - -export const Background = styled.div` - display: flex; - flex-direction: column; - max-width: 720px; - margin: 0 auto; - padding: 1rem; - font-family: Oswald, sans-serif; - - button { - width: 120px; - } -`; - -export const Iframe = styled.iframe` - height: 240px; - width: 240px; - border: 1px solid #FFF; -`; diff --git a/docs/examples/SingleIframeExample.tsx b/docs/examples/SingleIframeExample.tsx index e752a40..316ec47 100644 --- a/docs/examples/SingleIframeExample.tsx +++ b/docs/examples/SingleIframeExample.tsx @@ -1,7 +1,8 @@ import React from "react"; -import { Background, Iframe } from "./Components"; +import template from "./iframe.html?raw"; import { host } from "../../src/index"; +import { IConnection } from "../../src/types"; function makeRandomColor() { const letters = "0123456789ABCDEF"; @@ -13,13 +14,13 @@ function makeRandomColor() { } function SingleIframeExample() { - const iframe = React.useRef(null); - const [color, setColor] = React.useState(null); - const [connection, setConnection] = React.useState(null); + const iframe = React.useRef(null); + const [color, setColor] = React.useState("#fff"); + const [connection, setConnection] = React.useState(null); React.useEffect(() => { - if (!iframe.current) return; (async () => { + if (!iframe?.current) return; const newConnection = await host.connect(iframe.current, { setColor, }); @@ -28,24 +29,34 @@ function SingleIframeExample() { }, [iframe.current]); return ( - - +

HOST

-
-
-