HardWareTool/SpeedScope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

Deal with CSS and favicons

Browse Source
This commit is contained in:
Jamie Wong
2025-01-15 01:06:55 -08:00
parent fb1697be79
commit bfcd0f0e46
4 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1 -2
View File
@@ -3,5 +3,4 @@ node_modules
dist
.idea
coverage
.vscode
assets/dist
.vscode
scripts/dev-server.ts
+1 -1
View File
@@ -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,
scripts/esbuild-shared.ts
+39 -7
View File
@@ -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 = `<!DOCTYPE html>
<html>
<head>
@@ -37,10 +68,10 @@ export const generateIndexHtml = (buildResult: esbuild.BuildResult, outdir: stri
<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">
<link rel="stylesheet" href="${path.basename(mainChunk.cssBundle!)}">
<link rel="icon" type="image/png" sizes="32x32" href="${favicon32x32Path}">
<link rel="icon" type="image/png" sizes="16x16" href="${favicon16x16Path}">
<link rel="icon" type="image/x-icon" href="${faviconIcoPath}">
</head>
<body>
<script src="${mainChunkName}" type="module"></script>
@@ -48,6 +79,7 @@ export const generateIndexHtml = (buildResult: esbuild.BuildResult, outdir: stri
${asyncDependencyNames
.map(dep => `<script src="${dep}" type="module" async></script>`)
.join('\n ')}
<link rel="preload" href="${fontName}" as="font" type="font/woff2" crossorigin>
</body>
</html>
`
src/views/application.tsx
+3 -1
View File
@@ -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'