create-vatts-app 1.0.1 → 1.1.0-alpha.1

package/dist/cli.js

@@ -37,6 +37,10 @@ function parseArgs(argv) {
     const examplesFlag = args.includes("--examples");
     const noAliasFlag = args.includes("--no-alias");
     const aliasValue = readArgValue(args, "--alias");
+    const pathRouterFlag = args.includes("--path-router") || args.includes("-p");
+    const noPathRouterFlag = args.includes("--no-path-router");
+    const reactFlag = args.includes("--react");
+    const vueFlag = args.includes("--vue");
     return {
         appName,
         tailwind: tailwindFlag ? true : undefined,
@@ -45,6 +49,9 @@ function parseArgs(argv) {
         install: noInstallFlag ? false : installFlag ? true : undefined,
         moduleAlias: noAliasFlag ? false : aliasValue ? true : undefined,
         alias: aliasValue ? normalizeAliasPrefix(aliasValue) : undefined,
+        pathRouter: pathRouterFlag ? true : noPathRouterFlag ? false : undefined,
+        typeScript: args.includes("--typescript") || args.includes("-ts") ? true : undefined,
+        framework: reactFlag ? 'react' : vueFlag ? 'vue' : undefined
     };
 }
 async function promptForMissingOptions(opts) {
@@ -58,6 +65,21 @@ async function promptForMissingOptions(opts) {
         typescript = await console_1.default.confirm("Do you want to use typescript?", true);
         console.log("  ");
     }
+    let framework = opts.framework;
+    async function askFramework() {
+        const frame = await console_1.default.ask("What framework do you want to use? (React/Vue)", 'react');
+        console.log('');
+        if (frame.toLowerCase() !== 'react' && frame.toLowerCase() !== 'vue') {
+            return await askFramework();
+        }
+        else {
+            return frame;
+        }
+    }
+    if (framework === undefined) {
+        // @ts-ignore
+        framework = await askFramework();
+    }
     let tailwind = opts.tailwind;
     if (tailwind === undefined) {
         tailwind = await console_1.default.confirm("Do you want to include Tailwind CSS?", true);
@@ -103,6 +125,8 @@ async function promptForMissingOptions(opts) {
         moduleAlias,
         alias,
         pathRouter,
-        typeScript: typescript
+        typeScript: typescript,
+        // @ts-ignore
+        framework
     };
 }

package/dist/createApp.js

@@ -67,7 +67,8 @@ async function createApp(options) {
         vattsVersion: ownPkg.version,
         packageJson: {},
         pathRouter: resolved.pathRouter,
-        typeScript: resolved.typeScript
+        typeScript: resolved.typeScript,
+        framework: resolved.framework
     };
     console.clear();
     for (const step of steps_1.steps) {

package/dist/packageJson.d.ts

@@ -1,2 +1,2 @@
 import type { CreateAppContext } from "./types";
-export declare function buildPackageJson(ctx: Pick<CreateAppContext, "appName" | "vattsVersion" | "willTailwind" | "typeScript">): Promise<any>;
+export declare function buildPackageJson(ctx: Pick<CreateAppContext, "appName" | "vattsVersion" | "willTailwind" | "typeScript" | "framework">): Promise<any>;

package/dist/packageJson.js

@@ -6,19 +6,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildPackageJson = buildPackageJson;
 const console_1 = __importDefault(require("vatts/console"));
 async function buildPackageJson(ctx) {
-    async function verifyVersion() {
-        // node fetch
+    // Função genérica para pegar a versão mais recente de qualquer pacote
+    async function getLatest(pkg, fallback) {
         try {
-            const response = await fetch('https://registry.npmjs.org/vatts/latest');
+            const response = await fetch(`https://registry.npmjs.org/${pkg}/latest`);
             const data = await response.json();
             return data.version;
         }
         catch (error) {
-            console_1.default.error('Could not check for the latest Vatts.js version:', error);
-            return ctx.vattsVersion; // Retorna a versão atual em caso de erro
+            console_1.default.error(`Could not check for the latest ${pkg} version:`, error);
+            return fallback;
         }
     }
-    const version = await verifyVersion();
+    // Busca o Vatts e o @types/node em paralelo
+    const [version, typesNodeVersion] = await Promise.all([
+        getLatest('vatts', ctx.vattsVersion),
+        getLatest('@types/node', '20.11.0') // Adicionado @types/node
+    ]);
     const packageJson = {
         name: ctx.appName,
         version: "0.1.0",
@@ -28,31 +32,63 @@ async function buildPackageJson(ctx) {
             dev: "vatts dev",
         },
         dependencies: {
-            vatts: `^${version}`,
-            react: "^19.2.3",
-            "react-dom": "^19.2.3"
+            vatts: `^${version}`
         },
         devDependencies: {
-            "@types/react": "^19.2.8",
+            "@types/node": `^${typesNodeVersion}` // Inserido aqui
         },
     };
+    if (ctx.framework === 'react') {
+        // Busca as dependências do React em paralelo
+        const [reactVer, reactDomVer, typesReactVer] = await Promise.all([
+            getLatest('react', '19.2.3'),
+            getLatest('react-dom', '19.2.3'),
+            getLatest('@types/react', '19.2.8')
+        ]);
+        packageJson.dependencies = {
+            ...packageJson.devDependencies,
+            react: `^${reactVer}`,
+            "react-dom": `^${reactDomVer}`
+        };
+        packageJson.devDependencies = {
+            ...packageJson.devDependencies,
+            "@types/react": `^${typesReactVer}`,
+        };
+    }
+    else if (ctx.framework === 'vue') {
+        const vueVer = await getLatest('vue', '3.5.27');
+        packageJson.dependencies = {
+            ...packageJson.dependencies,
+            "vue": `^${vueVer}`
+        };
+    }
     if (ctx.typeScript) {
+        const [tsVer, tsNodeVer] = await Promise.all([
+            getLatest('typescript', '5.9.3'),
+            getLatest('ts-node', '10.9.2')
+        ]);
         packageJson.devDependencies = {
             ...packageJson.devDependencies,
-            typescript: "^5.9.3",
+            typescript: `^${tsVer}`,
         };
         packageJson.dependencies = {
             ...packageJson.dependencies,
-            "ts-node": "^10.9.2",
+            "ts-node": `^${tsNodeVer}`,
         };
     }
     if (ctx.willTailwind) {
+        const [tailwindVer, tailwindPostcssVer, postcssVer, autoprefixerVer] = await Promise.all([
+            getLatest('tailwindcss', '4.1.18'),
+            getLatest('@tailwindcss/postcss', '4.1.18'),
+            getLatest('postcss', '8.5.6'),
+            getLatest('autoprefixer', '10.4.23')
+        ]);
         packageJson.dependencies = {
             ...packageJson.dependencies,
-            tailwindcss: "^4.1.18",
-            "@tailwindcss/postcss": "^4.1.18",
-            postcss: "^8.5.6",
-            autoprefixer: "^10.4.23",
+            tailwindcss: `^${tailwindVer}`,
+            "@tailwindcss/postcss": `^${tailwindPostcssVer}`,
+            postcss: `^${postcssVer}`,
+            autoprefixer: `^${autoprefixerVer}`,
         };
     }
     return packageJson;

package/dist/steps/createExampleRoutes.js

@@ -43,11 +43,20 @@ const fs_1 = require("../fs");
 const templates_1 = require("../templates");
 async function createExampleRoutes(ctx) {
     const dynamic = console_1.default.dynamicLine("Creating example routes...");
-    let pathResolve = path.join(ctx.rootDir, "src", "web", "routes", `index.${ctx.typeScript ? 'tsx' : 'jsx'}`);
-    if (ctx.pathRouter) {
-        pathResolve = path.join(ctx.rootDir, "src", "web", `page.${ctx.typeScript ? 'tsx' : 'jsx'}`);
+    if (ctx.framework === 'react') {
+        let pathResolve = path.join(ctx.rootDir, "src", "web", "routes", `index.${ctx.typeScript ? 'tsx' : 'jsx'}`);
+        if (ctx.pathRouter) {
+            pathResolve = path.join(ctx.rootDir, "src", "web", `page.${ctx.typeScript ? 'tsx' : 'jsx'}`);
+        }
+        (0, fs_1.writeFile)(pathResolve, (0, templates_1.webIndexRouteTemplate)(ctx.willTailwind, ctx.pathRouter, ctx.typeScript));
+    }
+    else if (ctx.framework === 'vue') {
+        let pathResolve = path.join(ctx.rootDir, "src", "web", "routes", `index.vue`);
+        if (ctx.pathRouter) {
+            pathResolve = path.join(ctx.rootDir, "src", "web", `page.vue`);
+        }
+        (0, fs_1.writeFile)(pathResolve, (0, templates_1.vueExampleRoute)(ctx.typeScript, ctx.pathRouter, ctx.willTailwind));
     }
-    (0, fs_1.writeFile)(pathResolve, (0, templates_1.webIndexRouteTemplate)(ctx.willTailwind, ctx.pathRouter, ctx.typeScript));
     (0, fs_1.writeFile)(path.join(ctx.rootDir, "src", "backend", "routes", `Example.${ctx.typeScript ? 'ts' : 'js'}`), (0, templates_1.backendExampleRouteTemplate)(ctx.typeScript));
     dynamic.end("Example routes created.");
 }

package/dist/steps/createProject.js

@@ -48,7 +48,8 @@ async function createProject(ctx) {
         appName: ctx.appName,
         vattsVersion: ctx.vattsVersion,
         willTailwind: ctx.willTailwind,
-        typeScript: ctx.typeScript
+        typeScript: ctx.typeScript,
+        framework: ctx.framework
     });
     (0, fs_1.writeJson)(path.join(ctx.rootDir, "package.json"), ctx.packageJson);
     dynamic.end("Created project directory and package.json");

package/dist/steps/createProjectStructure.js

@@ -51,6 +51,11 @@ async function createProjectStructure(ctx) {
         (0, fs_1.ensureDir)(path.join(ctx.rootDir, "src", "web"));
     }
     (0, fs_1.writeFile)(path.join(ctx.rootDir, "src", "web", "globals.css"), (0, templates_1.globalsCssTemplate)(ctx.willTailwind));
-    (0, fs_1.writeFile)(path.join(ctx.rootDir, "src", "web", `layout.${ctx.typeScript ? 'tsx' : 'jsx'}`), ctx.typeScript ? (0, templates_1.layoutTsxTemplate)() : (0, templates_1.layoutJsxTemplate)());
+    if (ctx.framework === 'react') {
+        (0, fs_1.writeFile)(path.join(ctx.rootDir, "src", "web", `layout.${ctx.typeScript ? 'tsx' : 'jsx'}`), ctx.typeScript ? (0, templates_1.layoutTsxTemplate)() : (0, templates_1.layoutJsxTemplate)());
+    }
+    else if (ctx.framework === 'vue') {
+        (0, fs_1.writeFile)(path.join(ctx.rootDir, "src", "web", `layout.vue`), (0, templates_1.vueExampleLayout)(ctx.typeScript));
+    }
     dynamic.end("Created project structure");
 }

package/dist/templates.d.ts

@@ -9,3 +9,5 @@ export declare function postcssConfigTemplate(): string;
 export declare function tailwindConfigTemplate(): string;
 export declare function webIndexRouteTemplate(willTailwind: boolean, pathRouter: boolean, typescript: boolean): string;
 export declare function backendExampleRouteTemplate(typescript: boolean): "import {VattsResponse} from \"vatts\"\n\nconst ExampleRoute = {\n    pattern: '/api/example',\n    GET(request, params) {\n        return VattsResponse.json({\n            message: 'Welcome to the Example API!'\n        })\n    },\n    POST: async (request, params) => {\n        const data = await request.json();\n        return VattsResponse.json({\n            message: 'POST request received at Example API!',\n            body: data\n        })\n    }\n};\n\nexport default ExampleRoute;" | "import {BackendRouteConfig, VattsRequest, VattsResponse} from \"vatts\"\n\nconst ExampleRoute: BackendRouteConfig = {\n    pattern: '/api/example',\n    GET(request: VattsRequest, params) {\n        return VattsResponse.json({\n            message: 'Welcome to the Example API!'\n        })\n    },\n    POST: async (request: VattsRequest, params) => {\n        const data = await request.json();\n        return VattsResponse.json({\n            message: 'POST request received at Example API!',\n            body: data\n        })\n    }\n};\n\nexport default ExampleRoute;";
+export declare function vueExampleRoute(typescript: boolean, pathRouter: boolean, tailwind: boolean): string;
+export declare function vueExampleLayout(typescript: boolean): string;

package/dist/templates.js

@@ -9,6 +9,8 @@ exports.postcssConfigTemplate = postcssConfigTemplate;
 exports.tailwindConfigTemplate = tailwindConfigTemplate;
 exports.webIndexRouteTemplate = webIndexRouteTemplate;
 exports.backendExampleRouteTemplate = backendExampleRouteTemplate;
+exports.vueExampleRoute = vueExampleRoute;
+exports.vueExampleLayout = vueExampleLayout;
 function globalsCssTemplate(willTailwind) {
     // even without tailwind, leave empty file to avoid import errors
     return willTailwind ? `@import "tailwindcss";\n` : `body {
@@ -98,7 +100,7 @@ function tsconfigTemplate(opts) {
         : "";
     return `{
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ESNext",
     "module": "NodeNext",
     "jsx": "react-jsx",
     "strict": true,
@@ -110,7 +112,7 @@ function tsconfigTemplate(opts) {
     "rootDir": "./src",
     "outDir": "./dist",
     "moduleResolution": "nodenext",
-    "types": ["vatts/global"]${aliasBlock}
+    "types": ["vatts/global", "node"]${aliasBlock}
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]
@@ -314,3 +316,138 @@ const ExampleRoute: BackendRouteConfig = {
 
 export default ExampleRoute;`;
 }
+function vueExampleRoute(typescript, pathRouter, tailwind) {
+    return `${pathRouter ? '' : `<script${typescript ? ' lang="ts"' : ''}>
+${typescript ? 'import type { RouteConfig } from "vatts/vue";\n' : ''}
+export const config${typescript ? ': RouteConfig' : ''} = {
+  pattern: '/',
+  component: undefined,
+  generateMetadata: () => ({
+    title: 'Vatts.js | Home'
+  })
+};
+</script>`}
+${tailwind ? `<template>
+  <div class="flex min-h-screen flex-col items-center justify-center bg-gray-950 p-4 text-center">
+    <div class="group relative">
+      <div class="absolute -inset-1 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-400 opacity-25 blur transition duration-500 group-hover:opacity-50"></div>
+      <div class="relative rounded-lg bg-gray-900 px-8 py-6 ring-1 ring-gray-800">
+        <h1 class="mb-2 text-4xl font-bold tracking-tight text-white sm:text-5xl">
+          Hello <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">World</span>
+        </h1>
+
+        <p class="text-sm font-medium text-gray-400">
+          Running with <span class="text-gray-200">Vatts.js</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>` : `<template>
+  <div class="container">
+    <div class="group-wrapper">
+      <div class="gradient-blur"></div>
+
+      <div class="card">
+        <h1 class="title">
+          Hello <span class="gradient-text">World</span>
+        </h1>
+
+        <p class="subtitle">
+          Running with <span class="subtitle-highlight">Vatts.js</span>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* O CSS permanece exatamente o mesmo que você enviou */
+.container {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #030712;
+  padding: 1rem;
+  text-align: center;
+  font-family: sans-serif;
+}
+
+.group-wrapper {
+  position: relative;
+}
+
+.gradient-blur {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  bottom: -4px;
+  left: -4px;
+  border-radius: 0.5rem;
+  background: linear-gradient(to right, #9333ea, #22d3ee);
+  filter: blur(8px);
+  transition: opacity 500ms ease;
+  opacity: 0.25;
+}
+
+.group-wrapper:hover .gradient-blur {
+  opacity: 0.5;
+}
+
+.card {
+  position: relative;
+  border-radius: 0.5rem;
+  background-color: #111827;
+  padding: 1.5rem 2rem;
+  border: 1px solid #1f2937;
+  color: white;
+}
+
+.title {
+  margin-bottom: 0.5rem;
+  font-size: 2.25rem;
+  font-weight: bold;
+  letter-spacing: -0.025em;
+  color: white;
+  line-height: 1;
+}
+
+.gradient-text {
+  color: transparent;
+  background-clip: text;
+  -webkit-background-clip: text;
+  background-image: linear-gradient(to right, #c084fc, #22d3ee);
+}
+
+.subtitle {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #9ca3af;
+  margin: 0;
+}
+
+.subtitle-highlight {
+  color: #e5e7eb;
+}
+</style>`}`;
+}
+function vueExampleLayout(typescript) {
+    return `<script${typescript ? ' lang="ts"' : ''}>
+${typescript ? `import type { Metadata } from "vatts/vue";` : ''}
+export const metadata${typescript ? ': Metadata' : ''} = {
+  title: "Vatts JS | The Fast and Simple Web Framework for React",
+  description: "The fastest and simplest web framework for React! Start building high-performance web applications today with Vatts JS.",
+  keywords: ["Vatts JS", "web framework", "React", "JavaScript", "TypeScript", "web development", "fast", "simple", "SSR", "frontend"],
+  author: "Vatts JS Team",
+};
+</script>
+
+<script setup ${typescript ? ' lang="ts"' : ''}>
+import './globals.css';
+</script>
+
+<template>
+    <slot />
+</template>`;
+}

package/dist/types.d.ts

@@ -10,6 +10,7 @@ export type CreateAppOptions = {
     alias?: string;
     pathRouter?: boolean;
     typeScript?: boolean;
+    framework?: 'react' | 'vue';
 };
 export type CreateAppContext = {
     appName: string;
@@ -25,4 +26,5 @@ export type CreateAppContext = {
     vattsVersion: string;
     packageJson: Record<string, any>;
     typeScript: boolean;
+    framework: 'react' | 'vue';
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vatts-app",
-  "version": "1.0.1",
+  "version": "1.1.0-alpha.1",
   "description": "CLI tool to create a new Vatts.js application",
   "main": "dist/index.js",
   "bin": {
@@ -27,7 +27,7 @@
   "dependencies": {
     "commander": "^14.0.2",
     "ts-node": "^10.9.2",
-    "vatts": "1.1.0"
+    "vatts": "1.2.0-alpha.2"
   },
   "scripts": {
     "build": "rimraf dist && tsc",