@ressjs/vite-router 0.4.1 → 0.5.0

package/dist/pages.js

@@ -36,19 +36,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertRouteToExpress = convertRouteToExpress;
 exports.getPages = getPages;
 exports.getViteInput = getViteInput;
+exports.getViteSSRInput = getViteSSRInput;
 exports.loadManifest = loadManifest;
+exports.getCompiledProdPage = getCompiledProdPage;
 exports.resolvePlatformCSS = resolvePlatformCSS;
 exports.generateTempEntries = generateTempEntries;
 exports.generateSingleEntry = generateSingleEntry;
 exports.getClientEntriesInput = getClientEntriesInput;
-exports.createRenderServer = createRenderServer;
 const promises_1 = __importDefault(require("node:fs/promises"));
 const node_path_1 = __importDefault(require("node:path"));
 const fast_glob_1 = __importDefault(require("fast-glob"));
-const react_1 = __importDefault(require("react"));
-const server_1 = require("react-dom/server");
+/**
+ * Convierte rutas estilo Next.js con parámetros dinámicos a formato Express
+ * Ejemplos:
+ * '/photocard/[idPhotocard]' → '/photocard/:idPhotocard'
+ * '/products/[category]/[id]' → '/products/:category/:id'
+ * '/home' → '/home' (sin cambios)
+ */
+function convertRouteToExpress(route) {
+    return route.replace(/\[([^\]]+)\]/g, ':$1');
+}
 function getPages() {
     // Busca tanto page.tsx como page/index.tsx y prioriza el más corto
     const files = fast_glob_1.default.sync('app/pages/**/*.{tsx,jsx}');
@@ -60,7 +70,8 @@ function getPages() {
         // Prioriza page.tsx sobre page/index.tsx
         if (!seen.has(route)) {
             seen.add(route);
-            pages.push({ route, file, abs: node_path_1.default.resolve(file) });
+            const expressRoute = convertRouteToExpress(route);
+            pages.push({ route, expressRoute, file, abs: node_path_1.default.resolve(file) });
         }
     }
     return pages;
@@ -74,6 +85,17 @@ function getViteInput() {
     }
     return input;
 }
+// Para Vite SSR: input incluyendo páginas + middlewares
+function getViteSSRInput() {
+    const input = getViteInput(); // Empezar con las páginas
+    // Agregar TODOS los middlewares: .middlewares.ts y middlewares.ts
+    const middlewareFiles = fast_glob_1.default.sync('app/pages/**/{middlewares,*.middlewares}.{ts,js}');
+    for (const middlewareFile of middlewareFiles) {
+        const key = middlewareFile.replace(/^app\/pages\//, '').replace(/\.(ts|js)$/, '');
+        input[key] = node_path_1.default.resolve(middlewareFile);
+    }
+    return input;
+}
 async function loadManifest(distPath = 'dist') {
     const assetsDir = node_path_1.default.join(distPath, 'server/.vite');
     const files = await promises_1.default.readdir(assetsDir);
@@ -84,6 +106,38 @@ async function loadManifest(distPath = 'dist') {
     const manifest = (await Promise.resolve(`${node_path_1.default.join(assetsDir, manifestFile)}`).then(s => __importStar(require(s)))).default;
     return manifest;
 }
+/**
+ * Convierte una ruta de página TypeScript a su equivalente compilado en producción
+ *
+ * @param pageFile - Ruta del archivo de página (relativa: "app/pages/pokedex/index.tsx" o absoluta: "/path/to/app/pages/pokedex/index.tsx")
+ * @returns Ruta absoluta del archivo compilado (ej: "/path/to/project/dist/server/pokedex/index.js")
+ */
+function getCompiledProdPage(pageFile) {
+    if (!pageFile.endsWith('.tsx')) {
+        throw new Error(`getCompiledProdPage expects a .tsx file, got: ${pageFile}`);
+    }
+    // Si es una ruta absoluta, extraer solo la parte relativa
+    let relativePath;
+    if (node_path_1.default.isAbsolute(pageFile)) {
+        // Buscar la parte después de "app/pages/" or "app\pages\" (Windows-compatible)
+        const normalizedPath = pageFile.replace(/\\/g, '/');
+        const appPagesIndex = normalizedPath.indexOf('app/pages/');
+        if (appPagesIndex === -1) {
+            throw new Error(`Absolute path must contain "app/pages/", got: ${pageFile}`);
+        }
+        relativePath = normalizedPath.substring(appPagesIndex);
+    }
+    else {
+        relativePath = pageFile;
+    }
+    // Convertir app/pages/pokedex/index.tsx a dist/server/pokedex/index.js
+    // También convierte [id] a _id_ para rutas dinámicas
+    const compiledRelativePath = relativePath
+        .replace(/^app\/pages\//, '') // Quitar prefijo app/pages/
+        .replace(/\.tsx$/, '.js') // Cambiar extensión .tsx a .js
+        .replace(/\[([^\]]+)\]/g, '_$1_'); // Convertir [id] a _id_
+    return node_path_1.default.resolve(process.cwd(), 'dist', 'server', compiledRelativePath);
+}
 async function fileExists(file) {
     try {
         await promises_1.default.access(file);
@@ -145,7 +199,12 @@ async function generateTempEntries(distPath = 'dist', platformInfo) {
     // Solo crea el directorio si no existe, no lo borra
     await promises_1.default.mkdir(entriesDir, { recursive: true });
     const promises = pages.map(async (page) => {
-        const rel = page.file.replace(/^app\/pages\//, '').replace(/\.tsx$|\.jsx$/, '').replace(/\//g, '__');
+        // Sanitizar nombre: convertir [id] a _id_ para nombres de archivo
+        const rel = page.file
+            .replace(/^app\/pages\//, '')
+            .replace(/\.tsx$|\.jsx$/, '')
+            .replace(/\//g, '__')
+            .replace(/\[([^\]]+)\]/g, '_$1_');
         if (platformInfo && platformInfo.device !== 'desktop') {
             // Solo genera entry específico para mobile devices (phone, tablet)
             const basePath = page.file.replace(/\.(tsx|jsx)$/, '');
@@ -238,59 +297,3 @@ async function getClientEntriesInput(distPath = 'dist') {
     }
     return input;
 }
-function createRenderServer(options = {}) {
-    const pages = getPages();
-    const { vite } = options;
-    return async (renderOptions) => {
-        const { url, props = {} } = renderOptions;
-        // Encuentra la página que coincide con la URL
-        const matchedPage = pages.find(page => {
-            if (page.route === '/')
-                return url === '/' || url === '';
-            return url === page.route || url.startsWith(page.route + '/');
-        });
-        if (!matchedPage) {
-            throw new Error(`Page not found for URL: ${url}`);
-        }
-        try {
-            // Import dinámico de la página usando vite.ssrLoadModule si está disponible
-            let pageModule;
-            if (vite) {
-                // En desarrollo: usar vite.ssrLoadModule para manejar .tsx
-                const modulePath = `/${matchedPage.file}`;
-                pageModule = await vite.ssrLoadModule(modulePath);
-            }
-            else {
-                // En producción: usar import directo del archivo compilado
-                const moduleUrl = matchedPage.abs.replace(/\.tsx$/, '.js').replace('/app/pages/', '/dist/server/');
-                pageModule = await Promise.resolve(`${moduleUrl}`).then(s => __importStar(require(s)));
-            }
-            const PageComponent = pageModule.default;
-            const getServerSideProps = pageModule.getServerSideProps;
-            if (!PageComponent) {
-                throw new Error(`No default export found in ${matchedPage.file}`);
-            }
-            // Si existe getServerSideProps, la ejecutamos para obtener props iniciales
-            let finalProps = { ...props };
-            if (getServerSideProps && typeof getServerSideProps === 'function') {
-                console.log(`Calling getServerSideProps for ${matchedPage.route}`);
-                const serverSideResult = await getServerSideProps();
-                if (serverSideResult && serverSideResult.props) {
-                    finalProps = { ...finalProps, ...serverSideResult.props };
-                }
-            }
-            // Renderiza el componente con las props finales
-            const html = (0, server_1.renderToString)(react_1.default.createElement(PageComponent, finalProps));
-            return {
-                html,
-                props: finalProps,
-                route: matchedPage.route,
-                page: matchedPage.file
-            };
-        }
-        catch (error) {
-            console.error(`Error rendering page ${matchedPage.route}:`, error);
-            throw error;
-        }
-    };
-}

package/dist/platform.d.ts

@@ -14,11 +14,3 @@ export interface PlatformInfo {
  * Detecta plataforma usando headers custom + User-Agent fallback
  */
 export declare function detectPlatform(userAgent: string, headers?: any): PlatformInfo;
-/**
- * Genera CSS class para HTML basado en platform info
- */
-export declare function getPlatformCSSClass(platform: PlatformInfo): string;
-/**
- * Determina qué entry-client usar basado en platform
- */
-export declare function resolveEntryClient(baseName: string, platform: PlatformInfo): string;

package/dist/platform.js

@@ -5,8 +5,6 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.detectPlatform = detectPlatform;
-exports.getPlatformCSSClass = getPlatformCSSClass;
-exports.resolveEntryClient = resolveEntryClient;
 /**
  * Detecta plataforma usando headers custom + User-Agent fallback
  */
@@ -106,38 +104,3 @@ function detectFromUserAgent(userAgent) {
         source: 'user-agent'
     };
 }
-/**
- * Genera CSS class para HTML basado en platform info
- */
-function getPlatformCSSClass(platform) {
-    const classes = [
-        platform.category, // 'web', 'webview', 'native'
-        platform.device, // 'phone', 'tablet', 'desktop'
-        platform.os // 'ios', 'android', etc.
-    ];
-    return classes.join(' ');
-}
-/**
- * Determina qué entry-client usar basado en platform
- */
-function resolveEntryClient(baseName, platform) {
-    const candidates = [
-        // Específico para mobile: device.os (phone.ios, tablet.android)
-        ...(platform.device !== 'desktop'
-            ? [`${baseName}__entry-client.${platform.device}.${platform.os}.tsx`]
-            : []),
-        // OS específico: ios, android
-        `${baseName}__entry-client.${platform.os}.tsx`,
-        // Device: mobile, desktop, tablet
-        `${baseName}__entry-client.${platform.device}.tsx`,
-        // Legacy compatibility
-        ...(platform.device === 'phone' || platform.device === 'tablet'
-            ? [`${baseName}__entry-client.mobile.tsx`]
-            : []),
-        // Fallback
-        `${baseName}__entry-client.tsx`
-    ];
-    // En producción, deberías verificar que el archivo existe
-    // Por ahora retorna el primer candidato
-    return candidates[0];
-}

package/dist/render.d.ts

@@ -1,3 +1,8 @@
+import { RequestHandler } from 'express';
+/**
+ * RENDER MIDDLEWARE PARA EL ROUTER
+ */
+export declare function createRenderMiddleware(page: any, options: any): RequestHandler;
 export interface RenderOptions {
     url: string;
     props?: any;

package/dist/render.js

@@ -36,21 +36,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRenderMiddleware = createRenderMiddleware;
 exports.createRenderServer = createRenderServer;
 const react_1 = __importDefault(require("react"));
 const server_1 = require("react-dom/server");
 const pages_1 = require("./pages");
+const request_handler_1 = require("./helpers/request-handler");
+/**
+ * RENDER MIDDLEWARE PARA EL ROUTER
+ */
+function createRenderMiddleware(page, options) {
+    return async (req, res, next) => {
+        try {
+            await (0, request_handler_1.processRequest)({ req, res, page, next }, options);
+        }
+        catch (error) {
+            next(error);
+        }
+    };
+}
 function createRenderServer(options = {}) {
     const pages = (0, pages_1.getPages)();
     const { vite } = options;
     return async (renderOptions) => {
         const { url, props = {} } = renderOptions;
         // Encuentra la página que coincide con la URL
-        const matchedPage = pages.find(page => {
-            if (page.route === '/')
+        // Función helper para hacer matching de rutas dinámicas
+        const matchRoute = (pageRoute, url) => {
+            if (pageRoute === '/')
                 return url === '/' || url === '';
-            return url === page.route || url.startsWith(page.route + '/');
-        });
+            // Si no tiene parámetros dinámicos, hacer matching exacto
+            if (!pageRoute.includes('[')) {
+                return url === pageRoute || url.startsWith(pageRoute + '/');
+            }
+            // Convertir ruta de página a regex para matching dinámico
+            // Ejemplo: /photocard/[id] → /^\/photocard\/([^\/]+)$/
+            const regexPattern = pageRoute
+                .replace(/\[([^\]]+)\]/g, '([^/]+)') // [id] → ([^/]+)
+                .replace(/\//g, '\\/'); // escapar slashes
+            const regex = new RegExp(`^${regexPattern}$`);
+            return regex.test(url);
+        };
+        const matchedPage = pages.find(page => matchRoute(page.route, url));
         if (!matchedPage) {
             throw new Error(`Page not found for URL: ${url}`);
         }
@@ -64,28 +91,34 @@ function createRenderServer(options = {}) {
             }
             else {
                 // En producción: usar import directo del archivo compilado
-                const moduleUrl = matchedPage.abs.replace(/\.tsx$/, '.js').replace('/app/pages/', '/dist/server/');
-                pageModule = await Promise.resolve(`${moduleUrl}`).then(s => __importStar(require(s)));
+                const moduleUrl = (0, pages_1.getCompiledProdPage)(matchedPage.abs);
+                try {
+                    pageModule = await Promise.resolve(`${moduleUrl}`).then(s => __importStar(require(s)));
+                }
+                catch (importError) {
+                    console.error('Error loading module:', importError);
+                    throw importError;
+                }
             }
             const PageComponent = pageModule.default;
-            const getServerSideProps = pageModule.getServerSideProps;
             if (!PageComponent) {
                 throw new Error(`No default export found in ${matchedPage.file}`);
             }
-            // Si existe getServerSideProps, la ejecutamos para obtener props iniciales
-            let finalProps = { ...props };
-            if (getServerSideProps && typeof getServerSideProps === 'function') {
-                console.log(`Calling getServerSideProps for ${matchedPage.route}`);
-                const serverSideResult = await getServerSideProps();
-                if (serverSideResult && serverSideResult.props) {
-                    finalProps = { ...finalProps, ...serverSideResult.props };
-                }
-            }
+            // Los middlewares ya se ejecutaron antes de llegar aquí.
+            // `props` contiene todo lo que los middlewares pusieron en `res.locals`.
+            // Combinamos todo para SSR y luego filtramos lo sensible para el cliente.
+            const finalProps = {
+                ...props,
+                ...(props.serverSideProps || {})
+            };
             // Renderiza el componente con las props finales
             const html = (0, server_1.renderToString)(react_1.default.createElement(PageComponent, finalProps));
+            // Evitar mandar htmlConfig al cliente
+            const { htmlConfig, serverSideProps, ...rest } = finalProps;
+            const clientProps = serverSideProps || rest;
             return {
                 html,
-                props: finalProps,
+                props: clientProps,
                 route: matchedPage.route,
                 page: matchedPage.file
             };

package/dist/router.js

@@ -11,7 +11,8 @@ const express_1 = require("express");
 const pages_1 = require("./pages");
 const express_2 = __importDefault(require("express"));
 const vite_config_1 = require("./helpers/vite-config");
-const request_handler_1 = require("./helpers/request-handler");
+const middlewares_1 = require("./helpers/middlewares");
+const render_1 = require("./render");
 async function createAutoViteServer(options = {}) {
     const { port = 5173, base = '/', enablePlatformDetection = true } = options;
     const isProduction = process.env.NODE_ENV === 'production';
@@ -36,12 +37,15 @@ async function createAutoViteServer(options = {}) {
     app.use(express_2.default.static('public'));
     const start = () => {
         return app.listen(port, () => {
-            const pages = (0, pages_1.getPages)();
-            console.log(`🚀 Auto Vite Server started at http://localhost:${port}`);
-            console.log(`📄 Auto-detected routes:`);
-            pages.forEach(page => {
-                console.log(`   ${page.route} -> ${page.file}`);
-            });
+            if (process.env.NODE_ENV !== 'production') {
+                const pages = (0, pages_1.getPages)();
+                console.log(`🚀 Auto Vite Server started at http://localhost:${port}`);
+                console.log(`📄 Auto-detected routes:`);
+                pages.forEach(page => {
+                    const expressDisplay = page.route !== page.expressRoute ? ` (Express: ${page.expressRoute})` : '';
+                    console.log(`   ${page.route}${expressDisplay} -> ${page.file}`);
+                });
+            }
         });
     };
     return { app, vite: viteConfig.vite, start };
@@ -54,10 +58,9 @@ function createViteRouter(options = {}) {
     return createManualRouter(options);
 }
 function createAutoRouter(options) {
-    const { enablePlatformDetection = true, renderFunction } = options;
+    const { renderFunction, enablePlatformDetection = true } = options;
     const isProduction = process.env.NODE_ENV === 'production';
     let viteConfig = null;
-    let renderServer = null;
     let initialized = false;
     const mainRouter = (0, express_1.Router)();
     const initializeIfNeeded = async () => {
@@ -77,38 +80,78 @@ function createAutoRouter(options) {
         return viteConfig;
     };
     const pages = (0, pages_1.getPages)();
-    pages.forEach(page => {
-        mainRouter.get(page.route, async (req, res, next) => {
+    // Initialize Vite ONCE before setting up any routes
+    const setupRoutes = async () => {
+        if (!viteConfig)
             await initializeIfNeeded();
-            await (0, request_handler_1.processRequest)({ req, res, page, next }, {
+        // Process pages sequentially to avoid race conditions
+        for (const page of pages) {
+            // Dynamic middleware loading for HMR support
+            const HMRMiddleware = await (0, middlewares_1.createDynamicPageMiddlewares)(page.route, page.file, viteConfig?.vite);
+            // Productive middlewares
+            const prevMiddlewares = await (0, middlewares_1.loadPageMiddlewares)(page.route, viteConfig?.vite);
+            const serverSidePropsMiddleware = await (0, middlewares_1.getServerSidePropsAsMiddleware)(page.file, viteConfig?.vite);
+            const renderMiddleware = (0, render_1.createRenderMiddleware)(page, {
                 enablePlatformDetection,
                 renderFunction,
-                viteConfig
-            }, renderServer);
-        });
-    });
+                viteConfig: () => viteConfig // pasar por función para evitar capturar null
+            });
+            const pageMiddlewares = isProduction ? [
+                ...prevMiddlewares,
+                serverSidePropsMiddleware,
+                renderMiddleware
+            ] : [
+                HMRMiddleware,
+                renderMiddleware
+            ];
+            mainRouter.get(page.expressRoute, ...pageMiddlewares);
+            // Error middleware separado
+            mainRouter.use(page.expressRoute, (0, middlewares_1.createPageErrorHandler)(page.file, viteConfig?.vite));
+        }
+    };
+    // Setup routes asynchronously but don't block router creation
+    setupRoutes().catch(console.error);
     return mainRouter;
 }
 function createManualRouter(options) {
-    const { enablePlatformDetection = true, vite, templateHtml = '', isProduction = process.env.NODE_ENV === 'production', renderFunction } = options;
+    const { vite, renderFunction, enablePlatformDetection = true } = options;
     const router = (0, express_1.Router)();
     const pages = (0, pages_1.getPages)();
-    let renderServer = null;
+    // Crear viteConfig para processRequest
     const viteConfig = {
         vite,
-        manifest: {},
-        templateHtml,
-        isProduction
+        templateHtml: options.templateHtml || '',
+        isProduction: options.isProduction || false,
+        manifest: null
     };
-    pages.forEach(page => {
-        router.get(page.route, async (req, res, next) => {
-            await (0, request_handler_1.processRequest)({ req, res, page, next }, {
+    // Process pages sequentially to avoid race conditions
+    const setupRoutes = async () => {
+        for (const page of pages) {
+            // Dynamic middleware loading for HMR support(only in dev)
+            const HMRMiddleware = await (0, middlewares_1.createDynamicPageMiddlewares)(page.route, page.file, vite);
+            // Productive middlewares
+            const prevMiddlewares = await (0, middlewares_1.loadPageMiddlewares)(page.route, vite);
+            const serverSidePropsMiddleware = await (0, middlewares_1.getServerSidePropsAsMiddleware)(page.file, vite);
+            const renderMiddleware = (0, render_1.createRenderMiddleware)(page, {
                 enablePlatformDetection,
                 renderFunction,
                 viteConfig
-            }, renderServer);
-        });
-    });
+            });
+            const pageMiddlewares = options.isProduction ? [
+                ...prevMiddlewares,
+                serverSidePropsMiddleware,
+                renderMiddleware
+            ] : [
+                HMRMiddleware,
+                renderMiddleware
+            ];
+            router.get(page.expressRoute, ...pageMiddlewares);
+            // Error middleware separado  
+            router.use(page.expressRoute, (0, middlewares_1.createPageErrorHandler)(page.file, vite));
+        }
+    };
+    // Setup routes asynchronously but don't block router creation
+    setupRoutes().catch(console.error);
     return router;
 }
 function listDetectedPages() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ressjs/vite-router",
-  "version": "0.4.1",
-  "description": "Express router factory for ress.js with automatic page detection and SSR",
+  "version": "0.5.0",
+  "description": "Express router factory for ress.js with automatic page detection, SSR and dynamic routes support",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "publishConfig": {