revine 0.8.0 → 0.9.0

package/{template/.revine → src/runtime}/routing/fileBased.tsx

@@ -1,44 +1,46 @@
-import { createBrowserRouter } from "react-router-dom";
-import { lazy, Suspense, ComponentType } from "react";
-import NotFound from "../../src/NotFound";
-
-const pages = import.meta.glob("../../src/pages/**/*.tsx");
-
-const routes = Object.entries(pages).map(([filePath, component]) => {
-  let cleaned = filePath.replace(/\\/g, "/");
-
-  cleaned = cleaned.replace(/.*\/pages\//, "");
-
-  cleaned = cleaned.replace(/\.tsx$/i, "");
-
-  cleaned = cleaned.replace(/\/index$/, "");
-
-  cleaned = cleaned.replace(/\[(\w+)\]/g, ":$1");
-
-  if (cleaned === "index") {
-    cleaned = "";
-  }
-
-  const routePath = cleaned === "" ? "/" : `/${cleaned}`;
-
-  const Component = lazy(
-    component as unknown as () => Promise<{ default: ComponentType }>
-  );
-
-  return {
-    path: routePath,
-    element: (
-      <Suspense fallback={<div>Loading...</div>}>
-        <Component />
-      </Suspense>
-    ),
-  };
-});
-
-// fallback route for 404s
-routes.push({
-  path: "*",
-  element: <NotFound />,
-});
-
-export const router = createBrowserRouter(routes);
+import { createBrowserRouter } from "react-router-dom";
+import { lazy, Suspense, ComponentType } from "react";
+// @ts-ignore
+import NotFound from "/src/NotFound";
+
+// @ts-ignore
+const pages = import.meta.glob("/src/pages/**/*.tsx");
+
+const routes = Object.entries(pages).map(([filePath, component]) => {
+  let cleaned = filePath.replace(/\\/g, "/");
+
+  cleaned = cleaned.replace(/.*\/pages\//, "");
+
+  cleaned = cleaned.replace(/\.tsx$/i, "");
+
+  cleaned = cleaned.replace(/\/index$/, "");
+
+  cleaned = cleaned.replace(/\[(\w+)\]/g, ":$1");
+
+  if (cleaned === "index") {
+    cleaned = "";
+  }
+
+  const routePath = cleaned === "" ? "/" : `/${cleaned}`;
+
+  const Component = lazy(
+    component as unknown as () => Promise<{ default: ComponentType }>
+  );
+
+  return {
+    path: routePath,
+    element: (
+      <Suspense fallback={<div>Loading...</div>}>
+        <Component />
+      </Suspense>
+    ),
+  };
+});
+
+// fallback route for 404s
+routes.push({
+  path: "*",
+  element: <NotFound />,
+});
+
+export const router = createBrowserRouter(routes);

package/src/setup/dependencies.ts

@@ -1,16 +1,26 @@
-import { spawnSync } from "child_process";
-import { logError, logInfo } from "../utils/logger.js";
-
-export async function installDependencies(projectDir: string): Promise<void> {
-  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);
-  }
-}
+import { spawnSync } from "child_process";
+import { logError, logInfo } from "../utils/logger.js";
+
+export async function installDependencies(projectDir: string): Promise<void> {
+  const npmCmd = process.platform === "win32" ? "npm.cmd" : "npm";
+
+  // Step 1: npm install
+  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);
+  }
+
+  // Step 2: Link local revine if available (replaces npm version with local build)
+  // This is a no-op if revine hasn't been globally linked via `npm link` in the revine repo.
+  spawnSync(npmCmd, ["link", "revine"], {
+    stdio: "pipe", // suppress output — silently skip if not linked
+    cwd: projectDir,
+    shell: true,
+  });
+}

package/src/setup/tailwind.ts

@@ -1,163 +1,151 @@
-import path from "path";
-import fs from "fs-extra";
-import { updateViteConfig } from "../config/vite.js";
-import { logInfo } from "../utils/logger.js";
-
-export async function setupTailwind(projectDir: string) {
-  logInfo("\nSetting up Tailwind CSS...");
-
-  // Point to the hidden Vite config
-  const viteConfigPath = path.join(
-    projectDir,
-    ".revine",
-    "bundler",
-    "defaults",
-    "vite.ts"
-  );
-
-  // Use existing updateViteConfig logic on this new path
-  await updateViteConfig(viteConfigPath);
-
-  // 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);
-
-  // Replace the NotFound.tsx content
-  const notFoundFile = path.join(projectDir, "src", "NotFound.tsx");
-  const notFoundContent = `
-   export default function NotFound() {
-     return (
-       <div className="min-h-screen flex items-center justify-center bg-gray-100">
-         <div className="text-center space-y-4">
-           <h1 className="text-6xl font-bold text-gray-900">404</h1>
-           <p className="text-xl text-gray-600">Page Not Found</p>
-           <a
-             href="/"
-             className="mt-6 inline-block bg-indigo-600 text-white font-semibold px-6 py-3 rounded-md shadow hover:bg-indigo-700"
-           >
-             Go Back Home
-           </a>
-         </div>
-       </div>
-     );
-   }
-   `;
-  await fs.writeFile(notFoundFile, notFoundContent);
-}
+import path from "path";
+import fs from "fs-extra";
+import { updateViteConfig } from "../config/vite.js";
+import { logInfo } from "../utils/logger.js";
+
+export async function setupTailwind(projectDir: string) {
+  logInfo("\nSetting up Tailwind CSS...");
+
+  // 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);
+
+  // Replace the NotFound.tsx content
+  const notFoundFile = path.join(projectDir, "src", "NotFound.tsx");
+  const notFoundContent = `
+   export default function NotFound() {
+     return (
+       <div className="min-h-screen flex items-center justify-center bg-gray-100">
+         <div className="text-center space-y-4">
+           <h1 className="text-6xl font-bold text-gray-900">404</h1>
+           <p className="text-xl text-gray-600">Page Not Found</p>
+           <a
+             href="/"
+             className="mt-6 inline-block bg-indigo-600 text-white font-semibold px-6 py-3 rounded-md shadow hover:bg-indigo-700"
+           >
+             Go Back Home
+           </a>
+         </div>
+       </div>
+     );
+   }
+   `;
+  await fs.writeFile(notFoundFile, notFoundContent);
+}

package/src/utils/file.ts

@@ -1,9 +1,9 @@
-import fs from "fs-extra";
-
-export async function copyTemplate(
-  templateDir: string,
-  destinationDir: string,
-  force?: boolean
-): Promise<void> {
-  await fs.copy(templateDir, destinationDir, { overwrite: force });
-}
+import fs from "fs-extra";
+
+export async function copyTemplate(
+  templateDir: string,
+  destinationDir: string,
+  force?: boolean
+): Promise<void> {
+  await fs.copy(templateDir, destinationDir, { overwrite: force });
+}

package/src/utils/logger.ts

@@ -1,9 +1,9 @@
-import chalk from "chalk";
-
-export function logInfo(message: string) {
-  console.log(chalk.cyan(message));
-}
-
-export function logError(message: string, error?: any) {
-  console.error(chalk.red(message), error || "");
-}
+import chalk from "chalk";
+
+export function logInfo(message: string) {
+  console.log(chalk.cyan(message));
+}
+
+export function logError(message: string, error?: any) {
+  console.error(chalk.red(message), error || "");
+}

package/template/README.md

@@ -1,63 +1,63 @@
-# %PROJECT_NAME%
-
-Welcome to your new Revine project!
-
-## Getting Started
-
-### 1. Install dependencies
-```bash
-npm install
-```
-
-### 2. Start development server
-```bash
-npm run dev
-```
-
-## Scripts
-- npm run dev - Start dev server
-
-- npm run build - Production build
-
-- npm run preview - Preview production build
-
-## Project Structure
-```bash
-src/
-├── pages/         # Application routes
-│   └── index.tsx  # Home page
-├── App.tsx        # Router configuration
-└── main.tsx       # Application entry point
-```
-
-## Customization
-### Add a New Page
-Create new .tsx file in src/pages
-
-```tsx
-// src/pages/about.tsx
-export default function About() {
-  return <h1>About Page</h1>
-}
-```
-Access at /about
-
-### Modify Vite Config
-Edit vite.config.ts:
-
-```typescript
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 8080 // Custom port
-  }
-});
-```
-
-## Deployment
-Build for production:
-
-```bash
-npm run build
-```
+# %PROJECT_NAME%
+
+Welcome to your new Revine project!
+
+## Getting Started
+
+### 1. Install dependencies
+```bash
+npm install
+```
+
+### 2. Start development server
+```bash
+npm run dev
+```
+
+## Scripts
+- npm run dev - Start dev server
+
+- npm run build - Production build
+
+- npm run preview - Preview production build
+
+## Project Structure
+```bash
+src/
+├── pages/         # Application routes
+│   └── index.tsx  # Home page
+├── App.tsx        # Router configuration
+└── main.tsx       # Application entry point
+```
+
+## Customization
+### Add a New Page
+Create new .tsx file in src/pages
+
+```tsx
+// src/pages/about.tsx
+export default function About() {
+  return <h1>About Page</h1>
+}
+```
+Access at /about
+
+### Modify Vite Config
+Edit vite.config.ts:
+
+```typescript
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 8080 // Custom port
+  }
+});
+```
+
+## Deployment
+Build for production:
+
+```bash
+npm run build
+```
 The build artifacts will be in dist/ directory.