tsc fixes and rules

.continue/rules/general.md

@@ -0,0 +1,12 @@
+# Project Architecture
+
+This is a React application with:
+
+- Components in `/src/components`
+- State management using zustand in `/src/stores`
+
+## Coding Standards
+
+- Use TypeScript for all new files
+- Follow the existing naming conventions
+- Write tests for all new features

src/App.tsx

@@ -1,6 +1,6 @@
-import React, { createContext, useEffect, useEffectEvent, useState } from 'react';
+import React, { useEffect, useEffectEvent, useState } from 'react';
-import { Layout, theme, Breadcrumb, Button, Space, Tree, type TreeDataNode } from 'antd';
+import { Layout, theme, Breadcrumb, Button, Space, Tree } from 'antd';
-import Graph, { GraphModel } from './components/Graph';
+import Graph from './components/Graph';
 import type { BreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb';
 import { useKeysdownStore } from './stores/ArrayStore';
 import {

src/Graphviz.tsx

@@ -1,4 +1,6 @@
-export function graphToDot(g) {
+import type { GraphModel } from "./components/Graph";
+
+export function graphToDot(g: GraphModel): string {
   // Directed graph, use neato layout so we can use pos attributes
   const lines = [];
   lines.push('digraph G {');

src/components/Graph.tsx

@@ -103,7 +103,7 @@ export default function Graph({ setGraphPath }: { setGraphPath: React.Dispatch<R
       graphsPath.push(createPathSegment(nodeContext.nodeId, nodeContext.nodeName));
       setGraphsPath([...graphsPath])
     }
-    const state = useGraphsStore.getState();
+    const state = useGraphsStore.getState() as { graphsById: Map<string, GraphModel> };
     const graphsById = state.graphsById;
     const graph = graphsById.get(graphId);
     if (graph) {
@@ -118,8 +118,8 @@ export default function Graph({ setGraphPath }: { setGraphPath: React.Dispatch<R
       const svgElement = await viz.renderSVGElement(dot, { engine: 'dot' });
       const container = containerRef.current;
       if (!container) return;
-      container.innerHTML = '';
+      (container as HTMLElement).innerHTML = '';
-      container.appendChild(svgElement);
+      (container as HTMLElement).appendChild(svgElement);
       attachInteractions(svgElement);
     } catch (e) {
       console.error('Viz render error', e);

src/components/NodeContextMenu.tsx

@@ -1,5 +1,5 @@
 import { Dropdown, type MenuProps } from "antd";
-import { defaultGraph, graphContext, type EdgeModel, type NodeContext } from "./Graph";
+import { defaultGraph, graphContext, GraphModel, type EdgeModel, type NodeContext } from "./Graph";
 import { useContext } from "react";
 import { cloneDeep } from "lodash";
 import { useGraphsStore } from "../stores/GraphsStore";
@@ -39,7 +39,7 @@ export default function NodeContextMenu({
   }
 
   const graphContextValue = useContext(graphContext)!;
-  const graphsById = useGraphsStore((s) => s.graphsById);
+  const graphsById = useGraphsStore((s) => (s as { graphsById: Map<string, GraphModel> }).graphsById);
   const addTreeNode = useGraphLayersTreeStore(store => store.add);
 
   function contextMenuOpenChange(open: boolean) {

src/stores/TreeStore.tsx

@@ -1,5 +1,4 @@
 import type { TreeDataNode } from "antd";
-import { cloneDeep } from "lodash";
 import React from "react";
 import { create } from "zustand";
 import type { NodeContext } from "../components/Graph";
@@ -13,7 +12,7 @@ export interface TreeStore {
   remove: (nodeId: string) => void;
 }
 
-export const useGraphLayersTreeStore = create<TreeStore>()((set, get) => ({
+export const useGraphLayersTreeStore = create<TreeStore>()((set) => ({
   nodesFlatById: new Map<React.Key, TreeDataNode>(),
   parentIdByChildId: new Map<React.Key, string>(),
   rootNodes: [],

tsconfig.app.json

@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
+    "target": "es2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "types": ["vite/client"],
     "skipLibCheck": true,