@ressjs/vite-router 0.3.0 → 0.4.1

package/README.md

@@ -1,6 +1,6 @@
 # @ressjs/vite-router
 
-Express router factory for ress.js with automatic page detection and Server-Side Rendering (SSR).
+Advanced Express router with platform detection and Server-Side Rendering (SSR) for RESS.js applications.
 
 ## Installation
 
@@ -10,219 +10,147 @@ npm install @ressjs/vite-router
 
 ## Features
 
-- **Automatic Routing**: Auto-discovers pages from your file system
-- **SSR Support**: Built-in server-side rendering with hydration
-- **Platform Detection**: Serves different CSS/JS bundles based on device type
-- **Hot Reload**: Development mode with fast refresh
-- **Production Ready**: Optimized builds with asset compression
-- 🛠️ **Zero-config** - Funciona out-of-the-box con configuración mínima
+- **Advanced Routing**: Auto-discovers pages with platform-specific entry points
+- **Platform Detection**: Automatic device, OS, and WebView detection
+- **SSR Support**: Complete server-side rendering with proper hydration
+- **Asset Management**: Smart CSS/JS bundle resolution based on platform
+- **Development Mode**: Hot reload with fast refresh and dev server
+- **Production Ready**: Optimized builds with manifest-based asset loading
+- **TypeScript**: Full TypeScript support with comprehensive type definitions
 
-## Instalación
+## Quick Start
 
-```bash
-npm install @ressjs/vite-router
-```
-
-## Uso Básico
+### Basic Setup
 
-```javascript
+```typescript
 import express from 'express'
 import { createViteRouter } from '@ressjs/vite-router'
 
 const app = express()
-
-// Crear router automático
-const viteRouter = createViteRouter({
-  pagesDir: 'app/pages',
-  outputDir: 'dist/.entries',
-  enableSSR: true,
-  enablePlatformDetection: true
+const router = createViteRouter({
+  enablePlatformDetection: true,
+  isProduction: process.env.NODE_ENV === 'production'
 })
 
-app.use('/', viteRouter)
-app.listen(3000)
+app.use('/', router)
+app.listen(3000, () => console.log('Server running on port 3000'))
 ```
 
-## Uso Avanzado
-
-```javascript
-import { RouterFactory } from '@ressjs/vite-router'
-
-const factory = new RouterFactory({
-  pagesDir: 'app/pages',
-  outputDir: 'temp',
-  enableSSR: true,
-  enablePlatformDetection: true,
-  staticDir: 'public'
-})
+### Development Server
 
-// Inicializar antes de usar
-await factory.initialize()
-
-const router = factory.createRouter()
-app.use('/', router)
+```typescript
+import { createAutoViteServer } from '@ressjs/vite-router'
 
-// Limpiar al finalizar
-process.on('exit', () => {
-  factory.cleanup()
+// Automatically configures Vite dev server with SSR
+const server = await createAutoViteServer({
+  port: 3000,
+  enablePlatformDetection: true
 })
 ```
 
-## Detección de Páginas
+## Platform Detection
 
-El router automáticamente detecta páginas en la estructura:
+The router automatically detects:
 
-```
-app/pages/
-├── index.tsx          -> ruta: /
-├── about.tsx          -> ruta: /about
-├── products/
-│   ├── index.tsx      -> ruta: /products
-│   └── [id].tsx       -> ruta: /products/:id
-└── blog/
-    └── post.tsx       -> ruta: /blog/post
-```
+- **Device Type**: mobile, tablet, desktop
+- **Operating System**: iOS, Android, Windows, macOS, Linux
+- **Environment**: webview, browser
+- **Category**: webview.android, webview.ios, mobile, etc.
 
-## Soporte Multi-Platform
+### Platform-Specific Assets
 
-### Estilos específicos por platform
+Based on detection, the router serves appropriate assets:
 
 ```
-app/pages/home/
-├── index.tsx
-├── index.scss         -> estilos generales
-├── index.mobile.scss  -> solo móvil
-└── index.desktop.scss -> solo desktop
+app/pages/home/index.tsx           # Base page
+app/pages/home/index.scss          # Base styles
+app/pages/home/index.mobile.scss   # Mobile-specific styles
+app/pages/home/index.webview.android.scss  # Android WebView styles
 ```
 
-### Detección automática
-
-El router detecta el device usando el User-Agent y carga estilos específicos:
-
-```javascript
-// En el cliente se añade automáticamente:
-document.documentElement.classList.add('mobile') // o 'desktop'
+Generated entry-clients:
+```
+dist/.entries/home__index__entry-client.tsx                    # Base
+dist/.entries/home__index__entry-client.mobile.tsx             # Mobile
+dist/.entries/home__index__entry-client.webview.android.tsx    # Android WebView
 ```
 
-## API
+## API Reference
 
-### `createViteRouter(options)`
+### createViteRouter(options)
 
-Crea un Express Router configurado automáticamente.
+Creates an Express router with SSR capabilities.
 
 ```typescript
-interface RouterFactoryOptions {
-  pagesDir: string              // Directorio de páginas
-  outputDir?: string           // Directorio para entries generados
-  enableSSR?: boolean          // Habilitar SSR (default: true)
-  enablePlatformDetection?: boolean // Detección de platform (default: true)
-  staticDir?: string           // Directorio de archivos estáticos
+interface ViteRouterOptions {
+  enablePlatformDetection?: boolean  // Enable platform detection (default: true)
+  vite?: any                        // Vite dev server instance
+  manifest?: any                    // Production manifest
+  templateHtml?: string             // HTML template
+  isProduction?: boolean            // Production mode
+  renderFunction?: (options: {      // Custom render function
+    url: string
+    platform: string
+    req: any
+  }) => Promise<string>
 }
 ```
 
-### `createInitializedViteRouter(options)`
-
-Versión async que inicializa automáticamente el router.
-
-### `RouterFactory`
-
-Clase para control completo del router.
+### generateHTML(template, rendered, page, manifest, platform, isProduction, platformInfo)
 
-#### Métodos
+Generates complete HTML with proper asset injection and hydration.
 
-- `initialize()` - Genera entries iniciales
-- `createRouter()` - Crea el Express Router
-- `cleanup()` - Limpia archivos temporales
-
-### `PageDetector`
-
-Utilidad para detectar páginas automáticamente.
-
-```javascript
-import { PageDetector } from '@ressjs/vite-router'
-
-const detector = new PageDetector({
-  pagesDir: 'app/pages'
-})
-
-const pages = await detector.getDetectedPages()
-const match = detector.matchRoute('/products/123', pages)
+```typescript
+export async function generateHTML(
+  template: string,
+  rendered: any,
+  page: any,
+  manifest: any,
+  platform: string,
+  isProduction: boolean,
+  platformInfo: any = null
+): Promise<string>
 ```
 
-### `EntryGenerator`
-
-Generador de entry clients dinámicos.
-
-```javascript
-import { EntryGenerator } from '@ressjs/vite-router'
+### Utility Functions
 
-const generator = new EntryGenerator({
-  pagesDir: 'app/pages',
-  outputDir: 'dist/.entries'
-})
+```typescript
+// Get all discovered pages
+import { getPages, listDetectedPages } from '@ressjs/vite-router'
 
-const platform = generator.detectPlatformFromRequest(req)
-const entry = await generator.generatePlatformSpecificEntry(
-  '/products', 
-  platform, 
-  pages
-)
+const pages = await getPages()
+const pageList = listDetectedPages()
 ```
 
-## Integración con Vite
-
-Ejemplo completo con Vite development server:
+## File Structure
 
-```javascript
-import fs from 'node:fs/promises'
-import express from 'express'
-import { createInitializedViteRouter } from '@ressjs/vite-router'
-
-const isProduction = process.env.NODE_ENV === 'production'
-const app = express()
-
-let vite
-if (!isProduction) {
-  const { createServer } = await import('vite')
-  vite = await createServer({
-    server: { middlewareMode: true },
-    appType: 'custom'
-  })
-  app.use(vite.middlewares)
-}
-
-// Router automático con SSR
-const viteRouter = await createInitializedViteRouter({
-  pagesDir: 'app/pages',
-  enableSSR: true,
-  enablePlatformDetection: true
-})
+The router expects the following structure:
 
-app.use('/', viteRouter)
-app.listen(3000)
+```
+app/
+  pages/
+    index.tsx                    # Home page
+    about/
+      index.tsx                 # About page
+      index.mobile.scss         # Mobile styles
+    products/
+      [id].tsx                  # Dynamic route
+      [id].webview.ios.scss     # iOS WebView styles
 ```
 
-## Middleware Stack
-
-El router crea automáticamente el siguiente stack de middleware:
+## Development
 
-1. **Page Detection** - Detecta páginas y prepara contexto
-2. **Platform Detection** - Detecta dispositivo (móvil/desktop)
-3. **Entry Generation** - Genera entry client específico
-4. **SSR Rendering** - Renderiza servidor-side con React
-5. **Static Files** - Fallback para archivos estáticos
+```bash
+# Build the package
+npm run build
 
-## Tipos TypeScript
+# Run tests
+npm test
 
-```typescript
-import type { 
-  RouterFactoryOptions,
-  RouteContext,
-  PageRouterInfo,
-  EntryGeneratorOptions 
-} from '@ressjs/vite-router'
+# Watch mode
+npm run dev
 ```
 
-## Ejemplos
+## License
 
-Ver `/examples/basic-ssr/` para un ejemplo completo de uso.
+MIT

package/dist/helpers/html-generator.d.ts

@@ -0,0 +1,13 @@
+import { PlatformInfo } from '../platform';
+export interface HTMLGenerationContext {
+    template: string;
+    rendered: any;
+    page: any;
+    manifest: any;
+    platform: string;
+    isProduction: boolean;
+    platformInfo: PlatformInfo | null;
+}
+export declare function generateClientScript(pageFile: string, platformInfo: PlatformInfo | null, manifest: any, isProduction: boolean): Promise<string | null>;
+export declare function generateClientCSS(pageFile: string, platformInfo: PlatformInfo | null, manifest: any, isProduction: boolean): string;
+export declare function generateCompleteHTML(context: HTMLGenerationContext): Promise<string>;

package/dist/helpers/html-generator.js

@@ -0,0 +1,108 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateClientScript = generateClientScript;
+exports.generateClientCSS = generateClientCSS;
+exports.generateCompleteHTML = generateCompleteHTML;
+const promises_1 = __importDefault(require("node:fs/promises"));
+async function generateClientScript(pageFile, platformInfo, manifest, isProduction) {
+    const rel = pageFile.replace(/^app\/pages\//, '').replace(/\.tsx$|\.jsx$/, '').replace(/\//g, '__');
+    let entryKey = `${rel}__entry-client.tsx`;
+    if (platformInfo && platformInfo.device !== 'desktop') {
+        // Priority order (from highest to lowest):
+        const priorities = [
+            // 1. Specific: device.os.tsx
+            `${rel}__entry-client.${platformInfo.device}.${platformInfo.os}.tsx`,
+            // 2. DeviceType: device.tsx
+            `${rel}__entry-client.${platformInfo.device}.tsx`,
+            // 3. Mobile Fallback: mobile.tsx (only for phone/tablet)
+            ...(platformInfo.device === 'phone' || platformInfo.device === 'tablet'
+                ? [`${rel}__entry-client.mobile.tsx`]
+                : []),
+            // 4. OS General: os.tsx
+            `${rel}__entry-client.${platformInfo.os}.tsx`
+        ];
+        // Find first existing entry following priority order
+        for (const candidate of priorities) {
+            if (isProduction) {
+                // In production, check manifest
+                const manifestKey = `dist/.entries/${candidate}`;
+                if (manifest[manifestKey]) {
+                    entryKey = candidate;
+                    break;
+                }
+            }
+            else {
+                // In development, check if physical file exists
+                try {
+                    await promises_1.default.access(`dist/.entries/${candidate}`);
+                    entryKey = candidate;
+                    break;
+                }
+                catch {
+                    // File doesn't exist, continue to next priority
+                }
+            }
+        }
+    }
+    if (!isProduction) {
+        return `/dist/.entries/${entryKey}`;
+    }
+    else {
+        const chunk = manifest[`dist/.entries/${entryKey}`];
+        return chunk ? `/${chunk.file}` : null;
+    }
+}
+function generateClientCSS(pageFile, platformInfo, manifest, isProduction) {
+    if (!isProduction || !pageFile) {
+        return '';
+    }
+    const rel = pageFile.replace(/^app\/pages\//, '').replace(/\.tsx$|\.jsx$/, '').replace(/\//g, '__');
+    let entryKey = `dist/.entries/${rel}__entry-client.tsx`;
+    if (platformInfo && platformInfo.device !== 'desktop') {
+        // Priority order (from highest to lowest):
+        const priorities = [
+            // 1. Specific: device.os.tsx
+            `dist/.entries/${rel}__entry-client.${platformInfo.device}.${platformInfo.os}.tsx`,
+            // 2. DeviceType: device.tsx
+            `dist/.entries/${rel}__entry-client.${platformInfo.device}.tsx`,
+            // 3. Mobile Fallback: mobile.tsx (only for phone/tablet)
+            ...(platformInfo.device === 'phone' || platformInfo.device === 'tablet'
+                ? [`dist/.entries/${rel}__entry-client.mobile.tsx`]
+                : []),
+            // 4. OS General: os.tsx
+            `dist/.entries/${rel}__entry-client.${platformInfo.os}.tsx`
+        ];
+        // Find first existing entry following priority order
+        for (const candidate of priorities) {
+            if (manifest[candidate]) {
+                entryKey = candidate;
+                break;
+            }
+        }
+    }
+    const entryChunk = manifest[entryKey];
+    if (entryChunk && entryChunk.css) {
+        return entryChunk.css.map((cssFile) => `<link rel="stylesheet" href="/${cssFile}">`).join('');
+    }
+    return '';
+}
+async function generateCompleteHTML(context) {
+    const { template, rendered, page, manifest, isProduction, platformInfo } = context;
+    const scriptSrc = await generateClientScript(page.file, platformInfo, manifest, isProduction);
+    const scriptTag = scriptSrc ? `<script type="module" src="${scriptSrc}"></script>` : '';
+    const cssLinks = page?.file ? generateClientCSS(page.file, platformInfo, manifest, isProduction) : '';
+    const html = template
+        .replace('<!--app-head-->', cssLinks)
+        .replace('<!--app-html-->', rendered.html)
+        .replace('</body>', `<script>
+        window.__INITIAL_PROPS__=${JSON.stringify(rendered.props || {})};
+        window.__PAGE_ROUTE__=${JSON.stringify(page.route)};
+        window.__PAGE_FILE__=${JSON.stringify(page.file)};
+      </script>
+      ${scriptTag}
+      </body>`);
+    return html;
+}

package/dist/helpers/request-handler.d.ts

@@ -0,0 +1,17 @@
+import { ViteConfig } from './vite-config';
+export interface RequestContext {
+    req: any;
+    res: any;
+    page: any;
+    next: any;
+}
+export interface RouterConfig {
+    enablePlatformDetection: boolean;
+    renderFunction?: (options: {
+        url: string;
+        platform: string;
+        req: any;
+    }) => Promise<string>;
+    viteConfig: ViteConfig;
+}
+export declare function processRequest(context: RequestContext, config: RouterConfig, renderServer?: any): Promise<void>;

package/dist/helpers/request-handler.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processRequest = processRequest;
+const promises_1 = __importDefault(require("node:fs/promises"));
+const pages_1 = require("../pages");
+const platform_1 = require("../platform");
+const html_generator_1 = require("./html-generator");
+async function preparePlatform(req, enablePlatformDetection = true, isProduction = false) {
+    if (!enablePlatformDetection) {
+        return {
+            platform: 'desktop',
+            platformInfo: null
+        };
+    }
+    const userAgent = req.headers['user-agent'] || '';
+    const platformInfo = (0, platform_1.detectPlatform)(userAgent, req.headers);
+    const platform = (platformInfo.device === 'phone' || platformInfo.device === 'tablet') ? 'mobile' : 'desktop';
+    if (!isProduction && platformInfo) {
+        await (0, pages_1.generateTempEntries)('dist', platformInfo);
+    }
+    return { platform, platformInfo };
+}
+async function processRequest(context, config, renderServer) {
+    const { req, res, page, next } = context;
+    const { enablePlatformDetection, renderFunction, viteConfig } = config;
+    try {
+        const platformContext = await preparePlatform(req, enablePlatformDetection, viteConfig.isProduction);
+        if (renderFunction) {
+            const html = await renderFunction({
+                url: req.url,
+                platform: platformContext.platform,
+                req
+            });
+            res.setHeader('Content-Type', 'text/html');
+            res.send(html);
+            return;
+        }
+        if (!renderServer) {
+            const renderOptions = viteConfig.vite ? { vite: viteConfig.vite } : {};
+            renderServer = (0, pages_1.createRenderServer)(renderOptions);
+        }
+        const protocol = req.headers['x-forwarded-proto'] || (req.connection?.encrypted ? 'https' : 'http');
+        const host = req.headers.host || 'localhost';
+        const urlObj = new URL(req.url, `${protocol}://${host}`);
+        const pathname = urlObj.pathname;
+        const rendered = await renderServer({ url: pathname });
+        const template = await getTemplate(req, viteConfig);
+        const html = await (0, html_generator_1.generateCompleteHTML)({
+            template,
+            rendered,
+            page,
+            manifest: viteConfig.manifest,
+            platform: platformContext.platform,
+            isProduction: viteConfig.isProduction,
+            platformInfo: platformContext.platformInfo
+        });
+        res.setHeader('Content-Type', 'text/html');
+        res.send(html);
+    }
+    catch (error) {
+        console.error(`Error handling ${req.url}:`, error);
+        if (viteConfig.vite?.ssrFixStacktrace) {
+            viteConfig.vite.ssrFixStacktrace(error);
+        }
+        next(error);
+    }
+}
+async function getTemplate(req, viteConfig) {
+    if (!viteConfig.isProduction) {
+        const template = await promises_1.default.readFile('./index.html', 'utf-8');
+        return viteConfig.vite ? await viteConfig.vite.transformIndexHtml(req.url, template) : template;
+    }
+    else {
+        return viteConfig.templateHtml;
+    }
+}

package/dist/helpers/vite-config.d.ts

@@ -0,0 +1,10 @@
+export interface ViteConfig {
+    vite?: any;
+    manifest: any;
+    templateHtml: string;
+    isProduction: boolean;
+}
+export declare function setupDev(base?: string): Promise<ViteConfig>;
+export declare function setupProd(): Promise<Pick<ViteConfig, 'manifest' | 'templateHtml'>>;
+export declare function createProdMiddleware(): () => Promise<import("express-serve-static-core").Router>;
+export declare function setupVite(isProduction: boolean, base?: string): Promise<ViteConfig>;

package/dist/helpers/vite-config.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupDev = setupDev;
+exports.setupProd = setupProd;
+exports.createProdMiddleware = createProdMiddleware;
+exports.setupVite = setupVite;
+const promises_1 = __importDefault(require("node:fs/promises"));
+const express_1 = __importDefault(require("express"));
+const pages_1 = require("../pages");
+async function setupDev(base = '/') {
+    const vite = await Promise.resolve().then(() => __importStar(require('vite'))).then(m => m.createServer({
+        server: { middlewareMode: true },
+        appType: 'custom',
+        base
+    }));
+    let manifest = {};
+    try {
+        manifest = JSON.parse(await promises_1.default.readFile('./dist/client/.vite/manifest.json', 'utf-8'));
+    }
+    catch {
+        // Expected in dev if no build yet
+    }
+    await (0, pages_1.generateTempEntries)();
+    const templateHtml = await promises_1.default.readFile('./index.html', 'utf-8');
+    return { vite, manifest, templateHtml, isProduction: false };
+}
+async function setupProd() {
+    const manifest = JSON.parse(await promises_1.default.readFile('./dist/client/.vite/manifest.json', 'utf-8'));
+    const templateHtml = await promises_1.default.readFile('./index.html', 'utf-8');
+    return { manifest, templateHtml };
+}
+function createProdMiddleware() {
+    const middlewares = express_1.default.Router();
+    return async () => {
+        const compression = (await Promise.resolve().then(() => __importStar(require('compression')))).default;
+        const sirv = (await Promise.resolve().then(() => __importStar(require('sirv')))).default;
+        middlewares.use(compression());
+        middlewares.use(sirv('./dist/client', { extensions: [] }));
+        return middlewares;
+    };
+}
+async function setupVite(isProduction, base = '/') {
+    if (isProduction) {
+        const prodConfig = await setupProd();
+        return {
+            vite: undefined,
+            manifest: prodConfig.manifest,
+            templateHtml: prodConfig.templateHtml,
+            isProduction: true
+        };
+    }
+    else {
+        const devConfig = await setupDev(base);
+        return {
+            vite: devConfig.vite,
+            manifest: devConfig.manifest,
+            templateHtml: '',
+            isProduction: false
+        };
+    }
+}

package/dist/index.d.ts

@@ -1,9 +1,6 @@
-export { createViteRouter, createAutoViteServer, detectPlatform, listDetectedPages, getPages } from './simple-router.js';
-export type { ViteRouterOptions, AutoViteServerOptions } from './simple-router.js';
-export { RouterFactory, createInitializedViteRouter } from './router-factory.js';
-export { PageDetector } from './page-detector.js';
-export { EntryGenerator } from './entry-generator.js';
-export type { RouterFactoryOptions, RouteContext } from './router-factory.js';
-export type { RouterOptions, PageRouterInfo } from './page-detector.js';
-export type { EntryGeneratorOptions } from './entry-generator.js';
-export type { PageInfo } from '@ressjs/core';
+export { createViteRouter, createAutoViteServer, listDetectedPages, getPages } from './router';
+export { getViteInput, getClientEntriesInput, generateTempEntries, createRenderServer, resolvePlatformCSS } from './pages';
+export { detectPlatform, getPlatformCSSClass, resolveEntryClient } from './platform';
+export type { PlatformInfo } from './platform';
+export type { ViteRouterOptions, AutoViteServerOptions } from './router';
+export type { PageInfo } from './pages';