Merge pull request #34 from inokawa/preact

Add Preact support

Author: inokawa

README.md

@@ -2,7 +2,7 @@
 
 ![npm](https://img.shields.io/npm/v/react-native-react-bridge) ![check](https://github.com/inokawa/react-native-react-bridge/workflows/check/badge.svg)
 
-An easy way to integrate your [React](https://github.com/facebook/react) app into [React Native](https://github.com/facebook/react-native) app with WebView.
+An easy way to integrate your [React](https://github.com/facebook/react) (or [Preact](https://github.com/preactjs/preact)) app into [React Native](https://github.com/facebook/react-native) app with WebView.
 
 ## Why?
 
@@ -21,7 +21,7 @@ The communication between React app and React Native app will be also simplified
 
 ## Features
 
-- Create React app bundle for WebView automatically in build process of React Native
+- Create React (or Preact) app bundle for WebView automatically in build process of React Native
   - `.js`, `.ts`, `.jsx`, `.tsx` and `.mjs` will be packed into one source.
   - NOTE: Only the edits in the entry file of web will invoke rebuild because of the limitation of [metro](https://github.com/facebook/metro)'s build process.
 - Handle communication between React Native and WebView with React hook style
@@ -41,16 +41,20 @@ If you have some feature requests or improvements, please create a [issue](https
 ## Install
 
 ```sh
-npm install react-native-react-bridge
+npm install react-native-react-bridge react-native-webview
 
-# These are used to render React app in WebView
-npm install react-dom react-native-webview
+# Necessary only if you render React app in WebView
+npm install react-dom
+
+# Necessary only if you render Preact app in WebView
+npm install preact
 ```
 
 ### Requirements
 
-- react 16.8+
-- react-native 0.60+
+- react >= 16.8
+- react-native >= 0.60
+- (preact >= 10.0)
 
 ## Usage
 
@@ -68,7 +72,10 @@ module.exports = {
 };
 ```
 
-2. Make entry file for React app.
+2. Make entry file for web app.
+
+- If you use React in web, import modules from `react-native-react-bridge/lib/web` and `react`.
+- If you use Preact in web, import modules from `react-native-react-bridge/lib/web/preact` and `preact`.
 
 ```jsx
 // WebApp.js

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-react-bridge",
   "version": "0.4.3",
-  "description": "An easy way to integrate your React app into React Native app with WebView.",
+  "description": "An easy way to integrate your React (or Preact) app into React Native app with WebView.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",
   "types": "lib/index.d.ts",
@@ -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",
@@ -46,9 +47,10 @@
     "url": "git+https://github.com/inokawa/react-native-react-bridge.git"
   },
   "keywords": [
-    "react",
     "react-native",
+    "react",
     "react-dom",
+    "preact",
     "metro",
     "webview",
     "html",

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);