Scaffold

Un scaffold es una interfaz CRUD completa para un recurso. Incluye las páginas de índice, vista, creación y edición, una definición de esquema y una colección de base de datos. Si no se proporciona fields, el scaffold se generará a partir del esquema de base de datos existente.

Sintaxis

$ vela generate scaffold [model] [fields...]
$ vela generate scaffold pets name:text age:number

Esto creará una interfaz CRUD completa para el recurso pets en /pets, la colección de la base de datos y la definición del esquema Zod. Los archivos creados son:

src/lib/schemas/pet.ts
src/routes/(public)/pets/+page.svelte
src/routes/(public)/pets/+page.server.ts
src/routes/(public)/pets/new/+page.svelte
src/routes/(public)/pets/new/+page.server.ts
src/routes/(public)/pets/[id]/+page.svelte
src/routes/(public)/pets/[id]/+page.server.ts
src/routes/(public)/pets/[id]/edit/+page.svelte
src/routes/(public)/pets/[id]/edit/+page.server.ts
src/routes/(public)/pets/server.test.ts

La colección pets se crea en la base de datos y las definiciones de TypeScript se sincronizan. Los componentes de tabla de datos, formulario y diálogo que necesita se instalan automáticamente, y también sveltekit-superforms y zod si el proyecto no los tiene. La prueba de servidor solo se escribe cuando el proyecto tiene el entorno de vela test:server (supertest instalado).

La página de índice es una tabla de datos construida con TanStack Table v9: columnas ordenables, un cuadro de búsqueda sobre el primer campo de texto, un filtro por cada campo select, paginación y selección de filas. En un proyecto sin shadcn-svelte las páginas son HTML plano (ver más abajo).

Opciones

  • --remote - Generar los formularios de creación y edición con funciones remotas de SvelteKit en lugar de superforms. Necesita shadcn-svelte.
  • --route <route> - Colocar el scaffold en una ruta personalizada. Por defecto es el nombre del modelo en plural bajo (app) cuando la autenticación está habilitada, o (public) cuando no lo está. En un proyecto sin ninguno de los dos grupos, va directamente en src/routes.
  • --ui <shadcn|plain> - Generar componentes de shadcn-svelte o elementos HTML simples. Por defecto es shadcn cuando el proyecto tiene shadcn-svelte, y plain cuando no.
  • --ai <description> - Diseñar el scaffold con IA a partir de una descripción en lenguaje natural

HTML plano

--ui es shadcn por defecto cuando el proyecto tiene un components.json y el paquete shadcn-svelte o bits-ui. Si no, las páginas usan elementos HTML simples sin clases, y no se instala ningún componente: la página de índice es una <table> con todos los registros, cada uno con enlaces para verlo y editarlo y un botón para borrarlo; la página de detalle es una <dl>; los formularios de creación y edición son los mismos formularios simples que escribe vela generate form. No hay ordenación, filtros ni paginación.

--ui plain hace lo mismo en un proyecto con shadcn-svelte; --ui shadcn en un proyecto sin él es un error — configúralo con npx sv add tailwindcss y luego npx shadcn-svelte@latest init, o ejecuta vela bless para la actualización completa. --remote no tiene versión en HTML plano: sin shadcn-svelte se rechaza antes de crear la colección o cualquier archivo, y con --ai, antes de que se ejecuten las fases de IA.

Actualizar desde TanStack Table v8

Los proyectos creados antes de que la tabla de datos pasara a TanStack Table v9 tienen @tanstack/table-core 8 y los componentes de tabla de v8. Una página de índice de v9 no compila con ellos, y actualizarlos en su sitio rompería las páginas de índice ya generadas, así que el comando rechaza un proyecto así antes de crear la colección o cualquier archivo. Para actualizar:

$ npm install @tanstack/table-core@^9.2.4
$ vela ui add data-table column-header faceted-filter pagination --overwrite

Después pasa las páginas de índice existentes a la API de v9 (createTable con tableFeatures): la guía de migración de TanStack lo explica, y un scaffold recién generado sirve de ejemplo para comparar.

Ruta

$ vela generate scaffold projects name:text! --route "(app)/[team_id]/projects"

Recuerda la ruta que usaste — vela destroy scaffold necesita el mismo --route para volver a encontrar los archivos.

IA

Pro

--ai diseña el scaffold a partir de una descripción en lenguaje natural, en dos fases: primero el esquema, después el diseño. Pasa una descripción en lugar de un nombre de modelo y campos — pasar ambos es un error.

$ vela generate scaffold --ai "listing info for hotels"

Requiere una cuenta y un proyecto vinculado — ejecuta primero vela login y vela link.