revine 0.9.1 → 1.0.2

package/src/commands/createProject.ts

@@ -12,6 +12,46 @@ import { logError, logInfo } from "../utils/logger.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+const GITIGNORE_CONTENT = `# Dependencies
+node_modules/
+dist/
+dist-ssr/
+
+# Vite cache
+.vite/
+*.local
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor/IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS metadata
+.DS_Store
+Thumbs.db
+
+# TypeScript build info
+*.tsbuildinfo
+
+# Optional
+.cache/
+.tmp/
+.sass-cache/
+`;
+
 export async function createProject(
   projectName: string,
   options: { force?: boolean }
@@ -23,13 +63,16 @@ export async function createProject(
 
   try {
     logInfo(`Creating project in ${projectDir}...`);
-    
+
     // Ensure the project directory exists
     await fs.ensureDir(projectDir);
-    
+
     // This copies everything, including hidden directories like .revine
     await copyTemplate(templateDir, projectDir, options.force);
 
+    // Explicitly write .gitignore because npm strips it from published tarballs
+    await fs.writeFile(path.join(projectDir, ".gitignore"), GITIGNORE_CONTENT);
+
     // Derive final project name
     const finalProjectName = isCurrentDir
       ? path.basename(projectDir)
@@ -37,28 +80,31 @@ export async function createProject(
 
     // Check if package.json exists after template copy
     const packageJsonPath = path.join(projectDir, "package.json");
-    
+
     // Create basic package.json if it doesn't exist
-    if (!await fs.pathExists(packageJsonPath)) {
+    if (!(await fs.pathExists(packageJsonPath))) {
       const basicPackageJson = {
         name: finalProjectName,
         version: "0.1.0",
         private: true,
-        type: "module"
+        type: "module",
       };
       await fs.writeJSON(packageJsonPath, basicPackageJson, { spaces: 2 });
     }
-    
+
     // Update package.json with the correct details
     const useTailwind = await askForTailwindSetup();
     await updatePackageJson(packageJsonPath, finalProjectName, { useTailwind });
 
     // Check if README exists, create it if it doesn't
     const readmePath = path.join(projectDir, "README.md");
-    if (!await fs.pathExists(readmePath)) {
-      await fs.writeFile(readmePath, `# ${finalProjectName}\n\nCreated with Revine`);
+    if (!(await fs.pathExists(readmePath))) {
+      await fs.writeFile(
+        readmePath,
+        `# ${finalProjectName}\n\nCreated with Revine`
+      );
     }
-    
+
     // Update README with the project name
     await updateReadme(readmePath, finalProjectName);
 

package/src/components/Link.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import {
+  Link as RouterLink,
+  type LinkProps as RouterLinkProps,
+} from "react-router-dom";
+
+export interface LinkProps extends Omit<RouterLinkProps, "to"> {
+  href: string;
+  children?: ReactNode;
+}
+
+export function Link({ href, children, ...rest }: LinkProps) {
+  return (
+    <RouterLink to={href} {...rest}>
+      {children}
+    </RouterLink>
+  );
+}

package/src/components/NavLink.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import {
+  NavLink as RouterNavLink,
+  type NavLinkProps as RouterNavLinkProps,
+} from "react-router-dom";
+
+export interface NavLinkProps extends Omit<RouterNavLinkProps, "to"> {
+  href: string;
+  children?: ReactNode;
+}
+
+export function NavLink({ href, children, ...rest }: NavLinkProps) {
+  return (
+    <RouterNavLink to={href} {...rest}>
+      {children}
+    </RouterNavLink>
+  );
+}

package/src/index.ts

@@ -1,16 +1,18 @@
 #!/usr/bin/env node
 import { Command } from "commander";
-import { createProject } from "./commands/createProject.js";
-import { spawn } from "child_process";
+import { readFileSync } from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
+import { createProject } from "./commands/createProject.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+const pkgPath = path.resolve(__dirname, "../package.json");
+const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+
 const program = new Command();
 
-// Main command handler for direct project creation
 const handleProjectCreation = async (
   projectName: string,
   options: { force?: boolean },
@@ -18,44 +20,52 @@ const handleProjectCreation = async (
   await createProject(projectName, options);
 };
 
-// Helper to run vite with internal config
-const runViteCommand = (command: string) => {
-  // Path to the compiled vite.config.js in dist
+const runViteCommand = async (command: string) => {
   const configPath = path.resolve(__dirname, "runtime/bundler/vite.config.js");
 
-  const args = [command, "--config", configPath];
-  if (command === "dev") {
-    // Vite dev doesn't need 'dev' argument, just calling vite is enough
-    args.shift();
-  }
+  // Set the config path as env variable — vite reads VITE_CONFIG_FILE
+  process.env.VITE_CONFIG_PATH = configPath;
 
-  spawn("npx", ["vite", ...args], {
-    stdio: "inherit",
-    shell: true,
-  });
-};
+  // Dynamically import vite's programmatic API
+  const vitePath = path.resolve(
+    process.cwd(),
+    "node_modules/vite/dist/node/index.js",
+  );
+  const vite = await import(vitePath);
 
-// Main command handler for direct project creation with command check
-const handleRootAction = async (
-  projectName: string | undefined,
-  options: { force?: boolean },
-) => {
-  const knownCommands = ["create", "dev", "build", "preview"];
-  if (projectName && !knownCommands.includes(projectName)) {
-    await handleProjectCreation(projectName, options);
-  } else if (!projectName) {
-    program.help();
+  // Load the revine config
+  const { generateRevineViteConfig } = await import(
+    path.resolve(__dirname, "runtime/bundler/generateConfig.js")
+  );
+  const config = await generateRevineViteConfig();
+
+  if (command === "dev") {
+    const server = await vite.createServer({
+      ...config,
+      configFile: false, // we pass config directly, no file needed
+    });
+    await server.listen();
+    server.printUrls();
+  } else if (command === "build") {
+    await vite.build({
+      ...config,
+      configFile: false,
+    });
+  } else if (command === "preview") {
+    const server = await vite.preview({
+      ...config,
+      configFile: false,
+    });
+    server.printUrls();
   }
 };
 
-// Root command
+// Root command — handles: npx revine <project-name>
 program
-  .version("0.8.0")
+  .version(pkg.version)
   .argument("[project-name/command]")
   .option("-f, --force", "Force creation in non-empty directory")
   .action(async (arg: string | undefined, options: { force?: boolean }) => {
-    // If it's a known command, Commander will handle it in the subcommand action.
-    // We only handle it here if it's NOT a known command.
     const knownCommands = ["create", "dev", "build", "preview"];
     if (arg && !knownCommands.includes(arg)) {
       await handleProjectCreation(arg, options);
@@ -64,7 +74,7 @@ program
     }
   });
 
-// Create subcommand (npx revine create my-app)
+// npx revine create <project-name>
 program
   .command("create")
   .argument("<project-name>")

package/src/runtime/bundler/defaults/vite.ts

@@ -1,18 +1,24 @@
 import react from "@vitejs/plugin-react";
-import { revineLoggerPlugin } from "../viteLoggerPlugin.js";
 import { revinePlugin } from "../revinePlugin.js";
+import { revineLoggerPlugin } from "../viteLoggerPlugin.js";
 
 export const defaultViteConfig = {
   plugins: [react(), revinePlugin(), revineLoggerPlugin()],
   logLevel: "silent",
   server: {
     clearScreen: false,
-    open: true,
+    open: false,
     port: 3000,
     host: true,
   },
   build: {
     outDir: "build",
     emptyOutDir: true,
+    rollupOptions: {
+      external: ["revine"],
+    },
+  },
+  optimizeDeps: {
+    exclude: ["revine"],
   },
 };

package/src/runtime/bundler/revinePlugin.ts

@@ -1,16 +1,9 @@
 const VIRTUAL_ROUTING_ID = "\0revine:routing";
 
-/**
- * The Revine Vite plugin.
- *
- * Provides a virtual module for `revine/routing` so that:
- *  - `import.meta.glob` is resolved by Vite in the *project* context (not node_modules)
- *  - React runtime is resolved from the project's own node_modules
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function revinePlugin(): any {
   return {
     name: "revine",
+    enforce: "pre",
 
     resolveId(id: string) {
       if (id === "revine/routing") {
@@ -18,44 +11,94 @@ export function revinePlugin(): any {
       }
     },
 
-    // Return the routing source as a virtual module.
-    // Because it's virtual (not inside node_modules), Vite processes
-    // import.meta.glob and all imports normally in the project context.
     load(id: string) {
       if (id === VIRTUAL_ROUTING_ID) {
         return `
 import { createBrowserRouter } from "react-router-dom";
 import { lazy, Suspense, createElement } from "react";
 
-// Eagerly load NotFound from the project's src directory.
 const notFoundModules = import.meta.glob("/src/NotFound.tsx", { eager: true });
 const NotFoundComponent = Object.values(notFoundModules)[0]?.default;
 
-// Lazily load all page components under /src/pages.
 const pages = import.meta.glob("/src/pages/**/*.tsx");
+const layoutModules = import.meta.glob("/src/pages/**/layout.tsx", { eager: true });
+const loadingModules = import.meta.glob("/src/pages/**/loading.tsx", { eager: true });
 
-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 = "";
+function getLayoutsForPath(filePath) {
+  const parts = filePath.split("/");
+  parts.pop();
+  const layouts = [];
+  const accumulated = [];
+  for (const part of parts) {
+    accumulated.push(part);
+    const key = accumulated.join("/") + "/layout.tsx";
+    if (layoutModules[key] && layoutModules[key].default) {
+      layouts.push(layoutModules[key].default);
+    }
+  }
+  return layouts;
+}
+
+function getLoadingForPath(filePath) {
+  const parts = filePath.split("/");
+  parts.pop();
+  while (parts.length >= 2) {
+    const key = parts.join("/") + "/loading.tsx";
+    if (loadingModules[key] && loadingModules[key].default) {
+      return loadingModules[key].default;
+    }
+    parts.pop();
+  }
+  return null;
+}
+
+function wrapWithLayouts(element, layouts) {
+  return layouts.reduceRight((wrapped, Layout) => {
+    return createElement(Layout, null, wrapped);
+  }, element);
+}
+
+function toRoutePath(filePath) {
+  let p = filePath;
+  p = p.replace(/[\\\\]/g, "/");
+  p = p.replace(/.*[/]pages[/]/, "");
+  p = p.replace(/[.]tsx$/i, "");
+  p = p.replace(/[/]index$/, "");
+  p = p.replace(/[(][^)]+[)][/]/g, "");
+  p = p.replace(/[[]([\\w]+)[\\]]/g, ":$1");
+  if (p === "index" || p === "") return "/";
+  return "/" + p;
+}
+
+const pageEntries = Object.entries(pages).filter(([filePath]) => {
+  if (filePath.endsWith("/layout.tsx")) return false;
+  if (filePath.endsWith("/loading.tsx")) return false;
+  const segments = filePath.split("/");
+  return !segments.some((s) => s.startsWith("_"));
+});
 
-  const routePath = cleaned === "" ? "/" : \`/\${cleaned}\`;
+const routes = pageEntries.map(([filePath, component]) => {
+  const routePath = toRoutePath(filePath);
   const Component = lazy(component);
+  const layouts = getLayoutsForPath(filePath);
+  const Loading = getLoadingForPath(filePath);
+
+  const fallback = Loading
+    ? createElement(Loading)
+    : createElement("div", null, "Loading\\u2026");
+
+  const pageElement = createElement(
+    Suspense,
+    { fallback },
+    createElement(Component)
+  );
 
   return {
     path: routePath,
-    element: createElement(
-      Suspense,
-      { fallback: createElement("div", null, "Loading\u2026") },
-      createElement(Component)
-    ),
+    element: layouts.length > 0 ? wrapWithLayouts(pageElement, layouts) : pageElement,
   };
 });
 
-// 404 fallback
 routes.push({
   path: "*",
   element: NotFoundComponent
@@ -68,4 +111,4 @@ export const router = createBrowserRouter(routes);
       }
     },
   };
-}
+}

package/src/runtime/bundler/viteLoggerPlugin.ts

@@ -1,5 +1,5 @@
-import type { Plugin, ViteDevServer } from "vite";
 import chalk from "chalk";
+import type { Plugin, ViteDevServer } from "vite";
 
 export function revineLoggerPlugin(): Plugin {
   //  custom chalk instance pointing to the indigo color
@@ -10,14 +10,15 @@ export function revineLoggerPlugin(): Plugin {
     configureServer(server: ViteDevServer) {
       server.httpServer?.once("listening", () => {
         const protocol = server.config.server.https ? "https" : "http";
-        const host = server.resolvedUrls?.local[0] || "localhost:3000";
+        const localUrl =
+          server.resolvedUrls?.local[0] || `http://localhost:3000`;
         const { network = [] } = server.resolvedUrls ?? {};
 
         // Use the 'indigo' instance in place of 'chalk.cyan'
         console.log(indigo("─────────────────────────────────────────────"));
         console.log(indigo.bold("🚀 Revine Dev Server is now running!"));
         console.log(indigo("─────────────────────────────────────────────"));
-        console.log(indigo(`Local:   ${chalk.green(`${protocol}://${host}`)}`));
+        console.log(indigo(`Local:   ${chalk.green(localUrl)}`));
 
         if (network.length) {
           network.forEach((url: string) => {

package/src/runtime/defineConfig.ts

@@ -0,0 +1,9 @@
+import type { UserConfig } from "vite";
+
+export interface RevineConfig {
+  vite?: UserConfig;
+}
+
+export function defineConfig(config: RevineConfig): RevineConfig {
+  return config;
+}

package/src/runtime/routing.ts

@@ -0,0 +1,4 @@
+// This module is intentionally empty.
+// `revine/routing` is a virtual module resolved by the Revine Vite plugin at build time.
+// The actual router is injected via the plugin's resolveId/load hooks.
+export {};

package/src/runtime/types.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+
+export interface LayoutProps {
+  children: ReactNode;
+}

package/src/setup/dependencies.ts

@@ -8,19 +8,11 @@ export async function installDependencies(projectDir: string): Promise<void> {
   const installResult = spawnSync(npmCmd, ["install"], {
     stdio: "inherit",
     cwd: projectDir,
-    shell: true,
+    shell: false,
   });
   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/template/package.json

@@ -10,8 +10,7 @@
   "dependencies": {
     "revine": "latest",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.45",

package/template/revine.config.ts

@@ -1,4 +1,6 @@
-export default {
+import { defineConfig } from "revine";
+
+export default defineConfig({
   vite: {
     server: {
       open: false,
@@ -10,4 +12,4 @@ export default {
       emptyOutDir: true,
     },
   },
-};
+});

package/template/src/pages/index.tsx

@@ -1,3 +1,5 @@
+import { Link } from "revine";
+
 export default function HomePage() {
   return (
     <main>
@@ -11,51 +13,51 @@ export default function HomePage() {
 
       {/* CTA Buttons */}
       <div className="cta">
-        <a href="#get-started" className="primary-btn">
+        <Link href="#get-started" className="primary-btn">
           Get Started
-        </a>
-        <a href="#docs" className="secondary-btn">
+        </Link>
+        <Link href="#docs" className="secondary-btn">
           Read Docs
-        </a>
+        </Link>
       </div>
 
       {/* Features Section */}
       <div className="features">
-        <a href="#fast">
+        <Link href="#fast">
           <h3>Lightning Fast</h3>
           <p>Built on Vite for ultra-fast development and instant HMR.</p>
-        </a>
-        <a href="#routing">
+        </Link>
+        <Link 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">
+        </Link>
+        <Link 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">
+        </Link>
+        <Link href="#dev-experience">
           <h3>Great DX</h3>
           <p>Minimal config, fast builds, custom logging, and more.</p>
-        </a>
-        <a href="#abstract">
+        </Link>
+        <Link href="#abstract">
           <h3>Abstracted Internals</h3>
           <p>
             A .revine folder houses the complex Vite config. Keep your root
             clean.
           </p>
-        </a>
-        <a href="#customize">
+        </Link>
+        <Link href="#customize">
           <h3>Fully Customizable</h3>
           <p>
             Easily extend or override settings in <code>revine.config.ts</code>.
           </p>
-        </a>
+        </Link>
       </div>
     </main>
   );

package/template/src/root.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { RouterProvider } from "react-router-dom";
+import { RouterProvider } from "revine";
 import { router } from "revine/routing";
 import "./styles/global.css";
 
@@ -11,4 +11,4 @@ root.render(
   <React.StrictMode>
     <RouterProvider router={router} />
   </React.StrictMode>,
-);
+);

package/tsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "target": "ES2020",
     "module": "ES2020",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
+    "rootDir": "src",
     "outDir": "dist",
     "strict": true,
     "esModuleInterop": true,
@@ -11,7 +12,8 @@
     "jsx": "react-jsx",
     "declaration": true,
     "declarationMap": true,
-    "emitDeclarationOnly": false
+    "emitDeclarationOnly": false,
+    "resolveJsonModule": true
   },
   "include": ["src/**/*"],
   "exclude": ["src/template/**/*"]

package/dist/runtime/routing/fileBased.d.ts

@@ -1,2 +0,0 @@
-export declare const router: import("@remix-run/router").Router;
-//# sourceMappingURL=fileBased.d.ts.map

package/dist/runtime/routing/fileBased.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fileBased.d.ts","sourceRoot":"","sources":["../../../src/runtime/routing/fileBased.tsx"],"names":[],"mappings":"AA6CA,eAAO,MAAM,MAAM,oCAA8B,CAAC"}

package/dist/runtime/routing/fileBased.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createBrowserRouter } from "react-router-dom";
-import { lazy, Suspense } 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);
-    return {
-        path: routePath,
-        element: (_jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(Component, {}) })),
-    };
-});
-// fallback route for 404s
-routes.push({
-    path: "*",
-    element: _jsx(NotFound, {}),
-});
-export const router = createBrowserRouter(routes);