Skip to content

Replace duplicated visualization code in playground with @ethdebug/bugc-react - #180

Merged
gnidan merged 2 commits into
mainfrom
ui-consolidate-bugc-react
Mar 9, 2026
Merged

Replace duplicated visualization code in playground with @ethdebug/bugc-react#180
gnidan merged 2 commits into
mainfrom
ui-consolidate-bugc-react

Conversation

@gnidan

@gnidan gnidan commented Mar 9, 2026

Copy link
Copy Markdown
Member

Summary

The playground package had local copies of all bugc-react visualization components and utilities — pre-extraction originals that diverged from the extracted package. This replaces them with imports from @ethdebug/bugc-react, deleting ~2900 lines of duplicated code.

Changes:

  • Import AstView, BytecodeView, CfgView, IrView, SourceRange, and registerBugLanguage from @ethdebug/bugc-react
  • Re-export CompileResult types from bugc-react instead of duplicating definitions
  • Import bugc-react CSS in the consuming component
  • Remove entire src/visualization/ directory (14 files)
  • Remove local bugLanguage.ts (now using bugc-react's version)
  • Remove unused vis-network dependency
  • Add @ethdebug/bugc-react as dependency and tsconfig reference

gnidan added 2 commits March 9, 2026 16:18
The playground had local copies of all bugc-react visualization
components (AstView, BytecodeView, CfgView, IrView, EthdebugTooltip)
plus utilities (debugUtils, irDebugUtils, formatBytecode, bugLanguage).
These were pre-extraction originals that diverged from the extracted
package. Replace them with imports from @ethdebug/bugc-react and
delete the duplicated files.

Also removes unused vis-network dependency.
CfgView.tsx imports dagre, so the type declarations need
to be available during bugc-react's build. Previously
this worked by accident via hoisting from playground.
@github-actions

github-actions Bot commented Mar 9, 2026

Copy link
Copy Markdown
Contributor
PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-03-09 20:37 UTC

@gnidan

gnidan commented Mar 9, 2026

Copy link
Copy Markdown
Member Author

Review (from compiler)

Clean deduplication — this correctly replaces all local copies with bugc-react imports.

Verified:

  • All imported symbols (AstView, BytecodeView, CfgView, IrView, SourceRange, registerBugLanguage, CompileResult types) are properly exported from @ethdebug/bugc-react's index.ts
  • registerBugLanguage(monaco) signature matches — bugc-react's version takes a monaco parameter (unlike the old local version which imported monaco directly)
  • @types/dagre correctly moved to bugc-react's devDependencies since bugc-react owns the CfgView that uses dagre
  • tsconfig reference to ../bugc-react added — needed for TypeScript project references
  • vis-network removal is correct — it was unused (CfgView uses react-flow-renderer + dagre, not vis-network)

Minor note:

  • The CSS imports (@ethdebug/bugc-react/src/components/*.css) rely on Vite resolving through the monorepo symlink since bugc-react has no exports field. This works fine for the playground's use case but would break if bugc-react ever adds an exports map without CSS entrypoints. Not a blocker — just something to be aware of if the package is published for external consumers.
  • Editor.tsx changed from import type { editor as MonacoEditor_Type } from "monaco-editor" to import * as monaco from "monaco-editor" — this is a value import now rather than type-only. Should be fine in Vite since @monaco-editor/react already brings in monaco.

LGTM.

@gnidan
gnidan merged commit 2000382 into main Mar 9, 2026
4 checks passed
@gnidan
gnidan deleted the ui-consolidate-bugc-react branch March 9, 2026 20:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant