@flight-framework/cli 0.0.8 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flight-framework/cli",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "description": "Command-line interface for Flight Framework",
     "keywords": [
         "flight",

package/templates/react/src/App.tsx

@@ -1,7 +1,12 @@
+import { useRouter } from './context/RouterContext';
+
 export default function App() {
+    const { path } = useRouter();
+
     return (
         <main>
-            <h1>Flight ✈️</h1>
+            <h1>Welcome to Flight</h1>
+            <p>Current path: {path}</p>
             <p>Edit <code>src/App.tsx</code> to get started.</p>
         </main>
     );

package/templates/react/src/context/RouterContext.tsx

@@ -0,0 +1,63 @@
+import { createContext, useState, useEffect, useContext, type ReactNode } from 'react';
+
+interface RouterContextValue {
+    path: string;
+    navigate: (to: string) => void;
+}
+
+/**
+ * Router Context for SSR-safe path sharing
+ * - Server: receives URL from request
+ * - Client: syncs with browser location
+ */
+const RouterContext = createContext<RouterContextValue>({
+    path: '/',
+    navigate: () => { },
+});
+
+export function useRouter() {
+    return useContext(RouterContext);
+}
+
+interface RouterProviderProps {
+    children: ReactNode;
+    initialPath?: string;
+}
+
+/**
+ * Router Provider - wraps app to provide current path
+ * 
+ * Usage:
+ * - Server: <RouterProvider initialPath={url}><App /></RouterProvider>
+ * - Client: <RouterProvider><App /></RouterProvider>
+ */
+export function RouterProvider({ children, initialPath = '/' }: RouterProviderProps) {
+    const isClient = typeof window !== 'undefined';
+
+    const [path, setPath] = useState(
+        isClient ? window.location.pathname : initialPath
+    );
+
+    const navigate = (to: string) => {
+        if (isClient) {
+            window.history.pushState({}, '', to);
+            setPath(to);
+        }
+    };
+
+    useEffect(() => {
+        if (!isClient) return;
+
+        const handlePopState = () => setPath(window.location.pathname);
+        window.addEventListener('popstate', handlePopState);
+        return () => window.removeEventListener('popstate', handlePopState);
+    }, [isClient]);
+
+    return (
+        <RouterContext.Provider value={{ path, navigate }}>
+            {children}
+        </RouterContext.Provider>
+    );
+}
+
+export default RouterProvider;

package/templates/react/src/entry-client.tsx

@@ -1,11 +1,19 @@
 import { hydrateRoot, createRoot } from 'react-dom/client';
+import { RouterProvider } from './context/RouterContext';
 import App from './App';
 import './styles/global.css';
 
 const root = document.getElementById('root')!;
 
+const app = (
+    <RouterProvider>
+        <App />
+    </RouterProvider>
+);
+
+// Hydrate SSR content or render client-only
 if (root.innerHTML.trim()) {
-    hydrateRoot(root, <App />);
+    hydrateRoot(root, app);
 } else {
-    createRoot(root).render(<App />);
+    createRoot(root).render(app);
 }

package/templates/react/src/entry-server.tsx

@@ -1,6 +1,17 @@
 import { renderToString } from 'react-dom/server';
+import { RouterProvider } from './context/RouterContext';
 import App from './App';
 
-export function render(_url: string): string {
-    return renderToString(<App />);
+/**
+ * Server-side render function
+ * Called by Flight for each page request
+ * 
+ * @param url - Request URL path (e.g., '/about', '/products/123')
+ */
+export function render(url: string): string {
+    return renderToString(
+        <RouterProvider initialPath={url}>
+            <App />
+        </RouterProvider>
+    );
 }