-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplugin-react-static.tsx
194 lines (170 loc) · 5.92 KB
/
plugin-react-static.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
/* Must keep react import even though it's not directly used */
import { React, dirname, join, parseJsonc, renderToStaticMarkup } from "./deps.ts";
import { REACT_STATIC_TS_CONFIG } from "./stuff.ts";
import {
DEFAULT_STATIC_FILE
} from "./stuff.ts";
// Put this here so it's not optimized out
React;
export const buildReactStatic = async (options: {
inFile?: string; // input file (e.g. src/app.tsx)
outFile?: string; // output file (e.g. public/app.js)
watch?: boolean; // watch for changes
}) => {
const { inFile = Deno.cwd(), outFile = DEFAULT_STATIC_FILE } = options;
const doBuild = async () => {
if (inFile.endsWith(".tsx")) {
const startTime = performance.now();
const output = await compileReactStaticNew(inFile, options.watch);
if (outFile) {
await Deno.writeTextFile(outFile, output);
} else {
// file.mdx --> file.jsx (TODO: optional suffix)
const filename = inFile.substring(0, inFile.lastIndexOf("."));
const compiledFile = filename + ".html";
const outDir = dirname(compiledFile);
await Deno.mkdir(outDir, { recursive: true });
await Deno.writeTextFile(compiledFile, output);
}
const endTime = performance.now();
const diff = (endTime - startTime).toFixed(2);
console.log(`Built file ${outFile} in ${diff}ms`);
} else {
// if directory, then build first tsx file found
const maybeFolder = await Deno.stat(inFile);
if (!maybeFolder.isDirectory) {
throw new Error(
`Input file must be a .mdx file or a directory containing .mdx files. (got ${inFile})`
);
}
const files = Deno.readDirSync(inFile);
for (const file of files) {
if (file.isFile && file.name.endsWith(".tsx")) {
const startTime = performance.now();
const inPath = join(inFile, file.name);
let output = "";
try {
output = await compileReactStatic(inPath, options.watch);
} catch (e) {
console.error("Error compiling file: ", inPath, e);
continue;
}
let targetOutFile = outFile;
if (!targetOutFile) {
// use same directory
targetOutFile = inFile;
}
const filename = file.name.substring(0, file.name.lastIndexOf("."));
const fullfilename = filename + ".html";
const finalOutFile = join(targetOutFile, fullfilename);
// create directory if it doesn't exist
const outDir = dirname(finalOutFile);
await Deno.mkdir(outDir, { recursive: true });
await Deno.writeTextFile(finalOutFile, output);
const endTime = performance.now();
const diff = (endTime - startTime).toFixed(2);
console.log(`Built React Static file ${fullfilename} in ${diff}ms`);
break; // only build first file
}
}
}
};
await doBuild();
if (!options.watch) {
return;
}
const watcher = Deno.watchFs(inFile, { recursive: true });
for await (const event of watcher) {
// if any paths end with .mdx, then rebuild
let rebuild = false;
for (const path of event.paths) {
if (path.endsWith(".tsx")) {
rebuild = true;
break;
}
}
if (rebuild) {
await doBuild();
}
}
};
export const compileReactStatic = async (
path: string,
watch?: boolean
): Promise<string> => {
// Randomize the path so that it's unique (and thus reimported each time)
const pathUnique = watch
? `${path}?v=${Math.random().toString(36).substring(7)}`
: path;
const filePath = "file://" + pathUnique;
// eval the JS, then run through compileReactStatic
const App = await import(filePath).then((m) => m.default)
// @ts-ignore Deno can't find jsx-dev-runtime
const compiled = renderToStaticMarkup(<App />)
return '<!DOCTYPE html>' + compiled
};
export const compileReactStaticNew = async (
path: string,
watch?: boolean
) => {
// Randomize the path so that it's unique (and thus reimported each time)
const pathUnique = watch
? `${path}?v=${Math.random().toString(36).substring(7)}`
: path;
const filePath = "file://" + pathUnique;
const denoProgram = `
import React from "react";
import { renderToStaticMarkup as compileReactStatic } from "react-dom/server"
const filePath = "${filePath}";
const App = await import(filePath).then((m) => m.default)
const compiled = compileReactStatic(<App />)
console.log('<!DOCTYPE html>' + compiled)`;
// create a tmp config here
const config = { ...REACT_STATIC_TS_CONFIG };
const existingConfigText = await Deno.readTextFile("deno.jsonc");
if (existingConfigText) {
const existingConfig = parseJsonc(existingConfigText) as {
imports?: {
[key: string]: string;
};
importMap?: string;
};
let imports = existingConfig?.imports;
if (existingConfig?.importMap) {
const importMap = await Deno.readTextFile(existingConfig?.importMap);
imports = (parseJsonc(importMap) as {
imports: {
[key: string]: string;
};
}).imports;
}
config.imports = {
...config.imports,
...imports,
};
}
const configPath = join(Deno.cwd(), "dsbuild-config.tmp.json");
await Deno.writeTextFile(configPath, JSON.stringify(config));
const programPath = join(Deno.cwd(), "dsbuild-program.tmp.tsx");
await Deno.writeTextFile(programPath, denoProgram);
const cmd = await new Deno.Command("deno", {
args: ["run", `--config=${configPath}`, "-A", programPath],
// stdin: "piped",
stdout: "piped",
});
const spawned = await cmd.spawn();
const reader = spawned.stdout.getReader();
let buffer: string = "";
const decoder = new TextDecoder();
while (true) {
const { value, done } = await reader.read();
if (done) {
break;
}
buffer += decoder.decode(value);
}
await reader.releaseLock();
await Deno.remove(configPath);
await Deno.remove(programPath);
return buffer;
}