TSDiagram - Diagrams as code with TypeScript

84 | 91 | {isVimMode &&

} 92 |

93 | ); 94 | }); 95 | -------------------------------------------------------------------------------- /src/lib/parser/Parser.test.ts: -------------------------------------------------------------------------------- 1 | import { expect, it } from "vitest"; 2 | import { Parser } from "./Parser"; 3 | 4 | it("parses code into AST and updates it on code change", () => { 5 | const parser = new Parser("interface A { }"); 6 | expect(parser.interfaces.length).toBe(1); 7 | 8 | parser.setSource("interface A { }; interface B { }"); 9 | expect(parser.interfaces.length).toBe(2); 10 | }); 11 | 12 | it("parses interfaces", () => { 13 | const parser = new Parser(` 14 | interface A { foo: string; bar(): string; } 15 | interface B { baz: A; } 16 | interface C extends A, B { qux: string; } 17 | `); 18 | 19 | const interfaces = parser.interfaces; 20 | expect(interfaces.length).toBe(3); 21 | 22 | const [A, B, C] = interfaces; 23 | 24 | expect(A.name).toBe("A"); 25 | expect(A.declaration.getText()).toBe("interface A { foo: string; bar(): string; }"); 26 | expect(A.extends.length).toBe(0); 27 | expect(A.properties.length).toBe(1); 28 | expect(A.properties[0].getName()).toBe("foo"); 29 | expect(A.methods.length).toBe(1); 30 | expect(A.methods[0].getName()).toBe("bar"); 31 | 32 | expect(B.name).toBe("B"); 33 | expect(B.declaration.getText()).toBe("interface B { baz: A; }"); 34 | expect(B.extends.length).toBe(0); 35 | expect(B.properties.length).toBe(1); 36 | expect(B.properties[0].getName()).toBe("baz"); 37 | expect(B.methods.length).toBe(0); 38 | 39 | expect(C.name).toBe("C"); 40 | expect(C.declaration.getText()).toBe("interface C extends A, B { qux: string; }"); 41 | expect(C.extends.length).toBe(2); 42 | expect(C.extends[0].getText()).toBe("A"); 43 | expect(C.extends[1].getText()).toBe("B"); 44 | expect(C.properties.length).toBe(3); 45 | expect(C.properties[0].getName()).toBe("qux"); 46 | expect(C.properties[1].getName()).toBe("foo"); 47 | expect(C.properties[2].getName()).toBe("baz"); 48 | expect(C.methods.length).toBe(1); 49 | expect(C.methods[0].getName()).toBe("bar"); 50 | }); 51 | 52 | it("parses type aliases", () => { 53 | const parser = new Parser(` 54 | type A = { foo: string; bar(): string; }; 55 | type B = { baz: A; }; 56 | type C = A & B; 57 | type D = string; 58 | `); 59 | 60 | const typeAliases = parser.typeAliases; 61 | expect(typeAliases.length).toBe(4); 62 | const [A, B, C, D] = typeAliases; 63 | 64 | expect(A.name).toBe("A"); 65 | expect(A.declaration.getText()).toBe("type A = { foo: string; bar(): string; };"); 66 | expect(A.type.getText()).toBe("A"); 67 | 68 | expect(B.name).toBe("B"); 69 | expect(B.declaration.getText()).toBe("type B = { baz: A; };"); 70 | expect(B.type.getText()).toBe("B"); 71 | 72 | expect(C.name).toBe("C"); 73 | expect(C.declaration.getText()).toBe("type C = A & B;"); 74 | expect(C.type.getText()).toBe("C"); 75 | 76 | expect(D.name).toBe("D"); 77 | expect(D.declaration.getText()).toBe("type D = string;"); 78 | expect(D.type.getText()).toBe("string"); 79 | }); 80 | 81 | it("parses classes", () => { 82 | const parser = new Parser(` 83 | class A { foo: string; } 84 | class B { bar(): string { throw new Error(); } } 85 | class C extends A implements B { bar() { return "baz"; } } 86 | `); 87 | 88 | const classes = parser.classes; 89 | expect(classes.length).toBe(3); 90 | 91 | const [A, B, C] = classes; 92 | 93 | expect(A.name).toBe("A"); 94 | expect(A.declaration.getText()).toBe("class A { foo: string; }"); 95 | expect(A.extends).toBeUndefined(); 96 | expect(A.properties.length).toBe(1); 97 | expect(A.properties[0].getName()).toBe("foo"); 98 | expect(A.methods.length).toBe(0); 99 | 100 | expect(B.name).toBe("B"); 101 | expect(B.declaration.getText()).toBe("class B { bar(): string { throw new Error(); } }"); 102 | expect(B.extends).toBeUndefined(); 103 | expect(B.properties.length).toBe(0); 104 | expect(B.methods.length).toBe(1); 105 | expect(B.methods[0].getName()).toBe("bar"); 106 | 107 | expect(C.name).toBe("C"); 108 | expect(C.declaration.getText()).toBe('class C extends A implements B { bar() { return "baz"; } }'); 109 | expect(C.extends).toBeDefined(); 110 | expect(C.extends?.getText()).toBe("A"); 111 | expect(C.properties.length).toBe(1); 112 | expect(C.methods.length).toBe(1); 113 | }); 114 | -------------------------------------------------------------------------------- /src/components/Renderer/CustomEdge.tsx: -------------------------------------------------------------------------------- 1 | import { useMemo } from "react"; 2 | import { getSmartEdge, PathFindingFunction, SVGDrawFunction } from "@tisoap/react-flow-smart-edge"; 3 | import { DiagonalMovement, JumpPointFinder } from "pathfinding"; 4 | import { BezierEdge, EdgeProps, useNodes, XYPosition } from "reactflow"; 5 | import { useIsEdgeDecorated } from "../../stores/graph"; 6 | import { Direction } from "../../types"; 7 | // import { edgeSegmentCache } from "../../edge-segment-cache"; 8 | 9 | const toPoint = ([x, y]: number[]): XYPosition => ({ x, y }); 10 | // const toXYPosition = ({ x, y }: XYPosition): [number, number] => [x, y]; 11 | 12 | const getDirection = (a: XYPosition, b: XYPosition) => { 13 | if (a.x === b.x) { 14 | if (a.y > b.y) return Direction.Top; 15 | return Direction.Bottom; 16 | } else if (a.y === b.y) { 17 | if (a.x > b.x) return Direction.Left; 18 | return Direction.Right; 19 | } 20 | return Direction.None; 21 | }; 22 | 23 | const processSegments = (points: XYPosition[]) => { 24 | const segments: { start: XYPosition; end: XYPosition; direction: Direction }[] = []; 25 | const directions = points 26 | .map((_, index) => { 27 | if (index === 0) return Direction.None; 28 | return getDirection(points[index - 1], points[index]); 29 | }) 30 | .slice(1); 31 | 32 | let [prev, curr] = points; 33 | let prevDirection = directions[0]; 34 | 35 | // align first segment 36 | if (prevDirection === Direction.None) { 37 | const nextDirection = directions[1]; 38 | if (nextDirection !== Direction.None) { 39 | prevDirection = nextDirection; 40 | if (nextDirection === Direction.Right || nextDirection === Direction.Left) { 41 | curr.x = prev.x; 42 | } else { 43 | curr.y = prev.y; 44 | } 45 | } 46 | } 47 | 48 | for (const next of points.slice(2)) { 49 | const nextDirection = getDirection(curr, next); 50 | if (nextDirection !== prevDirection) { 51 | segments.push({ start: prev, end: curr, direction: prevDirection }); 52 | prev = curr; 53 | prevDirection = nextDirection; 54 | } 55 | curr = next; 56 | } 57 | 58 | const lastSegment = { start: prev, end: curr, direction: prevDirection }; 59 | 60 | // align last segment (works, but the arrow goes crazy) 61 | // if (lastSegment.direction === Direction.None) { 62 | // const prevSegment = segments[segments.length - 1]; 63 | // if (prevSegment.direction === Direction.Right || prevSegment.direction === Direction.Left) { 64 | // lastSegment.start.x = lastSegment.end.x; 65 | // } else { 66 | // lastSegment.start.y = lastSegment.end.y; 67 | // } 68 | // } 69 | 70 | segments.push(lastSegment); 71 | return segments; 72 | }; 73 | 74 | const drawEdge: SVGDrawFunction = (source, target, path) => { 75 | const points = [ 76 | [Math.floor(source.x), Math.floor(source.y)], 77 | ...path, 78 | [Math.floor(target.x), Math.floor(target.y)], 79 | ].map(toPoint); 80 | 81 | try { 82 | processSegments(points); 83 | // edgeSegmentCache.set(edge.id, {}); 84 | } catch (error) { 85 | console.error(error); 86 | } 87 | 88 | const first = points[0]; 89 | let svgPath = `M${first.x},${first.y}M`; 90 | 91 | let prev = first; 92 | 93 | for (const next of points) { 94 | const midPoint = { x: (prev.x - next.x) / 2 + next.x, y: (prev.y - next.y) / 2 + next.y }; 95 | svgPath += ` ${midPoint.x},${midPoint.y}`; 96 | svgPath += `Q${next.x},${next.y}`; 97 | prev = next; 98 | } 99 | 100 | const last = points[points.length - 1]; 101 | svgPath += ` ${last.x},${last.y}`; 102 | 103 | return svgPath; 104 | }; 105 | 106 | const generatePath: PathFindingFunction = (grid, start, end) => { 107 | try { 108 | // @ts-ignore 109 | const finder = new JumpPointFinder({ diagonalMovement: DiagonalMovement.Never }); 110 | const fullPath = finder.findPath(start.x, start.y, end.x, end.y, grid); 111 | if (fullPath.length === 0) return null; 112 | return { fullPath, smoothedPath: fullPath }; 113 | } catch { 114 | return null; 115 | } 116 | }; 117 | 118 | const styles = { 119 | selfLoop: { 120 | strokeDasharray: "5, 5", 121 | stroke: "#a9b2bc", 122 | }, 123 | highlighted: { 124 | strokeWidth: 1, 125 | }, 126 | faded: { 127 | stroke: "#cad0d6", 128 | strokeOpacity: 0.5, 129 | }, 130 | }; 131 | 132 | export const CustomEdge = (edge: EdgeProps) => { 133 | const nodes = useNodes(); 134 | const { highlighted, faded } = useIsEdgeDecorated(edge); 135 | 136 | const edgeStyle = useMemo(() => { 137 | return { 138 | ...edge.style, 139 | ...(edge.source === edge.target ? styles.selfLoop : {}), 140 | ...(highlighted ? styles.highlighted : {}), 141 | ...(faded ? styles.faded : {}), 142 | }; 143 | }, [edge.source, edge.style, edge.target, faded, highlighted]); 144 | 145 | const getSmartEdgeResponse = useMemo( 146 | () => 147 | getSmartEdge({ 148 | sourcePosition: edge.sourcePosition, 149 | targetPosition: edge.targetPosition, 150 | sourceX: edge.sourceX, 151 | sourceY: edge.sourceY, 152 | targetX: edge.targetX, 153 | targetY: edge.targetY, 154 | nodes, 155 | options: { 156 | drawEdge, 157 | generatePath, 158 | nodePadding: 6, 159 | gridRatio: 10, 160 | }, 161 | }), 162 | [edge.sourcePosition, edge.targetPosition, edge.sourceX, edge.sourceY, edge.targetX, edge.targetY, nodes] 163 | ); 164 | 165 | if (getSmartEdgeResponse === null) { 166 | return ; 167 | } 168 | 169 | return ( 170 | <> 171 | 178 | 179 | ); 180 | }; 181 | -------------------------------------------------------------------------------- /src/stores/documents.ts: -------------------------------------------------------------------------------- 1 | import isEqual from "lodash/isEqual"; 2 | import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from "lz-string"; 3 | import { nanoid } from "nanoid"; 4 | import { createStore, useStore } from "statelift"; 5 | import { z } from "zod"; 6 | import * as examples from "../examples"; 7 | 8 | const documentSchema = z.object({ 9 | id: z.string(), 10 | title: z.string(), 11 | source: z.string(), 12 | lastModified: z.number().default(Date.now()), 13 | }); 14 | export type Document = z.infer; 15 | 16 | const documentStateSchema = z.object({ 17 | documents: z.array(documentSchema), 18 | currentDocumentId: z.string(), 19 | }); 20 | export type DocumentsState = z.infer; 21 | export type DocumentsStore = DocumentsState & { 22 | readonly currentDocument: Document; 23 | save: () => void; 24 | create: () => void; 25 | delete: (id: string) => void; 26 | setCurrentDocumentId: (id: string) => void; 27 | setCurrentDocumentTitle: (title: string) => void; 28 | setCurrentDocumentSource: (source: string) => void; 29 | sortByLastModified: () => void; 30 | }; 31 | 32 | const defaultState: DocumentsState = { 33 | documents: [ 34 | { 35 | id: "default", 36 | title: "Welcome", 37 | source: examples.taskManagement, 38 | lastModified: Date.now(), 39 | }, 40 | ], 41 | currentDocumentId: "default", 42 | }; 43 | 44 | const serializeState = (state: DocumentsState) => { 45 | return JSON.stringify({ 46 | documents: state.documents, 47 | currentDocumentId: state.currentDocumentId, 48 | }); 49 | }; 50 | 51 | const saveLocalStorageState = (state: DocumentsState) => { 52 | localStorage.setItem("documents", serializeState(state)); 53 | }; 54 | 55 | const saveURLState = (state: DocumentsState) => { 56 | const monoState = { 57 | documents: state.documents.filter((d) => d.id === state.currentDocumentId), 58 | currentDocumentId: state.currentDocumentId, 59 | }; 60 | const compressed = compressToEncodedURIComponent(serializeState(monoState)); 61 | location.hash = `#/${compressed}`; 62 | }; 63 | 64 | const localStorageState = (() => { 65 | try { 66 | const data = JSON.parse(localStorage.getItem("documents") ?? ""); 67 | return documentStateSchema.parse(data); 68 | } catch {} 69 | return null; 70 | })(); 71 | 72 | const urlState = (() => { 73 | try { 74 | if (location.hash.startsWith("#/")) { 75 | const encoded = location.hash.slice(2); 76 | const decompressed = decompressFromEncodedURIComponent(encoded); 77 | const parsed = JSON.parse(decompressed); 78 | return { string: decompressed, state: documentStateSchema.parse(parsed) }; 79 | } 80 | } catch {} 81 | return null; 82 | })(); 83 | 84 | if (urlState && urlState.state.currentDocumentId === "default") { 85 | urlState.state.currentDocumentId = nanoid(); 86 | urlState.state.documents[0].id = urlState.state.currentDocumentId; 87 | } 88 | 89 | const combinedState = localStorageState ?? urlState?.state ?? defaultState; 90 | 91 | if (localStorageState && !urlState) { 92 | saveURLState(localStorageState); 93 | } 94 | 95 | // merge url state into local state 96 | let hasIngestedForeignState = false; 97 | if (localStorageState && urlState) { 98 | const urlDocumentId = urlState.state.currentDocumentId; 99 | const urlDocument = urlState.state.documents.find((d) => d.id === urlDocumentId); 100 | const localStorageDocument = localStorageState?.documents.find((d) => d.id === urlDocumentId); 101 | 102 | // if we've seen this document before, update it 103 | if (urlDocument && localStorageDocument) { 104 | if (!isEqual(urlDocument, localStorageDocument)) { 105 | localStorageDocument.title = urlDocument.title; 106 | localStorageDocument.source = urlDocument.source; 107 | hasIngestedForeignState = true; 108 | } 109 | combinedState.currentDocumentId = urlDocumentId; 110 | } 111 | 112 | // if it's a new document, ingest it 113 | if (urlDocument && !localStorageDocument) { 114 | combinedState.documents.unshift(urlDocument); 115 | combinedState.currentDocumentId = urlDocumentId; 116 | hasIngestedForeignState = true; 117 | } 118 | } 119 | 120 | export const documentsStore = createStore({ 121 | ...combinedState, 122 | get currentDocument() { 123 | const document = this.documents.find((doc: Document) => doc.id === this.currentDocumentId); 124 | if (!document) throw new Error("Document not found"); 125 | return document; 126 | }, 127 | save() { 128 | saveLocalStorageState(this); 129 | saveURLState(this); 130 | }, 131 | create() { 132 | const id = nanoid(); 133 | this.documents.unshift({ 134 | id, 135 | title: "Untitled", 136 | source: "", 137 | lastModified: Date.now(), 138 | }); 139 | this.currentDocumentId = id; 140 | this.sortByLastModified(); 141 | this.save(); 142 | }, 143 | delete(id: string) { 144 | if (this.documents.length === 1) { 145 | this.documents.push({ 146 | id: nanoid(), 147 | title: "Untitled", 148 | source: "", 149 | lastModified: Date.now(), 150 | }); 151 | } 152 | const isCurrentDocument = this.currentDocumentId === id; 153 | if (isCurrentDocument) { 154 | for (const document of this.documents) { 155 | if (document.id !== id) { 156 | this.currentDocumentId = document.id; 157 | break; 158 | } 159 | } 160 | } 161 | this.documents = this.documents.filter((d) => d.id !== id); 162 | this.save(); 163 | }, 164 | setCurrentDocumentId(id: string) { 165 | this.currentDocumentId = id; 166 | this.save(); 167 | }, 168 | setCurrentDocumentTitle(title: string) { 169 | this.currentDocument.title = title; 170 | this.currentDocument.lastModified = Date.now(); 171 | this.sortByLastModified(); 172 | this.save(); 173 | }, 174 | setCurrentDocumentSource(source: string) { 175 | this.currentDocument.source = source; 176 | this.currentDocument.lastModified = Date.now(); 177 | this.sortByLastModified(); 178 | this.save(); 179 | }, 180 | sortByLastModified() { 181 | this.documents.sort((a, b) => b.lastModified - a.lastModified); 182 | }, 183 | }); 184 | 185 | if (hasIngestedForeignState) { 186 | documentsStore.state.sortByLastModified(); 187 | documentsStore.state.save(); 188 | } 189 | 190 | export const useDocuments = () => useStore(documentsStore); 191 | -------------------------------------------------------------------------------- /src/components/Header.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import { 3 | ArrowLeftIcon, 4 | ArrowRightIcon, 5 | ChevronDownIcon, 6 | ExternalLinkIcon, 7 | FilePlusIcon, 8 | GearIcon, 9 | Share1Icon, 10 | } from "@radix-ui/react-icons"; 11 | import classNames from "classnames"; 12 | import { useStore } from "statelift"; 13 | import { documentsStore } from "../stores/documents"; 14 | import { optionsStore, useUserOptions } from "../stores/user-options"; 15 | 16 | const RELATED_SITES = [ 17 | { 18 | name: "BenchJS", 19 | description: "Benchmark JavaScript online", 20 | href: "https://benchjs.com", 21 | }, 22 | { 23 | name: "SneakyDomains", 24 | description: "Find amazing domain names", 25 | href: "https://sneakydomains.com", 26 | }, 27 | ] as const; 28 | 29 | type HeaderProps = { 30 | onPreferencesClick?: () => void; 31 | onShareClick?: () => void; 32 | }; 33 | 34 | export const Header = memo(({ onPreferencesClick, onShareClick }: HeaderProps) => { 35 | const options = useUserOptions(); 36 | const documentTitle = useStore(documentsStore, (state) => state.currentDocument.title); 37 | 38 | const handleTitleChange = (e: React.ChangeEvent) => { 39 | documentsStore.state.setCurrentDocumentTitle(e.target.value); 40 | documentsStore.state.save(); 41 | }; 42 | 43 | const handleSidebarButtonClick = () => { 44 | optionsStore.state.general.sidebarOpen = !optionsStore.state.general.sidebarOpen; 45 | optionsStore.state.save(); 46 | }; 47 | 48 | const handleNewDocumentClick = () => { 49 | documentsStore.state.create(); 50 | }; 51 | 52 | return ( 53 |

54 | {/* sidebar header */} 55 | {options.general.sidebarOpen && ( 56 |

62 |

63 | Documents 64 | 70 |

71 |

72 | )} 73 | 74 | {/* main wrapper */} 75 |

76 | {/* left */} 77 |

78 | {/* sidebar button */} 79 | 85 | 86 | {/* logo with site switcher */} 87 |

88 |

89 |

90 | 91 | TS 92 | 93 | Diagram 94 | 95 |

96 | 97 | {/* dropdown menu - on hover */} 98 |

99 |