remobi/build.ts at main · connorads/remobi · GitHub

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
import { existsSync, readFileSync, writeFileSync } from 'node:fs'
import { dirname, resolve } from 'node:path'
import { escapeAttr, generatePwaHtml } from './src/pwa/meta-tags'
import type { RemobiConfig } from './src/types'

function findProjectRoot(): string {
	let dir = import.meta.dirname
	for (let i = 0; i < 5; i++) {
		if (
			existsSync(resolve(dir, 'styles/base.css')) ||
			existsSync(resolve(dir, '../styles/base.css'))
		) {
			return dir
		}
		dir = dirname(dir)
	}
	return import.meta.dirname
}

const PROJECT_ROOT = findProjectRoot()
const IS_SOURCE_RUNTIME = existsSync(resolve(import.meta.dirname, 'src/index.ts'))

function resolveProjectFile(...segments: readonly string[]): string {
	const direct = resolve(PROJECT_ROOT, ...segments)
	if (existsSync(direct)) {
		return direct
	}
	return resolve(PROJECT_ROOT, '..', ...segments)
}

function readPrebuiltAsset(filename: string): string | null {
	if (IS_SOURCE_RUNTIME) {
		return null
	}

	const direct = resolve(import.meta.dirname, filename)
	if (existsSync(direct)) {
		return readFileSync(direct, 'utf-8')
	}

	const dist = resolve(PROJECT_ROOT, 'dist', filename)
	if (existsSync(dist)) {
		return readFileSync(dist, 'utf-8')
	}

	return null
}

/** Bundle the remobi client JS + CSS into strings */
export async function bundleClientAssets(
	config: RemobiConfig,
	version: string,
	basePath = '/',
): Promise<{ js: string; css: string }> {
	const prebuiltJs = readPrebuiltAsset('client.iife.js')
	const prebuiltCss = readPrebuiltAsset('client.css')
	if (prebuiltJs !== null && prebuiltCss !== null) {
		const js = `globalThis.__remobiVersion=${JSON.stringify(version)};globalThis.__remobiConfig=${JSON.stringify(config)};globalThis.__remobiBasePath=${JSON.stringify(basePath)};${prebuiltJs}`
		return { js, css: prebuiltCss }
	}

	const esbuild = await import('esbuild')
	const entryPoint = resolveProjectFile('src/client-entry.ts')

	const result = await esbuild.build({
		entryPoints: [entryPoint],
		bundle: true,
		platform: 'browser',
		minify: true,
		format: 'iife',
		outdir: 'out',
		write: false,
	})

	const jsOutput = result.outputFiles.find((file) => file.path.endsWith('.js'))
	const cssOutput = result.outputFiles.find((file) => file.path.endsWith('.css'))

	if (!jsOutput || !cssOutput) {
		throw new Error('remobi client build produced incomplete output')
	}

	const js = `globalThis.__remobiVersion=${JSON.stringify(version)};globalThis.__remobiConfig=${JSON.stringify(config)};globalThis.__remobiBasePath=${JSON.stringify(basePath)};${jsOutput.text}`
	return { js, css: cssOutput.text }
}

export function renderClientHtml(
	js: string,
	css: string,
	config: RemobiConfig,
	scriptNonce: string,
	basePath = '/',
): string {
	const viewport =
		'<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, viewport-fit=cover">'
	const pwaHtml = config.pwa.enabled
		? `${generatePwaHtml(config.name, config.pwa, basePath)}
`
		: ''
	const fontLink = `<link rel="stylesheet" href="${escapeAttr(config.font.cdnUrl)}">`
	const safeJs = js.replace(/<(?=\/script)/gi, '\\x3c')

	return [
		'<!DOCTYPE html>',
		'<html lang="en">',
		'<head>',
		'<meta charset="UTF-8">',
		'<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">',
		viewport,
		`<title>${escapeAttr(config.name)}</title>`,
		fontLink,
		pwaHtml.trim(),
		`<style>${css}</style>`,
		'</head>',
		'<body>',
		'<div id="terminal-container"><div id="terminal"></div></div>',
		`<script nonce="${escapeAttr(scriptNonce)}">${safeJs}</script>`,
		'</body>',
		'</html>',
	]
		.filter((line) => line.length > 0)
		.join('\n')
}

export async function writeClientBundle(outputPath: string): Promise<void> {
	const esbuild = await import('esbuild')
	const entryPoint = resolveProjectFile('src/client-entry.ts')
	const result = await esbuild.build({
		entryPoints: [entryPoint],
		bundle: true,
		platform: 'browser',
		minify: true,
		format: 'iife',
		outdir: 'out',
		write: false,
	})

	const jsOutput = result.outputFiles.find((file) => file.path.endsWith('.js'))
	const cssOutput = result.outputFiles.find((file) => file.path.endsWith('.css'))
	if (!jsOutput || !cssOutput) {
		throw new Error('remobi client build produced incomplete output')
	}

	writeFileSync(resolve(outputPath, 'client.iife.js'), jsOutput.text)
	writeFileSync(resolve(outputPath, 'client.css'), cssOutput.text)
}