Create bridges for preact

Author: inokawa

package-lock.json

@@ -26,6 +26,7 @@
     "babel-jest": "26.6.3",
     "jest": "26.6.3",
     "metro-react-native-babel-preset": "0.65.0",
+    "preact": "10.5.13",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "0.63.4",

package.json

@@ -34,6 +34,20 @@ export default [
     ],
     plugins: [typescript()],
   },
+  {
+    input: "src/web/preact.ts",
+    output: [
+      {
+        file: `${mainDir}/web/preact.js`,
+        format: "cjs",
+      },
+      {
+        file: `${moduleDir}/web/preact.mjs`,
+        format: "es",
+      },
+    ],
+    plugins: [typescript()],
+  },
   {
     input: "src/plugin/index.js",
     output: [

rollup.config.js

@@ -1,28 +1,32 @@
-import React, { useEffect } from "react";
-import ReactDOM from "react-dom";
 import { EVENT_KEY, ROOT_ID } from "../common";
 import { Message } from "../types";
 
-export const webViewRender = (root: JSX.Element): string => {
-  ReactDOM.render(root, document.getElementById(ROOT_ID));
-  return ""; // dummy
+export const buildRender = <T extends (a: any, b: HTMLElement) => void>(
+  render: T
+) => {
+  return (root: Parameters<T>[0]): string => {
+    render(root, document.getElementById(ROOT_ID)!);
+    return ""; // dummy
+  };
 };
 
 export const emit = <T>(message: Message<T>) => {
   (window as any).ReactNativeWebView.postMessage(JSON.stringify(message));
 };
 
-export const useSubscribe = <T>(onSubscribe: (message: Message<T>) => void) => {
-  useEffect(() => {
-    const listener = (e: any) => {
-      if (!isMessageEvent<T>(e)) return;
-      onSubscribe({ type: e.detail.type, data: e.detail.data });
-    };
-    window.addEventListener(EVENT_KEY, listener);
-    return () => {
-      window.removeEventListener(EVENT_KEY, listener);
-    };
-  }, [onSubscribe]);
+export const buildUseSubscribe = (useEffect: any) => {
+  return <T>(onSubscribe: (message: Message<T>) => void) => {
+    useEffect(() => {
+      const listener = (e: any) => {
+        if (!isMessageEvent<T>(e)) return;
+        onSubscribe({ type: e.detail.type, data: e.detail.data });
+      };
+      window.addEventListener(EVENT_KEY, listener);
+      return () => {
+        window.removeEventListener(EVENT_KEY, listener);
+      };
+    }, [onSubscribe]);
+  };
 };
 
 const isMessageEvent = <T>(e: any): e is { detail: Message<T> } =>

src/plugin/__snapshots__/metro.spec.js.snap

@@ -1 +1 @@
-export { webViewRender, emit, useSubscribe } from "./bridge";
+export { webViewRender, emit, useSubscribe } from "./react";

src/web/bridge.ts

@@ -0,0 +1,9 @@
+import { useEffect } from "preact/compat";
+import { render } from "preact";
+import { buildRender, buildUseSubscribe } from "./bridge";
+
+export const webViewRender = buildRender(render);
+
+export { emit } from "./bridge";
+
+export const useSubscribe = buildUseSubscribe(useEffect);

src/web/index.ts

@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+import { render } from "react-dom";
+import { buildRender, buildUseSubscribe } from "./bridge";
+
+export const webViewRender = buildRender(render);
+
+export { emit } from "./bridge";
+
+export const useSubscribe = buildUseSubscribe(useEffect);