From f528dc53004d6e75767b996098a2990d342b1a2c Mon Sep 17 00:00:00 2001 From: Jarred Sumner Date: Fri, 19 Sep 2025 23:54:18 -0700 Subject: [PATCH] shrink bun error modal by 250 KB (#22813) ### What does this PR do? ### How did you verify your code works? --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> --- packages/bun-error/bun.lock | 14 +++++++++++ packages/bun-error/index.tsx | 41 ++++++++++++++++---------------- packages/bun-error/package.json | 9 ++----- packages/bun-error/tsconfig.json | 5 ++-- 4 files changed, 40 insertions(+), 29 deletions(-) create mode 100644 packages/bun-error/bun.lock diff --git a/packages/bun-error/bun.lock b/packages/bun-error/bun.lock new file mode 100644 index 0000000000..3081551fc3 --- /dev/null +++ b/packages/bun-error/bun.lock @@ -0,0 +1,14 @@ +{ + "lockfileVersion": 1, + "workspaces": { + "": { + "name": "bun-error", + "dependencies": { + "preact": "^10.27.2", + }, + }, + }, + "packages": { + "preact": ["preact@10.27.2", "", {}, "sha512-5SYSgFKSyhCbk6SrXyMpqjb5+MQBgfvEKE/OC+PujcY34sOpqtr+0AZQtPYx5IA6VxynQ7rUPCtKzyovpj9Bpg=="], + } +} diff --git a/packages/bun-error/index.tsx b/packages/bun-error/index.tsx index e81dd401e9..179c31cc5e 100644 --- a/packages/bun-error/index.tsx +++ b/packages/bun-error/index.tsx @@ -1,5 +1,6 @@ -import React, { createContext, useContext } from "react"; -import { render, unmountComponentAtNode } from "react-dom"; +import type { JSX } from "preact"; +import { createContext, render } from "preact"; +import { useCallback, useContext, useEffect, useRef, useState } from "preact/hooks"; import type { FallbackMessageContainer, JSException, @@ -164,17 +165,17 @@ const maybeBlobFileURL = (filename: string, line?: number, column?: number): str return srcFileURL(filename, line, column); }; -const openWithoutFlashOfNewTab: React.MouseEventHandler = event => { - const target = event.currentTarget; +const openWithoutFlashOfNewTab: JSX.MouseEventHandler = event => { + const target = event.currentTarget as HTMLAnchorElement; const href = target.getAttribute("href"); if (!href || event.button !== 0) { return true; } event.preventDefault(); - event.nativeEvent.preventDefault(); - event.nativeEvent.stopPropagation(); - event.nativeEvent.stopImmediatePropagation(); + event.preventDefault(); + event.stopPropagation(); + event.stopImmediatePropagation(); const headers = new Headers(); headers.set("Accept", "text/plain"); @@ -317,17 +318,17 @@ const AsyncSourceLines = ({ highlight: number; highlightColumnStart: number; highlightColumnEnd: number; - children?: React.ReactNode; + children?: any; buildURL: (line?: number, column?: number) => string; sourceLines: SourceLine[]; setSourceLines: (lines: SourceLine[]) => void; }) => { - const [loadState, setLoadState] = React.useState(LoadState.pending); + const [loadState, setLoadState] = useState(LoadState.pending); - const controller = React.useRef(null); - const url = React.useRef(buildURL(0, 0)); + const controller = useRef(null); + const url = useRef(buildURL(0, 0)); - React.useEffect(() => { + useEffect(() => { controller.current = new AbortController(); var cancelled = false; fetch(url.current, { @@ -432,7 +433,7 @@ const SourceLines = ({ highlight: number; highlightColumnStart: number; highlightColumnEnd: number; - children?: React.ReactNode; + children?: any; buildURL: (line?: number, column?: number) => string; }) => { let start = sourceLines.length; @@ -461,7 +462,7 @@ const SourceLines = ({ const leftPad = maxLineNumber.toString(10).length - minLineNumber.toString(10).length; const _sourceLines = sourceLines.slice(start, end); - const lines = new Array(_sourceLines.length + React.Children.count(children)); + const lines = new Array(_sourceLines.length + (Array.isArray(children) ? children.length : children ? 1 : 0)); let highlightI = 0; for (let i = 0; i < _sourceLines.length; i++) { @@ -513,7 +514,7 @@ const SourceLines = ({ const BuildErrorSourceLines = ({ location, filename }: { location: Location; filename: string }) => { const { line, line_text, column } = location; const sourceLines: SourceLine[] = [{ line, text: line_text }]; - const buildURL = React.useCallback((line, column) => srcFileURL(filename, line, column), [srcFileURL, filename]); + const buildURL = useCallback((line, column) => srcFileURL(filename, line, column), [filename]); return ( void; - children?: React.ReactNode; + children?: any; isClient: boolean; }) => { const { file = "", position } = frames[0]; const { cwd } = useContext(ErrorGroupContext); const filename = normalizedFilename(file, cwd); const urlBuilder = isClient ? clientURL : maybeBlobFileURL; - const ref = React.useRef(null); - const buildURL = React.useCallback((line, column) => urlBuilder(file, line, column), [file, urlBuilder]); + const ref = useRef(null); + const buildURL = useCallback((line, column) => urlBuilder(file, line, column), [file, urlBuilder]); return (
@@ -732,7 +733,7 @@ const Indent = ({ by, children }) => { const JSException = ({ value, isClient = false }: { value: JSExceptionType; isClient: boolean }) => { const tag = isClient ? ErrorTagType.client : ErrorTagType.server; - const [sourceLines, _setSourceLines] = React.useState(value?.stack?.source_lines ?? []); + const [sourceLines, _setSourceLines] = useState(value?.stack?.source_lines ?? []); var message = value.message || ""; var name = value.name || ""; if (!name && !message) { @@ -1242,7 +1243,7 @@ export function renderRuntimeError(error: Error) { export function dismissError() { if (reactRoot) { - unmountComponentAtNode(reactRoot); + render(null, reactRoot); const root = document.getElementById("__bun__error-root"); if (root) root.remove(); reactRoot = null; diff --git a/packages/bun-error/package.json b/packages/bun-error/package.json index 7bcb9f6615..fee1860d2e 100644 --- a/packages/bun-error/package.json +++ b/packages/bun-error/package.json @@ -5,14 +5,9 @@ "license": "MIT", "private": true, "scripts": { - "build": "esbuild --define:process.env.NODE_ENV=\"'production'\" --minify index.tsx bun-error.css --bundle --outdir=dist --platform=browser --format=esm" + "build": "bun build --production --define:process.env.NODE_ENV=\"'production'\" --minify index.tsx bun-error.css --outdir=dist --target=browser --format=esm" }, "dependencies": { - "esbuild": "latest", - "react": "^17.0.2", - "react-dom": "^17.0.2" - }, - "devDependencies": { - "@types/react": "^17.0.39" + "preact": "^10.27.2" } } diff --git a/packages/bun-error/tsconfig.json b/packages/bun-error/tsconfig.json index f47d1cc832..fe7a138136 100644 --- a/packages/bun-error/tsconfig.json +++ b/packages/bun-error/tsconfig.json @@ -1,10 +1,11 @@ { "compilerOptions": { - "jsx": "react", "lib": ["ESNext", "DOM"], "module": "esnext", "target": "esnext", "moduleResolution": "node", - "allowSyntheticDefaultImports": true + "allowSyntheticDefaultImports": true, + "jsx": "react-jsx", + "jsxImportSource": "preact" } }