@ressjs/vite-router 0.4.1 → 0.4.2

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

@@ -7,6 +7,7 @@ export interface HTMLGenerationContext {
     platform: string;
     isProduction: boolean;
     platformInfo: PlatformInfo | null;
+    serverSideResult?: any;
 }
 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;

package/dist/helpers/html-generator.js

@@ -90,12 +90,40 @@ function generateClientCSS(pageFile, platformInfo, manifest, isProduction) {
     return '';
 }
 async function generateCompleteHTML(context) {
-    const { template, rendered, page, manifest, isProduction, platformInfo } = context;
+    const { template, rendered, page, manifest, isProduction, platformInfo, serverSideResult } = 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)
+    // Construir contenido HEAD extra y atributos desde serverSideResult
+    let headContent = cssLinks;
+    let htmlAttributes = '';
+    let bodyAttributes = '';
+    let pageTitle = '';
+    if (serverSideResult?.html) {
+        if (serverSideResult.html.head?.attributes) {
+            htmlAttributes = Object.entries(serverSideResult.html.head.attributes)
+                .map(([k, v]) => `${k}="${v}"`).join(' ');
+        }
+        if (serverSideResult.html.body?.attributes) {
+            bodyAttributes = Object.entries(serverSideResult.html.body.attributes)
+                .map(([k, v]) => `${k}="${v}"`).join(' ');
+        }
+        if (serverSideResult.html.head?.extraTags) {
+            headContent += '\n' + serverSideResult.html.head.extraTags.join('\n');
+        }
+        if (serverSideResult.title || serverSideResult.html.head?.title) {
+            pageTitle = `<title>${serverSideResult.title || serverSideResult.html.head?.title}</title>`;
+        }
+    }
+    let html = template;
+    if (htmlAttributes)
+        html = html.replace('<html', `<html ${htmlAttributes}`);
+    if (bodyAttributes)
+        html = html.replace('<body', `<body ${bodyAttributes}`);
+    if (pageTitle)
+        html = html.replace(/<title>.*?<\/title>/i, pageTitle);
+    html = html
+        .replace('<!--app-head-->', headContent)
         .replace('<!--app-html-->', rendered.html)
         .replace('</body>', `<script>
         window.__INITIAL_PROPS__=${JSON.stringify(rendered.props || {})};

package/dist/helpers/middlewares.d.ts

@@ -0,0 +1,72 @@
+import { Request, RequestHandler, Response } from 'express';
+export interface MiddlewareInfo {
+    route: string;
+    file: string;
+    abs: string;
+    type: 'page-specific' | 'folder-global';
+    depth: number;
+}
+export interface ServerSideResult {
+    props?: Record<string, any>;
+    title?: string;
+    html?: {
+        head?: {
+            title?: string;
+            attributes?: Record<string, string>;
+            extraTags?: string[];
+        };
+        body?: {
+            attributes?: Record<string, string>;
+        };
+    };
+}
+export interface PageModule {
+    default?: React.ComponentType<any>;
+    getServerSideProps?: (req: Request, res: Response) => Promise<ServerSideResult> | ServerSideResult;
+    errorMiddleware?: (err: any, req: Request, res: Response, next: any) => void;
+}
+/**
+ * Busca archivos de middlewares tanto específicos por página como globales por carpeta
+ */
+export declare function getMiddlewares(): MiddlewareInfo[];
+/**
+ * Carga middlewares para una página específica y los convierte en middlewares de Express
+ */
+export declare function loadPageMiddlewares(pageRoute: string, vite?: any): Promise<RequestHandler[]>;
+/**
+ * Carga el módulo completo de una página
+ */
+export declare function loadPageModule(pageFile: string, vite?: any): Promise<PageModule | null>;
+/**
+ * Convierte getServerSideProps en un middleware de Express
+ */
+export declare function createGetServerSidePropsMiddleware(pageModule: PageModule): RequestHandler;
+/**
+ * Creates a unified error handler for a specific page route
+ * This replaces the old createPageErrorMiddleware with a more useful approach
+ */
+export declare function createPageErrorHandler(pageFile: string, vite?: any): (err: any, req: any, res: any, next: any) => Promise<void>;
+/**
+ * Creates a dynamic middleware handler that reloads middlewares on each request in development
+ * This enables HMR for middlewares
+ * I FUCKING HATE THIS FUNCTION BUT IT SEEMS TO WORK
+ */
+export declare function createDynamicPageMiddlewares(pageRoute: string, pageFile: string, vite?: any): RequestHandler;
+/**
+ * 1. Resuelve middlewares previos al getServerSideProps
+ */
+export declare function getPagePrevMiddlewares(pageRoute: string, vite?: any): Promise<RequestHandler[]>;
+/**
+ * 2. Convierte getServerSideProps a middleware
+ */
+export declare function getServerSidePropsAsMiddleware(pageFile: string, vite?: any): Promise<RequestHandler>;
+/**
+ * 3. Error middleware con fallback automático y jerarquía
+ * Orden de prioridad (el más específico gana):
+ * 1. errorMiddleware en page.tsx (más específico)
+ * 2. errorMiddleware en [page].middlewares.ts
+ * 3. errorMiddleware en carpeta/middlewares.ts
+ * 4. errorMiddleware en root middlewares.ts (más general)
+ * 5. defaultErrorMiddleware (fallback)
+ */
+export declare function getErrorMiddleware(pageFile: string, vite?: any): Promise<any>;

package/dist/helpers/middlewares.js

@@ -0,0 +1,381 @@
+"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.getMiddlewares = getMiddlewares;
+exports.loadPageMiddlewares = loadPageMiddlewares;
+exports.loadPageModule = loadPageModule;
+exports.createGetServerSidePropsMiddleware = createGetServerSidePropsMiddleware;
+exports.createPageErrorHandler = createPageErrorHandler;
+exports.createDynamicPageMiddlewares = createDynamicPageMiddlewares;
+exports.getPagePrevMiddlewares = getPagePrevMiddlewares;
+exports.getServerSidePropsAsMiddleware = getServerSidePropsAsMiddleware;
+exports.getErrorMiddleware = getErrorMiddleware;
+const node_path_1 = __importDefault(require("node:path"));
+const fast_glob_1 = __importDefault(require("fast-glob"));
+const pages_1 = require("../pages");
+/**
+ * Busca archivos de middlewares tanto específicos por página como globales por carpeta
+ */
+function getMiddlewares() {
+    // Busca archivos .middlewares.ts y middlewares.ts
+    const files = fast_glob_1.default.sync('app/pages/**/*.middlewares.{ts,js}');
+    const globalFiles = fast_glob_1.default.sync('app/pages/**/middlewares.{ts,js}');
+    const middlewares = [];
+    // Procesar archivos específicos de página: page.middlewares.ts
+    for (const file of files) {
+        let route = file.replace(/^app\/pages/, '').replace(/\.middlewares\.(ts|js)$/, '');
+        route = route.replace(/\/index$/, '') || '/';
+        // Calcular depth: contar slashes en la ruta del archivo
+        const depth = (file.match(/\//g) || []).length;
+        middlewares.push({
+            route,
+            file,
+            abs: node_path_1.default.resolve(file),
+            type: 'page-specific',
+            depth
+        });
+    }
+    // Procesar archivos globales: middlewares.ts
+    for (const file of globalFiles) {
+        let route = file.replace(/^app\/pages/, '').replace(/\/middlewares\.(ts|js)$/, '');
+        route = route || '/';
+        // Calcular depth: contar slashes en la ruta del archivo
+        const depth = (file.match(/\//g) || []).length;
+        middlewares.push({
+            route,
+            file,
+            abs: node_path_1.default.resolve(file),
+            type: 'folder-global',
+            depth
+        });
+    }
+    return middlewares;
+}
+/**
+ * Carga middlewares para una página específica y los convierte en middlewares de Express
+ */
+async function loadPageMiddlewares(pageRoute, vite) {
+    const allMiddlewares = getMiddlewares();
+    // Filtrar middlewares relevantes para esta página usando jerarquía
+    const relevantMiddlewares = allMiddlewares.filter(middleware => {
+        if (middleware.type === 'folder-global') {
+            // Un middleware global aplica si la página está dentro de su carpeta
+            // ej: middleware en "/pokedex" aplica a "/pokedex" y "/pokedex/detail"
+            return pageRoute.startsWith(middleware.route) || middleware.route === '/';
+        }
+        if (middleware.type === 'page-specific') {
+            // Un middleware específico aplica solo a esa página exacta por ruta
+            return middleware.route === pageRoute;
+        }
+        return false;
+    });
+    // Ordenar por jerarquía: depth menor primero, luego por tipo
+    relevantMiddlewares.sort((a, b) => {
+        // Primero por depth (carpetas más arriba en la jerarquía van primero)
+        if (a.depth !== b.depth) {
+            return a.depth - b.depth;
+        }
+        // Si están al mismo nivel, folder-global va antes que page-specific
+        if (a.type === 'folder-global' && b.type === 'page-specific')
+            return -1;
+        if (a.type === 'page-specific' && b.type === 'folder-global')
+            return 1;
+        return 0;
+    });
+    const expressMiddlewares = [];
+    // Cargar middlewares de archivos .middlewares.ts
+    for (const middlewareFile of relevantMiddlewares) {
+        try {
+            const moduleToLoad = await loadMiddlewareModule(middlewareFile, vite);
+            const handlers = moduleToLoad.default || [];
+            for (const handler of handlers) {
+                if (typeof handler === 'function') {
+                    expressMiddlewares.push(handler);
+                }
+            }
+        }
+        catch (error) {
+            console.error(`Error loading middleware ${middlewareFile.file}:`, error);
+        }
+    }
+    return expressMiddlewares;
+}
+/**
+ * Carga el módulo completo de una página
+ */
+async function loadPageModule(pageFile, vite) {
+    const isProduction = process.env.NODE_ENV === 'production';
+    const cacheKey = `${pageFile}-${process.env.NODE_ENV || 'development'}`;
+    // Only use cache in production mode to allow HMR in development
+    if (isProduction && pageModuleCache.has(cacheKey)) {
+        return pageModuleCache.get(cacheKey) || null;
+    }
+    try {
+        let pageModule;
+        if (vite) {
+            const modulePath = `/${pageFile}`;
+            pageModule = await vite.ssrLoadModule(modulePath);
+        }
+        else {
+            if (pageFile.endsWith('.tsx')) {
+                const moduleUrl = (0, pages_1.getCompiledProdPage)(pageFile);
+                pageModule = await Promise.resolve(`${moduleUrl}`).then(s => __importStar(require(s)));
+            }
+            else {
+                const moduleUrl = node_path_1.default.resolve(pageFile);
+                pageModule = await Promise.resolve(`${moduleUrl}`).then(s => __importStar(require(s)));
+            }
+        }
+        const result = pageModule;
+        // Only cache in production mode
+        if (isProduction) {
+            pageModuleCache.set(cacheKey, result);
+        }
+        return result;
+    }
+    catch (error) {
+        console.error(`Error loading page module ${pageFile}:`, error);
+        // Only cache null result in production mode
+        if (isProduction) {
+            pageModuleCache.set(cacheKey, null);
+        }
+        return null;
+    }
+}
+/**
+ * Convierte getServerSideProps en un middleware de Express
+ */
+function createGetServerSidePropsMiddleware(pageModule) {
+    return async (req, res, next) => {
+        if (!pageModule.getServerSideProps) {
+            next();
+            return;
+        }
+        try {
+            const result = await pageModule.getServerSideProps(req, res);
+            // Manejar ServerSideResult
+            if (result && typeof result === 'object') {
+                // SEPARAR: Configuración HTML se queda en servidor, props van al cliente
+                // Configuración HTML → solo para el servidor (NO va al cliente)
+                if (result.title || result.html) {
+                    res.locals.htmlConfig = {
+                        title: result.title,
+                        html: result.html
+                    };
+                }
+                // Props → solo en un bucket claro (serverSideProps)
+                if (result.props) {
+                    res.locals.serverSideProps = {
+                        ...(res.locals.serverSideProps || {}),
+                        ...result.props
+                    };
+                }
+            }
+            next();
+        }
+        catch (error) {
+            next(error);
+        }
+    };
+}
+/**
+ * Creates a unified error handler for a specific page route
+ * This replaces the old createPageErrorMiddleware with a more useful approach
+ */
+function createPageErrorHandler(pageFile, vite) {
+    return async (err, req, res, next) => {
+        const errorMiddleware = await getErrorMiddleware(pageFile, vite);
+        errorMiddleware(err, req, res, next);
+    };
+}
+/**
+ * Error middleware por defecto
+ */
+const defaultErrorMiddleware = (err, _req, res, _next) => {
+    console.error(err);
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn('No custom error handler configured. Add errorMiddleware export to your page or middleware file.');
+    }
+    res.status(500).send(err.message || 'Internal Server Error');
+};
+/**
+ * Creates a dynamic middleware handler that reloads middlewares on each request in development
+ * This enables HMR for middlewares
+ * I FUCKING HATE THIS FUNCTION BUT IT SEEMS TO WORK
+ */
+function createDynamicPageMiddlewares(pageRoute, pageFile, vite) {
+    return async (req, res, next) => {
+        try {
+            const middlewares = [
+                ...(await loadPageMiddlewares(pageRoute, vite)),
+                await getServerSidePropsAsMiddleware(pageFile, vite)
+            ];
+            // Execute middlewares sequentially
+            let currentIndex = 0;
+            const executeNext = (err) => {
+                if (err)
+                    return next(err);
+                const currentMiddleware = middlewares[currentIndex++];
+                if (!currentMiddleware)
+                    return next();
+                currentMiddleware(req, res, executeNext);
+            };
+            executeNext();
+        }
+        catch (error) {
+            next(error);
+        }
+    };
+}
+/**
+ * 1. Resuelve middlewares previos al getServerSideProps
+ */
+async function getPagePrevMiddlewares(pageRoute, vite) {
+    return await loadPageMiddlewares(pageRoute, vite);
+}
+/**
+ * 2. Convierte getServerSideProps a middleware
+ */
+async function getServerSidePropsAsMiddleware(pageFile, vite) {
+    const pageModule = await loadPageModule(pageFile, vite);
+    return pageModule ? createGetServerSidePropsMiddleware(pageModule) : (_req, _res, next) => next();
+}
+/**
+ * 3. Error middleware con fallback automático y jerarquía
+ * Orden de prioridad (el más específico gana):
+ * 1. errorMiddleware en page.tsx (más específico)
+ * 2. errorMiddleware en [page].middlewares.ts
+ * 3. errorMiddleware en carpeta/middlewares.ts
+ * 4. errorMiddleware en root middlewares.ts (más general)
+ * 5. defaultErrorMiddleware (fallback)
+ */
+async function getErrorMiddleware(pageFile, vite) {
+    const pageModule = await loadPageModule(pageFile, vite);
+    // 1. Prioridad máxima: errorMiddleware en la página
+    if (pageModule?.errorMiddleware) {
+        return pageModule.errorMiddleware;
+    }
+    // 2-4. Buscar errorMiddleware en middlewares siguiendo jerarquía
+    const errorMiddleware = await findErrorMiddlewareInHierarchy(pageFile, vite);
+    if (errorMiddleware) {
+        return errorMiddleware;
+    }
+    // 5. Fallback al default
+    return defaultErrorMiddleware;
+}
+/**
+ * Busca errorMiddleware en la jerarquía de middlewares
+ * Desde el más específico (página) hasta el más general (root)
+ */
+async function findErrorMiddlewareInHierarchy(pageFile, vite) {
+    // Obtener todos los middlewares que podrían aplicar a esta página
+    const allMiddlewares = getMiddlewares();
+    // Convertir pageFile a route para matching
+    let pageRoute = pageFile.replace(/^app\/pages/, '').replace(/\.(tsx|ts|jsx|js)$/, '');
+    pageRoute = pageRoute.replace(/\/index$/, '') || '/';
+    // Filtrar middlewares relevantes para esta página
+    const relevantMiddlewares = allMiddlewares
+        .filter(mw => {
+        // Para page-specific middlewares: debe coincidir exactamente con la ruta
+        if (mw.type === 'page-specific') {
+            return mw.route === pageRoute;
+        }
+        // Para folder-global middlewares: la página debe estar en esa carpeta o subcarpeta
+        if (mw.route === '/')
+            return true; // root middleware applies to all
+        // Si el middleware está en una carpeta, debe aplicar a todas las páginas de esa carpeta
+        // Ejemplo: /error-test/middlewares.ts aplica a /error-test/index, /error-test/sub, etc.
+        return pageRoute.startsWith(mw.route + '/') || pageRoute === mw.route;
+    })
+        .sort((a, b) => {
+        // Ordenar por especificidad: mayor depth = más específico
+        if (a.depth !== b.depth)
+            return b.depth - a.depth;
+        // Si mismo depth, page-specific > folder-global
+        if (a.type === 'page-specific' && b.type === 'folder-global')
+            return -1;
+        if (a.type === 'folder-global' && b.type === 'page-specific')
+            return 1;
+        return 0;
+    });
+    // Buscar errorMiddleware en orden de especificidad
+    for (const middlewareInfo of relevantMiddlewares) {
+        try {
+            const middlewareModule = await loadMiddlewareModule(middlewareInfo, vite);
+            if (middlewareModule?.errorMiddleware) {
+                return middlewareModule.errorMiddleware;
+            }
+        }
+        catch (error) {
+            console.error(`Error loading middleware ${middlewareInfo.file}:`, error);
+        }
+    }
+    return null;
+}
+// Cache for loaded middleware modules to avoid multiple ssrLoadModule calls
+const middlewareModuleCache = new Map();
+// Cache for loaded page modules to avoid multiple ssrLoadModule calls
+const pageModuleCache = new Map();
+/**
+ * Cargar un módulo de middleware específico
+ */
+async function loadMiddlewareModule(middlewareInfo, vite) {
+    const isProduction = process.env.NODE_ENV === 'production';
+    const cacheKey = `${middlewareInfo.file}-${process.env.NODE_ENV || 'development'}`;
+    // Only use cache in production mode to allow HMR in development
+    if (isProduction && middlewareModuleCache.has(cacheKey)) {
+        return middlewareModuleCache.get(cacheKey);
+    }
+    let moduleToLoad;
+    if (!isProduction && vite) {
+        moduleToLoad = await vite.ssrLoadModule(middlewareInfo.file);
+    }
+    else {
+        // En producción, usar archivos compilados
+        const compiledPath = middlewareInfo.file
+            .replace(/^app\/pages\//, 'dist/server/')
+            .replace(/\.ts$/, '.js');
+        const moduleUrl = node_path_1.default.resolve(compiledPath);
+        moduleToLoad = await Promise.resolve(`${moduleUrl}`).then(s => __importStar(require(s)));
+    }
+    // Only cache in production mode
+    if (isProduction) {
+        middlewareModuleCache.set(cacheKey, moduleToLoad);
+    }
+    return moduleToLoad;
+}

package/dist/helpers/request-handler.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.processRequest = processRequest;
 const promises_1 = __importDefault(require("node:fs/promises"));
 const pages_1 = require("../pages");
+const render_1 = require("../render");
 const platform_1 = require("../platform");
 const html_generator_1 = require("./html-generator");
 async function preparePlatform(req, enablePlatformDetection = true, isProduction = false) {
@@ -25,7 +26,12 @@ async function preparePlatform(req, enablePlatformDetection = true, isProduction
 }
 async function processRequest(context, config, renderServer) {
     const { req, res, page, next } = context;
-    const { enablePlatformDetection, renderFunction, viteConfig } = config;
+    // config.viteConfig can be a ViteConfig or a thunk returning it (auto mode)
+    const resolvedViteConfig = typeof config.viteConfig === 'function'
+        ? config.viteConfig()
+        : config.viteConfig;
+    const { enablePlatformDetection, renderFunction } = config;
+    const viteConfig = resolvedViteConfig;
     try {
         const platformContext = await preparePlatform(req, enablePlatformDetection, viteConfig.isProduction);
         if (renderFunction) {
@@ -40,13 +46,22 @@ async function processRequest(context, config, renderServer) {
         }
         if (!renderServer) {
             const renderOptions = viteConfig.vite ? { vite: viteConfig.vite } : {};
-            renderServer = (0, pages_1.createRenderServer)(renderOptions);
+            renderServer = (0, render_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 });
+        // Inicializar res.locals si no existe (para middlewares)
+        if (!res.locals) {
+            res.locals = {};
+        }
+        const rendered = await renderServer({
+            url: pathname,
+            req,
+            res,
+            props: res.locals.serverSideProps
+        });
         const template = await getTemplate(req, viteConfig);
         const html = await (0, html_generator_1.generateCompleteHTML)({
             template,
@@ -55,7 +70,9 @@ async function processRequest(context, config, renderServer) {
             manifest: viteConfig.manifest,
             platform: platformContext.platform,
             isProduction: viteConfig.isProduction,
-            platformInfo: platformContext.platformInfo
+            platformInfo: platformContext.platformInfo,
+            // pasar solo la config segura
+            ...(res.locals?.htmlConfig ? { serverSideResult: res.locals.htmlConfig } : {})
         });
         res.setHeader('Content-Type', 'text/html');
         res.send(html);

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

@@ -5,6 +5,6 @@ export interface ViteConfig {
     isProduction: boolean;
 }
 export declare function setupDev(base?: string): Promise<ViteConfig>;
-export declare function setupProd(): Promise<Pick<ViteConfig, 'manifest' | 'templateHtml'>>;
+export declare function setupProd(): Promise<ViteConfig>;
 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

@@ -63,7 +63,12 @@ async function setupDev(base = '/') {
 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 };
+    return {
+        vite: null,
+        manifest,
+        templateHtml,
+        isProduction: true
+    };
 }
 function createProdMiddleware() {
     const middlewares = express_1.default.Router();
@@ -77,21 +82,9 @@ function createProdMiddleware() {
 }
 async function setupVite(isProduction, base = '/') {
     if (isProduction) {
-        const prodConfig = await setupProd();
-        return {
-            vite: undefined,
-            manifest: prodConfig.manifest,
-            templateHtml: prodConfig.templateHtml,
-            isProduction: true
-        };
+        return await setupProd();
     }
     else {
-        const devConfig = await setupDev(base);
-        return {
-            vite: devConfig.vite,
-            manifest: devConfig.manifest,
-            templateHtml: '',
-            isProduction: false
-        };
+        return await setupDev(base);
     }
 }

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { createViteRouter, createAutoViteServer, listDetectedPages, getPages } from './router';
-export { getViteInput, getClientEntriesInput, generateTempEntries, createRenderServer, resolvePlatformCSS } from './pages';
-export { detectPlatform, getPlatformCSSClass, resolveEntryClient } from './platform';
+export { getViteInput, getViteSSRInput, getClientEntriesInput, generateTempEntries, resolvePlatformCSS } from './pages';
+export { createRenderServer } from './render';
+export { detectPlatform } from './platform';
 export type { PlatformInfo } from './platform';
 export type { ViteRouterOptions, AutoViteServerOptions } from './router';
 export type { PageInfo } from './pages';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveEntryClient = exports.getPlatformCSSClass = exports.detectPlatform = exports.resolvePlatformCSS = exports.createRenderServer = exports.generateTempEntries = exports.getClientEntriesInput = exports.getViteInput = exports.getPages = exports.listDetectedPages = exports.createAutoViteServer = exports.createViteRouter = void 0;
+exports.detectPlatform = exports.createRenderServer = exports.resolvePlatformCSS = exports.generateTempEntries = exports.getClientEntriesInput = exports.getViteSSRInput = exports.getViteInput = exports.getPages = exports.listDetectedPages = exports.createAutoViteServer = exports.createViteRouter = void 0;
 // Main API
 var router_1 = require("./router");
 Object.defineProperty(exports, "createViteRouter", { enumerable: true, get: function () { return router_1.createViteRouter; } });
@@ -10,12 +10,13 @@ Object.defineProperty(exports, "getPages", { enumerable: true, get: function ()
 // Core functions for Vite config
 var pages_1 = require("./pages");
 Object.defineProperty(exports, "getViteInput", { enumerable: true, get: function () { return pages_1.getViteInput; } });
+Object.defineProperty(exports, "getViteSSRInput", { enumerable: true, get: function () { return pages_1.getViteSSRInput; } });
 Object.defineProperty(exports, "getClientEntriesInput", { enumerable: true, get: function () { return pages_1.getClientEntriesInput; } });
 Object.defineProperty(exports, "generateTempEntries", { enumerable: true, get: function () { return pages_1.generateTempEntries; } });
-Object.defineProperty(exports, "createRenderServer", { enumerable: true, get: function () { return pages_1.createRenderServer; } });
 Object.defineProperty(exports, "resolvePlatformCSS", { enumerable: true, get: function () { return pages_1.resolvePlatformCSS; } });
+// Render functions
+var render_1 = require("./render");
+Object.defineProperty(exports, "createRenderServer", { enumerable: true, get: function () { return render_1.createRenderServer; } });
 // Platform detection
 var platform_1 = require("./platform");
 Object.defineProperty(exports, "detectPlatform", { enumerable: true, get: function () { return platform_1.detectPlatform; } });
-Object.defineProperty(exports, "getPlatformCSSClass", { enumerable: true, get: function () { return platform_1.getPlatformCSSClass; } });
-Object.defineProperty(exports, "resolveEntryClient", { enumerable: true, get: function () { return platform_1.resolveEntryClient; } });

package/dist/pages.d.ts

@@ -6,21 +6,16 @@ export interface PageInfo {
 }
 export declare function getPages(): PageInfo[];
 export declare function getViteInput(): Record<string, string>;
+export declare function getViteSSRInput(): Record<string, string>;
 export declare function loadManifest(distPath?: string): Promise<any>;
+/**
+ * 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")
+ */
+export declare function getCompiledProdPage(pageFile: string): string;
 export declare function resolvePlatformCSS(basePath: string, platform: PlatformInfo): Promise<string>;
 export declare function generateTempEntries(distPath?: string, platformInfo?: PlatformInfo): Promise<string[]>;
 export declare function generateSingleEntry(page: PageInfo, entryPath: string, preferredScssFile: string): Promise<void>;
 export declare function getClientEntriesInput(distPath?: string): Promise<Record<string, string>>;
-export interface RenderOptions {
-    url: string;
-    props?: any;
-}
-export interface CreateRenderServerOptions {
-    vite?: any;
-}
-export declare function createRenderServer(options?: CreateRenderServerOptions): (renderOptions: RenderOptions) => Promise<{
-    html: string;
-    props: any;
-    route: string;
-    page: string;
-}>;

package/dist/pages.js

@@ -38,17 +38,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 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");
 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}');
@@ -74,6 +73,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 +94,36 @@ 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
+    const compiledRelativePath = relativePath
+        .replace(/^app\/pages\//, '') // Quitar prefijo app/pages/
+        .replace(/\.tsx$/, '.js'); // Cambiar extensión .tsx a .js
+    return node_path_1.default.resolve(process.cwd(), 'dist', 'server', compiledRelativePath);
+}
 async function fileExists(file) {
     try {
         await promises_1.default.access(file);
@@ -238,59 +278,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,10 +36,25 @@ 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;
@@ -64,28 +79,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,14 @@ 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 => {
+                    console.log(`   ${page.route} -> ${page.file}`);
+                });
+            }
         });
     };
     return { app, vite: viteConfig.vite, start };
@@ -54,10 +57,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 +79,79 @@ function createAutoRouter(options) {
         return viteConfig;
     };
     const pages = (0, pages_1.getPages)();
-    pages.forEach(page => {
-        mainRouter.get(page.route, async (req, res, next) => {
+    // TU PSEUDOCÓDIGO IMPLEMENTADO CORRECTAMENTE:
+    // 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.route, ...pageMiddlewares);
+            // Error middleware separado
+            mainRouter.use(page.route, (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.route, ...pageMiddlewares);
+            // Error middleware separado  
+            router.use(page.route, (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,6 +1,6 @@
 {
   "name": "@ressjs/vite-router",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Express router factory for ress.js with automatic page detection and SSR",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",