Get a version of the file:/// local build working again

2025-01-15 12:16:25 -08:00
parent 22dd4583df
commit 9b0bdd282a
4 changed files with 47 additions and 12 deletions
@@ -8,10 +8,18 @@ async function main() {
    ...buildOptions,
    minify: true,
    metafile: true,
+    format: 'cjs',
+    splitting: false,
    outdir,
  })

-  generateIndexHtml(buildResult, outdir)
+  generateIndexHtml({
+    buildResult,
+    outdir,
+    servingProtocol: 'file',
+  })
+
+  console.log(`Successfully built to ${outdir}`)
 }

 main()
@@ -17,7 +17,11 @@ async function main() {
  // I could just build my own server to do this and call rebuild manually, but
  // this is good enough for now.
  let buildResult = await ctx.rebuild()
-  generateIndexHtml(buildResult, outdir)
+  generateIndexHtml({
+    buildResult,
+    outdir,
+    servingProtocol: 'http',
+  })

  let {host, port} = await ctx.serve({
    servedir: outdir,
@@ -28,7 +28,17 @@ export const buildOptions: esbuild.BuildOptions = {
  },
 }

-export const generateIndexHtml = (buildResult: esbuild.BuildResult, outdir: string) => {
+interface GenerateIndexHtmlOptions {
+  buildResult: esbuild.BuildResult
+  outdir: string
+  servingProtocol: 'file' | 'http'
+}
+
+export const generateIndexHtml = ({
+  buildResult,
+  outdir,
+  servingProtocol,
+}: GenerateIndexHtmlOptions) => {
  const outputs = buildResult.metafile!.outputs

  function getOutput(entryPoint: string): [string, esbuild.Metafile['outputs'][string]] {
@@ -44,7 +54,6 @@ export const generateIndexHtml = (buildResult: esbuild.BuildResult, outdir: stri
  const mainChunkName = path.basename(mainChunkPath)

  const mainChunkCssPath = mainChunk.cssBundle!
-
  const cssChunk = outputs[mainChunkCssPath]

  const fontPath = cssChunk.imports.find(i => i.path.endsWith('.woff2'))!.path
@@ -57,6 +66,10 @@ export const generateIndexHtml = (buildResult: esbuild.BuildResult, outdir: stri
    .filter(i => i.kind === 'dynamic-import')
    .map(i => path.basename(i.path))

+  // If we're serving from a file protocol, we can't use module
+  // scripts
+  const scriptType = servingProtocol === 'file' ? '' : ' type="module"'
+
  const favicon16x16Path = getHashedFilePath('assets/favicon-16x16.png')
  const favicon32x32Path = getHashedFilePath('assets/favicon-32x32.png')
  const faviconIcoPath = getHashedFilePath('assets/favicon.ico')
@@ -74,12 +87,22 @@ export const generateIndexHtml = (buildResult: esbuild.BuildResult, outdir: stri
    <link rel="icon" type="image/x-icon" href="${faviconIcoPath}">
  </head>
  <body>
-    <script src="${mainChunkName}" type="module"></script>
-    ${syncDependencyNames.map(dep => `<script src="${dep}" type="module"></script>`).join('\n    ')}
+    <script src="${mainChunkName}"${scriptType}></script>
+    ${syncDependencyNames.map(dep => `<script src="${dep}"${scriptType}></script>`).join('\n    ')}
    ${asyncDependencyNames
-      .map(dep => `<script src="${dep}" type="module" async></script>`)
+      .map(
+        dep =>
+          `<script src="${dep}"${scriptType}${
+            servingProtocol === 'file' ? '' : ' async'
+          }></script>`,
+      )
      .join('\n    ')}
-    <link rel="preload" href="${fontName}" as="font" type="font/woff2" crossorigin>
+    ${
+      /* Preload is blocked by CORS, so we can't use it with file:/// URLs */
+      servingProtocol === 'file'
+        ? ''
+        : `<link rel="preload" href="${fontName}" as="font" type="font/woff2" crossorigin>`
+    }
  </body>
 </html>
 `
@@ -5,11 +5,11 @@

 set -euxo pipefail

-TMPDIR=`mktemp -d -t speedscope-test-installation`
+TESTDIR=`mktemp -d -t speedscope-test-installation`
 PACKEDNAME=`npm pack | tail -n1`

-mv "$PACKEDNAME" "$TMPDIR"
-cd "$TMPDIR"
+mv "$PACKEDNAME" "$TESTDIR"
+cd "$TESTDIR"
 tar -xvvf "$PACKEDNAME"
 cd package
 npm install
@@ -17,4 +17,4 @@ npm install
 set +x
 echo
 echo "Run the following command to switch into the test directory"
-echo cd "$TMPDIR"/package
+echo cd "$TESTDIR"/package