solidstep 0.3.5 → 0.4.0

package/server.js

@@ -1,4 +1,4 @@
-import { eventHandler, toWebRequest, setHeader, setResponseStatus, } from 'vinxi/http';
+import { eventHandler, getResponseStatus, toWebRequest, setHeader, setResponseStatus, } from 'vinxi/http';
 import { getManifest } from 'vinxi/manifest';
 import { generateHydrationScript, renderToString } from 'solid-js/web';
 import fileRoutes, {} from 'vinxi/routes';
@@ -9,9 +9,14 @@ import { readFile } from 'node:fs/promises';
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { createNode, insertRoute, matchRoute, } from './utils/path-router';
-// Module cache for dynamically imported modules
+import { loadInstrumentation, getInstrumentation, safeExecuteHook, createRequestContext, createResponseContext, } from './utils/instrumentation';
+let instrumentationReady = null;
+// Module cache for dynamically imported modules — skipped in dev so HMR invalidations are respected
 const moduleCache = new Map();
 const getCachedModule = async (importFn) => {
+    if (import.meta.env.DEV) {
+        return importFn.import();
+    }
     const key = importFn.src;
     if (moduleCache.has(key)) {
         return moduleCache.get(key);
@@ -59,9 +64,15 @@ const createRouteManifest = async () => {
             errorPagesMap.set(path, fileRoute);
         }
         if (fileRoute.type === 'group') {
-            const parentPath = fileRoute.parent
-                ? getNormalizedPath(fileRoute.parent)
-                : '';
+            // `fileRoute.parent` is already a clean route path (e.g. '/dashboard'
+            // or '' for the root), so it must NOT go through getNormalizedPath,
+            // which strips a leading prefix. Normalize it the same way page
+            // routePaths are (drop '(group)' segments, ensure a leading slash) so
+            // nested parallel routes attach to their parent route.
+            const parentPath = `/${(fileRoute.parent || '')
+                .split('/')
+                .filter((s) => s && !s.startsWith('('))
+                .join('/')}`;
             const existing = groupsMap.get(parentPath) || [];
             existing.push(fileRoute);
             groupsMap.set(parentPath, existing);
@@ -207,14 +218,52 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, pageOpt
     const loaderData = {};
     const clientManifest = getManifest('client');
     const assets = [];
+    // Select the page variant being rendered up front so its loader can be
+    // pre-resolved alongside the layout loaders.
+    const pageToRender = toRender === 'loading'
+        ? entry.loadingPage
+        : toRender === 'error'
+            ? entry.errorPage
+            : toRender === 'not-found'
+                ? entry.notFoundPage
+                : entry.mainPage;
+    // Run every layout loader and the page loader concurrently instead of
+    // sequentially down the layout chain. Results are keyed by manifestPath and
+    // applied in tree order below, so loaderData ordering and per-node data are
+    // unchanged — only the awaits now overlap.
+    const loaderTargets = [];
+    for (const layout of entry.layouts) {
+        if (layout.loader) {
+            loaderTargets.push({
+                manifestPath: layout.manifestPath,
+                loader: layout.loader,
+            });
+        }
+    }
+    if (pageToRender?.loader) {
+        loaderTargets.push({
+            manifestPath: pageToRender.manifestPath,
+            loader: pageToRender.loader,
+        });
+    }
+    // A `$loader` import is created for every layout/page node, even when the
+    // file exports no loader — in that case the picked module is empty and has
+    // no `loader` export, so we skip it. Only nodes whose loader actually ran
+    // get an entry here, which is how the closures below decide whether to
+    // populate loaderData (matching the previous in-closure behavior).
+    const resolvedLoaderData = new Map();
+    await Promise.all(loaderTargets.map(async ({ manifestPath, loader }) => {
+        const { loader: loaderFn } = await getCachedModule(loader);
+        if (!loaderFn)
+            return;
+        const result = await loaderFn.loader(req);
+        resolvedLoaderData.set(manifestPath, result.data || {});
+    }));
     const compose = entry.layouts.reduceRight((children, layout, index) => async () => {
         const moduleSrc = `${layout.layout.src}&pick=$css`;
         const moduleAssets = await clientManifest.inputs[moduleSrc].assets();
         assets.push(...moduleAssets);
         const { default: layoutModule } = await getCachedModule(layout.layout);
-        const { loader: layoutLoader } = layout.loader
-            ? await getCachedModule(layout.loader)
-            : { loader: null };
         const { generateMeta: generateMetaPage } = layout.generateMeta
             ? await getCachedModule(layout.generateMeta)
             : { generateMeta: null };
@@ -231,9 +280,8 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, pageOpt
                 };
             }
         }
-        if (layoutLoader) {
-            const result = await layoutLoader.loader(req);
-            data = result.data || {};
+        if (resolvedLoaderData.has(layout.manifestPath)) {
+            data = resolvedLoaderData.get(layout.manifestPath);
             loaderData[layout.manifestPath] = data;
         }
         const slots = {};
@@ -276,27 +324,16 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, pageOpt
             },
         });
     }, async () => {
-        const pageToRender = toRender === 'loading'
-            ? entry.loadingPage
-            : toRender === 'error'
-                ? entry.errorPage
-                : toRender === 'not-found'
-                    ? entry.notFoundPage
-                    : entry.mainPage;
         const moduleSrc = `${pageToRender.page.src}&pick=$css`;
         const moduleAssets = await clientManifest.inputs[moduleSrc].assets();
         assets.push(...moduleAssets);
         const { default: page } = await getCachedModule(pageToRender.page);
-        const { loader: pageLoader } = pageToRender.loader
-            ? await getCachedModule(pageToRender.loader)
-            : { loader: null };
         const { generateMeta } = pageToRender.generateMeta
             ? await getCachedModule(pageToRender.generateMeta)
             : { generateMeta: null };
         let data = {};
-        if (pageLoader) {
-            const result = await pageLoader.loader(req);
-            data = result.data || {};
+        if (resolvedLoaderData.has(pageToRender.manifestPath)) {
+            data = resolvedLoaderData.get(pageToRender.manifestPath);
             loaderData[pageToRender.manifestPath] = data;
         }
         if (generateMeta) {
@@ -364,9 +401,16 @@ const onStart = async () => {
     catch (e) {
         console.error('Error creating route manifest:', e);
     }
+    // Load instrumentation
+    const instrumentation = await loadInstrumentation();
+    if (instrumentation?.register) {
+        await safeExecuteHook('register', instrumentation.register);
+    }
 };
-onStart();
+instrumentationReady = onStart();
 const handler = eventHandler(async (event) => {
+    if (instrumentationReady)
+        await instrumentationReady;
     const req = toWebRequest(event);
     try {
         if (req.url.includes('/.well-known/appspecific/com.chrome.devtools.json')) {
@@ -390,21 +434,45 @@ const handler = eventHandler(async (event) => {
         const matched = match?.handler;
         const params = match?.params || {};
         if (matched && matched.type === 'route') {
-            const routeModule = await getCachedModule(matched.handler);
-            const reqMethod = req.method?.toUpperCase();
-            if (reqMethod) {
-                const handler = routeModule[reqMethod];
-                if (typeof handler === 'function') {
-                    const result = await handler(req, {
-                        params: params,
-                        searchParams: searchParams,
-                    });
-                    return result;
+            const inst = getInstrumentation();
+            const reqCtx = createRequestContext(req, {
+                routePath: matched.routePath || 'unknown',
+                routeType: 'api',
+                params,
+                searchParams,
+            });
+            await safeExecuteHook('onRequest', inst?.onRequest, req, reqCtx);
+            try {
+                const routeModule = await getCachedModule(matched.handler);
+                const reqMethod = req.method?.toUpperCase();
+                if (reqMethod) {
+                    const handler = routeModule[reqMethod];
+                    if (typeof handler === 'function') {
+                        const result = await handler(req, {
+                            params: params,
+                            searchParams: searchParams,
+                        });
+                        const respCtx = createResponseContext(reqCtx, getResponseStatus(event) || 200);
+                        await safeExecuteHook('onResponseEnd', inst?.onResponseEnd, req, respCtx);
+                        return result;
+                    }
+                    throw new Error(`Method ${reqMethod} not implemented in ${matched.handler.src}`);
                 }
-                throw new Error(`Method ${reqMethod} not implemented in ${matched.handler.src}`);
+                throw new Error(`Unsupported request method: ${reqMethod}`);
+            }
+            catch (error) {
+                await safeExecuteHook('onRequestError', inst?.onRequestError, error, req, reqCtx);
+                throw error;
             }
-            throw new Error(`Unsupported request method: ${reqMethod}`);
         }
+        const inst = getInstrumentation();
+        const reqCtx = createRequestContext(req, {
+            routePath: matched ? pathnamePart : '/not-found',
+            routeType: matched ? 'page' : 'not-found',
+            params,
+            searchParams,
+        });
+        await safeExecuteHook('onRequest', inst?.onRequest, req, reqCtx);
         let loading = false;
         let html = undefined;
         let meta = {
@@ -444,95 +512,97 @@ const handler = eventHandler(async (event) => {
             async start(controller) {
                 const encoder = new TextEncoder();
                 const push = (text) => controller.enqueue(encoder.encode(text));
+                let streamError = null;
                 try {
-                    if (!matched) {
-                        try {
-                            const match = matchRoute(routeManifest, '/');
-                            const notFoundEntry = match.handler;
-                            if (!notFoundEntry) {
-                                throw new Error('No not-found page configured');
-                            }
-                            const { rendered, documentMeta, documentAssets, loaderData, } = await render({
-                                toRender: 'not-found',
-                                entry: notFoundEntry,
-                                routeParams: {},
-                                searchParams: {},
-                                req: req,
-                                pageOptions: {},
-                                cspNonce,
-                            });
-                            assets.push(...documentAssets);
-                            clientHydrationScript = `
+                    try {
+                        if (!matched) {
+                            try {
+                                const match = matchRoute(routeManifest, '/');
+                                const notFoundEntry = match.handler;
+                                if (!notFoundEntry) {
+                                    throw new Error('No not-found page configured');
+                                }
+                                const { rendered, documentMeta, documentAssets, loaderData, } = await render({
+                                    toRender: 'not-found',
+                                    entry: notFoundEntry,
+                                    routeParams: {},
+                                    searchParams: {},
+                                    req: req,
+                                    pageOptions: {},
+                                    cspNonce,
+                                });
+                                assets.push(...documentAssets);
+                                clientHydrationScript = `
                                 <script type="module" ${cspNonce ? `nonce="${cspNonce}"` : ''}>
                                 import main from '${clientManifest.inputs[clientManifest.handler].output.path}';
                                 main('/not-found/',${JSON.stringify(params)},${JSON.stringify(searchParams)}, ${JSON.stringify(loaderData)});
                                 </script>
                             `;
-                            html = rendered;
-                            meta = {
-                                ...meta,
-                                ...documentMeta,
-                            };
-                            setResponseStatus(404);
-                        }
-                        catch (e) {
-                            console.error('404 module not found:', e);
-                            setResponseStatus(404);
-                            push('Not Found');
-                            controller.close();
-                            return;
-                        }
-                    }
-                    else {
-                        const { options } = matched
-                            .mainPage.options
-                            ? await getCachedModule(matched.mainPage
-                                .options)
-                            : { options: {} };
-                        if (options?.responseHeaders) {
-                            const headers = options.responseHeaders;
-                            for (const [key, value] of Object.entries(headers)) {
-                                setHeader(key, value);
+                                html = rendered;
+                                meta = {
+                                    ...meta,
+                                    ...documentMeta,
+                                };
+                                setResponseStatus(404);
                             }
-                        }
-                        try {
-                            if (!matched.loadingPage) {
-                                throw new Error('No loading page');
+                            catch (e) {
+                                console.error('404 module not found:', e);
+                                setResponseStatus(404);
+                                push('Not Found');
+                                controller.close();
+                                return;
                             }
-                            const { rendered, documentMeta, documentAssets, loaderData, } = await render({
-                                toRender: 'loading',
-                                entry: matched,
-                                routeParams: params,
-                                searchParams,
-                                req: req,
-                                pageOptions: options,
-                                cspNonce,
-                            });
-                            const assetsHtml = assets
-                                .concat(documentAssets)
-                                .map((asset) => {
-                                const attributeString = Object.entries(asset.attrs)
-                                    .map(([key, value]) => `${key}="${value}"`)
-                                    .join(' ');
-                                if (asset.tag === 'script') {
-                                    return `<script ${attributeString}></script>`;
-                                }
-                                if (asset.tag === 'link') {
-                                    return `<link ${attributeString}>`;
+                        }
+                        else {
+                            const { options } = matched
+                                .mainPage.options
+                                ? await getCachedModule(matched.mainPage
+                                    .options)
+                                : { options: {} };
+                            if (options?.responseHeaders) {
+                                const headers = options.responseHeaders;
+                                for (const [key, value] of Object.entries(headers)) {
+                                    setHeader(key, value);
                                 }
-                                if (asset.tag === 'style') {
-                                    return `<style ${attributeString}>${asset.children || ''}</style>`;
+                            }
+                            try {
+                                if (!matched.loadingPage) {
+                                    throw new Error('No loading page');
                                 }
-                            })
-                                .join('\n');
-                            const html = `
+                                const { rendered, documentMeta, documentAssets, loaderData, } = await render({
+                                    toRender: 'loading',
+                                    entry: matched,
+                                    routeParams: params,
+                                    searchParams,
+                                    req: req,
+                                    pageOptions: options,
+                                    cspNonce,
+                                });
+                                const assetsHtml = assets
+                                    .concat(documentAssets)
+                                    .map((asset) => {
+                                    const attributeString = Object.entries(asset.attrs)
+                                        .map(([key, value]) => `${key}="${value}"`)
+                                        .join(' ');
+                                    if (asset.tag === 'script') {
+                                        return `<script ${attributeString}></script>`;
+                                    }
+                                    if (asset.tag === 'link') {
+                                        return `<link ${attributeString}>`;
+                                    }
+                                    if (asset.tag === 'style') {
+                                        return `<style ${attributeString}>${asset.children || ''}</style>`;
+                                    }
+                                })
+                                    .join('\n');
+                                const html = `
                                 <!doctype html>
                                 <html lang="en">
                                     <head>
                                         ${generateHtmlHead({
-                                ...meta,
-                                ...documentMeta,
-                            })}
+                                    ...meta,
+                                    ...documentMeta,
+                                })}
                                         ${assetsHtml}
                                         ${hydrationScript({ nonce: cspNonce })}
                                     </head>
@@ -542,154 +612,170 @@ const handler = eventHandler(async (event) => {
                                     ${rendered}
                                 </html>
                                 `;
-                            push(html);
-                            push(`
+                                push(html);
+                                push(`
                             <script type="module" data-hydration="loading" ${cspNonce ? `nonce="${cspNonce}"` : ''}>
                                 import main from '${clientManifest.inputs[clientManifest.handler].output.path}';
                                 main('${matched.loadingPage?.manifestPath}',${JSON.stringify(params)},${JSON.stringify(searchParams)}, ${JSON.stringify(loaderData)});
                             </script>
                             `);
-                            loading = true;
-                        }
-                        catch (e) {
-                            // skip
-                        }
-                        const { rendered, documentMeta, documentAssets, loaderData, } = await render({
-                            toRender: 'main',
-                            entry: matched,
-                            routeParams: params,
-                            searchParams,
-                            req: req,
-                            pageOptions: options,
-                            cspNonce,
-                        });
-                        assets.push(...documentAssets);
-                        clientHydrationScript = `
+                                loading = true;
+                            }
+                            catch (e) {
+                                // skip
+                            }
+                            const { rendered, documentMeta, documentAssets, loaderData, } = await render({
+                                toRender: 'main',
+                                entry: matched,
+                                routeParams: params,
+                                searchParams,
+                                req: req,
+                                pageOptions: options,
+                                cspNonce,
+                            });
+                            assets.push(...documentAssets);
+                            clientHydrationScript = `
                             <script type="module" ${cspNonce ? `nonce="${cspNonce}"` : ''}>
                             import main from '${clientManifest.inputs[clientManifest.handler].output.path}';
                             main('${matched.mainPage.manifestPath}',${JSON.stringify(params)},${JSON.stringify(searchParams)}, ${JSON.stringify(loaderData)});
                             </script>
                         `;
-                        html = rendered;
-                        meta = {
-                            ...meta,
-                            ...documentMeta,
-                        };
-                        setResponseStatus(200);
-                    }
-                }
-                catch (e1) {
-                    if (e1 instanceof RedirectError ||
-                        e1.name === 'RedirectError') {
-                        setHeader('Location', e1.message);
-                        setResponseStatus(302);
-                        controller.close();
-                        return;
-                    }
-                    if (import.meta.env.DEV) {
-                        console.error(e1);
+                            html = rendered;
+                            meta = {
+                                ...meta,
+                                ...documentMeta,
+                            };
+                            setResponseStatus(200);
+                        }
                     }
-                    try {
-                        const errorPage = matched
-                            .errorPage;
-                        if (!errorPage) {
-                            throw e1;
+                    catch (e1) {
+                        streamError = e1;
+                        if (e1 instanceof RedirectError ||
+                            e1.name === 'RedirectError') {
+                            setHeader('Location', e1.message);
+                            setResponseStatus(302);
+                            controller.close();
+                            return;
                         }
-                        const { rendered, documentMeta, documentAssets, loaderData, } = await render({
-                            toRender: 'error',
-                            entry: matched,
-                            routeParams: params,
-                            searchParams,
-                            req: req,
-                            pageOptions: {},
-                            cspNonce,
-                            error: e1,
-                        });
-                        assets.push(...documentAssets);
-                        clientHydrationScript = `
+                        if (import.meta.env.DEV) {
+                            console.error(e1);
+                        }
+                        try {
+                            const errorPage = matched
+                                .errorPage;
+                            if (!errorPage) {
+                                throw e1;
+                            }
+                            const { rendered, documentMeta, documentAssets, loaderData, } = await render({
+                                toRender: 'error',
+                                entry: matched,
+                                routeParams: params,
+                                searchParams,
+                                req: req,
+                                pageOptions: {},
+                                cspNonce,
+                                error: e1,
+                            });
+                            assets.push(...documentAssets);
+                            clientHydrationScript = `
                             <script type="module" ${cspNonce ? `nonce="${cspNonce}"` : ''}>
                             import main from '${clientManifest.inputs[clientManifest.handler].output.path}';
                             main('${errorPage.manifestPath}',${JSON.stringify(params)},${JSON.stringify(searchParams)}, ${JSON.stringify(loaderData)});
                             </script>
                         `;
-                        html = rendered;
-                        meta = {
-                            ...meta,
-                            ...documentMeta,
-                        };
-                        // statusCode = 500;
-                        setResponseStatus(500);
+                            html = rendered;
+                            meta = {
+                                ...meta,
+                                ...documentMeta,
+                            };
+                            // statusCode = 500;
+                            setResponseStatus(500);
+                        }
+                        catch (e2) {
+                            throw e1;
+                        }
                     }
-                    catch (e2) {
-                        throw e1;
+                    if (loading) {
+                        const assetsHtml = assets
+                            .map((asset) => {
+                            const attributeString = Object.entries(asset.attrs)
+                                .map(([key, value]) => `${key}="${value}"`)
+                                .join(' ');
+                            if (asset.tag === 'link') {
+                                return `<link ${attributeString}>`;
+                            }
+                            if (asset.tag === 'style') {
+                                return `<style ${attributeString}>${asset.children || ''}</style>`;
+                            }
+                            return '';
+                        })
+                            .join('\n');
+                        push(`<template id="__page_html__">${html}</template>`);
+                        push(`
+                        <script ${cspNonce ? `nonce="${cspNonce}"` : ''}>
+                        const head = document.querySelector('head');
+                        const scripts = Array.from(head.querySelectorAll('script'));
+                        head.innerHTML = ${JSON.stringify(generateHtmlHead(meta) + assetsHtml)};
+                        scripts.forEach(script => {
+                            head.appendChild(script);
+                        });
+                        document.querySelector('script[data-hydration="loading"]')?.remove();
+                        const loading = document.querySelector('body');
+                        const template = document.getElementById('__page_html__');
+                        loading.innerHTML = template.innerHTML;
+                        template.remove();
+                        </script>
+                    `);
+                        push(manifestHtml);
+                        push(clientHydrationScript);
+                        controller.close();
+                        return;
                     }
-                }
-                if (loading) {
                     const assetsHtml = assets
                         .map((asset) => {
                         const attributeString = Object.entries(asset.attrs)
                             .map(([key, value]) => `${key}="${value}"`)
                             .join(' ');
+                        if (asset.tag === 'script') {
+                            return `<script ${attributeString} ${cspNonce ? `nonce="${cspNonce}"` : ''}></script>`;
+                        }
                         if (asset.tag === 'link') {
                             return `<link ${attributeString}>`;
                         }
                         if (asset.tag === 'style') {
                             return `<style ${attributeString}>${asset.children || ''}</style>`;
                         }
-                        return '';
                     })
                         .join('\n');
-                    push(`<template id="__page_html__">${html}</template>`);
-                    push(`
-                        <script ${cspNonce ? `nonce="${cspNonce}"` : ''}>
-                        const head = document.querySelector('head');
-                        const scripts = Array.from(head.querySelectorAll('script'));
-                        head.innerHTML = \`${generateHtmlHead(meta) + assetsHtml}\`;
-                        scripts.forEach(script => {
-                            head.appendChild(script);
-                        });
-                        document.querySelector('script[data-hydration="loading"]')?.remove();
-                        const loading = document.querySelector('body');
-                        const template = document.getElementById('__page_html__');
-                        loading.innerHTML = template.innerHTML;
-                        template.remove();
-                        </script> 
-                    `);
-                    push(manifestHtml);
-                    push(clientHydrationScript);
+                    const transformHtml = template
+                        .replace('<!--app-head-->', `${generateHtmlHead(meta)}\n${assetsHtml}\n${hydrationScript({ nonce: cspNonce })}`)
+                        .replace('<!--app-body-->', (html ?? '') + manifestHtml + clientHydrationScript);
+                    push(transformHtml);
                     controller.close();
                     return;
                 }
-                const assetsHtml = assets
-                    .map((asset) => {
-                    const attributeString = Object.entries(asset.attrs)
-                        .map(([key, value]) => `${key}="${value}"`)
-                        .join(' ');
-                    if (asset.tag === 'script') {
-                        return `<script ${attributeString} ${cspNonce ? `nonce="${cspNonce}"` : ''}></script>`;
-                    }
-                    if (asset.tag === 'link') {
-                        return `<link ${attributeString}>`;
-                    }
-                    if (asset.tag === 'style') {
-                        return `<style ${attributeString}>${asset.children || ''}</style>`;
+                catch (error) {
+                    streamError = streamError ?? error;
+                    throw error;
+                }
+                finally {
+                    const statusCode = getResponseStatus(event) || 200;
+                    const respCtx = createResponseContext(reqCtx, statusCode);
+                    await safeExecuteHook('onResponseEnd', inst?.onResponseEnd, req, respCtx);
+                    if (streamError) {
+                        await safeExecuteHook('onRequestError', inst?.onRequestError, streamError, req, reqCtx);
                     }
-                })
-                    .join('\n');
-                const transformHtml = template
-                    .replace('<!--app-head-->', `${generateHtmlHead(meta)}\n${assetsHtml}\n${hydrationScript({ nonce: cspNonce })}`)
-                    .replace('<!--app-body-->', (html ?? '') + manifestHtml + clientHydrationScript);
-                push(transformHtml);
-                controller.close();
-                return;
+                }
             },
         });
         return stream;
     }
     catch (e) {
-        if (e instanceof RedirectError ||
-            e.name === 'RedirectError') {
-            return new Response('', { status: 302, headers: { Location: e.message } });
+        if (e instanceof RedirectError || e.name === 'RedirectError') {
+            return new Response('', {
+                status: 302,
+                headers: { Location: e.message },
+            });
         }
         console.error(e);
         return new Response('Internal Server Error', { status: 500 });