vasp-cli 0.4.0 → 0.9.0

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/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/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/.env.example.hbs

@@ -1,14 +0,0 @@
-DATABASE_URL=postgres://user:password@localhost:5432/{{kebabCase appName}}
-PORT={{backendPort}}
-VITE_API_URL=http://localhost:{{backendPort}}/api
-{{#if hasAuth}}
-JWT_SECRET=change-me-in-production
-{{#if (includes authMethods "google")}}
-GOOGLE_CLIENT_ID=
-GOOGLE_CLIENT_SECRET=
-{{/if}}
-{{#if (includes authMethods "github")}}
-GITHUB_CLIENT_ID=
-GITHUB_CLIENT_SECRET=
-{{/if}}
-{{/if}}

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>

package/templates/templates/shared/auth/server/index.hbs

@@ -1,46 +0,0 @@
-import { Elysia } from 'elysia'
-import { db } from '../db/client.{{ext}}'
-import { users } from '../../drizzle/schema.{{ext}}'
-import { eq } from 'drizzle-orm'
-import { authPlugin } from './plugin.{{ext}}'
-{{#if (includes authMethods "usernameAndPassword")}}
-import { usernameAndPasswordRoutes } from './providers/usernameAndPassword.{{ext}}'
-{{/if}}
-{{#if (includes authMethods "google")}}
-import { googleRoutes } from './providers/google.{{ext}}'
-{{/if}}
-{{#if (includes authMethods "github")}}
-import { githubRoutes } from './providers/github.{{ext}}'
-{{/if}}
-
-export { authPlugin } from './plugin.{{ext}}'
-
-export const authRoutes = new Elysia({ prefix: '/api/auth' })
-  .use(authPlugin)
-{{#if (includes authMethods "usernameAndPassword")}}
-  .use(usernameAndPasswordRoutes)
-{{/if}}
-{{#if (includes authMethods "google")}}
-  .use(googleRoutes)
-{{/if}}
-{{#if (includes authMethods "github")}}
-  .use(githubRoutes)
-{{/if}}
-  .get('/me', async ({ jwt, cookie: { token }, set }) => {
-    const payload = await jwt.verify(token?.value ?? '')
-    if (!payload || typeof payload.userId !== 'number') {
-      set.status = 401
-      return { error: 'Unauthorized' }
-    }
-    const [user] = await db.select().from(users).where(eq(users.id, payload.userId)).limit(1)
-    if (!user) {
-      set.status = 401
-      return { error: 'User not found' }
-    }
-    const { passwordHash: _ph, ...safeUser } = user
-    return safeUser
-  })
-  .post('/logout', ({ cookie: { token }, set }) => {
-    token?.remove()
-    return { ok: true }
-  })

package/templates/templates/shared/auth/server/middleware.hbs

@@ -1,33 +0,0 @@
-import { Elysia } from 'elysia'
-import { jwt } from '@elysiajs/jwt'
-import { cookie } from '@elysiajs/cookie'
-import { db } from '../db/client.{{ext}}'
-import { users } from '../../drizzle/schema.{{ext}}'
-import { eq } from 'drizzle-orm'
-
-const JWT_SECRET = process.env.JWT_SECRET || 'change-me-in-production'
-
-/**
- * requireAuth — Elysia plugin that verifies the JWT cookie and injects `user` into the context.
- * Use on any route that requires authentication.
- *
- * @example
- * new Elysia().use(requireAuth).get('/protected', ({ user }) => user)
- */
-export const requireAuth = new Elysia({ name: 'require-auth' })
-  .use(jwt({ name: 'jwt', secret: JWT_SECRET }))
-  .use(cookie())
-  .derive(async ({ jwt, cookie: { token }, set }) => {
-    const payload = await jwt.verify(token?.value ?? '')
-    if (!payload || typeof payload.userId !== 'number') {
-      set.status = 401
-      throw new Error('Unauthorized')
-    }
-    const [user] = await db.select().from(users).where(eq(users.id, payload.userId)).limit(1)
-    if (!user) {
-      set.status = 401
-      throw new Error('User not found')
-    }
-    const { passwordHash: _ph, ...safeUser } = user
-    return { user: safeUser }
-  })

package/templates/templates/shared/auth/server/providers/github.hbs

@@ -1,48 +0,0 @@
-import { Elysia } from 'elysia'
-import { db } from '../../db/client.{{ext}}'
-import { users } from '../../../drizzle/schema.{{ext}}'
-import { eq } from 'drizzle-orm'
-import { authPlugin } from '../plugin.{{ext}}'
-
-const GITHUB_CLIENT_ID = process.env.GITHUB_CLIENT_ID || ''
-const GITHUB_CLIENT_SECRET = process.env.GITHUB_CLIENT_SECRET || ''
-const REDIRECT_URI = process.env.GITHUB_REDIRECT_URI || 'http://localhost:{{backendPort}}/auth/github/callback'
-
-export const githubRoutes = new Elysia()
-  .use(authPlugin)
-  .get('/github', ({ set }) => {
-    const params = new URLSearchParams({
-      client_id: GITHUB_CLIENT_ID,
-      redirect_uri: REDIRECT_URI,
-      scope: 'read:user user:email',
-    })
-    set.redirect = `https://github.com/login/oauth/authorize?${params}`
-  })
-  .get('/github/callback', async ({ query, jwt, cookie: { token }, set }) => {
-    const { code } = query
-    if (!code) { set.status = 400; return { error: 'Missing code' } }
-
-    const tokenRes = await fetch('https://github.com/login/oauth/access_token', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
-      body: JSON.stringify({ client_id: GITHUB_CLIENT_ID, client_secret: GITHUB_CLIENT_SECRET, code }),
-    })
-    const { access_token } = await tokenRes.json()
-
-    const userRes = await fetch('https://api.github.com/user', {
-      headers: { Authorization: `Bearer ${access_token}`, Accept: 'application/json' },
-    })
-    const ghUser = await userRes.json()
-    const githubId = String(ghUser.id)
-    const email = ghUser.email || `${ghUser.login}@github.local`
-
-    let [user] = await db.select().from(users).where(eq(users.githubId, githubId)).limit(1)
-    if (!user) {
-      ;[user] = await db.insert(users).values({ username: ghUser.login, email, githubId }).returning()
-    }
-    if (!user) { set.status = 500; return { error: 'Failed to create user' } }
-
-    const tokenValue = await jwt.sign({ userId: user.id })
-    token.set({ value: tokenValue, httpOnly: true, sameSite: 'lax', path: '/' })
-    set.redirect = '/'
-  })

package/templates/templates/shared/auth/server/providers/google.hbs

@@ -1,53 +0,0 @@
-import { Elysia } from 'elysia'
-import { db } from '../../db/client.{{ext}}'
-import { users } from '../../../drizzle/schema.{{ext}}'
-import { eq } from 'drizzle-orm'
-import { authPlugin } from '../plugin.{{ext}}'
-
-const GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID || ''
-const GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET || ''
-const REDIRECT_URI = process.env.GOOGLE_REDIRECT_URI || 'http://localhost:{{backendPort}}/auth/google/callback'
-
-export const googleRoutes = new Elysia()
-  .use(authPlugin)
-  .get('/google', ({ set }) => {
-    const params = new URLSearchParams({
-      client_id: GOOGLE_CLIENT_ID,
-      redirect_uri: REDIRECT_URI,
-      response_type: 'code',
-      scope: 'openid email profile',
-    })
-    set.redirect = `https://accounts.google.com/o/oauth2/v2/auth?${params}`
-  })
-  .get('/google/callback', async ({ query, jwt, cookie: { token }, set }) => {
-    const { code } = query
-    if (!code) { set.status = 400; return { error: 'Missing code' } }
-
-    // Exchange code for tokens
-    const tokenRes = await fetch('https://oauth2.googleapis.com/token', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      body: new URLSearchParams({
-        code,
-        client_id: GOOGLE_CLIENT_ID,
-        client_secret: GOOGLE_CLIENT_SECRET,
-        redirect_uri: REDIRECT_URI,
-        grant_type: 'authorization_code',
-      }),
-    })
-    const tokenData = await tokenRes.json()
-    const idToken = tokenData.id_token
-    const payload = JSON.parse(Buffer.from(idToken.split('.')[1], 'base64').toString())
-    const googleId = payload.sub
-    const email = payload.email
-
-    let [user] = await db.select().from(users).where(eq(users.googleId, googleId)).limit(1)
-    if (!user) {
-      ;[user] = await db.insert(users).values({ username: email, email, googleId }).returning()
-    }
-    if (!user) { set.status = 500; return { error: 'Failed to create user' } }
-
-    const tokenValue = await jwt.sign({ userId: user.id })
-    token.set({ value: tokenValue, httpOnly: true, sameSite: 'lax', path: '/' })
-    set.redirect = '/'
-  })

package/templates/templates/shared/auth/server/providers/usernameAndPassword.hbs

@@ -1,66 +0,0 @@
-import { Elysia, t } from 'elysia'
-import { db } from '../../db/client.{{ext}}'
-import { users } from '../../../drizzle/schema.{{ext}}'
-import { eq } from 'drizzle-orm'
-import { authPlugin } from '../plugin.{{ext}}'
-
-async function hashPassword(password{{#if isTypeScript}}: string{{/if}}) {
-  return Bun.password.hash(password, 'argon2id')
-}
-
-async function verifyPassword(password{{#if isTypeScript}}: string{{/if}}, hash{{#if isTypeScript}}: string{{/if}}) {
-  return Bun.password.verify(password, hash)
-}
-
-export const usernameAndPasswordRoutes = new Elysia()
-  .use(authPlugin)
-  .post(
-    '/register',
-    async ({ body, jwt, cookie: { token }, set }) => {
-      const existing = await db.select().from(users).where(eq(users.username, body.username)).limit(1)
-      if (existing.length > 0) {
-        set.status = 400
-        return { error: 'Username already taken' }
-      }
-      const passwordHash = await hashPassword(body.password)
-      const [user] = await db
-        .insert(users)
-        .values({ username: body.username, email: body.email ?? null, passwordHash })
-        .returning()
-      if (!user) {
-        set.status = 500
-        return { error: 'Failed to create user' }
-      }
-      const tokenValue = await jwt.sign({ userId: user.id })
-      token.set({ value: tokenValue, httpOnly: true, sameSite: 'lax', path: '/' })
-      const { passwordHash: _ph, ...safeUser } = user
-      return safeUser
-    },
-    {
-      body: t.Object({
-        username: t.String({ minLength: 3 }),
-        password: t.String({ minLength: 8 }),
-        email: t.Optional(t.String({ format: 'email' })),
-      }),
-    },
-  )
-  .post(
-    '/login',
-    async ({ body, jwt, cookie: { token }, set }) => {
-      const [user] = await db.select().from(users).where(eq(users.username, body.username)).limit(1)
-      if (!user || !user.passwordHash || !(await verifyPassword(body.password, user.passwordHash))) {
-        set.status = 401
-        return { error: 'Invalid username or password' }
-      }
-      const tokenValue = await jwt.sign({ userId: user.id })
-      token.set({ value: tokenValue, httpOnly: true, sameSite: 'lax', path: '/' })
-      const { passwordHash: _ph, ...safeUser } = user
-      return safeUser
-    },
-    {
-      body: t.Object({
-        username: t.String(),
-        password: t.String(),
-      }),
-    },
-  )