Skip to content

Commit 4ebc7d5

Browse files
inokawainokawa
committed
Refactor
1 parent 6ac381a commit 4ebc7d5

File tree

6 files changed

+50
-311
lines changed

6 files changed

+50
-311
lines changed

‎e2e/index.spec.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { readdirSync } from "node:fs";
33
import path from "node:path";
44
import { bundle } from "../src/plugin/bundler";
55
import { WEB_ROOT_ID } from "../src/constants";
6-
import { injectCode } from "../src/plugin/html";
76

87
test.beforeEach(async ({}, testInfo) => {
98
// https://github.com/microsoft/playwright/issues/7575#issuecomment-1168800666
@@ -24,13 +23,10 @@ test.describe("smoke webview code", () => {
2423
WEB_ROOT_ID
2524
);
2625

27-
await page.evaluate(
28-
(code) => {
29-
const rawCode = eval(code);
30-
eval(rawCode);
31-
},
32-
injectCode(code, (s) => s)
33-
);
26+
await page.evaluate((code) => {
27+
const rawCode = eval(code);
28+
eval(rawCode);
29+
}, code);
3430

3531
await page.waitForFunction((e) => e.innerHTML, rootHandle);
3632
await expect(

‎src/plugin/__snapshots__/bundler.spec.ts.snap‎

Lines changed: 12 additions & 260 deletions
Large diffs are not rendered by default.

‎src/plugin/bundler.spec.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import * as path from "node:path";
22
import * as vm from "node:vm";
33
import { vi, describe, it, expect } from "vitest";
44
import { bundle } from "./bundler";
5-
import { injectCode } from "./html";
65
import { readdirSync } from "node:fs";
76

87
vi.setConfig({ testTimeout: 30000 });
@@ -27,9 +26,7 @@ describe("bundle", () => {
2726
const res = await bundle(path.join(fixturePath, filename));
2827
expect(res).toMatchSnapshot();
2928

30-
const bundled = injectCode(res, (s) => s);
31-
expect(bundled).toMatchSnapshot();
32-
expect(runInVmContext(bundled)).toMatchSnapshot();
29+
expect(runInVmContext(res)).toMatchSnapshot();
3330
});
3431
}
3532
});

‎src/plugin/bundler.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ const sourceExts = [
1414
"wasm",
1515
];
1616

17-
export const bundle = async (filename: string): Promise<string> => {
17+
export const bundle = async (
18+
filename: string,
19+
wrapHtml?: (s: string) => string
20+
): Promise<string> => {
1821
const config = await Metro.loadConfig();
1922

2023
// @ts-expect-error
@@ -27,10 +30,22 @@ export const bundle = async (filename: string): Promise<string> => {
2730
config.transformer.babelTransformerPath = babelTransformerPath;
2831

2932
// @ts-expect-error
30-
const { code, map } = await Metro.runBuild(config, {
33+
let { code } = await Metro.runBuild(config, {
3134
entry: filename,
3235
platform: "rnrb",
3336
minify: true,
3437
});
38+
39+
// https://github.com/inokawa/react-native-react-bridge/pull/133
40+
code = code.replace(/([`$])/g, "\\$1");
41+
42+
code = `(function(){${code}})()`;
43+
44+
if (wrapHtml) {
45+
code = wrapHtml(code);
46+
}
47+
48+
code = "String.raw`\n" + code + "\n`.replace(/\\\\([`$])/g, '\\$1')";
49+
3550
return code;
3651
};

‎src/plugin/html.ts‎

Lines changed: 13 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,16 @@ import { WEB_ROOT_ID } from "../constants";
33
/**
44
* @internal
55
*/
6-
export const injectCode = (src: string, withHtml: (src: string) => string) => {
7-
// https://github.com/inokawa/react-native-react-bridge/pull/133
8-
src = src.replace(/([`$])/g, "\\$1");
9-
return (
10-
"String.raw`\n" +
11-
withHtml(`(function(){${src}})()`) +
12-
"\n`.replace(/\\\\([`$])/g, '\\$1')"
13-
);
14-
};
15-
16-
/**
17-
* @internal
18-
*/
19-
export const buildWebEntryModule = (src: string): string => {
20-
return (
21-
"export default " +
22-
injectCode(
23-
src,
24-
(js) => `
25-
<!DOCTYPE html>
26-
<html>
27-
<head>
28-
<meta charset="utf-8" />
29-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
30-
</head>
31-
<body style="margin: 0 !important;padding: 0 !important;">
32-
<div id="${WEB_ROOT_ID}"></div>
33-
<script type="text/javascript">${js}</script>
34-
</body>
35-
</html>
36-
`
37-
)
38-
);
39-
};
6+
export const wrapWithWebViewHTML = (js: string): string => `
7+
<!DOCTYPE html>
8+
<html>
9+
<head>
10+
<meta charset="utf-8" />
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
12+
</head>
13+
<body style="margin: 0 !important;padding: 0 !important;">
14+
<div id="${WEB_ROOT_ID}"></div>
15+
<script type="text/javascript">${js}</script>
16+
</body>
17+
</html>
18+
`;

‎src/plugin/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
import metroTransformer from "metro-react-native-babel-transformer";
99
import { isEntryFile } from "./babel";
1010
import { bundle } from "./bundler";
11-
import { buildWebEntryModule } from "./html";
11+
import { wrapWithWebViewHTML } from "./html";
1212

1313
export const transform = async (args: any /* TODO */) => {
1414
const { filename, src } = args;
1515
const isEntry = isEntryFile(src, filename);
1616
if (isEntry) {
17-
const res = await bundle(filename);
17+
const res = await bundle(filename, wrapWithWebViewHTML);
1818
return metroTransformer.transform({
1919
...args,
20-
src: buildWebEntryModule(res),
20+
src: "export default " + res,
2121
});
2222
}
2323

0 commit comments

Comments
 (0)