revine 0.3.4 → 0.4.0

package/dist/commands/createProject.js

@@ -2,7 +2,7 @@ import path from "path";
 import { fileURLToPath } from "url";
 import { updatePackageJson } from "../config/package.js";
 import { updateReadme } from "../config/readme.js";
-import { installDependencies } from "../installers/dependencies.js";
+import { installDependencies } from "../setup/dependencies.js";
 import { askForTailwindSetup } from "../prompts/tailwind.js";
 import { setupTailwind } from "../setup/tailwind.js";
 import { copyTemplate } from "../utils/file.js";

package/dist/config/vite.js

@@ -2,8 +2,8 @@ import fs from "fs-extra";
 export async function updateViteConfig(filePath) {
     let viteConfigContent = await fs.readFile(filePath, "utf-8");
     // Insert Tailwind import after the React plugin import.
-    viteConfigContent = viteConfigContent.replace("import react from '@vitejs/plugin-react';", "import react from '@vitejs/plugin-react';\nimport tailwindcss from '@tailwindcss/vite';");
+    viteConfigContent = viteConfigContent.replace('import react from "@vitejs/plugin-react";', "import react from '@vitejs/plugin-react';\nimport tailwindcss from '@tailwindcss/vite';");
     // Insert Tailwind plugin into the plugins array.
-    viteConfigContent = viteConfigContent.replace("plugins: [react()]", "plugins: [\n    react(),\n    tailwindcss()\n  ]");
+    viteConfigContent = viteConfigContent.replace("plugins: [react(), revineLoggerPlugin()]", "plugins: [\n    react(),\n    revineLoggerPlugin(),\n    tailwindcss()\n  ]");
     await fs.writeFile(filePath, viteConfigContent);
 }

package/dist/setup/dependencies.js

@@ -0,0 +1,15 @@
+import { spawnSync } from "child_process";
+import { logError, logInfo } from "../utils/logger.js";
+export async function installDependencies(projectDir) {
+    const npmCmd = process.platform === "win32" ? "npm.cmd" : "npm";
+    const installResult = spawnSync(npmCmd, ["install"], {
+        stdio: "inherit",
+        cwd: projectDir,
+        shell: true,
+    });
+    if (installResult.error || installResult.status !== 0) {
+        logError("Error installing dependencies:", installResult.error);
+        logInfo("Try running manually: npm install");
+        process.exit(1);
+    }
+}

package/dist/setup/tailwind.js

@@ -5,16 +5,126 @@ import { logInfo } from "../utils/logger.js";
 export async function setupTailwind(projectDir) {
     logInfo("\nSetting up Tailwind CSS...");
     // Point to the hidden Vite config
-    const viteConfigPath = path.join(projectDir, ".revine", "bundler", "vite.config.ts");
-    // Now use existing updateViteConfig logic on this new path
+    const viteConfigPath = path.join(projectDir, ".revine", "bundler", "defaults", "vite.ts");
+    // Use existing updateViteConfig logic on this new path
     await updateViteConfig(viteConfigPath);
-    // Creating the CSS directory and file that imports Tailwind
-    const cssDir = path.join(projectDir, "src", "styles");
-    await fs.ensureDir(cssDir);
-    await fs.writeFile(path.join(cssDir, "global.css"), "@import 'tailwindcss';\n");
-    // Prepend the CSS import to src/main.tsx
-    const rootTsxPath = path.join(projectDir, "src", "root.tsx");
-    const mainContent = `import './styles/global.css';\n` +
-        (await fs.readFile(rootTsxPath, "utf-8"));
-    await fs.writeFile(rootTsxPath, mainContent);
+    // Write the Tailwind CSS import into the existing global.css file
+    const cssFile = path.join(projectDir, "src", "styles", "global.css");
+    const cssFileContent = `@import 'tailwindcss';\n`;
+    await fs.writeFile(cssFile, cssFileContent);
+    // Update the starter file for Tailwind classes
+    const starterFile = path.join(projectDir, "src", "pages", "index.tsx");
+    const starterFileContent = `
+export default function HomePage() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-6 bg-gradient-to-b from-white via-white to-indigo-200">
+      {/* Hero Section */}
+      <div className="max-w-screen-lg w-full text-center space-y-6">
+        <h1 className="text-4xl sm:text-6xl font-extrabold text-gray-900 tracking-tight leading-tight">
+          Welcome to{" "}
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 via-indigo-600 to-black">
+            Revine
+          </span>
+        </h1>
+        <p className="text-xl sm:text-2xl text-gray-600 font-light">
+          The modern, powerful, and streamlined React framework.
+        </p>
+      </div>
+
+      {/* CTA Buttons */}
+      <div className="mt-8 flex space-x-4">
+        <a
+          href="#get-started"
+          className="rounded-md bg-indigo-600 px-6 py-3 text-white font-semibold shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors"
+        >
+          Get Started
+        </a>
+        <a
+          href="#docs"
+          className="rounded-md bg-white px-6 py-3 text-indigo-600 font-semibold border border-indigo-200 shadow hover:bg-gray-100 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+        >
+          Read Docs
+        </a>
+      </div>
+
+      {/* Features Section */}
+      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 max-w-screen-lg w-full">
+        <a
+          href="#fast"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Lightning Fast
+          </h3>
+          <p className="text-gray-600">
+            Built on Vite for ultra-fast development and instant HMR.
+          </p>
+        </a>
+
+        <a
+          href="#routing"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Simple File-based Routing
+          </h3>
+          <p className="text-gray-600">
+            Create pages in <code>src/pages</code> and Revine will handle the
+            rest.
+          </p>
+        </a>
+
+        <a
+          href="#tailwind"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Tailwind Integration
+          </h3>
+          <p className="text-gray-600">
+            Pre-configured for Tailwind CSS, so you can style quickly and
+            easily.
+          </p>
+        </a>
+
+        <a
+          href="#dev-experience"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">Great DX</h3>
+          <p className="text-gray-600">
+            Minimal config, fast builds, custom logging, and more.
+          </p>
+        </a>
+
+        <a
+          href="#abstract"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Abstracted Internals
+          </h3>
+          <p className="text-gray-600">
+            A .revine folder houses the complex Vite config. Keep your root
+            clean.
+          </p>
+        </a>
+
+        <a
+          href="#customize"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Fully Customizable
+          </h3>
+          <p className="text-gray-600">
+            Easily extend or override settings in <code>revine.config.ts</code>.
+          </p>
+        </a>
+      </div>
+    </main>
+  );
+}
+  `;
+    await fs.writeFile(starterFile, starterFileContent);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revine",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "A react framework, but better.",
   "license": "ISC",
   "author": "Rachit Bharadwaj",

package/src/commands/createProject.ts

@@ -2,7 +2,7 @@ import path from "path";
 import { fileURLToPath } from "url";
 import { updatePackageJson } from "../config/package.js";
 import { updateReadme } from "../config/readme.js";
-import { installDependencies } from "../installers/dependencies.js";
+import { installDependencies } from "../setup/dependencies.js";
 import { askForTailwindSetup } from "../prompts/tailwind.js";
 import { setupTailwind } from "../setup/tailwind.js";
 import { copyTemplate } from "../utils/file.js";

package/src/config/vite.ts

@@ -5,14 +5,14 @@ export async function updateViteConfig(filePath: string) {
 
   // Insert Tailwind import after the React plugin import.
   viteConfigContent = viteConfigContent.replace(
-    "import react from '@vitejs/plugin-react';",
+    'import react from "@vitejs/plugin-react";',
     "import react from '@vitejs/plugin-react';\nimport tailwindcss from '@tailwindcss/vite';"
   );
 
   // Insert Tailwind plugin into the plugins array.
   viteConfigContent = viteConfigContent.replace(
-    "plugins: [react()]",
-    "plugins: [\n    react(),\n    tailwindcss()\n  ]"
+    "plugins: [react(), revineLoggerPlugin()]",
+    "plugins: [\n    react(),\n    revineLoggerPlugin(),\n    tailwindcss()\n  ]"
   );
 
   await fs.writeFile(filePath, viteConfigContent);

package/src/setup/tailwind.ts

@@ -11,24 +11,131 @@ export async function setupTailwind(projectDir: string) {
     projectDir,
     ".revine",
     "bundler",
-    "vite.config.ts"
+    "defaults",
+    "vite.ts"
   );
 
-  // Now use existing updateViteConfig logic on this new path
+  // Use existing updateViteConfig logic on this new path
   await updateViteConfig(viteConfigPath);
 
-  // Creating the CSS directory and file that imports Tailwind
-  const cssDir = path.join(projectDir, "src", "styles");
-  await fs.ensureDir(cssDir);
-  await fs.writeFile(
-    path.join(cssDir, "global.css"),
-    "@import 'tailwindcss';\n"
-  );
+  // Write the Tailwind CSS import into the existing global.css file
+  const cssFile = path.join(projectDir, "src", "styles", "global.css");
+  const cssFileContent = `@import 'tailwindcss';\n`;
+  await fs.writeFile(cssFile, cssFileContent);
+
+  // Update the starter file for Tailwind classes
+  const starterFile = path.join(projectDir, "src", "pages", "index.tsx");
+  const starterFileContent = `
+export default function HomePage() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-6 bg-gradient-to-b from-white via-white to-indigo-200">
+      {/* Hero Section */}
+      <div className="max-w-screen-lg w-full text-center space-y-6">
+        <h1 className="text-4xl sm:text-6xl font-extrabold text-gray-900 tracking-tight leading-tight">
+          Welcome to{" "}
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 via-indigo-600 to-black">
+            Revine
+          </span>
+        </h1>
+        <p className="text-xl sm:text-2xl text-gray-600 font-light">
+          The modern, powerful, and streamlined React framework.
+        </p>
+      </div>
+
+      {/* CTA Buttons */}
+      <div className="mt-8 flex space-x-4">
+        <a
+          href="#get-started"
+          className="rounded-md bg-indigo-600 px-6 py-3 text-white font-semibold shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors"
+        >
+          Get Started
+        </a>
+        <a
+          href="#docs"
+          className="rounded-md bg-white px-6 py-3 text-indigo-600 font-semibold border border-indigo-200 shadow hover:bg-gray-100 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+        >
+          Read Docs
+        </a>
+      </div>
+
+      {/* Features Section */}
+      <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 max-w-screen-lg w-full">
+        <a
+          href="#fast"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Lightning Fast
+          </h3>
+          <p className="text-gray-600">
+            Built on Vite for ultra-fast development and instant HMR.
+          </p>
+        </a>
+
+        <a
+          href="#routing"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Simple File-based Routing
+          </h3>
+          <p className="text-gray-600">
+            Create pages in <code>src/pages</code> and Revine will handle the
+            rest.
+          </p>
+        </a>
 
-  // Prepend the CSS import to src/main.tsx
-  const rootTsxPath = path.join(projectDir, "src", "root.tsx");
-  const mainContent =
-    `import './styles/global.css';\n` +
-    (await fs.readFile(rootTsxPath, "utf-8"));
-  await fs.writeFile(rootTsxPath, mainContent);
+        <a
+          href="#tailwind"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Tailwind Integration
+          </h3>
+          <p className="text-gray-600">
+            Pre-configured for Tailwind CSS, so you can style quickly and
+            easily.
+          </p>
+        </a>
+
+        <a
+          href="#dev-experience"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">Great DX</h3>
+          <p className="text-gray-600">
+            Minimal config, fast builds, custom logging, and more.
+          </p>
+        </a>
+
+        <a
+          href="#abstract"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Abstracted Internals
+          </h3>
+          <p className="text-gray-600">
+            A .revine folder houses the complex Vite config. Keep your root
+            clean.
+          </p>
+        </a>
+
+        <a
+          href="#customize"
+          className="block rounded-xl border border-gray-200 bg-white p-6 shadow transition hover:shadow-xl hover:-translate-y-1"
+        >
+          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+            Fully Customizable
+          </h3>
+          <p className="text-gray-600">
+            Easily extend or override settings in <code>revine.config.ts</code>.
+          </p>
+        </a>
+      </div>
+    </main>
+  );
+}
+  `;
+  await fs.writeFile(starterFile, starterFileContent);
 }

package/template/.revine/bundler/defaults/vite.ts

@@ -1,9 +1,8 @@
 import react from "@vitejs/plugin-react";
 import { revineLoggerPlugin } from "../viteLoggerPlugin";
-import tailwindcss from "@tailwindcss/vite";
 
 export const defaultViteConfig = {
-  plugins: [react(), revineLoggerPlugin(), tailwindcss()],
+  plugins: [react(), revineLoggerPlugin()],
   logLevel: "silent",
 
   server: {

package/template/.revine/bundler/generateConfig.ts

@@ -1,18 +1,18 @@
-// .revine/bundler/generateConfig.ts
-import { merge } from 'lodash-es';
-import { defaultViteConfig } from './defaults/vite.js';
-import { loadUserConfig } from './utils/loadUserConfig.js';
-import tailwindcss from '@tailwindcss/vite';   // For direct plugin usage
+import { merge } from "lodash-es";
+import { defaultViteConfig } from "./defaults/vite.js";
+import { loadUserConfig } from "./utils/loadUserConfig.js";
+
+interface UserConfig {
+  vite?: Record<string, unknown>;
+}
 
 export async function generateRevineViteConfig() {
   // Load the user's revine.config.ts
-  const userConfig = await loadUserConfig();
+  const userConfig = (await loadUserConfig()) as UserConfig;
+
 
   // Merge user "vite" overrides with your default config
   const finalConfig = merge({}, defaultViteConfig, userConfig.vite || {});
 
-  // Insert the Tailwind plugin, if desired, automatically or conditionally:
-  // finalConfig.plugins.push(tailwindcss());
-
   return finalConfig;
 }

package/template/.revine/bundler/utils/loadUserConfig.ts

@@ -1,7 +1,7 @@
 export async function loadUserConfig() {
   try {
     // relative path to the user's revine.config.ts
-    const configModule = await import("../../../revine.config.ts");
+    const configModule = await import("../../../revine.config");
     return configModule.default || {};
   } catch (error) {
     console.error(

package/template/.revine/bundler/vite.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "vite";
-import { generateRevineViteConfig } from "./generateConfig.js";
+import { generateRevineViteConfig } from "./generateConfig";
 
 // Vite supports async config. We can do:
 export default defineConfig(async () => {

package/template/package.json

@@ -19,6 +19,7 @@
     "vite": "^5.0.12",
     "@vitejs/plugin-react": "^4.2.1",
     "lodash-es": "^4.17.21",
+    "@types/lodash-es": "^4.17.9",
     "@tailwindcss/vite": "^4.0.0"
   }
 }

package/template/src/pages/index.tsx

@@ -1,8 +1,62 @@
 export default function HomePage() {
   return (
-    <div>
-      <h1>Welcome to Revine!</h1>
-      <p>Start editing this page in src/pages/index.tsx</p>
-    </div>
+    <main>
+      {/* Hero Section */}
+      <div>
+        <h1>
+          Welcome to <span>Revine</span>
+        </h1>
+        <p>The modern, powerful, and streamlined React framework.</p>
+      </div>
+
+      {/* CTA Buttons */}
+      <div className="cta">
+        <a href="#get-started" className="primary-btn">
+          Get Started
+        </a>
+        <a href="#docs" className="secondary-btn">
+          Read Docs
+        </a>
+      </div>
+
+      {/* Features Section */}
+      <div className="features">
+        <a href="#fast">
+          <h3>Lightning Fast</h3>
+          <p>Built on Vite for ultra-fast development and instant HMR.</p>
+        </a>
+        <a href="#routing">
+          <h3>Simple File-based Routing</h3>
+          <p>
+            Create pages in <code>src/pages</code> and Revine will handle the
+            rest.
+          </p>
+        </a>
+        <a href="#tailwind">
+          <h3>Tailwind Integration</h3>
+          <p>
+            Pre-configured for Tailwind CSS, so you can style quickly and
+            easily.
+          </p>
+        </a>
+        <a href="#dev-experience">
+          <h3>Great DX</h3>
+          <p>Minimal config, fast builds, custom logging, and more.</p>
+        </a>
+        <a href="#abstract">
+          <h3>Abstracted Internals</h3>
+          <p>
+            A .revine folder houses the complex Vite config. Keep your root
+            clean.
+          </p>
+        </a>
+        <a href="#customize">
+          <h3>Fully Customizable</h3>
+          <p>
+            Easily extend or override settings in <code>revine.config.ts</code>.
+          </p>
+        </a>
+      </div>
+    </main>
   );
 }

package/template/src/root.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
+import './styles/global.css';
 
 const container = document.getElementById("root")!;
 const root = createRoot(container);

package/template/src/styles/global.css

@@ -0,0 +1,150 @@
+:root {
+  --gradient-from: #ffffff;
+  --gradient-via: #ffffff;
+  --gradient-to: #d1d5db;
+
+  --text-primary: #111827;
+  --text-secondary: #4b5563;
+  --background-primary: #ffffff;
+  --border-color: #d1d5db;
+
+  --primary-color: #4f46e5;
+  --primary-hover: #4338ca;
+  --button-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  --button-hover-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
+  line-height: 1.5;
+}
+
+main {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: linear-gradient(
+    to bottom,
+    var(--gradient-from),
+    var(--gradient-via),
+    var(--gradient-to)
+  );
+}
+
+h1 {
+  font-size: 3rem;
+  line-height: 1.25;
+  font-weight: 800;
+  color: var(--text-primary);
+  text-align: center;
+}
+
+h1 span {
+  background: linear-gradient(
+    to right,
+    var(--primary-color),
+    var(--primary-hover),
+    #000
+  );
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+p {
+  font-size: 1.25rem;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+.cta {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.cta a {
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.375rem;
+  font-weight: 600;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.cta .primary-btn {
+  background-color: var(--primary-color);
+  color: white;
+  box-shadow: var(--button-shadow);
+  transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+.cta .primary-btn:hover {
+  background-color: var(--primary-hover);
+  box-shadow: var(--button-hover-shadow);
+}
+
+.cta .secondary-btn {
+  background-color: var(--background-primary);
+  color: var(--primary-color);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--button-shadow);
+  transition: background-color 0.2s, box-shadow 0.2s;
+}
+
+.cta .secondary-btn:hover {
+  background-color: #f9fafb;
+  box-shadow: var(--button-hover-shadow);
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 1.5rem;
+  margin-top: 3rem;
+  max-width: 64rem;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .features {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .features {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.features a {
+  display: block;
+  padding: 1.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 0.75rem;
+  background-color: var(--background-primary);
+  text-decoration: none;
+  transition: box-shadow 0.2s, transform 0.2s;
+}
+
+.features a:hover {
+  box-shadow: var(--button-hover-shadow);
+  transform: translateY(-0.25rem);
+}
+
+.features h3 {
+  margin-bottom: 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.features p {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+}