create-rari-app 0.1.4 → 0.1.5

package/dist/index.js

@@ -116,7 +116,6 @@ async function copyTemplate(templatePath, projectPath, options) {
 		"src/components/ServerTime.tsx",
 		"src/pages/index.tsx",
 		"src/pages/about.tsx",
-		"src/pages/examples.tsx",
 		"gitignore"
 	];
 	await mkdir(join(projectPath, "src", "components"), { recursive: true });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-rari-app",
   "type": "module",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Create Runtime Accelerated Rendering Infrastructure (Rari) applications with no build configuration",
   "author": "Ryan Skinner",
   "license": "MIT",

package/templates/default/src/App.tsx

@@ -1,19 +1,61 @@
-import { RouterProvider } from 'rari/client'
-import { routes } from './.rari/routes'
+import { RouterProvider, useRouter } from 'rari/client'
+import { routes } from '../.rari/routes'
+
+function NotFoundPage() {
+  return (
+    <div className="min-h-screen bg-[#0d1117] text-[#f0f6fc] flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4">404 - Page Not Found</h1>
+        <p className="text-gray-400 mb-8">
+          The page you're looking for doesn't exist.
+        </p>
+        <a
+          href="/"
+          className="bg-[#fd7e14] hover:bg-[#e8590c] text-white px-6 py-3 rounded-lg font-semibold transition-colors"
+        >
+          Go Home
+        </a>
+      </div>
+    </div>
+  )
+}
+
+const routerConfig = {
+  notFoundComponent: NotFoundPage,
+  basePath: '',
+  useHash: false,
+  caseSensitive: false,
+}
 
 function App() {
   return (
-    <RouterProvider
-      routes={routes}
-      config={{
-        basePath: '',
-        useHash: false,
-        caseSensitive: false,
-      }}
-    >
-      <div id="app" />
+    <RouterProvider config={routerConfig} routes={routes}>
+      <Routes />
     </RouterProvider>
   )
 }
 
+function Routes() {
+  const { currentRoute } = useRouter()
+
+  if (!currentRoute) {
+    return <NotFoundPage />
+  }
+
+  const Component = currentRoute.route.component
+  const { params, searchParams } = currentRoute
+
+  if (!Component) {
+    return <NotFoundPage />
+  }
+
+  return (
+    <Component
+      params={params}
+      searchParams={searchParams}
+      meta={currentRoute.route.meta}
+    />
+  )
+}
+
 export default App

package/templates/default/src/main.tsx

@@ -1,68 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App'
+import App from './App.tsx'
 import './styles/index.css'
 
 import 'virtual:rsc-integration'
 import 'virtual:rsc-client-components'
 
-export function RouterErrorBoundary({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  const [hasError, setHasError] = React.useState(false)
-  const [error, setError] = React.useState<Error | null>(null)
-
-  React.useEffect(() => {
-    const handleError = (event: ErrorEvent) => {
-      if (
-        event.error?.message?.includes('router')
-        || event.error?.message?.includes('navigation')
-      ) {
-        setHasError(true)
-        setError(event.error)
-      }
-    }
-
-    window.addEventListener('error', handleError)
-    return () => window.removeEventListener('error', handleError)
-  }, [])
-
-  if (hasError) {
-    return (
-      <div className="min-h-screen bg-red-50 flex items-center justify-center p-8">
-        <div className="bg-white rounded-xl p-8 shadow-sm border border-red-200 max-w-2xl">
-          <h1 className="text-2xl font-bold text-red-900 mb-4">Router Error</h1>
-          <p className="text-red-700 mb-4">
-            There was an error with the routing system:
-          </p>
-          <pre className="bg-red-100 p-4 rounded-lg text-sm text-red-800 overflow-auto">
-            {error?.message || 'Unknown router error'}
-          </pre>
-          <button
-            type="button"
-            onClick={() => {
-              setHasError(false)
-              setError(null)
-              window.location.reload()
-            }}
-            className="mt-4 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
-          >
-            Reload Page
-          </button>
-        </div>
-      </div>
-    )
-  }
-
-  return <>{children}</>
-}
-
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <RouterErrorBoundary>
-      <App />
-    </RouterErrorBoundary>
+    <App />
   </React.StrictMode>,
 )

package/templates/default/src/pages/about.tsx

@@ -38,9 +38,9 @@ export default function AboutPage({ params, searchParams }: PageProps) {
               🚀 What is Rari?
             </h2>
             <p className="text-gray-600 mb-4">
-              Rari is a next-generation React framework powered by a custom-built
-              Rust runtime. It provides performance-optimized server-side rendering with
-              seamless client-side hydration.
+              Rari is a next-generation React framework powered by a
+              custom-built Rust runtime. It provides performance-optimized
+              server-side rendering with seamless client-side hydration.
             </p>
             <ul className="space-y-2 text-gray-600">
               <li className="flex items-center">
@@ -165,9 +165,7 @@ export default function AboutPage({ params, searchParams }: PageProps) {
                   />
                 </svg>
               </div>
-              <h3 className="font-semibent text-gray-900 mb-2">
-                Zero Config
-              </h3>
+              <h3 className="font-semibent text-gray-900 mb-2">Zero Config</h3>
               <p className="text-sm text-gray-600">
                 Works out of the box with pre-built binaries
               </p>
@@ -184,7 +182,9 @@ export default function AboutPage({ params, searchParams }: PageProps) {
               <div className="mb-2">
                 <strong>File:</strong>
                 {' '}
-                <code className="bg-gray-200 px-2 py-1 rounded">src/pages/about.tsx</code>
+                <code className="bg-gray-200 px-2 py-1 rounded">
+                  src/pages/about.tsx
+                </code>
               </div>
               <div className="mb-2">
                 <strong>Route:</strong>
@@ -233,14 +233,6 @@ export default function AboutPage({ params, searchParams }: PageProps) {
             </svg>
             Back to Home
           </Link>
-          <div className="mt-4">
-            <Link
-              to="/examples"
-              className="text-blue-600 hover:text-blue-700 transition-colors"
-            >
-              Explore Server Components →
-            </Link>
-          </div>
         </div>
       </div>
     </div>

package/templates/default/src/pages/index.tsx

@@ -43,7 +43,8 @@ export default function HomePage({ params, searchParams }: PageProps) {
               Client Interaction
             </h2>
             <p className="text-gray-600 mb-6">
-              This counter runs in the browser with React's client-side interactivity.
+              This counter runs in the browser with React's client-side
+              interactivity.
             </p>
             <div className="flex items-center gap-4">
               <button
@@ -101,23 +102,6 @@ export default function HomePage({ params, searchParams }: PageProps) {
               <code className="bg-gray-100 px-2 py-1 rounded">/about</code>
             </div>
           </Link>
-
-          <Link
-            to="/examples"
-            className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 hover:shadow-md transition-shadow block"
-          >
-            <h3 className="text-lg font-semibold text-gray-900 mb-3">
-              🧩 Server Components
-            </h3>
-            <p className="text-gray-600 mb-4">
-              Explore React Server Components in action
-            </p>
-            <div className="text-sm text-gray-500">
-              Route:
-              {' '}
-              <code className="bg-gray-100 px-2 py-1 rounded">/examples</code>
-            </div>
-          </Link>
         </div>
 
         <div className="bg-white rounded-xl p-8 shadow-sm border border-gray-200 mb-8">
@@ -151,12 +135,6 @@ export default function HomePage({ params, searchParams }: PageProps) {
                   </div>
                   <div className="text-gray-500">→ Routes to "/about"</div>
                 </div>
-                <div className="p-3 bg-gray-50 rounded-lg">
-                  <div className="font-mono text-gray-700 mb-1">
-                    pages/examples.tsx
-                  </div>
-                  <div className="text-gray-500">→ Routes to "/examples"</div>
-                </div>
               </div>
             </div>
 
@@ -169,9 +147,7 @@ export default function HomePage({ params, searchParams }: PageProps) {
                   <div>
                     Path:
                     {' '}
-                    <code className="bg-blue-100 px-2 py-1 rounded">
-                      /
-                    </code>
+                    <code className="bg-blue-100 px-2 py-1 rounded">/</code>
                   </div>
                   {Object.keys(params).length > 0 && (
                     <div className="mt-1">
@@ -201,11 +177,15 @@ export default function HomePage({ params, searchParams }: PageProps) {
           <p className="text-gray-500 text-sm">
             Edit
             {' '}
-            <code className="bg-gray-100 px-2 py-1 rounded text-xs">src/pages/index.tsx</code>
+            <code className="bg-gray-100 px-2 py-1 rounded text-xs">
+              src/pages/index.tsx
+            </code>
             {' '}
             or create new files in
             {' '}
-            <code className="bg-gray-100 px-2 py-1 rounded text-xs">src/pages/</code>
+            <code className="bg-gray-100 px-2 py-1 rounded text-xs">
+              src/pages/
+            </code>
             {' '}
             to see file-based routing in action!
           </p>

package/templates/default/src/pages/examples.tsx

@@ -1,238 +0,0 @@
-import type { PageProps } from 'rari/client'
-import { Link } from 'rari/client'
-import ServerTime from '../components/ServerTime'
-import Welcome from '../components/Welcome'
-
-export default function ExamplesPage({ params, searchParams }: PageProps) {
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-100 py-8 px-4">
-      <div className="max-w-4xl mx-auto">
-        <div className="text-center mb-12">
-          <h1 className="text-5xl font-bold text-gray-900 mb-4">
-            Server
-            {' '}
-            <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
-              Components
-            </span>
-          </h1>
-          <p className="text-xl text-gray-600 mb-8">
-            Explore React Server Components running on the Rust runtime
-          </p>
-          <div className="inline-flex items-center px-4 py-2 bg-purple-100 text-purple-800 rounded-lg">
-            <svg
-              className="w-5 h-5 mr-2"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path
-                fillRule="evenodd"
-                d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
-                clipRule="evenodd"
-              />
-            </svg>
-            Powered by Rust runtime
-          </div>
-        </div>
-
-        <div className="grid gap-8 mb-12">
-          <div className="bg-white rounded-xl p-8 shadow-sm">
-            <h2 className="text-2xl font-semibold mb-6 text-gray-900">
-              🕒 Real-time Server Component
-            </h2>
-            <p className="text-gray-600 mb-6">
-              This component is rendered on the server and shows the current server time.
-              Each time you navigate to this page, you'll see the time when the component
-              was rendered on the Rust runtime.
-            </p>
-            <ServerTime />
-          </div>
-
-          <div className="bg-white rounded-xl p-8 shadow-sm">
-            <h2 className="text-2xl font-semibold mb-6 text-gray-900">
-              👋 Welcome Component
-            </h2>
-            <p className="text-gray-600 mb-6">
-              This component demonstrates server-side rendering with dynamic content.
-              The performance stats and system information are computed on the server.
-            </p>
-            <Welcome />
-          </div>
-        </div>
-
-        <div className="bg-white rounded-xl p-8 shadow-sm border border-gray-200 mb-8">
-          <h2 className="text-2xl font-bold text-gray-900 mb-6">
-            🔍 How Server Components Work
-          </h2>
-
-          <div className="grid gap-6 md:grid-cols-2">
-            <div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-3">
-                Server Execution
-              </h3>
-              <p className="text-gray-600 mb-4">
-                Components marked with
-                {' '}
-                <code className="bg-gray-100 px-2 py-1 rounded">'use server'</code>
-                {' '}
-                run entirely on the Rust runtime. They can:
-              </p>
-              <ul className="space-y-2 text-gray-600">
-                <li className="flex items-center">
-                  <span className="text-green-500 mr-2">✓</span>
-                  Access databases directly
-                </li>
-                <li className="flex items-center">
-                  <span className="text-green-500 mr-2">✓</span>
-                  Read from the filesystem
-                </li>
-                <li className="flex items-center">
-                  <span className="text-green-500 mr-2">✓</span>
-                  Make server-side API calls
-                </li>
-                <li className="flex items-center">
-                  <span className="text-green-500 mr-2">✓</span>
-                  Access environment variables
-                </li>
-              </ul>
-            </div>
-
-            <div>
-              <h3 className="text-lg font-semibold text-gray-900 mb-3">
-                Performance Benefits
-              </h3>
-              <div className="space-y-3">
-                <div className="p-3 bg-green-50 rounded-lg">
-                  <div className="font-semibold text-green-800">Zero Client JS</div>
-                  <div className="text-sm text-green-600">
-                    Server components don't send any JavaScript to the client
-                  </div>
-                </div>
-                <div className="p-3 bg-blue-50 rounded-lg">
-                  <div className="font-semibold text-blue-800">Instant Rendering</div>
-                  <div className="text-sm text-blue-600">
-                    Rendered in ~3ms on the Rust runtime
-                  </div>
-                </div>
-                <div className="p-3 bg-purple-50 rounded-lg">
-                  <div className="font-semibold text-purple-800">Automatic Caching</div>
-                  <div className="text-sm text-purple-600">
-                    Intelligent caching and invalidation
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white rounded-xl p-8 shadow-sm border border-gray-200 mb-8">
-          <h2 className="text-2xl font-bold text-gray-900 mb-6">
-            🛠️ Creating Server Components
-          </h2>
-
-          <div className="bg-gray-50 rounded-lg p-6">
-            <h3 className="text-lg font-semibold text-gray-900 mb-3">
-              Example: ServerTime.tsx
-            </h3>
-            <pre className="bg-gray-800 text-gray-100 p-4 rounded-lg text-sm overflow-x-auto">
-              {`'use server'
-
-export default async function ServerTime() {
-  // This runs on the Rust runtime!
-  const now = new Date()
-
-  // Simulate some async server work
-  await new Promise(resolve => setTimeout(resolve, 100))
-
-  return (
-    <div className="p-4 bg-blue-50 rounded-lg">
-      <h2 className="text-lg font-semibold">Server Time</h2>
-      <p>Generated at: {now.toISOString()}</p>
-    </div>
-  )
-}`}
-            </pre>
-          </div>
-        </div>
-
-        <div className="bg-white rounded-xl p-8 shadow-sm border border-gray-200 mb-8">
-          <h2 className="text-2xl font-bold text-gray-900 mb-6">
-            Route Information
-          </h2>
-          <div className="p-4 bg-gray-50 rounded-lg">
-            <div className="text-sm text-gray-700">
-              <div className="mb-2">
-                <strong>File:</strong>
-                {' '}
-                <code className="bg-gray-200 px-2 py-1 rounded">src/pages/examples.tsx</code>
-              </div>
-              <div className="mb-2">
-                <strong>Route:</strong>
-                {' '}
-                <code className="bg-gray-200 px-2 py-1 rounded">/examples</code>
-              </div>
-              {Object.keys(params).length > 0 && (
-                <div className="mb-2">
-                  <strong>Params:</strong>
-                  {' '}
-                  <code className="bg-gray-200 px-2 py-1 rounded">
-                    {JSON.stringify(params)}
-                  </code>
-                </div>
-              )}
-              {Object.keys(searchParams).length > 0 && (
-                <div>
-                  <strong>Search Params:</strong>
-                  {' '}
-                  <code className="bg-gray-200 px-2 py-1 rounded">
-                    {JSON.stringify(searchParams)}
-                  </code>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <div className="text-center">
-          <Link
-            to="/"
-            className="inline-flex items-center px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors mr-4"
-          >
-            <svg
-              className="w-5 h-5 mr-2"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M10 19l-7-7m0 0l7-7m-7 7h18"
-              />
-            </svg>
-            Back to Home
-          </Link>
-          <Link
-            to="/about"
-            className="inline-flex items-center px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
-          >
-            Learn More About Rari
-            <svg
-              className="w-5 h-5 ml-2"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M14 5l7 7m0 0l-7 7m7-7H3"
-              />
-            </svg>
-          </Link>
-        </div>
-      </div>
-    </div>
-  )
-}