vasp-cli 0.3.1 → 0.9.0

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'

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

@@ -0,0 +1,41 @@
+import { ref } from 'vue'
+
+export type VaspNotification = {
+  id: number
+  type: 'error' | 'success' | 'info'
+  message: string
+}
+
+export const notifications = ref<VaspNotification[]>([])
+
+export function pushNotification(type: VaspNotification['type'], message: string, timeoutMs = 3500): number {
+  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: number): void {
+  notifications.value = notifications.value.filter((item) => item.id !== id)
+}
+
+export function notifyError(error: unknown): void {
+  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/ts/vite.config.ts.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/ssr/js/error.vue.hbs

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  error: {
+    type: Object,
+    required: true,
+  },
+})
+
+const messageText = computed(() => props.error.statusMessage || props.error.message || 'Unexpected server error')
+</script>
+
+<template>
+  <div style="padding:24px; max-width:720px; margin:0 auto;">
+    <h1 v-if="props.error.statusCode === 404">Page not found</h1>
+    <h1 v-else-if="props.error.statusCode === 401">Authentication required</h1>
+    <h1 v-else>Something went wrong</h1>
+
+    <p>{{ messageText }}</p>
+    <NuxtLink to="/">Go back home</NuxtLink>
+  </div>
+</template>

package/templates/ssr/js/nuxt.config.js.hbs

@@ -5,6 +5,7 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   alias: {
     '@src': '~/src',
+    '@shared': '~/shared',
   },
   runtimeConfig: {
     backendUrl: process.env.BACKEND_URL || 'http://localhost:{{backendPort}}',

package/templates/ssr/js/plugins/vasp.client.js.hbs

@@ -2,6 +2,11 @@
 // Runs only on the client after hydration — routes calls to the Elysia backend via ofetch
 import { $fetch } from 'ofetch'
 
+function getCsrfToken() {
+  const match = document.cookie.match(/(?:^|;\s*)vasp-csrf=([^;]*)/)
+  return match ? decodeURIComponent(match[1]) : undefined
+}
+
 export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig()
   const baseURL = config.public.apiBase
@@ -11,7 +16,12 @@ export default defineNuxtPlugin((nuxtApp) => {
       return $fetch(`/queries/${name}`, { baseURL, method: 'GET', query: args })
     },
     async action(name, args) {
-      return $fetch(`/actions/${name}`, { baseURL, method: 'POST', body: args })
+      return $fetch(`/actions/${name}`, {
+        baseURL,
+        method: 'POST',
+        body: args,
+        headers: { 'x-csrf-token': getCsrfToken() ?? '' },
+      })
     },
   })
 })

package/templates/ssr/ts/error.vue.hbs

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  error: {
+    statusCode?: number
+    statusMessage?: string
+    message?: string
+  }
+}>()
+
+const messageText = computed(() => {
+  return props.error.statusMessage ?? props.error.message ?? 'Unexpected server error'
+})
+</script>
+
+<template>
+  <div style="padding:24px; max-width:720px; margin:0 auto;">
+    <h1 v-if="props.error.statusCode === 404">Page not found</h1>
+    <h1 v-else-if="props.error.statusCode === 401">Authentication required</h1>
+    <h1 v-else>Something went wrong</h1>
+
+    <p>{{ messageText }}</p>
+    <NuxtLink to="/">Go back home</NuxtLink>
+  </div>
+</template>

package/templates/ssr/ts/nuxt.config.ts.hbs

@@ -9,6 +9,7 @@ export default defineNuxtConfig({
   },
   alias: {
     '@src': '~/src',
+    '@shared': '~/shared',
   },
   runtimeConfig: {
     backendUrl: process.env.BACKEND_URL || 'http://localhost:{{backendPort}}',

package/templates/ssr/ts/plugins/vasp.client.ts.hbs

@@ -2,6 +2,11 @@
 // Runs only on the client after hydration — routes calls to the Elysia backend via ofetch
 import { $fetch } from 'ofetch'
 
+function getCsrfToken(): string | undefined {
+  const match = document.cookie.match(/(?:^|;\s*)vasp-csrf=([^;]*)/)
+  return match ? decodeURIComponent(match[1]) : undefined
+}
+
 export default defineNuxtPlugin((nuxtApp) => {
   const config = useRuntimeConfig()
   const baseURL = config.public.apiBase as string
@@ -11,7 +16,12 @@ export default defineNuxtPlugin((nuxtApp) => {
       return $fetch<T>(`/queries/${name}`, { baseURL, method: 'GET', query: args as Record<string, unknown> })
     },
     async action<T = unknown>(name: string, args?: unknown): Promise<T> {
-      return $fetch<T>(`/actions/${name}`, { baseURL, method: 'POST', body: args })
+      return $fetch<T>(`/actions/${name}`, {
+        baseURL,
+        method: 'POST',
+        body: args,
+        headers: { 'x-csrf-token': getCsrfToken() ?? '' },
+      })
     },
   })
 })

package/templates/starters/minimal.vasp

@@ -0,0 +1,15 @@
+app MinimalApp {
+  title: "Minimal App"
+  db: Drizzle
+  ssr: false
+  typescript: false
+}
+
+route HomeRoute {
+  path: "/"
+  to: HomePage
+}
+
+page HomePage {
+  component: import Home from "@src/pages/Home.vue"
+}

package/templates/starters/recipe.vasp

@@ -0,0 +1,70 @@
+app RecipeApp {
+  title: "Recipe App"
+  db: Drizzle
+  ssr: false
+  typescript: false
+}
+
+auth RecipeAuth {
+  userEntity: User
+  methods: [usernameAndPassword]
+}
+
+entity Recipe {
+  id: Int @id
+  title: String
+  description: String
+  ingredients: String
+  instructions: String
+  author: String
+}
+
+route HomeRoute {
+  path: "/"
+  to: HomePage
+}
+
+route RecipesRoute {
+  path: "/recipes"
+  to: RecipesPage
+}
+
+route AddRecipeRoute {
+  path: "/recipes/new"
+  to: AddRecipePage
+}
+
+page HomePage {
+  component: import HomePage from "@src/pages/HomePage.vue"
+}
+
+page RecipesPage {
+  component: import RecipesPage from "@src/pages/RecipesPage.vue"
+}
+
+page AddRecipePage {
+  component: import AddRecipePage from "@src/pages/AddRecipePage.vue"
+}
+
+query getRecipes {
+  fn: import { getRecipes } from "@src/queries.js"
+  entities: [Recipe]
+  auth: true
+}
+
+action createRecipe {
+  fn: import { createRecipe } from "@src/actions.js"
+  entities: [Recipe]
+  auth: true
+}
+
+action deleteRecipe {
+  fn: import { deleteRecipe } from "@src/actions.js"
+  entities: [Recipe]
+  auth: true
+}
+
+crud Recipe {
+  entity: Recipe
+  operations: [list, create, update, delete]
+}

package/templates/starters/todo-auth-ssr.vasp

@@ -0,0 +1,65 @@
+app TodoAuthSsrApp {
+  title: "Todo App"
+  db: Drizzle
+  ssr: true
+  typescript: false
+}
+
+auth TodoAuth {
+  userEntity: User
+  methods: [usernameAndPassword]
+}
+
+entity User {
+  id: Int @id
+  username: String @unique
+  email: String @unique
+}
+
+entity Todo {
+  id: Int @id
+  title: String
+  done: Boolean
+  createdAt: DateTime @default(now)
+}
+
+route HomeRoute {
+  path: "/"
+  to: HomePage
+}
+
+route TodoRoute {
+  path: "/todos"
+  to: TodoPage
+}
+
+page HomePage {
+  component: import Home from "@src/pages/Home.vue"
+}
+
+page TodoPage {
+  component: import TodoList from "@src/pages/TodoList.vue"
+}
+
+query getTodos {
+  fn: import { getTodos } from "@src/queries.js"
+  entities: [Todo]
+  auth: true
+}
+
+action createTodo {
+  fn: import { createTodo } from "@src/actions.js"
+  entities: [Todo]
+  auth: true
+}
+
+action deleteTodo {
+  fn: import { deleteTodo } from "@src/actions.js"
+  entities: [Todo]
+  auth: true
+}
+
+crud Todo {
+  entity: Todo
+  operations: [list, create, update, delete]
+}

package/templates/starters/todo.vasp

@@ -0,0 +1,42 @@
+app TodoApp {
+  title: "Todo App"
+  db: Drizzle
+  ssr: false
+  typescript: false
+}
+
+entity Todo {
+  id: Int @id
+  title: String
+  done: Boolean
+  createdAt: DateTime @default(now)
+}
+
+route HomeRoute {
+  path: "/"
+  to: HomePage
+}
+
+page HomePage {
+  component: import Home from "@src/pages/Home.vue"
+}
+
+query getTodos {
+  fn: import { getTodos } from "@src/queries.js"
+  entities: [Todo]
+}
+
+action createTodo {
+  fn: import { createTodo } from "@src/actions.js"
+  entities: [Todo]
+}
+
+action deleteTodo {
+  fn: import { deleteTodo } from "@src/actions.js"
+  entities: [Todo]
+}
+
+crud Todo {
+  entity: Todo
+  operations: [list, create, update, delete]
+}

package/templates/templates/shared/.gitignore.hbs

@@ -1,8 +0,0 @@
-node_modules
-dist
-.output
-.nuxt
-.vasp-gen
-.env
-.env.local
-*.log

package/templates/templates/shared/auth/client/Login.vue.hbs

@@ -1,46 +0,0 @@
-<template>
-  <div class="auth-form">
-    <h2>Login</h2>
-    <form @submit.prevent="handleLogin">
-      <input v-model="username" type="text" placeholder="Username" required />
-      <input v-model="password" type="password" placeholder="Password" required />
-      <button type="submit" :disabled="loading">
-        \{{ loading ? 'Logging in...' : 'Login' }}
-      </button>
-      <p v-if="error" class="error">\{{ error }}</p>
-    </form>
-    <p>Don't have an account? <RouterLink to="/register">Register</RouterLink></p>
-{{#if (includes authMethods "google")}}
-    <a href="/auth/google" class="oauth-btn">Continue with Google</a>
-{{/if}}
-{{#if (includes authMethods "github")}}
-    <a href="/auth/github" class="oauth-btn">Continue with GitHub</a>
-{{/if}}
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAuth } from '../vasp/auth.js'
-
-const router = useRouter()
-const { login } = useAuth()
-const username = ref('')
-const password = ref('')
-const loading = ref(false)
-const error = ref('')
-
-async function handleLogin() {
-  loading.value = true
-  error.value = ''
-  try {
-    await login(username.value, password.value)
-    router.push('/')
-  } catch (err) {
-    error.value = err?.data?.error || err?.message || 'Login failed'
-  } finally {
-    loading.value = false
-  }
-}
-</script>

package/templates/templates/shared/auth/client/Register.vue.hbs

@@ -1,42 +0,0 @@
-<template>
-  <div class="auth-form">
-    <h2>Create Account</h2>
-    <form @submit.prevent="handleRegister">
-      <input v-model="username" type="text" placeholder="Username" required />
-      <input v-model="email" type="email" placeholder="Email (optional)" />
-      <input v-model="password" type="password" placeholder="Password (min 8 chars)" required />
-      <button type="submit" :disabled="loading">
-        \{{ loading ? 'Creating account...' : 'Register' }}
-      </button>
-      <p v-if="error" class="error">\{{ error }}</p>
-    </form>
-    <p>Already have an account? <RouterLink to="/login">Login</RouterLink></p>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-import { useAuth } from '../vasp/auth.js'
-
-const router = useRouter()
-const { register } = useAuth()
-const username = ref('')
-const email = ref('')
-const password = ref('')
-const loading = ref(false)
-const error = ref('')
-
-async function handleRegister() {
-  loading.value = true
-  error.value = ''
-  try {
-    await register(username.value, password.value, email.value || undefined)
-    router.push('/')
-  } catch (err) {
-    error.value = err?.data?.error || err?.message || 'Registration failed'
-  } finally {
-    loading.value = false
-  }
-}
-</script>