create-vista-app 0.2.16 → 0.3.0

package/template/app/index.tsx

@@ -1,71 +1,71 @@
-import Image from 'vista/image';
-import { ThemeToggle } from '../utils/theme-toggle';
-
-export default function Index() {
-  return (
-    <main className="flex min-h-[100dvh] items-center justify-center bg-background px-6 py-8 text-foreground selection:bg-primary/15 selection:text-primary md:px-10">
-      <section className="relative w-full max-w-5xl rounded-[2rem] border border-border bg-panel-elevated/90 p-7 shadow-[0_24px_80px_rgba(27,18,7,0.08)] backdrop-blur-sm md:p-10">
-        <div className="absolute right-5 top-5">
-          <ThemeToggle compact />
-        </div>
-
-        <div className="grid items-center gap-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(300px,0.95fr)]">
-          <div className="max-w-xl">
-            <div className="inline-flex items-center gap-2 rounded-full border border-border bg-background/70 px-4 py-2 text-[11px] font-medium uppercase tracking-[0.28em] text-primary">
-              Vista starter
-            </div>
-            <h1 className="mt-6 max-w-xl text-balance text-[clamp(2.6rem,5vw,4.6rem)] font-semibold tracking-tight text-foreground">
-              Start by editing <code className="font-mono text-[0.82em]">app/index.tsx</code>.
-            </h1>
-            <p className="mt-5 max-w-lg text-pretty text-base leading-8 text-muted-foreground md:text-lg">
-              The default starter keeps the first screen calm: one route, a clean app shell, and the core Vista flow
-              already wired so you can start building instead of cleaning up scaffolding.
-            </p>
-
-            <div className="mt-7 flex flex-wrap items-center gap-3">
-              <a
-                href="https://vista.xyz/docs/env"
-                className="inline-flex items-center justify-center rounded-full bg-foreground px-5 py-3 text-sm font-medium text-background transition-colors hover:opacity-90"
-              >
-                Open env guide
-              </a>
-              <span className="rounded-full border border-border bg-background/70 px-4 py-3 text-sm text-muted-foreground">
-                Engine lives in <code>vista.config.ts</code>
-              </span>
-            </div>
-          </div>
-
-          <aside className="rounded-[1.7rem] border border-border bg-background/70 p-6">
-            <div className="flex items-center justify-between text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
-              <span>Default engine</span>
-              <span>Vista</span>
-            </div>
-
-            <div className="mt-6 flex justify-center">
-              <Image
-                src="/vista.svg"
-                alt="Vista Logo"
-                width={600}
-                height={600}
-                priority
-                unoptimized
-                className="h-auto w-[220px] opacity-95 sm:w-[250px]"
-              />
-            </div>
-
-            <div className="mt-7 space-y-3 text-sm text-muted-foreground">
-              <div className="rounded-2xl border border-border bg-panel p-4">
-                <p className="font-medium text-foreground">Stable default path</p>
-                <p className="mt-2 leading-7">Use the familiar <code>vista dev</code>, <code>vista build</code>, and <code>vista start</code> flow from day one.</p>
-              </div>
-              <div className="rounded-2xl border border-border bg-panel p-4">
-                <p className="font-medium text-foreground">Config-first workflow</p>
-                <p className="mt-2 leading-7">Adjust engine and framework behavior in <code>vista.config.ts</code> instead of rewriting scripts.</p>
-              </div>
-            </div>
-          </aside>
-        </div>
-      </section>
-    </main>
-  );
-}
+import Image from 'vista/image';
+import { ThemeToggle } from '../components/theme-toggle';
+
+export default function Index() {
+  return (
+    <main className="flex min-h-[100dvh] items-center justify-center bg-background px-6 py-8 text-foreground selection:bg-primary/15 selection:text-primary md:px-10">
+      <section className="relative w-full max-w-5xl rounded-[2rem] border border-border bg-panel-elevated/90 p-7 shadow-[0_24px_80px_rgba(27,18,7,0.08)] backdrop-blur-sm md:p-10">
+        <div className="absolute right-5 top-5">
+          <ThemeToggle compact />
+        </div>
+
+        <div className="grid items-center gap-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(300px,0.95fr)]">
+          <div className="max-w-xl">
+            <div className="inline-flex items-center gap-2 rounded-full border border-border bg-background/70 px-4 py-2 text-[11px] font-medium uppercase tracking-[0.28em] text-primary">
+              Vista starter
+            </div>
+            <h1 className="mt-6 max-w-xl text-balance text-[clamp(2.6rem,5vw,4.6rem)] font-semibold tracking-tight text-foreground">
+              Start by editing <code className="font-mono text-[0.82em]">app/index.tsx</code>.
+            </h1>
+            <p className="mt-5 max-w-lg text-pretty text-base leading-8 text-muted-foreground md:text-lg">
+              The default starter keeps the first screen calm: one route, a clean app shell, and the core Vista flow
+              already wired so you can start building instead of cleaning up scaffolding.
+            </p>
+
+            <div className="mt-7 flex flex-wrap items-center gap-3">
+              <a
+                href="https://vista.xyz/docs/env"
+                className="inline-flex items-center justify-center rounded-full bg-foreground px-5 py-3 text-sm font-medium text-background transition-colors hover:opacity-90"
+              >
+                Open env guide
+              </a>
+              <span className="rounded-full border border-border bg-background/70 px-4 py-3 text-sm text-muted-foreground">
+                Engine lives in <code>vista.config.ts</code>
+              </span>
+            </div>
+          </div>
+
+          <aside className="rounded-[1.7rem] border border-border bg-background/70 p-6">
+            <div className="flex items-center justify-between text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
+              <span>Default engine</span>
+              <span>Vista</span>
+            </div>
+
+            <div className="mt-6 flex justify-center">
+              <Image
+                src="/vista.svg"
+                alt="Vista Logo"
+                width={600}
+                height={600}
+                priority
+                unoptimized
+                className="h-auto w-[220px] opacity-95 sm:w-[250px]"
+              />
+            </div>
+
+            <div className="mt-7 space-y-3 text-sm text-muted-foreground">
+              <div className="rounded-2xl border border-border bg-panel p-4">
+                <p className="font-medium text-foreground">Stable default path</p>
+                <p className="mt-2 leading-7">Use the familiar <code>vista dev</code>, <code>vista build</code>, and <code>vista start</code> flow from day one.</p>
+              </div>
+              <div className="rounded-2xl border border-border bg-panel p-4">
+                <p className="font-medium text-foreground">Config-first workflow</p>
+                <p className="mt-2 leading-7">Adjust engine and framework behavior in <code>vista.config.ts</code> instead of rewriting scripts.</p>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </section>
+    </main>
+  );
+}

package/template/app/root.tsx

@@ -1,35 +1,35 @@
-import type { Metadata } from 'vista';
-import { Geist, Geist_Mono } from 'vista/font/google';
-import { ThemeProvider, ThemeScript } from 'vista/theme';
-import './globals.css';
-
-const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
-});
-
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
-});
-
-export const metadata: Metadata = {
-  title: 'My Vista App',
-  description: 'Built with Vista Framework',
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        <ThemeScript defaultTheme="system" />
-      </head>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} min-h-screen overflow-x-hidden antialiased bg-background text-foreground`}
-        suppressHydrationWarning
-      >
-        <ThemeProvider defaultTheme="system">{children}</ThemeProvider>
-      </body>
-    </html>
-  );
-}
+import type { Metadata } from 'vista';
+import { Geist, Geist_Mono } from 'vista/font/google';
+import { ThemeProvider, ThemeScript } from 'vista/theme';
+import './globals.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'My Vista App',
+  description: 'Built with Vista Framework',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <ThemeScript defaultTheme="system" />
+      </head>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} min-h-screen overflow-x-hidden antialiased bg-background text-foreground`}
+        suppressHydrationWarning
+      >
+        <ThemeProvider defaultTheme="system">{children}</ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/template/{utils → components}/theme-toggle.tsx

@@ -1,49 +1,49 @@
-'use client';
-
-import { Laptop2, MoonStar, SunMedium } from 'lucide-react';
-import { useTheme, type ThemeMode } from 'vista/theme';
-
-const OPTIONS: Array<{
-  value: ThemeMode;
-  label: string;
-  icon: typeof Laptop2;
-}> = [
-  { value: 'system', label: 'System', icon: Laptop2 },
-  { value: 'light', label: 'Light', icon: SunMedium },
-  { value: 'dark', label: 'Dark', icon: MoonStar },
-];
-
-interface ThemeToggleProps {
-  compact?: boolean;
-}
-
-export function ThemeToggle({ compact = false }: ThemeToggleProps) {
-  const { mounted, theme, setTheme } = useTheme();
-
-  return (
-    <div className="inline-flex items-center gap-1 rounded-full border border-border/80 bg-panel-elevated/90 p-1 shadow-[0_10px_30px_rgba(15,23,42,0.08)] backdrop-blur">
-      {OPTIONS.map((option) => {
-        const Icon = option.icon;
-        const isActive = theme === option.value;
-
-        return (
-          <button
-            key={option.value}
-            type="button"
-            onClick={() => setTheme(option.value)}
-            className={`inline-flex items-center justify-center gap-2 rounded-full px-3 py-2 text-xs font-medium transition-colors ${
-              isActive
-                ? 'bg-foreground text-background'
-                : 'text-muted-foreground hover:bg-background/80 hover:text-foreground'
-            } ${compact ? 'px-2.5' : ''}`}
-            aria-pressed={isActive}
-            title={mounted ? option.label : undefined}
-          >
-            <Icon className="h-3.5 w-3.5" />
-            {!compact ? <span>{option.label}</span> : null}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
+'use client';
+
+import { Laptop2, MoonStar, SunMedium } from 'lucide-react';
+import { useTheme, type ThemeMode } from 'vista/theme';
+
+const OPTIONS: Array<{
+  value: ThemeMode;
+  label: string;
+  icon: typeof Laptop2;
+}> = [
+  { value: 'system', label: 'System', icon: Laptop2 },
+  { value: 'light', label: 'Light', icon: SunMedium },
+  { value: 'dark', label: 'Dark', icon: MoonStar },
+];
+
+interface ThemeToggleProps {
+  compact?: boolean;
+}
+
+export function ThemeToggle({ compact = false }: ThemeToggleProps) {
+  const { mounted, theme, setTheme } = useTheme();
+
+  return (
+    <div className="inline-flex items-center gap-1 rounded-full border border-border/80 bg-panel-elevated/90 p-1 shadow-[0_10px_30px_rgba(15,23,42,0.08)] backdrop-blur">
+      {OPTIONS.map((option) => {
+        const Icon = option.icon;
+        const isActive = theme === option.value;
+
+        return (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => setTheme(option.value)}
+            className={`inline-flex items-center justify-center gap-2 rounded-full px-3 py-2 text-xs font-medium transition-colors ${
+              isActive
+                ? 'bg-foreground text-background'
+                : 'text-muted-foreground hover:bg-background/80 hover:text-foreground'
+            } ${compact ? 'px-2.5' : ''}`}
+            aria-pressed={isActive}
+            title={mounted ? option.label : undefined}
+          >
+            <Icon className="h-3.5 w-3.5" />
+            {!compact ? <span>{option.label}</span> : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/template/deploy/.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+.git
+.vista/cache
+.flash
+.next
+.vercel
+dist
+coverage
+*.log
+.env*

package/template/deploy/Dockerfile

@@ -0,0 +1,17 @@
+# syntax=docker/dockerfile:1
+
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY package.json package-lock.json* pnpm-lock.yaml* yarn.lock* ./
+RUN npm install --no-audit --no-fund
+COPY . .
+RUN npm run build
+
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=3003
+COPY --from=builder /app/.vista ./.vista
+COPY --from=builder /app/package.json ./package.json
+EXPOSE 3003
+CMD ["node", ".vista/standalone/server.js"]

package/template/deploy/netlify.toml

@@ -0,0 +1,7 @@
+[build]
+  command = "npm run build"
+  publish = ".vista/deploy/netlify"
+
+[dev]
+  command = "npm run dev"
+  port = 3003

package/template/deploy/render.yaml

@@ -0,0 +1,16 @@
+services:
+  - type: web
+    name: my-vista-app
+    runtime: node
+    region: oregon
+    plan: free
+    buildCommand: |
+      npm install --no-audit --no-fund
+      npm run build
+    startCommand: npm run start
+    envVars:
+      - key: NODE_ENV
+        value: production
+      - key: PORT
+        value: "3003"
+    healthCheckPath: /

package/template/deploy/vercel.json

@@ -0,0 +1,16 @@
+{
+  "version": 2,
+  "buildCommand": "npm run build",
+  "outputDirectory": ".vista",
+  "framework": null,
+  "installCommand": "npm install --legacy-peer-deps --no-audit --no-fund",
+  "devCommand": "npm run dev",
+  "routes": [
+    { "handle": "filesystem" },
+    { "src": "^/_vista/(.*)$", "dest": "/$1" },
+    { "src": "^/(?:rsc|_rsc)/?$", "dest": "/static/pages/index.rsc" },
+    { "src": "^/(?:rsc|_rsc)/(.+)$", "dest": "/static/pages/$1.rsc" },
+    { "src": "^/$", "dest": "/static/pages/index.html" },
+    { "src": "^/(.+)$", "dest": "/static/pages/$1.html" }
+  ]
+}

package/template/deploy/wrangler.toml

@@ -0,0 +1,3 @@
+name = "my-vista-app"
+compatibility_date = "2024-09-01"
+pages_build_output_dir = ".vista/deploy/cloudflare"

package/template/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2022",
+    "target": "es2022",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -22,6 +22,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
+  "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/template/vista-env.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="vista" />
-/// <reference types="vista/image/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://vista.xyz/docs/env for more information.
-
-declare module '*.module.css' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.css';
+/// <reference types="vista" />
+/// <reference types="vista/image/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://vista.xyz/docs/env for more information.
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css';

package/template/vista.config.ts

@@ -1,17 +1,21 @@
-const config = {
-  engine: {
-    // Engine options: 'default' or 'flashpack'
-    variant: 'default',
-  },
-  images: {
-    domains: ['example.com'],
-    // For static hosts where the /_vista/image endpoint is not available:
-    // unoptimized: true,
-  },
-  // Optional: override server port
-  // server: {
-  //   port: 3003
-  // }
-};
-
-export default config;
+const config = {
+  engine: {
+    // Engine options: 'default' or 'flashpack'
+    variant: 'default',
+  },
+  images: {
+    domains: ['example.com'],
+    // For static hosts where the /_vista/image endpoint is not available:
+    // unoptimized: true,
+  },
+  // Optional: override server port
+  // server: {
+  //   port: 3003
+  // }
+  deploy: {
+    // Platform target: 'auto' | 'render' | 'vercel' | 'cloudflare' | 'netlify' | 'docker'
+    target: 'auto',
+  },
+};
+
+export default config;

package/template-typed/app/api/procedures/hello.ts

@@ -1,7 +1,7 @@
-import type { VStackInstance } from 'vista/stack';
-
-export function helloProcedure(v: VStackInstance<any, any>) {
-    return v.procedure.query(() => ({
-        message: 'Hello from Vista Typed API',
-    }));
-}
+import type { VStackInstance } from 'vista/stack';
+
+export function helloProcedure(v: VStackInstance<any, any>) {
+    return v.procedure.query(() => ({
+        message: 'Hello from Vista Typed API',
+    }));
+}

package/template-typed/app/api/routers/index.ts

@@ -1,8 +1,8 @@
-import type { VStackInstance } from 'vista/stack';
-import { helloProcedure } from '../procedures/hello';
-
-export function createRootRouter(v: VStackInstance<any, any>) {
-    return v.router({
-        hello: helloProcedure(v),
-    });
-}
+import type { VStackInstance } from 'vista/stack';
+import { helloProcedure } from '../procedures/hello';
+
+export function createRootRouter(v: VStackInstance<any, any>) {
+    return v.router({
+        hello: helloProcedure(v),
+    });
+}

package/template-typed/app/api/typed.ts

@@ -1,6 +1,6 @@
-import { vstack } from 'vista/stack';
-import { createRootRouter } from './routers';
-
-const v = vstack.init();
-
-export const router = createRootRouter(v);
+import { vstack } from 'vista/stack';
+import { createRootRouter } from './routers';
+
+const v = vstack.init();
+
+export const router = createRootRouter(v);

package/template-typed/vista.config.ts

@@ -1,21 +1,21 @@
-const config = {
-    engine: {
-        // Engine options: 'default' or 'flashpack'
-        variant: 'default',
-    },
-    images: {
-        domains: ['example.com'],
-    },
-    experimental: {
-        typedApi: {
-            enabled: true,
-            serialization: 'json',
-        },
-    },
-    // Optional: override server port
-    // server: {
-    //     port: 3000
-    // }
-};
-
-export default config;
+const config = {
+    engine: {
+        // Engine options: 'default' or 'flashpack'
+        variant: 'default',
+    },
+    images: {
+        domains: ['example.com'],
+    },
+    experimental: {
+        typedApi: {
+            enabled: true,
+            serialization: 'json',
+        },
+    },
+    // Optional: override server port
+    // server: {
+    //     port: 3000
+    // }
+};
+
+export default config;

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2026 Vista.js contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.