olova 2.0.55 → 2.0.56

package/src/plugin/index.ts

@@ -0,0 +1,204 @@
+import mdx from '@mdx-js/rollup';
+import fs from 'fs';
+import path from 'path';
+import type { Plugin } from 'vite';
+import { generateRouteTree } from '../generator';
+import { scanRoutes } from '../scanner';
+import type { ErrorWithExport, LayoutWithExport, LoadingWithExport, MiddlewareWithExport, NotFoundWithExport, OlovaRouterOptions, PluginOption, ResolvedConfig, RouteWithExport } from '../types';
+import { detectExportType, getRouteName } from '../utils';
+
+export function olovaRouter(options: OlovaRouterOptions = {}): PluginOption[] {
+  const rootDir = options.rootDir || 'src';
+  const extensions = options.extensions || ['.tsx', '.ts', '.mdx'];
+  const packageName = options.packageName || 'olovastart';
+
+  let config: ResolvedConfig;
+  let absoluteRootDir: string;
+  let watcher: fs.FSWatcher | null = null;
+  let timer: NodeJS.Timeout | null = null;
+
+  function generateRouteTreeFile() {
+    const { routes, notFoundPages, layouts, loadingPages, errorPages, middlewares } = scanRoutes(absoluteRootDir, extensions);
+
+    const routeConfigs: RouteWithExport[] = routes.map(r => {
+      let exportInfo = detectExportType(r.filePath);
+      
+      if (r.filePath.toLowerCase().endsWith('.mdx')) {
+        exportInfo = {
+          ...exportInfo,
+          hasDefault: true,
+          namedExport: null
+        };
+      }
+
+      return {
+        path: r.path,
+        component: r.filePath.replace(/\\/g, '/'),
+        params: r.params.length > 0 ? r.params : undefined,
+        hasDefault: exportInfo.hasDefault,
+        namedExport: exportInfo.namedExport,
+        hasMetadata: exportInfo.hasMetadata,
+        metadataSource: exportInfo.metadataSource,
+        hasRoute: exportInfo.hasRoute,
+        hasGetStaticPaths: exportInfo.hasGetStaticPaths,
+        hasLoader: exportInfo.hasLoader
+      };
+    });
+
+    const notFoundConfigs: NotFoundWithExport[] = notFoundPages.map(nf => {
+      const exportInfo = detectExportType(nf.filePath);
+      return {
+        pathPrefix: nf.pathPrefix,
+        filePath: nf.filePath.replace(/\\/g, '/'),
+        hasDefault: exportInfo.hasDefault,
+        namedExport: exportInfo.namedExport,
+        hasMetadata: exportInfo.hasMetadata
+      };
+    });
+
+    const layoutConfigs: LayoutWithExport[] = layouts.map(l => {
+      const exportInfo = detectExportType(l.filePath);
+      return {
+        path: l.path,
+        filePath: l.filePath.replace(/\\/g, '/'),
+        hasDefault: exportInfo.hasDefault,
+        namedExport: exportInfo.namedExport,
+        hasMetadata: exportInfo.hasMetadata
+      };
+    });
+
+    const loadingConfigs: LoadingWithExport[] = loadingPages.map(lp => {
+      const exportInfo = detectExportType(lp.filePath);
+      return {
+        path: lp.path,
+        filePath: lp.filePath.replace(/\\/g, '/'),
+        hasDefault: exportInfo.hasDefault,
+        namedExport: exportInfo.namedExport,
+      };
+    });
+
+    const errorConfigs: ErrorWithExport[] = errorPages.map(ep => {
+      const exportInfo = detectExportType(ep.filePath);
+      return {
+        path: ep.path,
+        filePath: ep.filePath.replace(/\\/g, '/'),
+        hasDefault: exportInfo.hasDefault,
+        namedExport: exportInfo.namedExport,
+      };
+    });
+
+    const middlewareConfigs: MiddlewareWithExport[] = middlewares.map(mw => {
+      const exportInfo = detectExportType(mw.filePath);
+      return {
+        path: mw.path,
+        filePath: mw.filePath.replace(/\\/g, '/'),
+        hasDefault: exportInfo.hasDefault,
+        namedExport: exportInfo.namedExport,
+      };
+    });
+
+    const content = generateRouteTree(routeConfigs, notFoundConfigs, layoutConfigs, loadingConfigs, errorConfigs, middlewareConfigs, absoluteRootDir, packageName);
+    const treePath = path.resolve(absoluteRootDir, 'route.tree.ts');
+
+    const existing = fs.existsSync(treePath) ? fs.readFileSync(treePath, 'utf-8') : '';
+    if (existing !== content) {
+      fs.writeFileSync(treePath, content);
+      console.log('\x1b[32m[olova]\x1b[0m Route tree updated');
+    }
+  }
+
+  function startWatcher() {
+    if (watcher) return;
+
+    watcher = fs.watch(absoluteRootDir, { recursive: true }, (eventType, filename) => {
+      if (!filename) return;
+      if (filename.includes('route.tree.ts')) return;
+
+      const ext = path.extname(filename);
+      const isConfiguredExtension = extensions.includes(ext);
+
+      const isIndexFile = (filename.includes('index') && isConfiguredExtension);
+      const isAppFile = (filename.includes('App') && isConfiguredExtension);
+      const is404File = (filename.includes('404') && isConfiguredExtension);
+      const isLayoutFile = (filename.includes('layout') && isConfiguredExtension);
+      const isLoadingFile = (filename.includes('loading') && isConfiguredExtension);
+      const isErrorFile = (filename.includes('error') && isConfiguredExtension);
+      const isMiddlewareFile = (filename.includes('middleware') && isConfiguredExtension);
+      const isDirectory = !filename.includes('.');
+      const isDynamicSegment = filename.includes('[');
+      const isRenameEvent = eventType === 'rename';
+
+      if (isIndexFile || isAppFile || is404File || isLayoutFile || isLoadingFile || isErrorFile || isMiddlewareFile || isDirectory || isDynamicSegment || isRenameEvent) {
+        if (isIndexFile && filename) {
+          const fullPath = path.join(absoluteRootDir, filename);
+          if (fs.existsSync(fullPath)) {
+            const stat = fs.statSync(fullPath);
+            if (stat.size === 0 && !filename.endsWith('.mdx')) {
+              const relativeDir = path.relative(absoluteRootDir, path.dirname(fullPath));
+              const pascalCaseName = getRouteName(relativeDir);
+              
+              const boilerplate = `
+export const metadata = {
+    title: "${pascalCaseName}",
+    description: "${pascalCaseName} page",
+}
+
+export default function ${pascalCaseName}() {
+  return (
+    <div>
+      <h1>${pascalCaseName}</h1>
+    </div>
+  );
+}
+`;
+              fs.writeFileSync(fullPath, boilerplate);
+              console.log(`\x1b[32m[olova]\x1b[0m Generated boilerplate for ${filename}`);
+            }
+          }
+        }
+
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => {
+          try {
+            generateRouteTreeFile();
+          } catch (error) {
+            console.error('\x1b[31m[olova]\x1b[0m Error generating route tree:', error);
+          }
+        }, 100);
+      }
+    });
+
+    console.log('\x1b[32m[olova]\x1b[0m Watching for route changes...');
+  }
+
+  const routerPlugin: Plugin = {
+    name: 'olova-router',
+
+    configResolved(resolvedConfig: ResolvedConfig) {
+      config = resolvedConfig;
+      absoluteRootDir = path.resolve(config.root, rootDir);
+    },
+
+    buildStart() {
+      generateRouteTreeFile();
+
+      if (config.command === 'serve') {
+        startWatcher();
+      }
+    },
+
+    buildEnd() {
+      if (watcher) {
+        watcher.close();
+        watcher = null;
+      }
+    },
+  };
+
+  return [
+    { enforce: 'pre', ...mdx() } as Plugin,
+    routerPlugin
+  ];
+}
+
+export default olovaRouter;

package/src/router/ErrorBoundary.tsx

@@ -0,0 +1,145 @@
+import { Component, type ComponentType, type ErrorInfo, type ReactNode } from 'react';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('[olova] Uncaught error:', error, errorInfo);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div style={{
+          padding: '2rem',
+          maxWidth: '600px',
+          margin: '4rem auto',
+          fontFamily: 'system-ui, -apple-system, sans-serif',
+          textAlign: 'center',
+        }}>
+          <h1 style={{ fontSize: '2rem', marginBottom: '1rem', color: '#e11d48' }}>
+            Something went wrong
+          </h1>
+          <p style={{ color: '#6b7280', marginBottom: '1.5rem' }}>
+            An unexpected error occurred while rendering this page.
+          </p>
+          {this.state.error && (
+            <pre style={{
+              padding: '1rem',
+              backgroundColor: '#f3f4f6',
+              borderRadius: '0.5rem',
+              fontSize: '0.875rem',
+              textAlign: 'left',
+              overflow: 'auto',
+              marginBottom: '1.5rem',
+              color: '#374151',
+            }}>
+              {this.state.error.message}
+            </pre>
+          )}
+          <div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center' }}>
+            <button
+              onClick={this.handleReset}
+              style={{
+                padding: '0.5rem 1.5rem',
+                backgroundColor: '#3b82f6',
+                color: 'white',
+                border: 'none',
+                borderRadius: '0.375rem',
+                cursor: 'pointer',
+                fontSize: '0.875rem',
+              }}
+            >
+              Try Again
+            </button>
+            <button
+              onClick={() => window.location.reload()}
+              style={{
+                padding: '0.5rem 1.5rem',
+                backgroundColor: 'transparent',
+                color: '#3b82f6',
+                border: '1px solid #3b82f6',
+                borderRadius: '0.375rem',
+                cursor: 'pointer',
+                fontSize: '0.875rem',
+              }}
+            >
+              Reload Page
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+interface RouteErrorBoundaryProps {
+  children: ReactNode;
+  fallbackComponent: ComponentType<{ error: Error; reset: () => void }>;
+  routePath: string;
+}
+
+interface RouteErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class RouteErrorBoundary extends Component<RouteErrorBoundaryProps, RouteErrorBoundaryState> {
+  constructor(props: RouteErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): RouteErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidUpdate(prevProps: RouteErrorBoundaryProps) {
+    if (prevProps.routePath !== this.props.routePath && this.state.hasError) {
+      this.setState({ hasError: false, error: null });
+    }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('[olova] Route error:', error, errorInfo);
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError && this.state.error) {
+      const FallbackComponent = this.props.fallbackComponent;
+      return <FallbackComponent error={this.state.error} reset={this.handleReset} />;
+    }
+    return this.props.children;
+  }
+}

package/src/router/Link.tsx

@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useRef, type AnchorHTMLAttributes, type ReactNode } from 'react';
+import { useRouter } from './context';
+
+type ResolveSegment<S extends string> =
+  S extends `:${string}` ? string :
+  S extends '*' ? string :
+  S;
+
+type ResolvePathSegments<Path extends string> =
+  Path extends `${infer Segment}/${infer Rest}`
+    ? `${ResolveSegment<Segment>}/${ResolvePathSegments<Rest>}`
+    : ResolveSegment<Path>;
+
+export type ResolveRoutePath<Path extends string> =
+  Path extends `${infer Base}/*`
+    ? `${ResolvePathSegments<Base>}/${string}`
+    : ResolvePathSegments<Path>;
+
+type ResolveRoutes<T extends string> = T extends string ? ResolveRoutePath<T> : never;
+
+interface LinkProps<T extends string> extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+  href: ResolveRoutes<T>;
+  children: ReactNode;
+  className?: string;
+  activeClassName?: string;
+  exactActiveClassName?: string;
+  prefetch?: boolean | 'hover' | 'viewport';
+  replace?: boolean;
+  scroll?: boolean;
+  target?: string;
+}
+
+function isActive(currentPath: string, href: string, exact: boolean): boolean {
+  const normalizedCurrent = currentPath.replace(/\/$/, '') || '/';
+  const normalizedHref = (href.split('?')[0]).replace(/\/$/, '') || '/';
+  if (exact) return normalizedCurrent === normalizedHref;
+  if (normalizedHref === '/') return normalizedCurrent === '/';
+  return normalizedCurrent === normalizedHref || normalizedCurrent.startsWith(normalizedHref + '/');
+}
+
+export function createLink<T extends string>() {
+  const Link = ({
+    href,
+    children,
+    className,
+    activeClassName,
+    exactActiveClassName,
+    prefetch = 'hover',
+    replace: shouldReplace = false,
+    scroll = true,
+    target,
+    ...rest
+  }: LinkProps<T>) => {
+    const { push, replace, currentPath, prefetch: prefetchRoute } = useRouter();
+    const isSSR = typeof window === 'undefined';
+    const linkRef = useRef<HTMLAnchorElement>(null);
+    const prefetched = useRef(false);
+
+    const isExactActive = isActive(currentPath, href, true);
+    const isPartialActive = isActive(currentPath, href, false);
+
+    const computedClassName = [
+      className,
+      isPartialActive && activeClassName,
+      isExactActive && exactActiveClassName,
+    ].filter(Boolean).join(' ') || undefined;
+
+    const handlePrefetch = useCallback(() => {
+      if (!prefetched.current && prefetch !== false) {
+        prefetched.current = true;
+        prefetchRoute(href);
+      }
+    }, [href, prefetch, prefetchRoute]);
+
+    useEffect(() => {
+      if (isSSR || prefetch !== 'viewport' || !linkRef.current) return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0]?.isIntersecting) {
+            handlePrefetch();
+            observer.disconnect();
+          }
+        },
+        { rootMargin: '200px' }
+      );
+      observer.observe(linkRef.current);
+      return () => observer.disconnect();
+    }, [isSSR, prefetch, handlePrefetch]);
+
+    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      if (rest.onClick) rest.onClick(e);
+      if (e.defaultPrevented) return;
+      if (target === '_blank' || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+      e.preventDefault();
+      const navFn = shouldReplace ? replace : push;
+      navFn(href, { scroll });
+    };
+
+    return (
+      <a
+        ref={linkRef}
+        href={href}
+        className={computedClassName}
+        data-active={isPartialActive || undefined}
+        data-exact-active={isExactActive || undefined}
+        onClick={isSSR ? undefined : handleClick}
+        onMouseEnter={isSSR || prefetch !== 'hover' ? undefined : handlePrefetch}
+        onFocus={isSSR || prefetch !== 'hover' ? undefined : handlePrefetch}
+        target={target}
+        {...rest}
+      >
+        {children}
+      </a>
+    );
+  };
+  return Link;
+}