Created
July 13, 2024 19:38
-
-
Save breadchris/7242064c5070e33706352e4110bee607 to your computer and use it in GitHub Desktop.
go + react
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package graph | |
| import ( | |
| "fmt" | |
| "github.com/evanw/esbuild/pkg/api" | |
| "testing" | |
| ) | |
| func TestBuild(t *testing.T) { | |
| result := api.Build(api.BuildOptions{ | |
| EntryPoints: []string{"graph.tsx"}, | |
| Loader: map[string]api.Loader{ | |
| ".js": api.LoaderJS, | |
| ".jsx": api.LoaderJSX, | |
| ".ts": api.LoaderTS, | |
| ".tsx": api.LoaderTSX, | |
| }, | |
| Outfile: "graph.js", | |
| Bundle: true, | |
| Write: true, | |
| LogLevel: api.LogLevelInfo, | |
| }) | |
| for _, warning := range result.Warnings { | |
| fmt.Println(warning.Text) | |
| } | |
| for _, e := range result.Errors { | |
| fmt.Println(e.Text) | |
| } | |
| for _, f := range result.OutputFiles { | |
| fmt.Println(f.Path) | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { useCallback } from 'react'; | |
| import { | |
| ReactFlow, | |
| MiniMap, | |
| Controls, | |
| Background, | |
| useNodesState, | |
| useEdgesState, | |
| addEdge, | |
| } from '@xyflow/react'; | |
| import '@xyflow/react/dist/style.css'; | |
| const initialNodes = [ | |
| { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } }, | |
| { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } }, | |
| ]; | |
| const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }]; | |
| export default function App() { | |
| const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); | |
| const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); | |
| const onConnect = useCallback( | |
| (params) => setEdges((eds) => addEdge(params, eds)), | |
| [setEdges], | |
| ); | |
| return ( | |
| <div style={{ width: '100vw', height: '100vh' }}> | |
| <ReactFlow | |
| nodes={nodes} | |
| edges={edges} | |
| onNodesChange={onNodesChange} | |
| onEdgesChange={onEdgesChange} | |
| onConnect={onConnect} | |
| > | |
| <Controls /> | |
| <MiniMap /> | |
| <Background variant="dots" gap={12} size={1} /> | |
| </ReactFlow> | |
| </div> | |
| ); | |
| } | |
| import {createRoot} from 'react-dom/client'; | |
| const root = createRoot(document.getElementById('graph')); | |
| root.render(<App />); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Graph</title> | |
| </head> | |
| <body> | |
| <script type="module" src="./graph.js"></script> | |
| <link rel="stylesheet" type="text/css" href="./graph.css"> | |
| <div id="graph"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment