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

packages/bugc-react/package.json

@@ -36,6 +36,7 @@
   "devDependencies": {
     "@testing-library/dom": "^10.0.0",
     "@testing-library/react": "^16.0.0",
+    "@types/dagre": "^0.7.52",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "jsdom": "^26.0.0",

packages/playground/package.json

@@ -15,14 +15,13 @@
   },
   "dependencies": {
     "@ethdebug/bugc": "^0.1.0-0",
+    "@ethdebug/bugc-react": "^0.1.0-0",
     "@monaco-editor/react": "^4.6.0",
-    "@types/dagre": "^0.7.52",
     "dagre": "^0.8.5",
     "monaco-editor": "^0.52.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-flow-renderer": "^10.3.17",
-    "vis-network": "^9.1.9"
+    "react-flow-renderer": "^10.3.17"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

packages/playground/src/compiler/CompilerOutput.tsx

@@ -1,13 +1,23 @@
 import { useState } from "react";
 import type { CompileResult } from "./types";
-import { AstView } from "../visualization/AstView";
-import { IrView } from "../visualization/IrView";
-import { CfgView } from "../visualization/CfgView";
-import { BytecodeView } from "../visualization/BytecodeView";
+import {
+  AstView,
+  IrView,
+  CfgView,
+  BytecodeView,
+  type SourceRange,
+} from "@ethdebug/bugc-react";
 import { ErrorView } from "./ErrorView";
-import type { SourceRange } from "../visualization/debugUtils";
 import "./CompilerOutput.css";
 
+// CSS for bugc-react components
+import "@ethdebug/bugc-react/src/components/variables.css";
+import "@ethdebug/bugc-react/src/components/AstView.css";
+import "@ethdebug/bugc-react/src/components/BytecodeView.css";
+import "@ethdebug/bugc-react/src/components/CfgView.css";
+import "@ethdebug/bugc-react/src/components/EthdebugTooltip.css";
+import "@ethdebug/bugc-react/src/components/IrView.css";
+
 interface CompilerOutputProps {
   result: CompileResult;
   onOpcodeHover?: (ranges: SourceRange[]) => void;

packages/playground/src/compiler/types.ts

@@ -1,25 +1,6 @@
-import type { Ast, Ir, Evm } from "@ethdebug/bugc";
-
-export interface BytecodeOutput {
-  runtime: Uint8Array;
-  create?: Uint8Array;
-  runtimeInstructions: Evm.Instruction[];
-  createInstructions?: Evm.Instruction[];
-}
-
-export interface SuccessfulCompileResult {
-  success: true;
-  ast: Ast.Program;
-  ir: Ir.Module;
-  bytecode: BytecodeOutput;
-  warnings: string[];
-}
-
-export interface FailedCompileResult {
-  success: false;
-  error: string;
-  ast?: Ast.Program;
-  warnings?: string[];
-}
-
-export type CompileResult = SuccessfulCompileResult | FailedCompileResult;
+export type {
+  BytecodeOutput,
+  SuccessfulCompileResult,
+  FailedCompileResult,
+  CompileResult,
+} from "@ethdebug/bugc-react";

packages/playground/src/editor/Editor.tsx

@@ -1,12 +1,10 @@
 import MonacoEditor, { type OnMount } from "@monaco-editor/react";
 import { useEffect, useRef } from "react";
-import { registerBugLanguage } from "./bugLanguage";
-import type { editor as MonacoEditor_Type } from "monaco-editor";
+import * as monaco from "monaco-editor";
+import { registerBugLanguage } from "@ethdebug/bugc-react";
+import type { SourceRange } from "@ethdebug/bugc-react";
 
-export interface SourceRange {
-  offset: number;
-  length: number;
-}
+export type { SourceRange } from "@ethdebug/bugc-react";
 
 interface EditorProps {
   value: string;
@@ -21,13 +19,11 @@ export function Editor({
   language = "bug",
   highlightedRanges = [],
 }: EditorProps) {
-  const editorRef = useRef<MonacoEditor_Type.IStandaloneCodeEditor | null>(
-    null,
-  );
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const decorationsRef = useRef<string[]>([]);
 
   useEffect(() => {
-    registerBugLanguage();
+    registerBugLanguage(monaco);
   }, []);
 
   useEffect(() => {