vorzelajs 0.0.1

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "vorzelajs",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Batteries-included SolidJS framework with file-based routing, streamed SSR, and server-only boundaries",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vorzela/VorzelaJS.git"
+  },
+  "bin": {
+    "vorzelajs": "bin/vorzelajs.mjs"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js"
+    },
+    "./server": {
+      "types": "./dist/runtime/server.d.ts",
+      "import": "./dist/runtime/server.js"
+    },
+    "./vite": {
+      "types": "./dist/vite/index.d.ts",
+      "import": "./dist/vite/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "bin",
+    "templates"
+  ],
+  "scripts": {
+    "clean:dist": "node --input-type=module -e \"import fs from 'node:fs'; fs.rmSync('dist', { recursive: true, force: true })\"",
+    "generate:routes": "node --import tsx scripts/generate-routes.ts",
+    "dev": "npm run generate:routes && node --import tsx server.ts",
+    "build:framework": "npm run clean:dist && tsc -p tsconfig.build.json",
+    "build": "npm run generate:routes && npm run build:client && npm run build:server",
+    "build:client": "vite build",
+    "build:server": "vite build --ssr src/entry-server.tsx --outDir dist/server",
+    "prepack": "npm run build:framework",
+    "serve": "NODE_ENV=production node --import tsx server.ts",
+    "check": "npm run generate:routes && tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.19.4",
+    "error-stack-parser": "^2.1.4",
+    "hono": "^4.10.1",
+    "tsx": "^4.21.0",
+    "vite-plugin-solid": "^2.11.12"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.8",
+    "vite": "^8"
+  },
+  "optionalDependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "tailwindcss": "^4.2.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@fontsource/inter": "^5.2.8",
+    "@types/error-stack-parser": "^1.3.18",
+    "@types/node": "^25.5.2",
+    "eslint": "^10.2.0",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "globals": "^17.4.0",
+    "solid-js": "^1.9.11",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.1",
+    "vite": "^8.0.5"
+  }
+}

package/templates/bare/README.md

@@ -0,0 +1,22 @@
+# My App
+
+Built with [VorzelaJs](https://github.com/vorzela/VorzelaJS).
+
+## Getting Started
+
+```bash
+npm run dev     # Start dev server
+npm run build   # Build for production
+npm run serve   # Serve production build
+```
+
+## Project Structure
+
+```
+src/
+├── routes/         # File-based routes
+│   ├── __root.tsx  # Root layout
+│   └── index.tsx   # Home page (/)
+├── components/     # Reusable components
+└── styles.css      # Global styles
+```

package/templates/bare/src/components/counter-card.tsx

@@ -0,0 +1,19 @@
+import { createSignal } from 'solid-js'
+
+export function CounterCard() {
+  const [count, setCount] = createSignal(0)
+
+  return (
+    <div class="counter-card">
+      <p class="counter-value">{count()}</p>
+      <div class="counter-actions">
+        <button onClick={() => setCount((c) => c - 1)} class="counter-btn">
+          −
+        </button>
+        <button onClick={() => setCount((c) => c + 1)} class="counter-btn">
+          +
+        </button>
+      </div>
+    </div>
+  )
+}

package/templates/bare/src/routes/__root.tsx

@@ -0,0 +1,24 @@
+import { createRootRoute, Outlet } from 'vorzelajs'
+
+export const Route = createRootRoute({
+  component: RootLayout,
+  head: () => ({
+    meta: [
+      { name: 'description', content: 'Built with VorzelaJs' },
+    ],
+  }),
+  notFoundComponent: () => (
+    <div class="not-found">
+      <h1>404</h1>
+      <p>Page not found</p>
+    </div>
+  ),
+})
+
+function RootLayout() {
+  return (
+    <div class="app">
+      <Outlet />
+    </div>
+  )
+}

package/templates/bare/src/routes/index.tsx

@@ -0,0 +1,36 @@
+import { createFileRoute } from 'vorzelajs'
+import { CounterCard } from '~/components/counter-card'
+
+export const Route = createFileRoute('/')({
+  component: HomePage,
+  head: () => ({
+    title: 'VorzelaJs',
+  }),
+})
+
+function HomePage() {
+  return (
+    <main class="hero">
+      <div class="hero-content">
+        <h1 class="hero-title">VorzelaJs</h1>
+        <p class="hero-description">
+          A batteries-included SolidJS framework with file-based routing, streamed SSR, and server-only boundaries.
+        </p>
+
+        <CounterCard />
+
+        <nav class="hero-links">
+          <a href="https://github.com/vorzela/VorzelaJS" target="_blank" rel="noopener noreferrer" class="link">
+            GitHub
+          </a>
+          <a href="https://github.com/vorzela/VorzelaJS#readme" target="_blank" rel="noopener noreferrer" class="link">
+            Documentation
+          </a>
+          <a href="https://www.npmjs.com/package/vorzelajs" target="_blank" rel="noopener noreferrer" class="link">
+            npm
+          </a>
+        </nav>
+      </div>
+    </main>
+  )
+}

package/templates/base/gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+src/routeTree.gen.ts
+src/routeHydration.gen.ts

package/templates/base/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#1a1a2e"/>
+  <path d="M8 10l8-4 8 4v12l-8 4-8-4V10z" stroke="#7c3aed" stroke-width="1.5" fill="none"/>
+  <path d="M16 6v20M8 10l8 6 8-6" stroke="#7c3aed" stroke-width="1.5" fill="none" opacity="0.5"/>
+</svg>

package/templates/base/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/templates/modern/README.md

@@ -0,0 +1,28 @@
+# My App
+
+Built with [VorzelaJs](https://github.com/vorzela/VorzelaJS).
+
+## Getting Started
+
+```bash
+npm run dev     # Start dev server
+npm run build   # Build for production
+npm run serve   # Serve production build
+```
+
+## Project Structure
+
+```
+src/
+├── routes/         # File-based routes
+│   ├── __root.tsx  # Root layout
+│   ├── index.tsx   # Home page (/)
+│   └── about.tsx   # About page (/about)
+├── components/     # Reusable components
+└── styles.css      # Global styles
+```
+
+## Learn More
+
+- [VorzelaJs Documentation](https://github.com/vorzela/VorzelaJS#readme)
+- [SolidJS](https://www.solidjs.com/)

package/templates/modern/src/components/counter-card.tsx

@@ -0,0 +1,19 @@
+import { createSignal } from 'solid-js'
+
+export function CounterCard() {
+  const [count, setCount] = createSignal(0)
+
+  return (
+    <div class="counter-card">
+      <p class="counter-value">{count()}</p>
+      <div class="counter-actions">
+        <button onClick={() => setCount((c) => c - 1)} class="counter-btn">
+          −
+        </button>
+        <button onClick={() => setCount((c) => c + 1)} class="counter-btn">
+          +
+        </button>
+      </div>
+    </div>
+  )
+}

package/templates/modern/src/routes/__root.tsx

@@ -0,0 +1,42 @@
+import { createRootRoute, Link, Outlet } from 'vorzelajs'
+
+export const Route = createRootRoute({
+  component: RootLayout,
+  head: () => ({
+    meta: [
+      { name: 'description', content: 'Built with VorzelaJs' },
+    ],
+  }),
+  notFoundComponent: () => (
+    <div class="not-found">
+      <h1>404</h1>
+      <p>Page not found</p>
+      <Link to="/" class="link">
+        Go home
+      </Link>
+    </div>
+  ),
+})
+
+function RootLayout() {
+  return (
+    <div class="app">
+      <header class="header">
+        <nav class="nav">
+          <Link to="/" class="nav-brand">
+            VorzelaJs
+          </Link>
+          <div class="nav-links">
+            <Link to="/" class="nav-link">
+              Home
+            </Link>
+            <Link to="/about" class="nav-link">
+              About
+            </Link>
+          </div>
+        </nav>
+      </header>
+      <Outlet />
+    </div>
+  )
+}

package/templates/modern/src/routes/about.tsx

@@ -0,0 +1,55 @@
+import { createFileRoute } from 'vorzelajs'
+
+export const Route = createFileRoute('/about')({
+  component: AboutPage,
+  head: () => ({
+    title: 'About — VorzelaJs',
+  }),
+})
+
+function AboutPage() {
+  return (
+    <main class="page">
+      <div class="page-content">
+        <h1>About VorzelaJs</h1>
+        <p>
+          VorzelaJs is a batteries-included SolidJS framework. Here's how your project is structured:
+        </p>
+
+        <section class="guide-section">
+          <h2>Project Structure</h2>
+          <pre class="code-block">{`src/
+├── routes/         # File-based routes
+│   ├── __root.tsx  # Root layout (wraps all pages)
+│   ├── index.tsx   # Home page (/)
+│   └── about.tsx   # This page (/about)
+├── components/     # Reusable components
+└── styles.css      # Global styles`}</pre>
+        </section>
+
+        <section class="guide-section">
+          <h2>Routes</h2>
+          <p>
+            Each file in <code>src/routes/</code> becomes a route. Use <code>createFileRoute</code> to define
+            loaders, head tags, and components. Files prefixed with <code>_</code> are pathless layout routes.
+          </p>
+        </section>
+
+        <section class="guide-section">
+          <h2>Server Boundaries</h2>
+          <p>
+            Name files with <code>.server.ts</code> to keep code server-only. Route <code>loader</code> and{' '}
+            <code>beforeLoad</code> functions run exclusively on the server and are stripped from the client bundle.
+          </p>
+        </section>
+
+        <section class="guide-section">
+          <h2>Commands</h2>
+          <pre class="code-block">{`npm run dev     # Start dev server
+npm run build   # Build for production
+npm run serve   # Serve production build`}</pre>
+        </section>
+      </div>
+    </main>
+  )
+}

package/templates/modern/src/routes/index.tsx

@@ -0,0 +1,51 @@
+import { createFileRoute } from 'vorzelajs'
+import { CounterCard } from '~/components/counter-card'
+
+export const Route = createFileRoute('/')({
+  component: HomePage,
+  head: () => ({
+    title: 'VorzelaJs',
+  }),
+})
+
+function HomePage() {
+  return (
+    <main class="hero">
+      <div class="hero-content">
+        <h1 class="hero-title">VorzelaJs</h1>
+        <p class="hero-description">
+          A batteries-included SolidJS framework with file-based routing, streamed SSR, and server-only boundaries.
+        </p>
+
+        <CounterCard />
+
+        <div class="features">
+          <div class="feature-card">
+            <h3>File-Based Routing</h3>
+            <p>Drop a file in <code>src/routes/</code> and it becomes a route. Automatic code splitting included.</p>
+          </div>
+          <div class="feature-card">
+            <h3>Streamed SSR</h3>
+            <p>Server-rendered HTML streams to the browser with selective hydration per route.</p>
+          </div>
+          <div class="feature-card">
+            <h3>Server Boundaries</h3>
+            <p>Use <code>.server</code> files and route loaders to keep secrets on the server.</p>
+          </div>
+        </div>
+
+        <nav class="hero-links">
+          <a href="https://github.com/vorzela/VorzelaJS" target="_blank" rel="noopener noreferrer" class="link">
+            GitHub
+          </a>
+          <a href="https://github.com/vorzela/VorzelaJS#readme" target="_blank" rel="noopener noreferrer" class="link">
+            Documentation
+          </a>
+          <a href="https://www.npmjs.com/package/vorzelajs" target="_blank" rel="noopener noreferrer" class="link">
+            npm
+          </a>
+        </nav>
+      </div>
+    </main>
+  )
+}

package/templates/styling/css/styles.css

@@ -0,0 +1,269 @@
+:root {
+  --color-bg: #0a0a0f;
+  --color-surface: #15151e;
+  --color-border: #2a2a3e;
+  --color-text: #e4e4ef;
+  --color-text-muted: #8888a0;
+  --color-accent: #7c3aed;
+  --color-accent-hover: #6d28d9;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-family: var(--font-sans);
+  background: var(--color-bg);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  min-height: 100dvh;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-accent-hover);
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: var(--color-surface);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+
+.app {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  border-bottom: 1px solid var(--color-border);
+  padding: 0.75rem 1.5rem;
+}
+
+.nav {
+  max-width: 64rem;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-brand {
+  font-weight: 700;
+  font-size: 1.125rem;
+  color: var(--color-text);
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.nav-link {
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  transition: color 0.15s;
+}
+
+.nav-link:hover {
+  color: var(--color-text);
+}
+
+.hero {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1.5rem;
+}
+
+.hero-content {
+  max-width: 40rem;
+  text-align: center;
+}
+
+.hero-title {
+  font-size: 3rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, var(--color-accent) 0%, #a78bfa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-description {
+  margin-top: 1rem;
+  font-size: 1.125rem;
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
+.hero-links {
+  margin-top: 2rem;
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.link {
+  color: var(--color-accent);
+  font-weight: 500;
+  transition: color 0.15s;
+}
+
+.link:hover {
+  color: var(--color-accent-hover);
+}
+
+.counter-card {
+  margin-top: 2rem;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.counter-value {
+  font-size: 2.5rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.counter-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.counter-btn {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+  font-size: 1.25rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.counter-btn:hover {
+  background: var(--color-surface);
+  border-color: var(--color-accent);
+}
+
+.features {
+  margin-top: 3rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: 1rem;
+  text-align: left;
+}
+
+.feature-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+}
+
+.feature-card h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.feature-card p {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+}
+
+.page {
+  flex: 1;
+  padding: 3rem 1.5rem;
+}
+
+.page-content {
+  max-width: 48rem;
+  margin: 0 auto;
+}
+
+.page-content h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+
+.page-content p {
+  color: var(--color-text-muted);
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+}
+
+.guide-section {
+  margin-top: 2rem;
+}
+
+.guide-section h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+}
+
+.code-block {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.not-found {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+}
+
+.not-found h1 {
+  font-size: 4rem;
+  font-weight: 800;
+  color: var(--color-text-muted);
+}
+
+.not-found p {
+  color: var(--color-text-muted);
+}