vasp-cli 0.3.1 → 0.9.0

package/templates/shared/tests/actions/_action.test.ts.hbs

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest'
+
+describe('{{pascalCase name}} action', () => {
+  it('adds generated action test scaffold', () => {
+    expect(true).toBe(true)
+  })
+})

package/templates/shared/tests/auth/login.test.js.hbs

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest'
+
+describe('Auth login flow', () => {
+  it('adds generated auth test scaffold', () => {
+    expect(true).toBe(true)
+  })
+})

package/templates/shared/tests/auth/login.test.ts.hbs

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest'
+
+describe('Auth login flow', () => {
+  it('adds generated auth test scaffold', () => {
+    expect(true).toBe(true)
+  })
+})

package/templates/shared/tests/crud/_entity.test.js.hbs

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest'
+
+describe('{{pascalCase entity}} CRUD', () => {
+  it('adds generated CRUD test scaffold', () => {
+    expect(true).toBe(true)
+  })
+})

package/templates/shared/tests/crud/_entity.test.ts.hbs

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest'
+
+describe('{{pascalCase entity}} CRUD', () => {
+  it('adds generated CRUD test scaffold', () => {
+    expect(true).toBe(true)
+  })
+})

package/templates/shared/tests/queries/_query.test.js.hbs

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest'
+
+describe('{{pascalCase name}} query', () => {
+  it('adds generated query test scaffold', () => {
+    expect(true).toBe(true)
+  })
+})

package/templates/shared/tests/queries/_query.test.ts.hbs

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest'
+
+describe('{{pascalCase name}} query', () => {
+  it('adds generated query test scaffold', () => {
+    expect(true).toBe(true)
+  })
+})

package/templates/shared/tests/setup.js.hbs

@@ -0,0 +1,5 @@
+import { beforeEach } from 'vitest'
+
+beforeEach(() => {
+  // Place global test setup here.
+})

package/templates/shared/tests/setup.ts.hbs

@@ -0,0 +1,5 @@
+import { beforeEach } from 'vitest'
+
+beforeEach(() => {
+  // Place global test setup here.
+})

package/templates/shared/tests/vitest.config.js.hbs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['tests/**/*.test.js'],
+    setupFiles: ['tests/setup.js'],
+  },
+})

package/templates/shared/tests/vitest.config.ts.hbs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    include: ['tests/**/*.test.ts'],
+    setupFiles: ['tests/setup.ts'],
+  },
+})

package/templates/shared/tsconfig.json.hbs

@@ -13,9 +13,10 @@
     "jsx": "preserve",
     "paths": {
       "@src/*": ["./src/*"],
+      "@shared/*": ["./shared/*"],
       "@vasp-framework/client": ["./src/vasp/client/index.ts"]
     }
   },
-  "include": ["src/**/*.ts", "src/**/*.vue", "server/**/*.ts", "drizzle/**/*.ts"],
+  "include": ["src/**/*.ts", "src/**/*.vue", "server/**/*.ts", "shared/**/*.ts", "drizzle/**/*.ts"],
   "exclude": ["node_modules", "dist", ".vasp-gen"]
 }

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

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

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

@@ -0,0 +1,33 @@
+<script setup>
+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/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}}