Compare commits

...
17 Commits
Author SHA1 Message Date
Jamie Wong dd5065e3ad 1.21.1 2025-01-15 14:53:36 -08:00
Jamie Wong 3e9275683e Fix dev-server and source maps 2025-01-15 14:39:50 -08:00
Jamie Wong ada85fd41e Make the deploy script do a separate build rather than using the unpacked contents from npm 2025-01-15 12:42:53 -08:00
Jamie Wong fe21d01e13 Make output dir an argument to prepack.sh 2025-01-15 12:33:04 -08:00
Jamie Wong 35d2ea5f3e Move testing to the publish and deploy script, rename build-release to prepack 2025-01-15 12:30:15 -08:00
Jamie Wong 1e33d9a0c1 Switch build to IIFE 2025-01-15 12:19:34 -08:00
Jamie Wong 9b0bdd282a Get a version of the file:/// local build working again 2025-01-15 12:16:25 -08:00
Jamie Wong 22dd4583df Fix the build-release.sh script 2025-01-15 01:13:52 -08:00
Jamie Wong 63dc75eaa3 Add back accidentally deleted import 2025-01-15 01:09:40 -08:00
Jamie Wong 668ad92233 Add comment with caveat about dev-server.ts 2025-01-15 01:08:54 -08:00
Jamie Wong bfcd0f0e46 Deal with CSS and favicons 2025-01-15 01:06:55 -08:00
Jamie Wong fb1697be79 Start dynamically building index.html file 2025-01-15 00:21:17 -08:00
Jamie Wong e40961bbdd Move compiled JS assets into assets/dist 2025-01-14 23:08:27 -08:00
Jamie Wong 15cf0e2ffa Switch to using a build script, enable code splitting 2025-01-14 22:41:52 -08:00
Jamie Wong 78097003f7 Update comment in js-source-map.ts 2025-01-14 22:14:15 -08:00
Jamie Wong 14f158622e Update esbuild dep 2025-01-14 22:11:11 -08:00
Jamie Wong 53c8e8aafd Very basic version working 2025-01-14 22:09:54 -08:00
17 changed files with 1731 additions and 11563 deletions
+1 -1
View File
@@ -3,4 +3,4 @@ node_modules
dist
.idea
coverage
.vscode
.vscode
+22
View File
@@ -1,3 +1,25 @@
## [1.21.1] - 2025-01-15
- Fix dev-server and source maps
- Make the deploy script do a separate build rather than using the unpacked contents from npm
- Make output dir an argument to prepack.sh
- Move testing to the publish and deploy script, rename build-release to prepack
- Switch build to IIFE
- Get a version of the file:/// local build working again
- Fix the build-release.sh script
- Add back accidentally deleted import
- Add comment with caveat about dev-server.ts
- Deal with CSS and favicons
- Start dynamically building index.html file
- Move compiled JS assets into assets/dist
- Switch to using a build script, enable code splitting
- Update comment in js-source-map.ts
- Update esbuild dep
- Very basic version working
- Revert "Upgrade to parcel 2.13.3" [[#492](https://github.com/jlfwong/speedscope/pull/492)] (by @jlfwong)
- Upgrade to parcel 2.13.3 [[#492](https://github.com/jlfwong/speedscope/pull/492)] (by @jlfwong)
- Add link to async-profiler wiki page to README
## [1.21.0] - 2024-11-16
- Add support for Instruments 16 Time Profile Deep Copy [[#484](https://github.com/jlfwong/speedscope/pull/484)] (by @robert3005)
-172
View File
@@ -1,172 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<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">
<script>
// https://github.com/evanw/webgl-recorder
false && (function () {
var getContext = HTMLCanvasElement.prototype.getContext;
var requestAnimationFrame = window.requestAnimationFrame;
var frameSincePageLoad = 0;
function countFrames() {
frameSincePageLoad++;
requestAnimationFrame(countFrames);
}
window.requestAnimationFrame = function () {
return requestAnimationFrame.apply(window, arguments);
};
HTMLCanvasElement.prototype.getContext = function (type) {
var canvas = this;
var context = getContext.apply(canvas, arguments);
if (type === 'webgl' || type === 'experimental-webgl') {
var oldWidth = canvas.width;
var oldHeight = canvas.height;
var oldFrameCount = frameSincePageLoad;
var trace = [];
var variables = {};
var fakeContext = {
trace: trace,
compileTrace: compileTrace,
downloadTrace: downloadTrace,
};
trace.push(' gl.canvas.width = ' + oldWidth + ';');
trace.push(' gl.canvas.height = ' + oldHeight + ';');
function compileTrace() {
var text = 'function* render(gl) {\n';
text += ' // Recorded using https://github.com/evanw/webgl-recorder\n';
for (var key in variables) {
text += ' var ' + key + 's = [];\n';
}
text += trace.join('\n');
text += '\n}\n';
return text;
}
function downloadTrace() {
var text = compileTrace();
var link = document.createElement('a');
link.href = URL.createObjectURL(new Blob([text], { type: 'application/javascript' }));
link.download = 'trace.js';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function getVariable(value) {
if (value instanceof WebGLActiveInfo ||
value instanceof WebGLBuffer ||
value instanceof WebGLFramebuffer ||
value instanceof WebGLProgram ||
value instanceof WebGLRenderbuffer ||
value instanceof WebGLShader ||
value instanceof WebGLShaderPrecisionFormat ||
value instanceof WebGLTexture ||
value instanceof WebGLUniformLocation) {
var name = value.constructor.name;
var list = variables[name] || (variables[name] = []);
var index = list.indexOf(value);
if (index === -1) {
index = list.length;
list.push(value);
}
return name + 's[' + index + ']';
}
return null;
}
console.timeStamp('start')
var start = performance.now()
for (var key in context) {
var value = context[key];
if (typeof value === 'function') {
fakeContext[key] = function (key, value) {
return function () {
trace.push(`// ${performance.now() - start}`)
var result = value.apply(context, arguments);
var args = [];
if (frameSincePageLoad !== oldFrameCount) {
oldFrameCount = frameSincePageLoad;
trace.push(' yield;');
}
if (canvas.width !== oldWidth || canvas.height !== oldHeight) {
oldWidth = canvas.width;
oldHeight = canvas.height;
trace.push(' gl.canvas.width = ' + oldWidth + ';');
trace.push(' gl.canvas.height = ' + oldHeight + ';');
}
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (typeof arg === 'number' || typeof arg === 'boolean' || typeof arg === 'string' || arg === null) {
args.push(JSON.stringify(arg));
}
else if (ArrayBuffer.isView(arg)) {
args.push('new ' + arg.constructor.name + '([' + Array.prototype.slice.call(arg) + '])');
}
else {
var variable = getVariable(arg);
if (variable !== null) {
args.push(variable);
}
else {
console.log('unsupported value:', arg);
args.push('null');
}
}
}
var text = 'gl.' + key + '(' + args.join(', ') + ');';
var variable = getVariable(result);
if (variable !== null) text = variable + ' = ' + text;
trace.push(' ' + text);
return result;
};
}(key, value);
}
else {
fakeContext[key] = value;
}
}
return fakeContext;
}
return context;
};
countFrames();
})();
</script>
<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="../src/speedscope.tsx"></script>
</body>
</html>
+1418 -11328
View File
File diff suppressed because it is too large Load Diff
+5 -4
View File
@@ -1,6 +1,6 @@
{
"name": "speedscope",
"version": "1.21.0",
"version": "1.21.1",
"description": "",
"repository": "jlfwong/speedscope",
"main": "index.js",
@@ -9,14 +9,14 @@
},
"scripts": {
"deploy": "./scripts/deploy.sh",
"prepack": "./scripts/build-release.sh",
"prepack": "./scripts/prepack.sh --outdir \"$(pwd)/dist/release\" --protocol file",
"prettier": "prettier --write 'src/**/*.ts' 'src/**/*.tsx'",
"lint": "eslint 'src/**/*.ts' 'src/**/*.tsx'",
"jest": "./scripts/test-setup.sh && jest --runInBand",
"coverage": "npm run jest -- --coverage",
"typecheck": "tsc --noEmit",
"test": "./scripts/ci.sh",
"serve": "parcel assets/index.html --open --no-autoinstall"
"serve": "tsx scripts/dev-server.ts"
},
"files": [
"bin/cli.js",
@@ -38,6 +38,7 @@
"@typescript-eslint/parser": "6.16.0",
"acorn": "7.2.0",
"aphrodite": "2.1.0",
"esbuild": "0.24.2",
"eslint": "8.0.0",
"eslint-plugin-prettier": "5.1.2",
"eslint-plugin-react-hooks": "4.6.0",
@@ -45,12 +46,12 @@
"jsverify": "0.8.3",
"jszip": "3.1.5",
"pako": "1.0.6",
"parcel-bundler": "1.12.4",
"preact": "10.4.1",
"prettier": "3.1.1",
"protobufjs": "6.8.8",
"source-map": "0.6.1",
"ts-jest": "24.3.0",
"tsx": "4.19.2",
"typescript": "5.3.3",
"typescript-json-schema": "0.42.0",
"uglify-es": "3.2.2",
-30
View File
@@ -1,30 +0,0 @@
#!/bin/bash
set -euxo pipefail
OUTDIR=`pwd`/dist/release
# Typecheck
node_modules/.bin/tsc --noEmit
# Run unit tests
npm run jest
# Clean out the release directory
rm -rf "$OUTDIR"
mkdir -p "$OUTDIR"
# Place info about the current commit into the build dir to easily identify releases
npm ls -depth -1 | head -n 1 | cut -d' ' -f 1 > "$OUTDIR"/release.txt
date >> "$OUTDIR"/release.txt
git rev-parse HEAD >> "$OUTDIR"/release.txt
# Place a json schema for the file format into the build directory too
node scripts/generate-file-format-schema-json.js > "$OUTDIR"/file-format-schema.json
# Include licenses
# https://github.com/jlfwong/speedscope/pull/412
cp assets/source-code-pro/LICENSE.md "$OUTDIR"/source-code-pro.LICENSE.md
# Build the compiled assets
node_modules/.bin/parcel build assets/index.html --no-cache --out-dir "$OUTDIR" --public-url "./" --detailed-report
+56
View File
@@ -0,0 +1,56 @@
import * as esbuild from 'esbuild'
import {buildOptions, generateIndexHtml} from './esbuild-shared'
function parseArgs() {
const args = process.argv.slice(2)
const result: {outdir?: string; protocol?: 'http' | 'file'} = {}
for (let i = 0; i < args.length; i += 2) {
switch (args[i]) {
case '--outdir':
result.outdir = args[i + 1]
break
case '--protocol':
result.protocol = args[i + 1] as 'http' | 'file'
break
}
}
return result
}
async function main() {
const {outdir, protocol: servingProtocol} = parseArgs()
if (!outdir || !servingProtocol) {
console.error('Usage: build-release.ts --outdir <outdir> --protocol <serving_protocol>')
process.exit(1)
}
if (servingProtocol !== 'http' && servingProtocol !== 'file') {
console.error('serving_protocol must be either "http" or "file"')
process.exit(1)
}
let buildResult = await esbuild.build({
...buildOptions,
minify: true,
metafile: true,
...(servingProtocol === 'file'
? {
format: 'iife',
splitting: false,
}
: {}),
outdir,
})
generateIndexHtml({
buildResult,
outdir,
servingProtocol,
})
console.log(`Successfully built to ${outdir}`)
}
main()
+5 -7
View File
@@ -7,12 +7,10 @@
set -euxo pipefail
SRCDIR=`pwd`
OUTDIR=`mktemp -d -t speedscope-unpacked`
OUTDIR=`pwd`/dist/http-release
# Untar the package
pushd "$OUTDIR"
PACKEDNAME=`npm pack speedscope | tail -n1`
tar -xvvf "$PACKEDNAME"
# Build the release with http protocol
./scripts/prepack.sh --outdir "$OUTDIR" --protocol http
# Create a shallow clone of the repository
TMPDIR=`mktemp -d -t speedscope-deploy`
@@ -22,7 +20,7 @@ git clone --depth 1 git@github.com:jlfwong/speedscope.git -b gh-pages
# Copy the build artifacts into the shallow clone
pushd speedscope
rm -rf *
cp -R "$OUTDIR"/package/dist/release/** .
cp -R "$OUTDIR"/* .
# Set the CNAME record
echo www.speedscope.app > CNAME
@@ -37,7 +35,7 @@ function ctrl_c() {
if [[ $REPLY =~ ^yes$ ]]
then
git add --all
git commit -m "Deploy $PACKEDNAME"
git commit -m "Deploy $(date +%Y-%m-%d)"
git push origin HEAD:gh-pages
rm -rf "$TMPDIR"
exit 0
+36
View File
@@ -0,0 +1,36 @@
import * as esbuild from 'esbuild'
import {buildOptions, generateIndexHtml} from './esbuild-shared'
async function main() {
const outdir = 'dist'
let ctx = await esbuild.context({
...buildOptions,
outdir,
write: false,
metafile: true,
plugins: [
{
name: 'speedscope-dev-server',
setup(build) {
build.onEnd(buildResult => {
generateIndexHtml({
buildResult,
outdir,
servingProtocol: 'http',
})
})
},
},
],
})
await ctx.rebuild()
let {host, port} = await ctx.serve({
servedir: outdir,
})
console.log(`Server is running at http://${host}:${port}`)
}
main()
+112
View File
@@ -0,0 +1,112 @@
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,
// 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]',
sourcemap: true,
bundle: true,
format: 'esm',
splitting: true,
loader: {
'.txt': 'file',
'.woff2': 'file',
'.png': 'file',
'.ico': 'file',
},
}
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]] {
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 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))
const asyncDependencyNames = mainChunk.imports
.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')
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 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}"${scriptType}></script>
${syncDependencyNames.map(dep => `<script src="${dep}"${scriptType}></script>`).join('\n ')}
${asyncDependencyNames
.map(
dep =>
`<script src="${dep}"${scriptType}${
servingProtocol === 'file' ? '' : ' async'
}></script>`,
)
.join('\n ')}
${
/* 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>
`
fs.writeFileSync(`${outdir}/index.html`, html)
}
+53
View File
@@ -0,0 +1,53 @@
#!/bin/bash
set -euxo pipefail
# Parse command line arguments
while [[ $# -gt 0 ]]; do
case $1 in
--outdir)
OUTDIR="$2"
shift 2
;;
--protocol)
PROTOCOL="$2"
shift 2
;;
*)
echo "Unknown argument: $1"
echo "Usage: $0 --outdir <output_directory> --protocol <serving_protocol>"
echo "serving_protocol must be either 'http' or 'file'"
exit 1
;;
esac
done
# Validate required arguments
if [ -z "${OUTDIR:-}" ] || [ -z "${PROTOCOL:-}" ]; then
echo "Usage: $0 --outdir <output_directory> --protocol <serving_protocol>"
echo "serving_protocol must be either 'http' or 'file'"
exit 1
fi
if [ "$PROTOCOL" != "http" ] && [ "$PROTOCOL" != "file" ]; then
echo "Error: serving_protocol must be either 'http' or 'file'"
exit 1
fi
# Clean out the release directory
rm -rf "$OUTDIR"
mkdir -p "$OUTDIR"
# Place info about the current commit into the build dir to easily identify releases
npm ls -depth -1 | head -n 1 | cut -d' ' -f 1 > "$OUTDIR"/release.txt
date >> "$OUTDIR"/release.txt
git rev-parse HEAD >> "$OUTDIR"/release.txt
# Place a json schema for the file format into the build directory too
node scripts/generate-file-format-schema-json.js > "$OUTDIR"/file-format-schema.json
# Include licenses
# https://github.com/jlfwong/speedscope/pull/412
cp assets/source-code-pro/LICENSE.md "$OUTDIR"/source-code-pro.LICENSE.md
node_modules/.bin/tsx scripts/build-release.ts --outdir "$OUTDIR" --protocol "$PROTOCOL"
+4 -4
View File
@@ -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
+6
View File
@@ -11,6 +11,12 @@
set -euxo pipefail
# Typecheck
node_modules/.bin/tsc --noEmit
# Run unit tests
npm run jest
if [ $# -lt 1 ]; then
echo "Usage: $0 <minor | patch | version>"
echo "e.g. $0 patch"
+3
View File
@@ -66,6 +66,8 @@ declare const module: any
if (process.env.NODE_ENV === 'development') {
;(window as any)['Atom'] = AtomDev = {}
/*
TODO(jlfwong): Fix this
module.hot.dispose(() => {
if (AtomDev) {
hotReloadStash = new Map()
@@ -76,6 +78,7 @@ if (process.env.NODE_ENV === 'development') {
;(window as any)['Atom_hotReloadStash'] = hotReloadStash
})
*/
hotReloadStash = (window as any)['Atom_hotReloadStash'] || null
}
+3 -16
View File
@@ -6,24 +6,11 @@
// URL, but I want speedscope to work standalone offline. This means that the remaining
// options require some way of having a local URL that corresponds the .wasm file.
//
// Also as of writing, speedscope is bundled with Parcel v1. Trying to import
// a .wasm file in Parcel v1 tries to load the wasm module itself, which is not
// what I'm trying to do -- I want SourceMapConsumer.initialize to be the thing
// booting the WebAssembly, not Parcel itself.
//
// One way of getting around this problem is to modify the build system to
// copy the .wasm file from node_modules/source-map/lib/mappings.wasm. I could do
// this, but it's a bit of a pain.
//
// Another would be to use something like
// import("url:../node_modules/source-map/lib/mappings.wasm"), and then pass the
// resulting URL to SourceMapConsumer.initialize. This is also kind of a pain,
// because I can only do that if I upgrade to Parcel v2. Ultimately, I'd like to
// use esbuild rather than parcel at all, so for now I'm just punting on this by
// using an old-version of source-map which doesn't depend on wasm.
// This is rarely used, so let's load it async to avoid bloating the initial
// bundle.
//
// TODO(jlfwong): Revisit using the newer, wasm-based version of source-map now
// that we're using esbuild for bundling.
import type {MappingItem, RawSourceMap, SourceMapConsumer} from 'source-map'
const sourceMapModule = import('source-map')
+3
View File
@@ -4,6 +4,8 @@ import {ThemeProvider} from './views/themes/theme'
console.log(`speedscope v${require('../package.json').version}`)
/*
TODO(jlfwong): Fix this
declare const module: any
if (module.hot) {
module.hot.dispose(() => {
@@ -12,6 +14,7 @@ if (module.hot) {
})
module.hot.accept()
}
*/
render(
<ThemeProvider>
+4 -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'
@@ -17,6 +19,7 @@ import {canUseXHR} from '../app-state'
import {ProfileGroupState} from '../app-state/profile-group'
import {HashParams} from '../lib/hash-params'
import {StatelessComponent} from '../lib/preact-helpers'
import {SandwichViewContainer} from './sandwich-view'
const importModule = import('../import')