Support bundling of HTML

inokawa · inokawa · commit 276b794014cc · 2021-02-11T18:39:08.000+09:00
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ The communication between React app and React Native app will be also simplified
   - `.json` is imported as an object, like require in Node.js.
   - `.css` is injected to the HTML head of WebView, like [css-loader](https://github.com/webpack-contrib/css-loader).
   - `.bmp`, `.gif`, `.png`, `.jpg`, `.jpeg`, `.webp` and `.svg` are loaded as base64 encoded url, like [url-loader](https://github.com/webpack-contrib/url-loader).
+  - `.htm` and `.html` are loaded as string, which can be rendered with React's dangerouslySetInnerHTML.
 
 If you have some feature requests or improvements, please create a [issue](https://github.com/inokawa/react-native-react-bridge/issues) or [PR](https://github.com/inokawa/react-native-react-bridge/pulls).
 
diff --git a/fixtures/app-export-default-with-html.jsx b/fixtures/app-export-default-with-html.jsx
@@ -0,0 +1,9 @@
+import React from "react";
+import { webViewRender } from "react-native-react-bridge/lib/web";
+import html from "./example.html";
+
+const App = () => {
+  return <div dangerouslySetInnerHTML={{ __html: html }} />;
+};
+
+export default webViewRender(App);
diff --git a/fixtures/example.html b/fixtures/example.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>My test page</title>
+  </head>
+  <body>
+    <div>test</div>
+  </body>
+</html>
diff --git a/src/plugin/__snapshots__/metro.spec.js.snap b/src/plugin/__snapshots__/metro.spec.js.snap
diff --git a/src/plugin/metro.js b/src/plugin/metro.js
@@ -1,15 +1,16 @@
 import Metro from "metro";
 
 const babelTransformerPath = require.resolve("./transformer");
-const sourceExts = ["js", "ts", "jsx", "tsx"];
+const codeExts = ["js", "ts", "jsx", "tsx"];
+const htmlExts = ["htm", "html", "css"];
 const imageExts = ["bmp", "gif", "png", "jpg", "jpeg", "webp", "svg"];
-const assetExts = [...imageExts, "css"];
+const sourceExts = [...codeExts, ...htmlExts, ...imageExts];
 
 export const bundle = async (filename) => {
   const config = await Metro.loadConfig();
-  config.resolver.sourceExts = [...sourceExts, ...assetExts];
+  config.resolver.sourceExts = sourceExts;
   config.resolver.assetExts = config.resolver.assetExts.filter(
-    (ext) => !assetExts.includes(ext)
+    (ext) => !sourceExts.includes(ext)
   );
   config.transformer.babelTransformerPath = babelTransformerPath;
 
diff --git a/src/plugin/metro.spec.js b/src/plugin/metro.spec.js
@@ -30,4 +30,11 @@ describe("bundle", () => {
     const res = await bundle(filePath);
     expect(res).toMatchSnapshot();
   });
+
+  it("with html", async () => {
+    const filename = "app-export-default-with-html.jsx";
+    const filePath = resolvePath(filename);
+    const res = await bundle(filePath);
+    expect(res).toMatchSnapshot();
+  });
 });
diff --git a/src/plugin/transformer.js b/src/plugin/transformer.js
@@ -7,6 +7,12 @@ module.exports.transform = async (args) => {
 
   const ext = path.extname(filename);
   switch (ext) {
+    case ".htm":
+    case ".html":
+      return metroTransformer.transform({
+        ...args,
+        src: injectHtml(src),
+      });
     case ".css":
       return metroTransformer.transform({
         ...args,
@@ -50,9 +56,13 @@ module.exports.transform = async (args) => {
   return metroTransformer.transform(args);
 };
 
-const injectCss = (css) => `
+const injectHtml = (src) => {
+  return `export default String.raw\`${src}\``;
+};
+
+const injectCss = (src) => `
 (function () {
-  var css = String.raw\`${css}\`;
+  var css = String.raw\`${src}\`;
   var head = document.head || document.getElementsByTagName("head")[0];
   var style = document.createElement("style");
   style.type = "text/css";
