Refactor

inokawa · inokawa · commit 6ac381a3251c · 2024-05-06T23:20:14.000+09:00
diff --git a/e2e/index.spec.tsx b/e2e/index.spec.tsx
@@ -3,6 +3,7 @@ import { readdirSync } from "node:fs";
 import path from "node:path";
 import { bundle } from "../src/plugin/bundler";
 import { WEB_ROOT_ID } from "../src/constants";
+import { injectCode } from "../src/plugin/html";
 
 test.beforeEach(async ({}, testInfo) => {
   // https://github.com/microsoft/playwright/issues/7575#issuecomment-1168800666
@@ -23,13 +24,13 @@ test.describe("smoke webview code", () => {
           WEB_ROOT_ID
         );
 
-        await page.evaluate((code) => {
-          const script = document.createElement("script");
-          script.type = "text/javascript";
-          script.onload = eval(code);
-
-          document.head.appendChild(script);
-        }, code);
+        await page.evaluate(
+          (code) => {
+            const rawCode = eval(code);
+            eval(rawCode);
+          },
+          injectCode(code, (s) => s)
+        );
 
         await page.waitForFunction((e) => e.innerHTML, rootHandle);
         await expect(
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-commonjs-jsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-commonjs-jsx-2-chromium.txt
@@ -2,4 +2,4 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Testing Page</title>
-  <script type="text/javascript"></script>
+  
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-jsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-jsx-2-chromium.txt
@@ -830,4 +830,4 @@ h3 {
 .monaco-editor.eclipse .monaco-editor-background {
   background: #f9f9f9;
 }
-</style><script type="text/javascript"></script>
+</style>
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-react-jsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-react-jsx-2-chromium.txt
@@ -830,4 +830,4 @@ h3 {
 .monaco-editor.eclipse .monaco-editor-background {
   background: #f9f9f9;
 }
-</style><script type="text/javascript"></script>
+</style>
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-tsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-tsx-2-chromium.txt
@@ -830,4 +830,4 @@ h3 {
 .monaco-editor.eclipse .monaco-editor-background {
   background: #f9f9f9;
 }
-</style><script type="text/javascript"></script>
+</style>
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-with-html-jsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-with-html-jsx-2-chromium.txt
@@ -2,4 +2,4 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Testing Page</title>
-  <script type="text/javascript"></script>
+  
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-with-images-jsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-with-images-jsx-2-chromium.txt
@@ -2,4 +2,4 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Testing Page</title>
-  <script type="text/javascript"></script>
+  
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-with-json-jsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-with-json-jsx-2-chromium.txt
@@ -2,4 +2,4 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Testing Page</title>
-  <script type="text/javascript"></script>
+  
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-with-md-jsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-with-md-jsx-2-chromium.txt
@@ -2,4 +2,4 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Testing Page</title>
-  <script type="text/javascript"></script>
+  
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-with-txt-jsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-default-with-txt-jsx-2-chromium.txt
@@ -2,4 +2,4 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Testing Page</title>
-  <script type="text/javascript"></script>
+  
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-named-jsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-named-jsx-2-chromium.txt
@@ -2,4 +2,4 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Testing Page</title>
-  <script type="text/javascript"></script>
+  
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-non-jsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-app-export-non-jsx-2-chromium.txt
@@ -2,4 +2,4 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Testing Page</title>
-  <script type="text/javascript"></script>
+  
diff --git a/e2e/index.spec.tsx-snapshots/smoke-webview-code-issue45-jsx-2-chromium.txt b/e2e/index.spec.tsx-snapshots/smoke-webview-code-issue45-jsx-2-chromium.txt
@@ -830,4 +830,4 @@ h3 {
 .monaco-editor.eclipse .monaco-editor-background {
   background: #f9f9f9;
 }
-</style><script type="text/javascript"></script>
+</style>
diff --git a/src/plugin/__snapshots__/bundler.spec.ts.snap b/src/plugin/__snapshots__/bundler.spec.ts.snap
diff --git a/src/plugin/bundler.spec.ts b/src/plugin/bundler.spec.ts
@@ -2,7 +2,7 @@ import * as path from "node:path";
 import * as vm from "node:vm";
 import { vi, describe, it, expect } from "vitest";
 import { bundle } from "./bundler";
-import { buildWebEntryModule } from "./html";
+import { injectCode } from "./html";
 import { readdirSync } from "node:fs";
 
 vi.setConfig({ testTimeout: 30000 });
@@ -15,11 +15,7 @@ const runInVmContext = (code: string): string => {
     },
   });
 
-  vm.runInContext(
-    // vm does not support esm yet
-    `render(${code.replace(/^export default /, "")});`,
-    context
-  );
+  vm.runInContext(`render(${code});`, context);
   return evaluatedStr!;
 };
 
@@ -31,7 +27,7 @@ describe("bundle", () => {
         const res = await bundle(path.join(fixturePath, filename));
         expect(res).toMatchSnapshot();
 
-        const bundled = buildWebEntryModule(res);
+        const bundled = injectCode(res, (s) => s);
         expect(bundled).toMatchSnapshot();
         expect(runInVmContext(bundled)).toMatchSnapshot();
       });
diff --git a/src/plugin/html.ts b/src/plugin/html.ts
@@ -3,26 +3,37 @@ import { WEB_ROOT_ID } from "../constants";
 /**
  * @internal
  */
-export const buildWebEntryModule = (js: string): string => {
+export const injectCode = (src: string, withHtml: (src: string) => string) => {
   // https://github.com/inokawa/react-native-react-bridge/pull/133
-  js = js.replace(/([`$])/g, "\\$1");
+  src = src.replace(/([`$])/g, "\\$1");
   return (
-    "export default String.raw`\n" +
-    wrapByHtml(js) +
+    "String.raw`\n" +
+    withHtml(`(function(){${src}})()`) +
     "\n`.replace(/\\\\([`$])/g, '\\$1')"
   );
 };
 
-const wrapByHtml = (js: string): string => `
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-</head>
-<body style="margin: 0 !important;padding: 0 !important;">
-  <div id="${WEB_ROOT_ID}"></div>
-  <script type="text/javascript">(function(){${js}})()</script>
-</body>
-</html>
-`;
+/**
+ * @internal
+ */
+export const buildWebEntryModule = (src: string): string => {
+  return (
+    "export default " +
+    injectCode(
+      src,
+      (js) => `
+  <!DOCTYPE html>
+  <html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  </head>
+  <body style="margin: 0 !important;padding: 0 !important;">
+    <div id="${WEB_ROOT_ID}"></div>
+    <script type="text/javascript">${js}</script>
+  </body>
+  </html>
+  `
+    )
+  );
+};

Original file line number	Diff line number	Diff line change
`@@ -830,4 +830,4 @@ h3 {`
`830`	`830`	`.monaco-editor.eclipse .monaco-editor-background {`
`831`	`831`	`background: #f9f9f9;`
`832`	`832`	`}`
`833`		`-</style><script type="text/javascript"></script>`
	`833`	`+</style>`