Start dynamically building index.html file

2025-01-15 00:21:17 -08:00
parent e40961bbdd
commit fb1697be79
8 changed files with 842 additions and 192 deletions
@@ -26,5 +26,6 @@ node scripts/generate-file-format-schema-json.js > "$OUTDIR"/file-format-schema.
 # https://github.com/jlfwong/speedscope/pull/412
 cp assets/source-code-pro/LICENSE.md "$OUTDIR"/source-code-pro.LICENSE.md

+# TODO(jlfwong): minify CSS & append hashes
 # Build the compiled assets
-node_modules/.bin/parcel build assets/index.html --no-cache --out-dir "$OUTDIR" --public-url "./" --detailed-report
+node scripts/build.mjs "$OUTDIR"
@@ -0,0 +1,17 @@
+import * as esbuild from 'esbuild'
+import {buildOptions, generateIndexHtml} from './esbuild-shared'
+
+async function main() {
+  const outdir = process.argv[2]
+
+  let buildResult = await esbuild.build({
+    ...buildOptions,
+    minify: true,
+    metafile: true,
+    outdir,
+  })
+
+  generateIndexHtml(buildResult, outdir)
+}
+
+main()
@@ -1,18 +0,0 @@
-import * as esbuild from 'esbuild'
-
-let ctx = await esbuild.context({
-  entryPoints: ['src/speedscope.tsx'],
-  bundle: true,
-  outdir: 'assets/dist',
-  format: 'esm',
-  splitting: true,
-  loader: {
-    '.txt': 'file',
-  },
-})
-
-let {host, port} = await ctx.serve({
-  servedir: 'assets',
-})
-
-console.log(`Server is running at http://${host}:${port}`)
@@ -0,0 +1,23 @@
+import * as esbuild from 'esbuild'
+import {buildOptions, generateIndexHtml} from './esbuild-shared'
+
+async function main() {
+  const outdir = 'assets/dist'
+  let ctx = await esbuild.context({
+    ...buildOptions,
+    outdir,
+    write: false,
+    metafile: true,
+  })
+
+  let buildResult = await ctx.rebuild()
+  generateIndexHtml(buildResult, outdir)
+
+  let {host, port} = await ctx.serve({
+    servedir: outdir,
+  })
+
+  console.log(`Server is running at http://${host}:${port}`)
+}
+
+main()
@@ -0,0 +1,56 @@
+import * as fs from 'fs'
+import * as path from 'path'
+import * as esbuild from 'esbuild'
+
+const entryPoint = 'src/speedscope.tsx'
+
+export const buildOptions: esbuild.BuildOptions = {
+  entryPoints: [entryPoint],
+  entryNames: '[name]-[hash]',
+  chunkNames: '[name]-[hash]',
+  bundle: true,
+  format: 'esm',
+  splitting: true,
+  loader: {
+    '.txt': 'file',
+  },
+}
+
+export const generateIndexHtml = (buildResult: esbuild.BuildResult, outdir: string) => {
+  const outputs = buildResult.metafile!.outputs
+
+  const mainChunkPath = Object.keys(outputs).find(key => outputs[key].entryPoint === entryPoint)!
+  const mainChunkName = path.basename(mainChunkPath)
+
+  const mainChunk = outputs[mainChunkPath]
+  const syncDependencyNames = mainChunk.imports
+    .filter(i => i.kind === 'import-statement')
+    .map(i => path.basename(i.path))
+  const asyncDependencyNames = mainChunk.imports
+    .filter(i => i.kind === 'dynamic-import')
+    .map(i => path.basename(i.path))
+
+  const html = `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>speedscope</title>
+    <link href="source-code-pro.css" rel="stylesheet">
+    <link rel="stylesheet" href="reset.css">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
+  </head>
+  <body>
+    <script src="${mainChunkName}" type="module"></script>
+    ${syncDependencyNames.map(dep => `<script src="${dep}" type="module"></script>`).join('\n    ')}
+    ${asyncDependencyNames
+      .map(dep => `<script src="${dep}" type="module" async></script>`)
+      .join('\n    ')}
+  </body>
+</html>
+`
+
+  fs.writeFileSync(`${outdir}/index.html`, html)
+}