create-vista-app 0.0.1

package/bin/vista.js

@@ -0,0 +1,731 @@
+#!/usr/bin/env node
+
+import { createServer, createLogger } from 'vite';
+import pc from 'picocolors';
+import prompts from 'prompts';
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { spawnSync } from 'child_process';
+import http from 'http';
+import { Transform } from 'stream';
+
+import react from '@vitejs/plugin-react';
+import tailwindnorm from '@tailwindcss/vite';
+import { vistaPlugin } from '@vista/core/plugin';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const args = process.argv.slice(2);
+const command = args[0] || 'dev';
+const targetDirArg = args[1]; // Removed default '.' to rely on prompt if creating
+
+// Helper: Find all CSS files in app directory
+function findCssFiles(dir, fileList = []) {
+    if (!fs.existsSync(dir)) return fileList;
+    
+    const files = fs.readdirSync(dir);
+    files.forEach(file => {
+        const filePath = path.join(dir, file);
+        const stat = fs.statSync(filePath);
+        if (stat.isDirectory()) {
+            findCssFiles(filePath, fileList);
+        } else {
+            if (file.endsWith('.css')) {
+                 const root = process.cwd();
+                 let relativePath = path.relative(root, filePath).replace(/\\/g, '/');
+                 if (!relativePath.startsWith('/')) relativePath = '/' + relativePath;
+                 fileList.push(relativePath);
+            }
+        }
+    });
+    return fileList;
+}
+
+// Helper: Generate Manifest and Types
+function generateManifest(root) {
+    const appDir = path.join(root, 'app');
+    const manifestPath = path.join(root, '.vista', 'manifest.json');
+    const typesDir = path.join(root, '.vista', 'types');
+    const routesTypePath = path.join(typesDir, 'routes.d.ts');
+
+    if (!fs.existsSync(appDir)) return;
+    if (!fs.existsSync(path.dirname(manifestPath))) fs.mkdirSync(path.dirname(manifestPath), { recursive: true });
+    if (!fs.existsSync(typesDir)) fs.mkdirSync(typesDir, { recursive: true });
+
+    const routes = [];
+    
+    function scan(dir, baseRoute = '') {
+        const files = fs.readdirSync(dir);
+        files.forEach(file => {
+            const filePath = path.join(dir, file);
+            const stat = fs.statSync(filePath);
+            
+            if (stat.isDirectory()) {
+                scan(filePath, `${baseRoute}/${file}`);
+            } else if (file === 'index.tsx') {
+                let route = baseRoute || '/';
+                if (route === '') route = '/';
+                routes.push(route);
+            }
+        });
+    }
+
+    scan(appDir);
+
+    const manifest = {
+        version: 1,
+        routes: routes.reduce((acc, route) => {
+            acc[route] = {
+                file: `/app${route === '/' ? '' : route}/index.tsx`
+            };
+            return acc;
+        }, {})
+    };
+    fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+
+    const routeUnion = routes.map(r => `'${r}'`).join(' | ') || 'string';
+    const typeContent = `
+declare module 'vista' {
+    export type AppRoute = ${routeUnion};
+}
+`;
+    fs.writeFileSync(routesTypePath, typeContent);
+}
+
+// Helper: Find available port
+const findAvailablePort = async (startPort) => {
+    const net = await import('net');
+    return new Promise((resolve, reject) => {
+        const server = net.default.createServer();
+        server.unref();
+        server.on('error', (err) => {
+            if (err.code === 'EADDRINUSE') {
+                resolve(findAvailablePort(startPort + 1));
+            } else {
+                reject(err);
+            }
+        });
+        server.listen(startPort, () => {
+            server.close(() => {
+                resolve(startPort);
+            });
+        });
+    });
+};
+
+
+async function startDev() {
+  const logger = createLogger('info', { prefix: '[vista]' });
+  
+  const originalInfo = logger.info;
+  const originalWarn = logger.warn;
+  const originalError = logger.error;
+
+  const sanitizeString = (str) => {
+    return str
+      .replace(/vite:/g, 'vista:')
+      .replace(/Vite/g, 'Vista')
+      .replace(/vite\s/g, 'vista ');
+  };
+
+  const sanitize = (msg) => {
+    if (typeof msg === 'string') {
+      if (msg.includes('Failed to parse JSON file')) return ''; 
+      return sanitizeString(msg);
+    }
+    if (msg instanceof Error || (typeof msg === 'object' && msg !== null)) {
+       if (msg.message && msg.message.includes('Failed to parse JSON file')) return '';
+       if (msg.message) msg.message = sanitizeString(msg.message);
+       if (msg.stack) msg.stack = sanitizeString(msg.stack);
+       if (msg.plugin) msg.plugin = sanitizeString(msg.plugin);
+       if (msg.id) msg.id = sanitizeString(msg.id);
+       return msg;
+    }
+    return msg;
+  };
+
+  logger.info = (msg, options) => {
+    const sanitized = sanitize(msg);
+    if (sanitized) originalInfo(sanitized, options);
+  };
+  
+  logger.warn = (msg, options) => {
+    const sanitized = sanitize(msg);
+    if (sanitized) originalWarn(sanitized, options);
+  };
+
+  logger.warnOnce = (msg, options) => {
+    const sanitized = sanitize(msg);
+    if (sanitized) originalWarn(sanitized, options);
+  };
+  
+  logger.error = (msg, options) => {
+    const sanitized = sanitize(msg);
+    if (sanitized) originalError(sanitized, options);
+  };
+
+  const logRequest = (url) => {
+     console.log(` ${pc.white('•')} ${pc.cyan('compiling')} ${pc.dim(url)} ...`);
+  };
+  
+  const logSuccess = (url, duration, status = 200) => {
+     if (status === 404) {
+        console.log(` ${pc.red('⨯')} ${pc.red('404')} ${pc.dim(url)} ${pc.red('no page found')} in ${pc.bold(duration + 'ms')}`);
+     } else {
+        console.log(` ${pc.green('✓')} ${pc.green('compiled')} ${pc.dim(url)} in ${pc.bold(duration + 'ms')} ${pc.dim('(200)')}`);
+     }
+  };
+
+  try {
+    const root = process.cwd();
+    
+    // Ensure .vista folder exists & Generate Manifest
+    const dotVista = path.resolve(root, '.vista');
+    if (!fs.existsSync(dotVista)) {
+        fs.mkdirSync(dotVista);
+    }
+    generateManifest(root); 
+
+    // Find a free port
+    const port = await findAvailablePort(5173);
+
+    const express = (await import('express')).default;
+    const app = express();
+    const httpServer = http.createServer(app);
+
+    const server = await createServer({
+      configFile: 'vista.config.ts',
+      root,
+      server: { 
+          middlewareMode: true,
+          ws: true,
+          hmr: { server: httpServer }
+      },
+      appType: 'custom',
+      plugins: [react(), tailwindnorm(), vistaPlugin()],
+      customLogger: logger,
+      cacheDir: '.vista/cache',
+      resolve: {
+        dedupe: ['react', 'react-dom'],
+        alias: {
+            // Dev Fix: Point @vista/core to source to enable HMR/Fast Refresh for framework internals
+            '@vista/core': path.resolve(__dirname, '../../core/src')
+        }
+      },
+      optimizeDeps: {
+        include: ['react', 'react-dom', 'lucide-react', 'react-shaders']
+      },
+      ssr: {
+        noExternal: ['lucide-react', 'react-shaders']
+      }
+    });
+
+    app.use(server.middlewares);
+
+    app.use(async (req, res, next) => {
+      const url = req.originalUrl;
+      const start = Date.now();
+      
+      if (req.method === 'GET' && !url.includes('/@') && !url.includes('favicon')) {
+          logRequest(url);
+      }
+
+      // Check route existence for 404 logic
+      const cleanPath = url === '/' ? '/' : url.replace(/\/$/, '');
+      const pagePath = path.join(root, 'app', cleanPath === '/' ? '' : cleanPath, 'index.tsx');
+      const exists = fs.existsSync(pagePath);
+      const status = exists ? 200 : 404;
+
+      try {
+        const clientEntryPath = path.resolve(__dirname, '../../core/src/entry-client.tsx').replace(/\\/g, '/');
+        
+        // Prepare Bootstrap Modules (Vite Client + Entry Client + Globals CSS)
+        const bootstrapModules = [
+             '/@vite/client',
+             `/@fs/${clientEntryPath}`
+        ];
+
+        // Zero-Config CSS: Auto-inject globals.css if it exists
+        const globalsCssPath = path.join(root, 'app', 'globals.css');
+        const stylesheets = [];
+        if (fs.existsSync(globalsCssPath)) {
+            // In Dev, we inject the source file directly. Vite Middleware handles the transformation.
+            // bootstrapModules.push('/app/globals.css'); // DISABLE: Script-based injection conflicts with React Hydration
+            
+            // ENABLE: React 19 will hoist this link tag correctly.
+            // MUST use ?direct to ensure Vite serves raw CSS (not JS module), preventing FOUC.
+            stylesheets.push('/app/globals.css?direct');      
+        }
+
+                        // Construct React Refresh Preamble Content
+                        const preamble = `
+                        import RefreshRuntime from "/@react-refresh";
+                        RefreshRuntime.injectIntoGlobalHook(window);
+                        window.$RefreshReg$ = () => {};
+                        window.$RefreshSig$ = () => (type) => type;
+                        window.__vite_plugin_react_preamble_installed__ = true;
+                        `;
+
+                    const { render } = await server.ssrLoadModule('@vista/core/entry-server');
+        
+                    // FOUC Fix: Send Link Header to preload CSS immediately
+                    if (stylesheets.length > 0) {
+                        const linkHeader = stylesheets.map(href => `<${href}>; rel=preload; as=style`).join(', ');
+                        res.setHeader('Link', linkHeader);
+                    }
+
+                    let didError = false;
+                    const stream = await render(url, {
+                        bootstrapModules,
+                        stylesheets, 
+                        preamble, // Pass preamble content to App
+                        onShellReady() {
+                            res.status(didError ? 500 : status);
+                            res.set({ 'Content-Type': 'text/html' });
+                            // res.write('<!DOCTYPE html>'); // REMOVED: Caused double doctype and hydration mismatch
+                            
+                            // Fix: Use setTimeout to break synchronous shell initialization (TDZ issue)
+                            // "stream" variable is assigned via await render(...) which might resolve AFTER onShellReady fires synchronously
+                            setTimeout(() => {
+                                 if (stream) {
+                                     // Disable CLI Injection to prevent Hydration Mismatch (duplicate links)
+                                     // stream.pipe(injectStyles).pipe(res); 
+                                     stream.pipe(res);
+                                 } else {
+                                     console.error('Stream was not available even after timeout');
+                                     res.status(500).end();
+                                 }
+                            }, 0);
+                        },
+            onShellError(err) {
+                didError = true;
+                logger.error(err);
+                res.status(500).send('<!doctype html><p>Server Error</p>');
+            },
+            onError(err) {
+                didError = true;
+                logger.error(err);
+            }
+        });
+
+        if (req.method === 'GET' && !url.includes('/@') && !url.includes('favicon')) {
+            logSuccess(url, Date.now() - start, status);
+        }
+
+      } catch (e) {
+        server.ssrFixStacktrace(e);
+        console.error(e);
+        res.status(500).end(e.message);
+      }
+    });
+
+    // Helper to get network address
+    const getNetworkAddress = async () => {
+        const { networkInterfaces } = await import('os');
+        const nets = networkInterfaces();
+        for (const name of Object.keys(nets)) {
+            for (const net of nets[name]) {
+                if (net.family === 'IPv4' && !net.internal) {
+                    return net.address;
+                }
+            }
+        }
+        return null;
+    };
+
+    httpServer.listen(port, async () => {
+       console.log(`  ${pc.green('➜')}  ${pc.bold('Vista Server')} running at http://localhost:${port}`);
+       
+       const networkAddress = await getNetworkAddress();
+       if (networkAddress) {
+           console.log(`  ${pc.green('➜')}  ${pc.bold('Network')}: http://${networkAddress}:${port}`);
+       }
+       if (port !== 5173) {
+           console.log(`  ${pc.yellow('➜')}  ${pc.yellow('Port 5173 was in use, using ' + port + ' instead')}`);
+       }
+    });
+
+  } catch (e) {
+    console.error(pc.red('failed to start server'), e);
+    process.exit(1);
+  }
+}
+
+async function build() {
+    console.log(pc.cyan('Building for production...'));
+    const { build: viteBuild } = await import('vite');
+    const root = process.cwd();
+    const dist = path.resolve(root, '.vista');
+    
+    generateManifest(root);
+    
+    // Create a dummy HTML for Vite to crawl dependencies, but we won't use it for serving.
+    const htmlContent = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <script type="module" src="@vista/core/entry-client"></script>
+  </body>
+</html>`;
+    
+    fs.writeFileSync(path.resolve(root, 'index.html'), htmlContent);
+    
+    try {
+        console.log(pc.green('✓ Building Client...'));
+        await viteBuild({
+            root,
+            configFile: 'vista.config.ts',
+            build: {
+                outDir: path.resolve(dist, 'client'),
+                emptyOutDir: true,
+                manifest: true, // Generate manifest for asset mapping
+                rollupOptions: {}
+            },
+            plugins: [react(), tailwindnorm(), vistaPlugin()] 
+        });
+
+        console.log(pc.green('✓ Building Server...'));
+        await viteBuild({
+            root,
+            configFile: 'vista.config.ts',
+            build: {
+                ssr: true,
+                outDir: path.resolve(dist, 'server'),
+                emptyOutDir: true,
+                rollupOptions: {
+                    input: '@vista/core/entry-server'
+                }
+            },
+            plugins: [react(), tailwindnorm(), vistaPlugin()]
+        });
+        
+    } catch (e) {
+        console.error(pc.red('Build failed:'), e);
+        process.exit(1);
+    } finally {
+        if (fs.existsSync(path.resolve(root, 'index.html'))) {
+            fs.unlinkSync(path.resolve(root, 'index.html'));
+        }
+    }
+}
+
+async function start() {
+    console.log(pc.cyan('Starting production server...'));
+    const express = (await import('express')).default;
+    const compression = (await import('compression')).default;
+    
+    const app = express();
+    app.use(compression());
+    
+    const root = process.cwd();
+    const dist = path.resolve(root, '.vista');
+    
+    if (!fs.existsSync(dist)) {
+        console.error(pc.red('Build directory (.vista) not found. Run `vista build` first.'));
+        process.exit(1);
+    }
+    
+    app.use(express.static(path.resolve(dist, 'client'), { index: false }));
+    
+    app.use(async (req, res) => {
+        try {
+            console.log('Handling request:', req.url);
+            // Fix connection refused failure by importing correct path format
+            const serverEntryPath = path.resolve(dist, 'server/entry-server.js');
+            const importPath = process.platform === 'win32' ? 'file://' + serverEntryPath.replace(/\\/g, '/') : serverEntryPath;
+            
+            console.log('Importing server entry:', importPath);
+            const serverEntry = await import(importPath);
+            const { render } = serverEntry;
+            console.log('Render function loaded');
+            
+            let didError = false;
+
+            // In prod, we need to map the entry-client to the hashed file
+            // For now, simpler approach: we rely on manifest or known entry?
+            // The template index.html used @vista/core/entry-client.
+            // Vite build produces a manifest.json.
+            // Let's assume standard behavior for now:
+            // bootstrapModules: ['/entry-client-hash.js']
+            // But we don't have the hash easily here without parsing manifest.
+            
+            // Simplified Prod: Just pipe. The user's layout likely doesn't have the script tags for prod...
+            // Wait, in Prod, the layout is just HTML. The CLIENT SCRIPT needs to be injected.
+            // We need to read manifest.json to find the entry chunk.
+            
+            let manifest;
+            try {
+                const manifestPath = path.resolve(dist, 'client/.vite/manifest.json');
+                manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
+            } catch (e) {
+                fs.writeFileSync('debug.txt', `Manifest Error: ${e.message}\nPath: ${path.resolve(dist, 'client/.vite/manifest.json')}`);
+                throw e;
+            }
+
+            // The manifest path key might be relative to project root or source root.
+            // Vite defaults: "node_modules/@vista/core/src/entry-client.tsx" if externalized?
+            // Or just "src/entry-client.tsx" if local.
+            // Let's print keys if fails.
+            
+            let entryKey = Object.keys(manifest).find(key => manifest[key].isEntry);
+            if (!entryKey) {
+                // Fallback: search for something ending in entry-client
+                entryKey = Object.keys(manifest).find(key => key.includes('entry-client'));
+            }
+            const entryScript = entryKey ? `/${manifest[entryKey].file}` : null;
+            
+            // Production CSS Injection
+            // In dev we scan; in prod we trust Vite's manifest OR we scan dist/client/assets.
+            // Vite normally injects CSS for the entry chunk automatically if we use the manifest correctly.
+            // However, our "Clean Layout" + Stream approach means we might need to force it.
+            // Let's replicate the Dev logic but using the built assets.
+            
+            const stylesheets = [];
+            
+            // 1. Try to find the built CSS for the app
+            const clientDir = path.resolve(dist, 'client');
+            const assetsDir = path.join(clientDir, 'assets');
+            if (fs.existsSync(assetsDir)) {
+                 const files = fs.readdirSync(assetsDir);
+                 files.forEach(file => {
+                     if (file.endsWith('.css')) {
+                         stylesheets.push(`/assets/${file}`);
+                     }
+                 });
+            }
+            
+            // 2. Add Link Header for Preload
+            if (stylesheets.length > 0) {
+                 const linkHeader = stylesheets.map(href => `<${href}>; rel=preload; as=style`).join(', ');
+                 res.setHeader('Link', linkHeader);
+            }
+
+            const stream = await render(req.originalUrl, {
+                bootstrapModules,
+                onShellReady() {
+                    res.statusCode = didError ? 500 : 200;
+                    res.setHeader('Content-type', 'text/html');
+                    // res.write('<!DOCTYPE html>'); // REMOVED: Caused double doctype
+                    
+                    const injectStyles = new Transform({
+                        transform(chunk, encoding, callback) {
+                            const chunkString = chunk.toString();
+                            const bodyMatch = chunkString.match(/<body/i);
+                            if (bodyMatch && stylesheets.length > 0) {
+                                const links = stylesheets.map(href => `<link rel="stylesheet" href="${href}">`).join('');
+                                const injected = chunkString.replace(/<body/i, `<head>${links}</head><body`);
+                                this.push(injected);
+                            } else {
+                                this.push(chunk);
+                            }
+                            callback();
+                        }
+                    });
+
+                    stream.pipe(injectStyles).pipe(res);
+                },
+                onError(err) {
+                    didError = true;
+                    console.error(err);
+                }
+            });
+        } catch (e) {
+            fs.writeFileSync('debug.txt', `SSR Crash: ${e.message}\nStack: ${e.stack}\n`, { flag: 'a' });
+            console.error('SSR Error:', e);
+            res.status(500).end('Internal Server Error');
+        }
+    });
+    
+    const port = process.env.PORT || 3000;
+    app.listen(port, () => {
+        console.log(`  ${pc.green('➜')}  ${pc.bold('Vista Server')} running at http://localhost:${port}`);
+    });
+}
+
+async function create() {
+  const templateDir = path.resolve(__dirname, '../templates/default');
+  
+  // Interactive Prompts
+  let projectName = targetDirArg;
+  if (!projectName || projectName === '.') {
+      const response = await prompts({
+        type: 'text',
+        name: 'projectName',
+        message: 'What is your project name?',
+        initial: 'my-vista-app'
+      });
+      projectName = response.projectName;
+      if (!projectName) {
+          console.log(pc.red('Operation cancelled'));
+          return;
+      }
+  }
+
+  const { useTypeScript, useTailwind } = await prompts([
+      {
+          type: 'confirm',
+          name: 'useTypeScript',
+          message: 'Use TypeScript?',
+          initial: true
+      },
+      {
+          type: 'confirm',
+          name: 'useTailwind',
+          message: 'Use Tailwind CSS?',
+          initial: true
+      }
+  ]);
+
+  if (useTypeScript === undefined || useTailwind === undefined) {
+      console.log(pc.red('Operation cancelled'));
+      return;
+  }
+
+  const projectDir = path.resolve(process.cwd(), projectName);
+
+  console.log(pc.cyan(`\nCreating Vista app in ${projectDir}...`));
+
+  if (!fs.existsSync(projectDir)) {
+    fs.mkdirSync(projectDir, { recursive: true });
+  }
+
+  fs.cpSync(templateDir, projectDir, { recursive: true });
+  
+  const gitignorePath = path.join(projectDir, '_gitignore');
+  if (fs.existsSync(gitignorePath)) {
+    fs.renameSync(gitignorePath, path.join(projectDir, '.gitignore'));
+  }
+
+  // Handle Tailwind Selection
+  if (!useTailwind) {
+      // 1. Remove @tailwindcss/vite from package.json
+      const pkgPath = path.join(projectDir, 'package.json');
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+      if (pkg.dependencies && pkg.dependencies.tailwindcss) delete pkg.dependencies.tailwindcss;
+      if (pkg.dependencies && pkg.dependencies['@tailwindcss/vite']) delete pkg.dependencies['@tailwindcss/vite'];
+      fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+
+      // 2. Remove plugin from vista.config.ts
+      const configPath = path.join(projectDir, 'vista.config.ts');
+      let config = fs.readFileSync(configPath, 'utf-8');
+      config = config.replace(/import tailwindcss from '@tailwindcss\/vite';\n/, '');
+      config = config.replace(/plugins: \[react\(\), tailwindcss\(\)\],/, 'plugins: [react()],');
+      fs.writeFileSync(configPath, config);
+
+      // 3. Clear globals.css
+      const cssPath = path.join(projectDir, 'app/globals.css');
+      if (fs.existsSync(cssPath)) {
+          fs.writeFileSync(cssPath, `
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+    font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+}
+`);
+      }
+  }
+
+  // Handle TypeScript Selection (Basic support)
+  if (!useTypeScript) {
+     console.log(pc.yellow('Note: TypeScript is recommended for Vista. Converting to JavaScript... (Experimental)'));
+     
+     // Rename tsconfig.json -> jsconfig.json
+     const tsConfigPath = path.join(projectDir, 'tsconfig.json');
+     if (fs.existsSync(tsConfigPath)) {
+         fs.renameSync(tsConfigPath, path.join(projectDir, 'jsconfig.json'));
+     }
+     
+     // Rename files (simple renaming, logic conversion not fully supported but unnecessary for basic template)
+     const renameExt = (dir) => {
+         const items = fs.readdirSync(dir);
+         items.forEach(item => {
+             const fullPath = path.join(dir, item);
+             const stat = fs.statSync(fullPath);
+             if (stat.isDirectory()) {
+                 renameExt(fullPath);
+             } else if (item.endsWith('.tsx')) {
+                 fs.renameSync(fullPath, fullPath.replace('.tsx', '.jsx'));
+             } else if (item.endsWith('.ts')) {
+                 fs.renameSync(fullPath, fullPath.replace('.ts', '.js'));
+             }
+         });
+     };
+     renameExt(projectDir);
+  }
+
+  const readmePath = path.join(projectDir, 'README.md');
+  const readmeContent = `# ${projectName}
+
+Created with [Vista](https://github.com/vista-js/vista).
+
+## Getting Started
+
+Run the development server:
+
+\`\`\`bash
+npm run dev
+\`\`\`
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+`;
+  fs.writeFileSync(readmePath, readmeContent);
+
+  console.log(pc.green('\nInitializing git repository...'));
+  try {
+      spawnSync('git', ['init'], { cwd: projectDir, stdio: 'ignore' });
+  } catch (e) {
+      console.warn(pc.yellow('Failed to initialize git repository. Do you have git installed?'));
+  }
+
+  console.log(pc.green('\nInstalling dependencies...'));
+  
+  const installResult = spawnSync('npm', ['install'], {
+    cwd: projectDir,
+    stdio: 'inherit',
+    shell: true,
+  });
+
+  if (installResult.error || installResult.status !== 0) {
+    console.error(pc.red('Failed to install dependencies. Please run npm install manually.'));
+  } else {
+    console.log(pc.green('\nDone! Now run:\n'));
+    console.log(`  cd ${projectName}`);
+    console.log('  npm run dev\n');
+  }
+}
+
+if (command === 'dev') {
+  startDev();
+} else if (command === 'create') {
+  create();
+} else if (command === 'build') {
+  build();
+} else if (command === 'start') {
+  start();
+} else {
+  console.log(`Command ${command} not implemented yet.`);
+}

package/index.d.ts

@@ -0,0 +1,4 @@
+import { UserConfigExport, UserConfig } from 'vite';
+export declare function defineConfig(config: UserConfigExport): UserConfigExport;
+export type VistaConfig = UserConfig;
+export declare const tailwind: any;

package/index.js

@@ -0,0 +1,3 @@
+export { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+export const tailwind = tailwindcss;

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "create-vista-app",
+  "version": "0.0.1",
+  "type": "module",
+  "bin": {
+    "vista": "./bin/vista.js"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./image": "./src/exports/image.js",
+    "./font/google": {
+      "types": "./src/exports/font/google.d.ts",
+      "default": "./src/exports/font/google.js"
+    },
+    "./link": {
+      "types": "./src/exports/link.d.ts",
+      "default": "./src/exports/link.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "tsc"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.0-beta.9",
+    "@vista/core": "^0.0.2",
+    "@vitejs/plugin-react": "^5.1.2",
+    "compression": "^1.8.1",
+    "express": "^5.2.1",
+    "picocolors": "^1.0.0",
+    "prompts": "^2.4.2",
+    "tailwindcss": "^4.1.18",
+    "vite": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/src/exports/font/google.d.ts

@@ -0,0 +1,6 @@
+
+export declare function Inter(options?: any): { className: string; style: { fontFamily: string }; variable: string };
+export declare function Poppins(options?: any): { className: string; style: { fontFamily: string }; variable: string };
+export declare function Roboto(options?: any): { className: string; style: { fontFamily: string }; variable: string };
+export declare function Geist(options?: any): { className: string; style: { fontFamily: string }; variable: string };
+export declare function Geist_Mono(options?: any): { className: string; style: { fontFamily: string }; variable: string };

package/src/exports/font/google.js

@@ -0,0 +1,45 @@
+
+/**
+ * Vista Google Fonts Loader
+ * Mimics next/font/google
+ */
+
+export function Inter(options) {
+    return {
+        className: 'font-inter',
+        style: { fontFamily: "'Inter', sans-serif" },
+        variable: '--font-inter'
+    }
+}
+
+export function Poppins(options) {
+     return {
+        className: 'font-poppins',
+        style: { fontFamily: "'Poppins', sans-serif" },
+        variable: '--font-poppins'
+    }
+}
+
+export function Roboto(options) {
+     return {
+        className: 'font-roboto',
+        style: { fontFamily: "'Roboto', sans-serif" },
+        variable: '--font-roboto'
+    }
+}
+
+export function Geist(options) {
+    return {
+       className: 'font-geist-sans',
+       style: { fontFamily: "'Geist Sans', sans-serif" },
+       variable: '--font-geist-sans'
+   }
+}
+
+export function Geist_Mono(options) {
+    return {
+       className: 'font-geist-mono',
+       style: { fontFamily: "'Geist Mono', monospace" },
+       variable: '--font-geist-mono'
+   }
+}

package/src/exports/image.d.ts

@@ -0,0 +1 @@
+export { Image as default } from '@vista/core';

package/src/exports/image.js

@@ -0,0 +1 @@
+export { Image as default } from '@vista/core';

package/src/exports/link.d.ts

@@ -0,0 +1,3 @@
+import Link from '../../dist/client/link'
+export * from '../../dist/client/link'
+export default Link

package/src/exports/link.js

@@ -0,0 +1,2 @@
+export * from '@vista/core/client/link';
+export { default } from '@vista/core/client/link';

package/templates/default/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "files.associations": {
+    "vista.config.ts": "react"
+  }
+}

package/templates/default/_gitignore

@@ -0,0 +1,103 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# Vista
+.vista

package/templates/default/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+}

package/templates/default/app/index.tsx

@@ -0,0 +1,24 @@
+import Image from 'vista/image';
+
+export default function Index() {
+    return (
+        <main className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-black transition-colors duration-200">
+            <div className="-mt-20 mb-10 relative border border-dashed border-gray-300 dark:border-neutral-700 p-10">
+                <div className="absolute -top-0 -left-0 -translate-x-1/2 -translate-y-1/2 w-24 h-24 border border-dashed border-gray-300 dark:border-neutral-700 rounded-full" />
+                <div className="absolute -bottom-0 -right-0 translate-x-1/2 translate-y-1/2 w-24 h-24 border border-dashed border-gray-300 dark:border-neutral-700 rounded-full" />
+                <Image
+                    src="/vista.svg"
+                    alt="Vista Logo"
+                    width={600}
+                    height={600}
+                    className="dark:invert"
+                    priority
+                />
+            </div>
+
+            <h1 className="max-w-xs sm:max-w-none text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50 text-center">
+                To get started, edit the index.tsx file.
+            </h1>
+        </main>
+    );
+}

package/templates/default/app/layout.tsx

@@ -0,0 +1,34 @@
+
+import React from 'react';
+import './globals.css';
+import { Geist, Geist_Mono } from 'vista/font/google';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata = {
+  title: 'Vista App',
+  description: 'Generated by create-vista-app',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  );
+}
+

package/templates/default/package.json

@@ -0,0 +1,27 @@
+
+{
+  "name": "vista-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vista dev",
+    "build": "vista build",
+    "start": "vista start",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@vista/core": "^0.0.2",
+    "create-vista-app": "^0.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.2.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "@tailwindcss/vite": "^4.0.0-beta.9",
+    "tailwindcss": "^4.0.0-beta.9"
+  }
+}

package/templates/default/public/vista.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1563" zoomAndPan="magnify" viewBox="0 0 1172.25 299.999988" height="400" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/><clipPath id="f9753e23e9"><path d="M 0 0.0976562 L 1171.5 0.0976562 L 1171.5 299.902344 L 0 299.902344 Z M 0 0.0976562 " clip-rule="nonzero"/></clipPath><clipPath id="b9e908fa44"><path d="M 317 92 L 975 92 L 975 299.902344 L 317 299.902344 Z M 317 92 " clip-rule="nonzero"/></clipPath><clipPath id="2af16fdd65"><rect x="0" width="658" y="0" height="208"/></clipPath><clipPath id="5c8fc6f23f"><path d="M 947 185 L 1171.5 185 L 1171.5 299.902344 L 947 299.902344 Z M 947 185 " clip-rule="nonzero"/></clipPath><clipPath id="52eb19aa0f"><rect x="0" width="225" y="0" height="115"/></clipPath><clipPath id="3cbca717fc"><path d="M 0 0.0976562 L 430 0.0976562 L 430 299.902344 L 0 299.902344 Z M 0 0.0976562 " clip-rule="nonzero"/></clipPath><clipPath id="ada831cbfc"><path d="M 4 0.0976562 L 384 0.0976562 L 384 279 L 4 279 Z M 4 0.0976562 " clip-rule="nonzero"/></clipPath><clipPath id="df54cfa995"><rect x="0" width="430" y="0" height="300"/></clipPath><clipPath id="048a39e378"><rect x="0" width="1172" y="0" height="300"/></clipPath></defs><g clip-path="url(#f9753e23e9)"><g transform="matrix(1, 0, 0, 1, 0, -0.000000000000011685)"><g clip-path="url(#048a39e378)"><g clip-path="url(#b9e908fa44)"><g transform="matrix(1, 0, 0, 1, 317, 92)"><g clip-path="url(#2af16fdd65)"><g fill="#000000" fill-opacity="1"><g transform="translate(4.502276, 185.411479)"><g><path d="M 24.875 -161.46875 C 22.488281 -161.46875 20.296875 -162.425781 18.296875 -164.34375 C 16.304688 -166.257812 15.3125 -168.492188 15.3125 -171.046875 C 15.3125 -173.753906 16.304688 -176.0625 18.296875 -177.96875 C 20.296875 -179.882812 22.488281 -180.84375 24.875 -180.84375 C 27.425781 -180.84375 29.660156 -179.882812 31.578125 -177.96875 C 33.492188 -176.0625 34.453125 -173.753906 34.453125 -171.046875 C 34.453125 -168.492188 33.492188 -166.257812 31.578125 -164.34375 C 29.660156 -162.425781 27.425781 -161.46875 24.875 -161.46875 Z M 18.65625 0 L 18.65625 -127.75 L 31.09375 -127.75 L 31.09375 0 Z M 18.65625 0 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(74.118463, 185.411479)"><g><path d="M 80.859375 2.875 C 66.503906 2.875 53.144531 1.28125 40.78125 -1.90625 C 28.425781 -5.101562 17.703125 -9.015625 8.609375 -13.640625 L 12.203125 -22.015625 C 20.171875 -17.546875 30.175781 -13.710938 42.21875 -10.515625 C 54.257812 -7.328125 66.976562 -5.734375 80.375 -5.734375 C 90.101562 -5.734375 98.675781 -6.890625 106.09375 -9.203125 C 113.507812 -11.515625 119.328125 -14.625 123.546875 -18.53125 C 127.773438 -22.445312 129.890625 -26.796875 129.890625 -31.578125 C 129.890625 -39.066406 125.941406 -45.046875 118.046875 -49.515625 C 110.160156 -53.984375 96.488281 -57.648438 77.03125 -60.515625 C 55.34375 -63.710938 39.832031 -68.378906 30.5 -74.515625 C 21.164062 -80.648438 16.5 -88.34375 16.5 -97.59375 C 16.5 -103.976562 19.128906 -109.601562 24.390625 -114.46875 C 29.660156 -119.332031 37.039062 -123.195312 46.53125 -126.0625 C 56.019531 -128.9375 67.144531 -130.375 79.90625 -130.375 C 90.582031 -130.375 100.109375 -129.734375 108.484375 -128.453125 C 116.859375 -127.179688 124.710938 -125.585938 132.046875 -123.671875 L 132.046875 -114.109375 C 125.191406 -116.179688 117.457031 -117.929688 108.84375 -119.359375 C 100.226562 -120.796875 90.5 -121.515625 79.65625 -121.515625 C 69.925781 -121.515625 61.15625 -120.519531 53.34375 -118.53125 C 45.53125 -116.539062 39.390625 -113.75 34.921875 -110.15625 C 30.460938 -106.570312 28.234375 -102.382812 28.234375 -97.59375 C 28.234375 -93.132812 29.742188 -89.148438 32.765625 -85.640625 C 35.796875 -82.128906 41.097656 -79.054688 48.671875 -76.421875 C 56.253906 -73.796875 66.898438 -71.445312 80.609375 -69.375 C 102.785156 -66.019531 118.5 -61.351562 127.75 -55.375 C 137 -49.394531 141.625 -41.460938 141.625 -31.578125 C 141.625 -25.203125 139.148438 -19.421875 134.203125 -14.234375 C 129.253906 -9.046875 122.234375 -4.894531 113.140625 -1.78125 C 104.054688 1.320312 93.296875 2.875 80.859375 2.875 Z M 80.859375 2.875 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(241.572183, 185.411479)"><g><path d="M 105.25 2.875 C 86.28125 2.875 72.085938 -0.867188 62.671875 -8.359375 C 53.265625 -15.859375 48.5625 -26.628906 48.5625 -40.671875 L 48.5625 -119.125 L 2.390625 -119.125 L 2.390625 -122.953125 L 55.015625 -154.53125 L 60.765625 -154.53125 L 60.765625 -127.75 L 145.4375 -127.75 L 145.4375 -118.40625 L 60.765625 -118.40625 L 60.765625 -41.859375 C 60.765625 -30.054688 64.234375 -21.285156 71.171875 -15.546875 C 78.109375 -9.804688 89.070312 -6.9375 104.0625 -6.9375 C 114.425781 -6.9375 123.195312 -7.691406 130.375 -9.203125 C 137.550781 -10.722656 141.535156 -11.640625 142.328125 -11.953125 L 145.4375 -2.625 C 144.320312 -2.46875 140.21875 -1.515625 133.125 0.234375 C 126.03125 1.992188 116.738281 2.875 105.25 2.875 Z M 105.25 2.875 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(412.614214, 185.411479)"><g><path d="M 105.5 2.875 C 92.582031 2.875 80.5 1.28125 69.25 -1.90625 C 58.007812 -5.101562 48.125 -9.691406 39.59375 -15.671875 C 31.0625 -21.648438 24.398438 -28.707031 19.609375 -36.84375 C 14.828125 -44.976562 12.4375 -53.988281 12.4375 -63.875 C 12.4375 -73.757812 14.828125 -82.726562 19.609375 -90.78125 C 24.398438 -98.832031 31.0625 -105.847656 39.59375 -111.828125 C 48.125 -117.816406 58.007812 -122.40625 69.25 -125.59375 C 80.5 -128.78125 92.582031 -130.375 105.5 -130.375 C 123.519531 -130.375 139.863281 -127.300781 154.53125 -121.15625 C 169.207031 -115.019531 180.453125 -106.609375 188.265625 -95.921875 L 190.171875 -95.921875 L 195.4375 -127.75 L 200.9375 -127.75 L 200.9375 0 L 188.75 0 L 188.75 -29.90625 L 186.828125 -29.90625 C 178.691406 -19.695312 167.488281 -11.679688 153.21875 -5.859375 C 138.945312 -0.0351562 123.039062 2.875 105.5 2.875 Z M 107.640625 -6.703125 C 122.640625 -6.703125 136.238281 -9.132812 148.4375 -14 C 160.632812 -18.863281 170.359375 -25.597656 177.609375 -34.203125 C 184.867188 -42.816406 188.5 -52.707031 188.5 -63.875 C 188.5 -75.195312 184.867188 -85.125 177.609375 -93.65625 C 170.359375 -102.1875 160.632812 -108.84375 148.4375 -113.625 C 136.238281 -118.414062 122.640625 -120.8125 107.640625 -120.8125 C 96.316406 -120.8125 85.628906 -119.453125 75.578125 -116.734375 C 65.535156 -114.023438 56.6875 -110.195312 49.03125 -105.25 C 41.382812 -100.3125 35.367188 -94.332031 30.984375 -87.3125 C 26.597656 -80.300781 24.40625 -72.488281 24.40625 -63.875 C 24.40625 -55.257812 26.597656 -47.441406 30.984375 -40.421875 C 35.367188 -33.410156 41.382812 -27.390625 49.03125 -22.359375 C 56.6875 -17.335938 65.535156 -13.472656 75.578125 -10.765625 C 85.628906 -8.054688 96.316406 -6.703125 107.640625 -6.703125 Z M 107.640625 -6.703125 "/></g></g></g></g></g></g><g clip-path="url(#5c8fc6f23f)"><g transform="matrix(1, 0, 0, 1, 947, 185)"><g clip-path="url(#52eb19aa0f)"><g fill="#000000" fill-opacity="1"><g transform="translate(1.079399, 93.921781)"><g><path d="M 11.875 0.921875 C 10.550781 0.921875 9.335938 0.394531 8.234375 -0.65625 C 7.140625 -1.71875 6.59375 -2.953125 6.59375 -4.359375 C 6.59375 -5.847656 7.140625 -7.097656 8.234375 -8.109375 C 9.335938 -9.117188 10.550781 -9.625 11.875 -9.625 C 13.28125 -9.625 14.507812 -9.117188 15.5625 -8.109375 C 16.625 -7.097656 17.15625 -5.847656 17.15625 -4.359375 C 17.15625 -2.953125 16.625 -1.71875 15.5625 -0.65625 C 14.507812 0.394531 13.28125 0.921875 11.875 0.921875 Z M 11.875 0.921875 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(35.775365, 93.921781)"><g><path d="M 25.453125 1.453125 C 21.328125 1.453125 17.175781 1.078125 13 0.328125 C 8.820312 -0.421875 5.148438 -1.234375 1.984375 -2.109375 L 3.296875 -8.046875 C 6.640625 -6.992188 10.242188 -6.09375 14.109375 -5.34375 C 17.984375 -4.59375 22.078125 -4.21875 26.390625 -4.21875 C 38.960938 -4.21875 48.695312 -6.832031 55.59375 -12.0625 C 62.5 -17.300781 65.953125 -25.238281 65.953125 -35.875 L 65.953125 -92.34375 L 72.5625 -92.34375 L 72.5625 -35.359375 C 72.5625 -10.816406 56.859375 1.453125 25.453125 1.453125 Z M 25.453125 1.453125 "/></g></g></g><g fill="#000000" fill-opacity="1"><g transform="translate(134.316886, 93.921781)"><g><path d="M 44.59375 1.578125 C 36.675781 1.578125 29.304688 0.703125 22.484375 -1.046875 C 15.671875 -2.804688 9.757812 -4.960938 4.75 -7.515625 L 6.734375 -12.140625 C 11.128906 -9.671875 16.644531 -7.554688 23.28125 -5.796875 C 29.925781 -4.046875 36.941406 -3.171875 44.328125 -3.171875 C 49.691406 -3.171875 54.414062 -3.804688 58.5 -5.078125 C 62.59375 -6.347656 65.804688 -8.0625 68.140625 -10.21875 C 70.472656 -12.375 71.640625 -14.769531 71.640625 -17.40625 C 71.640625 -21.539062 69.460938 -24.835938 65.109375 -27.296875 C 60.753906 -29.765625 53.210938 -31.789062 42.484375 -33.375 C 30.515625 -35.132812 21.957031 -37.707031 16.8125 -41.09375 C 11.675781 -44.476562 9.109375 -48.722656 9.109375 -53.828125 C 9.109375 -57.335938 10.554688 -60.429688 13.453125 -63.109375 C 16.359375 -65.796875 20.425781 -67.929688 25.65625 -69.515625 C 30.894531 -71.097656 37.03125 -71.890625 44.0625 -71.890625 C 49.957031 -71.890625 55.210938 -71.535156 59.828125 -70.828125 C 64.441406 -70.128906 68.773438 -69.253906 72.828125 -68.203125 L 72.828125 -62.921875 C 69.035156 -64.066406 64.765625 -65.035156 60.015625 -65.828125 C 55.273438 -66.617188 49.914062 -67.015625 43.9375 -67.015625 C 38.5625 -67.015625 33.71875 -66.460938 29.40625 -65.359375 C 25.101562 -64.265625 21.71875 -62.726562 19.25 -60.75 C 16.789062 -58.769531 15.5625 -56.460938 15.5625 -53.828125 C 15.5625 -51.359375 16.394531 -49.15625 18.0625 -47.21875 C 19.738281 -45.289062 22.664062 -43.597656 26.84375 -42.140625 C 31.019531 -40.691406 36.890625 -39.394531 44.453125 -38.25 C 56.679688 -36.40625 65.34375 -33.832031 70.4375 -30.53125 C 75.539062 -27.238281 78.09375 -22.863281 78.09375 -17.40625 C 78.09375 -13.894531 76.726562 -10.707031 74 -7.84375 C 71.28125 -4.988281 67.410156 -2.703125 62.390625 -0.984375 C 57.378906 0.722656 51.445312 1.578125 44.59375 1.578125 Z M 44.59375 1.578125 "/></g></g></g></g></g></g><g clip-path="url(#3cbca717fc)"><g transform="matrix(1, 0, 0, 1, 0, -0.000000000000011685)"><g clip-path="url(#df54cfa995)"><g clip-path="url(#ada831cbfc)"><g fill="#000000" fill-opacity="1"><g transform="translate(-2.567799, 274.170971)"><g><path d="M 192.46875 4.6875 L 7.046875 -273.84375 L 28.953125 -273.84375 L 195.609375 -22.6875 L 197.5625 -22.6875 L 365.390625 -273.84375 L 386.515625 -273.84375 L 200.296875 4.6875 Z M 192.46875 4.6875 "/></g></g></g></g></g></g></g></g></g></g></svg>

package/templates/default/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["."],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/default/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vista.config.ts"]
+}

package/templates/default/vista.config.ts

@@ -0,0 +1,41 @@
+import type { VistaConfig } from 'vista';
+
+const config: VistaConfig = {
+  /*
+   * React Specific Options
+   * You can pass options to the React plugin here if needed.
+   * react: { ... },
+   */
+
+  /*
+   * Server Configuration
+   * Customize the development server settings.
+   * server: {
+   *   port: 3000,
+   *   proxy: {
+   *     '/api': 'http://localhost:8080',
+   *   },
+   * },
+   */
+
+  /*
+   * Build Options
+   * Configure build output, minification, and more.
+   * build: {
+   *   outDir: 'dist',
+   *   sourcemap: true,
+   * },
+   */
+
+  /*
+   * Resolve Aliases
+   * Create custom import aliases.
+   * resolve: {
+   *   alias: {
+   *     '@': '/src',
+   *   },
+   * },
+   */
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "outDir": "dist",
+    "declaration": true
+  },
+  "include": ["."],
+  "exclude": ["node_modules", "dist", "templates"]
+}