zylaris 1.0.2

package/packages/router/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@zylaris/router",
+  "version": "1.0.0",
+  "description": "File-system based router for Zylaris",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@zylaris/reactivity": "workspace:*",
+    "glob": "^10.0.0",
+    "path-to-regexp": "^6.2.1",
+    "zylaris": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.0"
+  },
+  "keywords": [
+    "router",
+    "routing",
+    "zylaris"
+  ],
+  "license": "MIT"
+}

package/packages/router/src/components.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import type { ReactNode, MouseEvent } from 'react';
+import { createContext, useContext, useCallback, useState, useEffect } from 'react';
+import type { RouterContextValue } from './types.js';
+
+const RouterContext = createContext<RouterContextValue | null>(null);
+
+export function useRouter(): RouterContextValue {
+  const context = useContext(RouterContext);
+  if (!context) {
+    throw new Error('useRouter must be used within RouterProvider');
+  }
+  return context;
+}
+
+export function usePathname(): string {
+  return useRouter().pathname;
+}
+
+export function useSearchParams(): URLSearchParams {
+  const { asPath } = useRouter();
+  return new URL(asPath, 'http://localhost').searchParams;
+}
+
+export function useParams(): Record<string, string> {
+  const { query } = useRouter();
+  return query;
+}
+
+interface LinkProps {
+  href: string;
+  prefetch?: boolean;
+  replace?: boolean;
+  scroll?: boolean;
+  shallow?: boolean;
+  locale?: string;
+  children?: ReactNode;
+  onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+  className?: string;
+  id?: string;
+}
+
+export function Link({
+  href,
+  prefetch = false,
+  replace = false,
+  scroll = true,
+  children,
+  ...props
+}: LinkProps): JSX.Element {
+  const router = useRouter();
+
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLAnchorElement>) => {
+      if (props.onClick) {
+        props.onClick(e);
+      }
+
+      if (!e.defaultPrevented) {
+        e.preventDefault();
+        if (replace) {
+          router.replace(href);
+        } else {
+          router.push(href);
+        }
+      }
+    },
+    [href, replace, router, props.onClick]
+  );
+
+  useEffect(() => {
+    if (prefetch) {
+      router.prefetch(href);
+    }
+  }, [prefetch, href, router]);
+
+  return (
+    <a href={href} onClick={handleClick} {...props}>
+      {children}
+    </a>
+  );
+}
+
+interface RouterProviderProps {
+  children: ReactNode;
+  initialPath?: string;
+}
+
+export function RouterProvider({
+  children,
+  initialPath = typeof window !== 'undefined' ? window.location.pathname : '/',
+}: RouterProviderProps): JSX.Element {
+  const [pathname, setPathname] = useState(initialPath);
+  const [query, _setQuery] = useState<Record<string, string>>({});
+  const [asPath, setAsPath] = useState(initialPath);
+
+  const push = useCallback((url: string) => {
+    if (typeof window !== 'undefined') {
+      window.history.pushState({}, '', url);
+      setPathname(new URL(url, window.location.origin).pathname);
+      setAsPath(url);
+    }
+  }, []);
+
+  const replace = useCallback((url: string) => {
+    if (typeof window !== 'undefined') {
+      window.history.replaceState({}, '', url);
+      setPathname(new URL(url, window.location.origin).pathname);
+      setAsPath(url);
+    }
+  }, []);
+
+  const back = useCallback(() => {
+    if (typeof window !== 'undefined') {
+      window.history.back();
+    }
+  }, []);
+
+  const prefetch = useCallback((url: string) => {
+    // In real implementation, prefetch route component
+    console.log('Prefetching:', url);
+  }, []);
+
+  useEffect(() => {
+    const handlePopState = () => {
+      setPathname(window.location.pathname);
+      setAsPath(window.location.pathname + window.location.search);
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  const value: RouterContextValue = {
+    pathname,
+    query,
+    asPath,
+    push,
+    replace,
+    back,
+    prefetch,
+  };
+
+  return (
+    <RouterContext.Provider value={value}>
+      {children}
+    </RouterContext.Provider>
+  );
+}

package/packages/router/src/fs-router.ts

@@ -0,0 +1,163 @@
+import { glob } from 'glob';
+import { relative, dirname, basename, extname } from 'path';
+import type { Route, RouterConfig, ParamDefinition } from './types.js';
+
+const ROUTE_FILES = ['page', 'layout', 'loading', 'error', 'template', 'not-found', 'route'];
+
+export async function generateRoutes(config: RouterConfig): Promise<Route[]> {
+  const { appDir, extensions } = config;
+  const pattern = `${appDir}/**/*.{${extensions.join(',')}}`;
+  const files = await glob(pattern, { absolute: true });
+
+  const routes: Route[] = [];
+  const routeMap = new Map<string, Partial<Route>>();
+
+  for (const file of files) {
+    const routeInfo = await fileToRouteInfo(file, appDir);
+    if (!routeInfo) continue;
+
+    const { path: routePath, type } = routeInfo;
+
+    if (type === 'page' || type === 'route') {
+      const existing = routeMap.get(routePath) || {};
+      routeMap.set(routePath, {
+        ...existing,
+        path: routePath,
+        filePath: file,
+        params: extractParams(routePath),
+        isDynamic: routePath.includes(':'),
+        isCatchAll: routePath.includes('*'),
+        isOptional: routePath.includes('?'),
+      });
+    } else if (type === 'layout') {
+      const existing = routeMap.get(routePath) || {};
+      routeMap.set(routePath, {
+        ...existing,
+        path: routePath,
+        layout: file,
+      });
+    } else if (type === 'loading') {
+      const existing = routeMap.get(routePath) || {};
+      routeMap.set(routePath, {
+        ...existing,
+        path: routePath,
+        loading: file,
+      });
+    } else if (type === 'error') {
+      const existing = routeMap.get(routePath) || {};
+      routeMap.set(routePath, {
+        ...existing,
+        path: routePath,
+        error: file,
+      });
+    }
+  }
+
+  // Convert map to array of complete routes
+  for (const [path, info] of routeMap) {
+    if (info.filePath) {
+      routes.push({
+        path,
+        filePath: info.filePath,
+        params: info.params || [],
+        isDynamic: info.isDynamic || false,
+        isCatchAll: info.isCatchAll || false,
+        isOptional: info.isOptional || false,
+      } as Route);
+    }
+  }
+
+  return routes;
+}
+
+interface RouteInfo {
+  path: string;
+  type: string;
+  isLayout: boolean;
+}
+
+async function fileToRouteInfo(
+  filePath: string,
+  appDir: string
+): Promise<RouteInfo | null> {
+  const relativePath = relative(appDir, filePath);
+  const ext = extname(relativePath);
+  const base = basename(relativePath, ext);
+  const dir = dirname(relativePath);
+
+  // Skip non-route files
+  if (base.startsWith('_') || base.startsWith('.')) return null;
+  if (!ROUTE_FILES.includes(base)) return null;
+
+  // Build route path
+  let routePath: string;
+  
+  if (base === 'page' || base === 'layout' || base === 'loading' || base === 'error') {
+    // Convert file path to route path
+    const segments = dir.split('/').filter(Boolean);
+    
+    // Handle route groups (parentheses)
+    const filteredSegments = segments.filter(
+      s => !s.startsWith('(') || !s.endsWith(')')
+    );
+
+    // Convert dynamic segments
+    const routeSegments = filteredSegments.map(segment => {
+      if (segment.startsWith('[') && segment.endsWith(']')) {
+        const paramName = segment.slice(1, -1);
+        if (paramName.startsWith('...')) {
+          return `:${paramName.slice(3)}*`; // Catch-all
+        }
+        if (paramName.endsWith('?')) {
+          return `:${paramName.slice(0, -1)}?`; // Optional
+        }
+        return `:${paramName}`; // Required dynamic
+      }
+      return segment;
+    });
+
+    routePath = '/' + routeSegments.join('/');
+    if (routePath === '/') routePath = '/';
+  } else if (base === 'route') {
+    // API route
+    const segments = dir.split('/').filter(Boolean);
+    routePath = '/api/' + segments.join('/');
+  } else {
+    return null;
+  }
+
+  return {
+    path: routePath,
+    type: base,
+    isLayout: base === 'layout',
+  };
+}
+
+function extractParams(path: string): ParamDefinition[] {
+  const params: ParamDefinition[] = [];
+  const paramRegex = /:(\w+)(\?|\*)?/g;
+  let match;
+
+  while ((match = paramRegex.exec(path)) !== null) {
+    const name = match[1];
+    const modifier = match[2];
+
+    params.push({
+      name,
+      optional: modifier === '?',
+      type: modifier === '*' ? 'catch-all' : 'string',
+    });
+  }
+
+  return params;
+}
+
+// Watch for route changes
+export function watchRoutes(
+  _config: RouterConfig,
+  _onChange: (routes: Route[]) => void
+): () => void {
+  // In real implementation, use chokidar or fs.watch
+  // For now, just return cleanup function
+  return () => {};
+}

package/packages/router/src/index.ts

@@ -0,0 +1,22 @@
+// Zylaris Router - File-system based routing
+
+export { Router, createRouter } from './router.js';
+export { generateRoutes, watchRoutes } from './fs-router.js';
+export {
+  Link,
+  RouterProvider,
+  useRouter,
+  usePathname,
+  useSearchParams,
+  useParams,
+} from './components.js';
+
+export type {
+  Route,
+  RouteMatch,
+  ParamDefinition,
+  RouterConfig,
+  RouteModule,
+  Metadata,
+  RouterContextValue,
+} from './types.js';

package/packages/router/src/router.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest';
+import { createRouter } from './router.js';
+import type { Route } from './types.js';
+
+describe('Router', () => {
+  const createTestRoutes = (): Route[] => [
+    { path: '/', filePath: 'page.tsx', params: [], isDynamic: false, isCatchAll: false, isOptional: false },
+    { path: '/about', filePath: 'about/page.tsx', params: [], isDynamic: false, isCatchAll: false, isOptional: false },
+    { path: '/users/:id', filePath: 'users/[id]/page.tsx', params: [{ name: 'id', optional: false, type: 'string' }], isDynamic: true, isCatchAll: false, isOptional: false },
+    { path: '/posts/:slug?', filePath: 'posts/[[slug]]/page.tsx', params: [{ name: 'slug', optional: true, type: 'string' }], isDynamic: true, isCatchAll: false, isOptional: true },
+  ];
+
+  it('should create router with routes', () => {
+    const routes = createTestRoutes();
+    const router = createRouter(routes);
+    
+    expect(router.getRoutes()).toHaveLength(4);
+  });
+
+  it('should match static route', () => {
+    const routes = createTestRoutes();
+    const router = createRouter(routes);
+    
+    const match = router.match('/about');
+    expect(match).not.toBeNull();
+    expect(match?.route.path).toBe('/about');
+    expect(match?.params).toEqual({});
+  });
+
+  it('should match root route', () => {
+    const routes = createTestRoutes();
+    const router = createRouter(routes);
+    
+    const match = router.match('/');
+    expect(match).not.toBeNull();
+    expect(match?.route.path).toBe('/');
+  });
+
+  it('should match dynamic route', () => {
+    const routes = createTestRoutes();
+    const router = createRouter(routes);
+    
+    const match = router.match('/users/123');
+    expect(match).not.toBeNull();
+    expect(match?.route.path).toBe('/users/:id');
+    expect(match?.params).toEqual({ id: '123' });
+  });
+
+  it('should return null for non-matching route', () => {
+    const routes = createTestRoutes();
+    const router = createRouter(routes);
+    
+    const match = router.match('/nonexistent');
+    expect(match).toBeNull();
+  });
+
+  it('should cache route matches', () => {
+    const routes = createTestRoutes();
+    const router = createRouter(routes);
+    
+    const match1 = router.match('/about');
+    const match2 = router.match('/about');
+    
+    // Should return same cached result
+    expect(match1).toBe(match2);
+  });
+
+  it('should add route', () => {
+    const router = createRouter();
+    
+    router.addRoute({
+      path: '/new',
+      filePath: 'new/page.tsx',
+      params: [],
+      isDynamic: false,
+      isCatchAll: false,
+      isOptional: false
+    });
+    
+    expect(router.getRoutes()).toHaveLength(1);
+  });
+
+  it('should remove route', () => {
+    const routes = createTestRoutes();
+    const router = createRouter(routes);
+    
+    router.removeRoute('/about');
+    
+    expect(router.getRoutes()).toHaveLength(3);
+    expect(router.match('/about')).toBeNull();
+  });
+
+  it('should generate path from route', () => {
+    const router = createRouter();
+    
+    const path = router.generatePath('/users/:id', { id: '123' });
+    expect(path).toBe('/users/123');
+  });
+
+  it('should clear cache', () => {
+    const routes = createTestRoutes();
+    const router = createRouter(routes);
+    
+    router.match('/about');
+    router.clearCache();
+    
+    // Cache is cleared, should still work
+    const match = router.match('/about');
+    expect(match).not.toBeNull();
+  });
+});

package/packages/router/src/router.ts

@@ -0,0 +1,112 @@
+import { pathToRegexp, compile, Key } from 'path-to-regexp';
+import type { Route, RouteMatch } from './types.js';
+
+export class Router {
+  private routes: Route[] = [];
+  private routeCache: Map<string, RouteMatch> = new Map();
+
+  constructor(routes: Route[] = []) {
+    this.routes = this.sortRoutes(routes);
+  }
+
+  addRoute(route: Route): void {
+    this.routes.push(route);
+    this.routes = this.sortRoutes(this.routes);
+    this.routeCache.clear();
+  }
+
+  removeRoute(path: string): void {
+    this.routes = this.routes.filter(r => r.path !== path);
+    this.routeCache.clear();
+  }
+
+  match(path: string): RouteMatch | null {
+    // Check cache
+    if (this.routeCache.has(path)) {
+      return this.routeCache.get(path)!;
+    }
+
+    const url = new URL(path, 'http://localhost');
+    const pathname = url.pathname;
+
+    for (const route of this.routes) {
+      const match = this.matchRoute(route, pathname);
+      if (match) {
+        const result: RouteMatch = {
+          route,
+          params: match,
+          searchParams: url.searchParams,
+        };
+        this.routeCache.set(path, result);
+        return result;
+      }
+    }
+
+    return null;
+  }
+
+  private matchRoute(
+    route: Route,
+    pathname: string
+  ): Record<string, string> | null {
+    try {
+      const keys: Key[] = [];
+      const regexp = pathToRegexp(route.path, keys);
+      const match = regexp.exec(pathname);
+
+      if (!match) return null;
+
+      const params: Record<string, string> = {};
+      keys.forEach((key, i) => {
+        params[key.name] = match[i + 1];
+      });
+
+      return params;
+    } catch {
+      return null;
+    }
+  }
+
+  generatePath(routePath: string, params: Record<string, string>): string {
+    try {
+      const toPath = compile(routePath);
+      return toPath(params);
+    } catch {
+      return routePath;
+    }
+  }
+
+  private sortRoutes(routes: Route[]): Route[] {
+    // Sort by specificity: static > dynamic > catch-all
+    return [...routes].sort((a, b) => {
+      // Static routes first
+      const aStatic = a.path.split('/').filter(p => !p.includes(':')).length;
+      const bStatic = b.path.split('/').filter(p => !p.includes(':')).length;
+      if (aStatic !== bStatic) return bStatic - aStatic;
+
+      // Then by number of dynamic segments (fewer first)
+      const aDynamic = (a.path.match(/:/g) || []).length;
+      const bDynamic = (b.path.match(/:/g) || []).length;
+      if (aDynamic !== bDynamic) return aDynamic - bDynamic;
+
+      // Catch-all routes last
+      if (a.isCatchAll && !b.isCatchAll) return 1;
+      if (!a.isCatchAll && b.isCatchAll) return -1;
+
+      return 0;
+    });
+  }
+
+  getRoutes(): Route[] {
+    return [...this.routes];
+  }
+
+  clearCache(): void {
+    this.routeCache.clear();
+  }
+}
+
+// Create router instance
+export function createRouter(routes?: Route[]): Router {
+  return new Router(routes);
+}

package/packages/router/src/types.ts

@@ -0,0 +1,69 @@
+type ComponentType = unknown;
+
+export interface Route {
+  path: string;
+  filePath: string;
+  component?: ComponentType;
+  layout?: ComponentType;
+  loading?: ComponentType;
+  error?: ComponentType;
+  params: ParamDefinition[];
+  isDynamic: boolean;
+  isCatchAll: boolean;
+  isOptional: boolean;
+}
+
+export interface ParamDefinition {
+  name: string;
+  optional: boolean;
+  type: 'string' | 'number' | 'catch-all';
+}
+
+export interface RouteMatch {
+  route: Route;
+  params: Record<string, string>;
+  searchParams: URLSearchParams;
+}
+
+export interface RouterConfig {
+  appDir: string;
+  extensions: string[];
+  trailingSlash?: boolean;
+  caseSensitive?: boolean;
+}
+
+export interface RouteModule {
+  default?: ComponentType;
+  layout?: ComponentType;
+  loading?: ComponentType;
+  error?: ComponentType;
+  generateStaticParams?: () => Promise<Record<string, string>[]>;
+  metadata?: Metadata;
+}
+
+export interface Metadata {
+  title?: string;
+  description?: string;
+  keywords?: string[];
+  openGraph?: {
+    title?: string;
+    description?: string;
+    images?: string[];
+  };
+  twitter?: {
+    card?: 'summary' | 'summary_large_image';
+    title?: string;
+    description?: string;
+    images?: string[];
+  };
+}
+
+export interface RouterContextValue {
+  pathname: string;
+  query: Record<string, string>;
+  asPath: string;
+  push: (url: string) => void;
+  replace: (url: string) => void;
+  back: () => void;
+  prefetch: (url: string) => void;
+}

package/packages/router/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules"]
+}