vasp-cli 0.4.0 → 1.0.0

package/templates/spa/js/src/components/VaspNotifications.vue.hbs

@@ -0,0 +1,60 @@
+<script setup>
+import { notifications, removeNotification } from '../vasp/useVaspNotifications.js'
+</script>
+
+<template>
+  <div class="vasp-notifications">
+    <div
+      v-for="item in notifications"
+      :key="item.id"
+      class="vasp-notification"
+      :class="`is-${item.type}`"
+      @click="removeNotification(item.id)"
+    >
+      {{ item.message }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.vasp-notifications {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vasp-notification {
+  min-width: 220px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  color: #111827;
+  background: #e5e7eb;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  animation: slide-in 0.2s ease-out;
+}
+
+.vasp-notification.is-error {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.vasp-notification.is-success {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.vasp-notification.is-info {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+@keyframes slide-in {
+  from { transform: translateX(20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+</style>

package/templates/spa/js/src/vasp/auth.js.hbs

@@ -1,5 +1,6 @@
 import { ref } from 'vue'
 import { $fetch } from 'ofetch'
+import { notifyError } from './useVaspNotifications.js'
 
 const user = ref(null)
 let checked = false
@@ -18,27 +19,42 @@ export function useAuth() {
   }
 
   async function login(username, password) {
-    user.value = await $fetch(`${API}/auth/login`, {
-      method: 'POST',
-      body: { username, password },
-      credentials: 'include',
-    })
-    return user.value
+    try {
+      user.value = await $fetch(`${API}/auth/login`, {
+        method: 'POST',
+        body: { username, password },
+        credentials: 'include',
+      })
+      return user.value
+    } catch (error) {
+      notifyError(error)
+      throw error
+    }
   }
 
   async function register(username, password, email) {
-    user.value = await $fetch(`${API}/auth/register`, {
-      method: 'POST',
-      body: { username, password, email },
-      credentials: 'include',
-    })
-    return user.value
+    try {
+      user.value = await $fetch(`${API}/auth/register`, {
+        method: 'POST',
+        body: { username, password, email },
+        credentials: 'include',
+      })
+      return user.value
+    } catch (error) {
+      notifyError(error)
+      throw error
+    }
   }
 
   async function logout() {
-    await $fetch(`${API}/auth/logout`, { method: 'POST', credentials: 'include' })
-    user.value = null
-    checked = false
+    try {
+      await $fetch(`${API}/auth/logout`, { method: 'POST', credentials: 'include' })
+      user.value = null
+      checked = false
+    } catch (error) {
+      notifyError(error)
+      throw error
+    }
   }
 
   return { user, checkAuth, login, register, logout }

package/templates/spa/js/src/vasp/client/actions.js.hbs

@@ -1,5 +1,6 @@
 // Auto-generated by Vasp — do not edit
 import { useVasp } from '@vasp-framework/runtime'
+import { notifyError } from '../useVaspNotifications.js'
 
 {{#each actions}}
 /**
@@ -9,7 +10,12 @@ import { useVasp } from '@vasp-framework/runtime'
  */
 export async function {{camelCase name}}(args) {
   const { $vasp } = useVasp()
-  return $vasp.action('{{camelCase name}}', args)
+  try {
+    return await $vasp.action('{{camelCase name}}', args)
+  } catch (error) {
+    notifyError(error)
+    throw error
+  }
 }
 
 {{/each}}

package/templates/spa/js/src/vasp/client/crud.js.hbs

@@ -1,5 +1,14 @@
 // Auto-generated by Vasp — do not edit
 import { $fetch } from 'ofetch'
+import { safeParse } from 'valibot'
+import { ref } from 'vue'
+import {
+{{#each cruds}}
+    Create{{pascalCase entity}}Schema,
+    Update{{pascalCase entity}}Schema,
+{{/each}}
+} from '@shared/validation.js'
+import { notifyError } from '../useVaspNotifications.js'
 
 const API = import.meta.env.VITE_API_URL || '/api'
 
@@ -9,20 +18,100 @@ const API = import.meta.env.VITE_API_URL || '/api'
  */
 export function use{{pascalCase entity}}Crud() {
   const base = `${API}/crud/{{camelCase entity}}`
+    const loading = ref(false)
+    const error = ref(null)
+
+    const fail = (err) => {
+        error.value = err instanceof Error ? err.message : 'Request failed'
+        notifyError(err)
+    }
 
   return {
+        loading,
+        error,
 {{#if (includes operations "list")}}
-    list: () => $fetch(base, { credentials: 'include' }),
+        list: async () => {
+            loading.value = true
+            error.value = null
+            try {
+                return await $fetch(base, { credentials: 'include' })
+            } catch (err) {
+                fail(err)
+                throw err
+            } finally {
+                loading.value = false
+            }
+        },
 {{/if}}
 {{#if (includes operations "create")}}
-    create: (data) => $fetch(base, { method: 'POST', body: data, credentials: 'include' }),
+        create: async (data) => {
+            const parsed = safeParse(Create{{pascalCase entity}}Schema, data)
+            if (!parsed.success) {
+                const msg = parsed.issues?.[0]?.message ?? 'Invalid input'
+                const err = new Error(msg)
+                fail(err)
+                throw err
+            }
+
+            loading.value = true
+            error.value = null
+            try {
+                return await $fetch(base, { method: 'POST', body: parsed.output, credentials: 'include' })
+            } catch (err) {
+                fail(err)
+                throw err
+            } finally {
+                loading.value = false
+            }
+        },
 {{/if}}
-    get: (id) => $fetch(`${base}/${id}`, { credentials: 'include' }),
+        get: async (id) => {
+            loading.value = true
+            error.value = null
+            try {
+                return await $fetch(`${base}/${id}`, { credentials: 'include' })
+            } catch (err) {
+                fail(err)
+                throw err
+            } finally {
+                loading.value = false
+            }
+        },
 {{#if (includes operations "update")}}
-    update: (id, data) => $fetch(`${base}/${id}`, { method: 'PUT', body: data, credentials: 'include' }),
+        update: async (id, data) => {
+            const parsed = safeParse(Update{{pascalCase entity}}Schema, data)
+            if (!parsed.success) {
+                const msg = parsed.issues?.[0]?.message ?? 'Invalid input'
+                const err = new Error(msg)
+                fail(err)
+                throw err
+            }
+
+            loading.value = true
+            error.value = null
+            try {
+                return await $fetch(`${base}/${id}`, { method: 'PUT', body: parsed.output, credentials: 'include' })
+            } catch (err) {
+                fail(err)
+                throw err
+            } finally {
+                loading.value = false
+            }
+        },
 {{/if}}
 {{#if (includes operations "delete")}}
-    remove: (id) => $fetch(`${base}/${id}`, { method: 'DELETE', credentials: 'include' }),
+        remove: async (id) => {
+            loading.value = true
+            error.value = null
+            try {
+                return await $fetch(`${base}/${id}`, { method: 'DELETE', credentials: 'include' })
+            } catch (err) {
+                fail(err)
+                throw err
+            } finally {
+                loading.value = false
+            }
+        },
 {{/if}}
   }
 }

package/templates/spa/js/src/vasp/useVaspNotifications.js.hbs

@@ -0,0 +1,35 @@
+import { ref } from 'vue'
+
+export const notifications = ref([])
+
+export function pushNotification(type, message, timeoutMs = 3500) {
+  const id = Date.now() + Math.floor(Math.random() * 1000)
+  notifications.value.push({ id, type, message })
+
+  if (timeoutMs > 0) {
+    setTimeout(() => removeNotification(id), timeoutMs)
+  }
+
+  return id
+}
+
+export function removeNotification(id) {
+  notifications.value = notifications.value.filter((item) => item.id !== id)
+}
+
+export function notifyError(error) {
+  if (error instanceof Error && error.message) {
+    pushNotification('error', error.message)
+    return
+  }
+  pushNotification('error', 'Request failed')
+}
+
+export function useVaspNotifications() {
+  return {
+    notifications,
+    pushNotification,
+    removeNotification,
+    notifyError,
+  }
+}

package/templates/spa/js/vite.config.js.hbs

@@ -7,6 +7,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@src': fileURLToPath(new URL('./src', import.meta.url)),
+      '@shared': fileURLToPath(new URL('./shared', import.meta.url)),
       '@vasp-framework/client': fileURLToPath(new URL('./src/vasp/client', import.meta.url)),
     },
   },

package/templates/spa/ts/src/App.vue.hbs

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import VaspErrorBoundary from './components/VaspErrorBoundary.vue'
+import VaspNotifications from './components/VaspNotifications.vue'
+</script>
+
 <template>
-  <RouterView />
+  <VaspErrorBoundary>
+    <RouterView />
+  </VaspErrorBoundary>
+  <VaspNotifications />
 </template>

package/templates/spa/ts/src/components/VaspErrorBoundary.vue.hbs

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue'
+
+const hasError = ref(false)
+const message = ref('Something went wrong')
+
+onErrorCaptured((error) => {
+  hasError.value = true
+  message.value = import.meta.env.DEV && error instanceof Error
+    ? error.message
+    : 'Something went wrong'
+  return false
+})
+</script>
+
+<template>
+  <div v-if="hasError" class="vasp-error-boundary">
+    <h2>Unexpected error</h2>
+    <p>{{ message }}</p>
+  </div>
+  <slot v-else />
+</template>
+
+<style scoped>
+.vasp-error-boundary {
+  margin: 24px;
+  padding: 16px;
+  border: 1px solid #ef4444;
+  border-radius: 8px;
+  background: #fef2f2;
+  color: #991b1b;
+}
+</style>

package/templates/spa/ts/src/components/VaspNotifications.vue.hbs

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { notifications, removeNotification } from '../vasp/useVaspNotifications.js'
+</script>
+
+<template>
+  <div class="vasp-notifications">
+    <div
+      v-for="item in notifications"
+      :key="item.id"
+      class="vasp-notification"
+      :class="`is-${item.type}`"
+      @click="removeNotification(item.id)"
+    >
+      {{ item.message }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.vasp-notifications {
+  position: fixed;
+  top: 16px;
+  right: 16px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vasp-notification {
+  min-width: 220px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  color: #111827;
+  background: #e5e7eb;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  animation: slide-in 0.2s ease-out;
+}
+
+.vasp-notification.is-error {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.vasp-notification.is-success {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.vasp-notification.is-info {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+@keyframes slide-in {
+  from { transform: translateX(20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+</style>

package/templates/spa/ts/src/vasp/auth.ts.hbs

@@ -1,5 +1,6 @@
 import { ref, type Ref } from 'vue'
 import { $fetch } from 'ofetch'
+import { notifyError } from './useVaspNotifications.js'
 
 export interface AuthUser {
   id: number
@@ -26,27 +27,42 @@ export function useAuth() {
   }
 
   async function login(username: string, password: string): Promise<AuthUser> {
-    user.value = await $fetch<AuthUser>(`${API}/auth/login`, {
-      method: 'POST',
-      body: { username, password },
-      credentials: 'include',
-    })
-    return user.value!
+    try {
+      user.value = await $fetch<AuthUser>(`${API}/auth/login`, {
+        method: 'POST',
+        body: { username, password },
+        credentials: 'include',
+      })
+      return user.value!
+    } catch (error) {
+      notifyError(error)
+      throw error
+    }
   }
 
   async function register(username: string, password: string, email?: string): Promise<AuthUser> {
-    user.value = await $fetch<AuthUser>(`${API}/auth/register`, {
-      method: 'POST',
-      body: { username, password, email },
-      credentials: 'include',
-    })
-    return user.value!
+    try {
+      user.value = await $fetch<AuthUser>(`${API}/auth/register`, {
+        method: 'POST',
+        body: { username, password, email },
+        credentials: 'include',
+      })
+      return user.value!
+    } catch (error) {
+      notifyError(error)
+      throw error
+    }
   }
 
   async function logout(): Promise<void> {
-    await $fetch(`${API}/auth/logout`, { method: 'POST', credentials: 'include' })
-    user.value = null
-    checked = false
+    try {
+      await $fetch(`${API}/auth/logout`, { method: 'POST', credentials: 'include' })
+      user.value = null
+      checked = false
+    } catch (error) {
+      notifyError(error)
+      throw error
+    }
   }
 
   return { user, checkAuth, login, register, logout }

package/templates/spa/ts/src/vasp/client/actions.ts.hbs

@@ -1,5 +1,6 @@
 // Auto-generated by Vasp — do not edit
 import { useVasp } from '@vasp-framework/runtime'
+import { notifyError } from '../useVaspNotifications.js'
 import type {
 {{#each actions}}
   {{pascalCase name}}Args,
@@ -13,7 +14,12 @@ import type {
  */
 export async function {{camelCase name}}(args: {{pascalCase name}}Args): Promise<{{pascalCase name}}Return> {
   const { $vasp } = useVasp()
-  return $vasp.action('{{camelCase name}}', args) as Promise<{{pascalCase name}}Return>
+  try {
+    return await $vasp.action('{{camelCase name}}', args) as Promise<{{pascalCase name}}Return>
+  } catch (error) {
+    notifyError(error)
+    throw error
+  }
 }
 
 {{/each}}

package/templates/spa/ts/src/vasp/client/crud.ts.hbs

@@ -1,35 +1,121 @@
 // Auto-generated by Vasp — do not edit
 import { $fetch } from 'ofetch'
+import { safeParse } from 'valibot'
+import { ref } from 'vue'
 import type {
 {{#each cruds}}
   {{pascalCase entity}},
-  New{{pascalCase entity}},
+  Create{{pascalCase entity}}Input,
+  Update{{pascalCase entity}}Input,
 {{/each}}
 } from './types.js'
+import {
+{{#each cruds}}
+  Create{{pascalCase entity}}Schema,
+  Update{{pascalCase entity}}Schema,
+{{/each}}
+} from '@shared/validation.js'
+import { notifyError } from '../useVaspNotifications.js'
 
 const API = import.meta.env.VITE_API_URL || '/api'
 
 {{#each cruds}}
 export function use{{pascalCase entity}}Crud() {
   const base = `${API}/crud/{{camelCase entity}}`
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  const fail = (err: unknown) => {
+    error.value = err instanceof Error ? err.message : 'Request failed'
+    notifyError(err)
+  }
 
   return {
+    loading,
+    error,
 {{#if (includes operations "list")}}
-    list: (): Promise<{{pascalCase entity}}[]> => $fetch(base, { credentials: 'include' }),
+    list: async (): Promise<{{pascalCase entity}}[]> => {
+      loading.value = true
+      error.value = null
+      try {
+        return await $fetch(base, { credentials: 'include' })
+      } catch (err) {
+        fail(err)
+        throw err
+      } finally {
+        loading.value = false
+      }
+    },
 {{/if}}
 {{#if (includes operations "create")}}
-    create: (data: New{{pascalCase entity}}): Promise<{{pascalCase entity}}> =>
-      $fetch(base, { method: 'POST', body: data, credentials: 'include' }),
+    create: async (data: Create{{pascalCase entity}}Input): Promise<{{pascalCase entity}}> => {
+      const parsed = safeParse(Create{{pascalCase entity}}Schema, data)
+      if (!parsed.success) {
+        const msg = parsed.issues?.[0]?.message ?? 'Invalid input'
+        const err = new Error(msg)
+        fail(err)
+        throw err
+      }
+
+      loading.value = true
+      error.value = null
+      try {
+        return await $fetch(base, { method: 'POST', body: parsed.output, credentials: 'include' })
+      } catch (err) {
+        fail(err)
+        throw err
+      } finally {
+        loading.value = false
+      }
+    },
 {{/if}}
-    get: (id: number): Promise<{{pascalCase entity}}> =>
-      $fetch(`${base}/${id}`, { credentials: 'include' }),
+    get: async (id: number): Promise<{{pascalCase entity}}> => {
+      loading.value = true
+      error.value = null
+      try {
+        return await $fetch(`${base}/${id}`, { credentials: 'include' })
+      } catch (err) {
+        fail(err)
+        throw err
+      } finally {
+        loading.value = false
+      }
+    },
 {{#if (includes operations "update")}}
-    update: (id: number, data: Partial<New{{pascalCase entity}}>): Promise<{{pascalCase entity}}> =>
-      $fetch(`${base}/${id}`, { method: 'PUT', body: data, credentials: 'include' }),
+    update: async (id: number, data: Update{{pascalCase entity}}Input): Promise<{{pascalCase entity}}> => {
+      const parsed = safeParse(Update{{pascalCase entity}}Schema, data)
+      if (!parsed.success) {
+        const msg = parsed.issues?.[0]?.message ?? 'Invalid input'
+        const err = new Error(msg)
+        fail(err)
+        throw err
+      }
+
+      loading.value = true
+      error.value = null
+      try {
+        return await $fetch(`${base}/${id}`, { method: 'PUT', body: parsed.output, credentials: 'include' })
+      } catch (err) {
+        fail(err)
+        throw err
+      } finally {
+        loading.value = false
+      }
+    },
 {{/if}}
 {{#if (includes operations "delete")}}
-    remove: (id: number): Promise<{ ok: boolean }> =>
-      $fetch(`${base}/${id}`, { method: 'DELETE', credentials: 'include' }),
+    remove: async (id: number): Promise<{ ok: boolean }> => {
+      loading.value = true
+      error.value = null
+      try {
+        return await $fetch(`${base}/${id}`, { method: 'DELETE', credentials: 'include' })
+      } catch (err) {
+        fail(err)
+        throw err
+      } finally {
+        loading.value = false
+      }
+    },
 {{/if}}
   }
 }

package/templates/spa/ts/src/vasp/client/types.ts.hbs

@@ -1,33 +1,19 @@
-// Auto-generated by Vasp — entity types inferred from Drizzle schema
-import type {
-{{#each cruds}}
-  {{pascalCase entity}},
-  New{{pascalCase entity}},
-{{/each}}
-{{#if hasAuth}}
-  User,
-{{/if}}
-} from '../../../../../../drizzle/schema.js'
+// Auto-generated by Vasp — re-exports entity types from shared
+// Entity interfaces and input types are generated in shared/types.ts
+// Query/action type stubs can be customized there
 
+export type {
+{{#each entities}}
+  {{pascalCase name}},
+  Create{{pascalCase name}}Input,
+  Update{{pascalCase name}}Input,
+{{/each}}
 {{#each queries}}
-// Arguments and return type for '{{name}}' — customize as needed
-export type {{pascalCase name}}Args = Record<string, unknown>
-export type {{pascalCase name}}Return = unknown
-
+  {{pascalCase name}}Args,
+  {{pascalCase name}}Return,
 {{/each}}
 {{#each actions}}
-// Arguments and return type for '{{name}}' — customize as needed
-export type {{pascalCase name}}Args = Record<string, unknown>
-export type {{pascalCase name}}Return = unknown
-
-{{/each}}
-// Re-export entity types for convenience
-export type {
-{{#each cruds}}
-  {{pascalCase entity}},
-  New{{pascalCase entity}},
+  {{pascalCase name}}Args,
+  {{pascalCase name}}Return,
 {{/each}}
-{{#if hasAuth}}
-  User,
-{{/if}}
-}
+} from '@shared/types.js'