diff --git a/scripts/build-release.ts b/scripts/build-release.ts
index 024ed0e..f1c82bd 100644
--- a/scripts/build-release.ts
+++ b/scripts/build-release.ts
@@ -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()
diff --git a/scripts/dev-server.ts b/scripts/dev-server.ts
index 1b5af5d..d6e1353 100644
--- a/scripts/dev-server.ts
+++ b/scripts/dev-server.ts
@@ -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,
diff --git a/scripts/esbuild-shared.ts b/scripts/esbuild-shared.ts
index 77e88c2..2404cd5 100644
--- a/scripts/esbuild-shared.ts
+++ b/scripts/esbuild-shared.ts
@@ -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
-
- ${syncDependencyNames.map(dep => ``).join('\n ')}
+
+ ${syncDependencyNames.map(dep => ``).join('\n ')}
${asyncDependencyNames
- .map(dep => ``)
+ .map(
+ dep =>
+ ``,
+ )
.join('\n ')}
-
+ ${
+ /* Preload is blocked by CORS, so we can't use it with file:/// URLs */
+ servingProtocol === 'file'
+ ? ''
+ : ``
+ }