Merge pull request #101 from Digital-Alchemy-TS/chrisdrackett/issue100

update to make types available on first model

Author: chrisdrackett

apps/client/src/components/Editor/init.ts

@@ -41,6 +41,9 @@ monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
 	allowSyntheticDefaultImports: true,
 	esModuleInterop: true,
 	typeRoots: ["/globals.ts"],
+	// Optimize worker performance
+	maxNodeModuleJsDepth: 0, // Don't check node_modules JS files
+	skipLibCheck: true, // Skip type checking of declaration files
 })
 
 // # Configure Prettier
@@ -144,6 +147,13 @@ const unsubscribe = subscribe(store.apiStatus, () => {
 
 		ata()(header)
 
+		// Create a dummy model to prime the TypeScript worker
+		// This ensures types are loaded before any editor is mounted
+		const uri = monaco.Uri.parse("file:///automations/_init.ts")
+		// Add code that uses the heavy types to force TS worker to load them
+		const model = monaco.editor.createModel("", "typescript", uri)
+		model.dispose()
+
 		unsubscribe()
 	}
 })

apps/client/src/pages/AutomationDetail/Header.tsx

@@ -1,38 +1,42 @@
-import { useSnapshot } from "valtio"
-
-import { Button, Column, Row, Text, TextInput } from "@code-glue/paradigm"
+import { Button, ButtonRow, Row, Text, TextInput } from "@code-glue/paradigm"
+import { Header } from "@/components/Header"
 import { useCurrentAutomation } from "@/hooks/useAutomation"
-import { store } from "@/store"
+import { useRouter } from "@/hooks/useRouter"
 
-export const Header = () => {
+export const AutomationHeader = () => {
 	const { automation, automationSnapshot, saveCurrentAutomation } =
 		useCurrentAutomation()
-	const { isBodyEdited, newAutomationTitle } = useSnapshot(store.state)
+	const [, navigateTo] = useRouter()
 
 	return (
-		<Column
-			borderBottomColor="$borderColor"
-			borderBottomWidth="$size.stroke"
-			noShrink
-		>
+		<Header>
 			<Row mx={12}>
 				<Text>Name:</Text>
 				<TextInput
 					onChangeText={(title) => {
 						if (automation) {
 							automation.update({ title })
-						} else {
-							store.state.newAutomationTitle = title
 						}
 					}}
-					value={automation ? automationSnapshot.title : newAutomationTitle}
+					value={automation ? automationSnapshot.title : ""}
 				/>
 			</Row>
 			<Row>
 				<Text>Status:</Text>
-				<Text>{isBodyEdited ? "Edited" : "Unedited"}</Text>
-				<Button label="Save" onPress={saveCurrentAutomation} />
+				<Text>{automation?._isEdited ? "Edited" : "Unedited"}</Text>
+				<ButtonRow>
+					<Button label="Save" isRaised onPress={saveCurrentAutomation} />
+					<Button
+						label="Delete"
+						isRaised
+						isNegative
+						onPress={() => {
+							automation?.delete()
+							navigateTo("home")
+						}}
+					/>
+				</ButtonRow>
 			</Row>
-		</Column>
+		</Header>
 	)
 }

apps/client/src/pages/AutomationDetail/index.tsx

@@ -4,7 +4,7 @@ import { Column, Layout } from "@code-glue/paradigm"
 import { Editor } from "@/components/Editor"
 import { useCurrentAutomation } from "@/hooks/useAutomation"
 import { Footer } from "./Footer"
-import { Header } from "./Header"
+import { AutomationHeader } from "./Header"
 
 export const AutomationDetail = () => {
 	const { saveCurrentAutomation } = useCurrentAutomation()
@@ -23,7 +23,7 @@ export const AutomationDetail = () => {
 		<Layout.VerticalSplit
 			top={
 				<Column grow>
-					<Header />
+					<AutomationHeader />
 					<Editor />
 				</Column>
 			}

apps/client/src/store/automation.ts

@@ -136,6 +136,20 @@ const automationFactory = createFactory<AutomationType, Record<string, never>>(
 					console.error("client -> server push error", error)
 				})
 		},
+		async delete() {
+			await fetch(`${baseUrl}/api/v1/automation/${this.id}`, {
+				method: "DELETE",
+			})
+				.then((response) => {
+					if (!response.ok) {
+						throw new Error(`Failed to delete automation with id ${this.id}`)
+					}
+					automationStore.delete(this.id)
+				})
+				.catch((error) => {
+					console.error("client -> server delete error", error)
+				})
+		},
 	})
 	.actions({
 		update(updates: AutomationUpdateOptions) {

apps/client/src/store/index.ts

@@ -12,7 +12,6 @@ import type {
 } from "@code-glue/server/utils/index.mts"
 import type { Monaco } from "@monaco-editor/react"
 import type { editor } from "monaco-editor"
-import type { SectionIds } from "@/config"
 
 export const store = proxy({
 	isReady: false,
@@ -43,12 +42,6 @@ export const store = proxy({
 			allowedATAPackages: [] as string[],
 		},
 	},
-	/**
-	 * UI State
-	 */
-	state: {
-		currentNavSection: null as SectionIds | null,
-	},
 	/**
 	 * API Update/Connection Status
 	 */