Files
Miguel Angel Simon Sierra 3003452310 perf(studio): defer the source editor and markdown preview off first paint
The studio shipped one 3.7 MB eager entry chunk: 1,126,473 B gzip against the
600 KiB eagerEntryChunkGzipBytes budget. CodeMirror and the markdown renderer
were the two largest blocks on that path and neither is needed to paint the
shell.

- React.lazy the source editor (@codemirror/*, @lezer/*) and the storyboard
  source view (marked, dompurify), copying the deferred-dependency shape of the
  mediabunny dynamic import in player/lib/mediaProbe.ts.
- Add LazyPanel: one Suspense + error boundary whose fallback fills the panel's
  slot (h-full w-full flex-1) so opening the editor cannot shift the layout, and
  whose rejected-chunk state renders a visible retry instead of a blank panel.
- manualChunks splits the React runtime and the remaining vendor code out of the
  app chunk so app-only deploys stop invalidating them for repeat visitors.
- tests/e2e/studio-bundle-budget.mjs gates the built artifact against
  eagerEntryChunkGzipBytes with no browser. It measures the entry module plus
  its modulepreloaded chunks, not the entry file alone: the entry file alone now
  gzips to 444,432 B and would report a false pass while the browser still
  downloads 860,966 B before first paint.

Eager gzip drops 1,126,473 B -> 860,966 B (-23.6%). Still 40% over the 600 KiB
budget, so the gate fails by design; the remainder is a Node-only AST stack
(@babel/parser, esprima, acorn, recast, ast-types) pulled into the browser
bundle through @hyperframes/sdk, which is outside this unit.
2026-08-01 01:14:10 +02:00

106 lines
3.2 KiB
JSON

{
"name": "@hyperframes/studio",
"version": "0.7.85",
"description": "",
"repository": {
"type": "git",
"url": "https://github.com/heygen-com/hyperframes",
"directory": "packages/studio"
},
"files": [
"src",
"dist"
],
"type": "module",
"main": "./src/index.ts",
"types": "./src/index.ts",
"exports": {
".": {
"browser": "./src/index.ts",
"bun": "./src/index.ts",
"import": "./src/index.ts",
"types": "./src/index.ts"
},
"./tailwind-preset": {
"bun": "./src/styles/tailwind-preset.ts",
"import": "./src/styles/tailwind-preset.ts",
"types": "./src/styles/tailwind-preset.ts"
},
"./package.json": "./package.json"
},
"publishConfig": {
"access": "public",
"exports": {
".": {
"import": "./dist/index.js",
"types": "./dist/index.d.ts"
},
"./tailwind-preset": {
"import": "./dist/styles/tailwind-preset.js",
"types": "./dist/styles/tailwind-preset.d.ts"
},
"./package.json": "./package.json"
},
"main": "./dist/index.js",
"types": "./dist/index.d.ts"
},
"scripts": {
"dev": "vite",
"build": "vite build && tsup",
"typecheck": "tsc --noEmit",
"test": "vitest run",
"test:timeline-virtualization": "TIMELINE_ROW_VIRTUALIZATION=on TIMELINE_ELEMENT_COUNT=50000 node tests/e2e/timeline-virtualization.mjs",
"test:watch": "vitest",
"report:sdk-cutover": "bun src/utils/sdkCutoverPolicy.report.ts",
"test:timeline-default": "bun run test:timeline-virtualization",
"test:studio-load": "STUDIO_LOAD_ARM=dev bun tests/e2e/studio-load.mjs",
"test:studio-load-embedded": "STUDIO_LOAD_ARM=embedded bun tests/e2e/studio-load.mjs",
"test:studio-load-bundle-budget": "vite build && node tests/e2e/studio-bundle-budget.mjs"
},
"dependencies": {
"@codemirror/autocomplete": "^6.20.1",
"@codemirror/commands": "^6.10.3",
"@codemirror/lang-css": "^6.3.1",
"@codemirror/lang-html": "^6.4.9",
"@codemirror/lang-javascript": "^6.2.2",
"@codemirror/lang-markdown": "^6.3.4",
"@codemirror/language": "^6.12.2",
"@codemirror/search": "^6.6.0",
"@codemirror/state": "^6.6.0",
"@codemirror/theme-one-dark": "^6.1.2",
"@codemirror/view": "6.40.0",
"@hyperframes/core": "workspace:*",
"@hyperframes/parsers": "workspace:*",
"@hyperframes/player": "workspace:*",
"@hyperframes/sdk": "workspace:*",
"@hyperframes/studio-server": "workspace:*",
"@phosphor-icons/react": "^2.1.10",
"@tanstack/react-virtual": "^3.14.6",
"bpm-detective": "^2.0.5",
"dompurify": "^3.2.4",
"gsap": "^3.13.0",
"marked": "^14.1.4",
"mediabunny": "^1.45.3"
},
"devDependencies": {
"@hyperframes/producer": "workspace:*",
"@types/react": "19",
"@types/react-dom": "19",
"@vitejs/plugin-react": "^4.0.0",
"autoprefixer": "^10.4.0",
"postcss": "^8.4.0",
"puppeteer-core": "^25.2.1",
"tailwindcss": "^3.4.0",
"tsup": "^8.0.0",
"typescript": "^5.0.0",
"vite": "^6.4.2",
"vitest": "^3.2.4",
"zustand": "^5.0.0"
},
"peerDependencies": {
"react": "19",
"react-dom": "19",
"zustand": "^4.0.0 || ^5.0.0"
}
}