From bfcd0f0e46672a1aaa1521dff6dda050ff011fd9 Mon Sep 17 00:00:00 2001 From: Jamie Wong Date: Wed, 15 Jan 2025 01:06:55 -0800 Subject: [PATCH] Deal with CSS and favicons --- .gitignore | 3 +-- scripts/dev-server.ts | 2 +- scripts/esbuild-shared.ts | 46 +++++++++++++++++++++++++++++++++------ src/views/application.tsx | 4 +++- 4 files changed, 44 insertions(+), 11 deletions(-) diff --git a/.gitignore b/.gitignore index 85dafe0..66ccee7 100644 --- a/.gitignore +++ b/.gitignore @@ -3,5 +3,4 @@ node_modules dist .idea coverage -.vscode -assets/dist \ No newline at end of file +.vscode \ No newline at end of file diff --git a/scripts/dev-server.ts b/scripts/dev-server.ts index 6ae68da..ee79fd7 100644 --- a/scripts/dev-server.ts +++ b/scripts/dev-server.ts @@ -2,7 +2,7 @@ import * as esbuild from 'esbuild' import {buildOptions, generateIndexHtml} from './esbuild-shared' async function main() { - const outdir = 'assets/dist' + const outdir = 'dist' let ctx = await esbuild.context({ ...buildOptions, outdir, diff --git a/scripts/esbuild-shared.ts b/scripts/esbuild-shared.ts index c1fc7d8..77e88c2 100644 --- a/scripts/esbuild-shared.ts +++ b/scripts/esbuild-shared.ts @@ -5,24 +5,51 @@ import * as esbuild from 'esbuild' const entryPoint = 'src/speedscope.tsx' export const buildOptions: esbuild.BuildOptions = { - entryPoints: [entryPoint], + entryPoints: [ + entryPoint, + + // This is a kind of silly way to ensure that all of these files end up being + // discovered by esbuild and copied into the output directory + 'assets/favicon-16x16.png', + 'assets/favicon-32x32.png', + 'assets/favicon.ico', + ], entryNames: '[name]-[hash]', chunkNames: '[name]-[hash]', + assetNames: '[name]-[hash]', bundle: true, format: 'esm', splitting: true, loader: { '.txt': 'file', + '.woff2': 'file', + '.png': 'file', + '.ico': '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)! + function getOutput(entryPoint: string): [string, esbuild.Metafile['outputs'][string]] { + const key = Object.keys(outputs).find(key => outputs[key].entryPoint === entryPoint)! + return [key, outputs[key]] + } + + function getHashedFilePath(name: string) { + return path.basename(getOutput(name)[1].imports.find(i => i.kind === 'file-loader')!.path) + } + + const [mainChunkPath, mainChunk] = getOutput(entryPoint) const mainChunkName = path.basename(mainChunkPath) - const mainChunk = outputs[mainChunkPath] + const mainChunkCssPath = mainChunk.cssBundle! + + const cssChunk = outputs[mainChunkCssPath] + + const fontPath = cssChunk.imports.find(i => i.path.endsWith('.woff2'))!.path + const fontName = path.basename(fontPath) + const syncDependencyNames = mainChunk.imports .filter(i => i.kind === 'import-statement') .map(i => path.basename(i.path)) @@ -30,6 +57,10 @@ export const generateIndexHtml = (buildResult: esbuild.BuildResult, outdir: stri .filter(i => i.kind === 'dynamic-import') .map(i => path.basename(i.path)) + const favicon16x16Path = getHashedFilePath('assets/favicon-16x16.png') + const favicon32x32Path = getHashedFilePath('assets/favicon-32x32.png') + const faviconIcoPath = getHashedFilePath('assets/favicon.ico') + const html = ` @@ -37,10 +68,10 @@ export const generateIndexHtml = (buildResult: esbuild.BuildResult, outdir: stri speedscope - - - - + + + + @@ -48,6 +79,7 @@ export const generateIndexHtml = (buildResult: esbuild.BuildResult, outdir: stri ${asyncDependencyNames .map(dep => ``) .join('\n ')} + ` diff --git a/src/views/application.tsx b/src/views/application.tsx index d51c4d8..8fc2c4b 100644 --- a/src/views/application.tsx +++ b/src/views/application.tsx @@ -1,10 +1,12 @@ +import '../../assets/reset.css' +import '../../assets/source-code-pro.css' + import {h} from 'preact' import {StyleSheet, css} from 'aphrodite' import {ProfileGroup, SymbolRemapper} from '../lib/profile' import {FontFamily, FontSize, Duration} from './style' import {importEmscriptenSymbolMap as importEmscriptenSymbolRemapper} from '../lib/emscripten' -import {SandwichViewContainer} from './sandwich-view' import {saveToFile} from '../lib/file-format' import {ActiveProfileState} from '../app-state/active-profile-state' import {LeftHeavyFlamechartView, ChronoFlamechartView} from './flamechart-view-container'