solidstep 0.2.0 → 0.3.0

package/README.md

@@ -805,6 +805,16 @@ As SolidStep is built using Vite, it follows the same guide as stated in [Vite d
 - Advanced caching strategies
 - WebSocket support
 
+## Testing
+
+SolidStep does not include a built-in testing framework. However, we recommend setting up testing using Vitest ecosystem. You can use [Vitest](https://vitest.dev/) for unit and integration tests, and [Playwright](https://playwright.dev/) for end-to-end testing.
+
+### Testing Server Actions
+
+When testing server actions, you can use Vitest to accomplish this. Just test as you would with any other async function.
+
+When testing pages (e2e tests), you can trigger server actions by simulating user interactions that would call those actions. If needed, you can also intercept network requests to directly test the action endpoints. Use the testing framework's capabilities to intercept the requests and ensure the responses have the expected results. If the server action returns json data, stringify it and add it to the response body as well as setting the content-type header to 'application/json'. If the action has a more complex return type, use seroval to serialize the response before sending it back.
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "solidstep",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "Next Step SolidJS Framework for building web applications.",
     "type": "module",
     "author": "HamzaKV <hamzakv333@gmail.com>",

package/server.d.ts

@@ -1,3 +1,3 @@
-declare const handler: import("vinxi/http").EventHandler<import("vinxi/http").EventHandlerRequest, Promise<unknown>>;
+declare const handler: import("vinxi/http").EventHandler<import("vinxi/http").EventHandlerRequest, Promise<any>>;
 export default handler;
 //# sourceMappingURL=server.d.ts.map

package/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../server.ts"],"names":[],"mappings":"AA0hBA,QAAA,MAAM,OAAO,+FAgVX,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../server.ts"],"names":[],"mappings":"AA4kBA,QAAA,MAAM,OAAO,2FA0XX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/server.js

@@ -1,4 +1,4 @@
-import { eventHandler, toWebRequest, setResponseHeader, getEvent } from 'vinxi/http';
+import { eventHandler, toWebRequest, setHeader, setResponseStatus } from 'vinxi/http';
 import { getManifest } from 'vinxi/manifest';
 import { generateHydrationScript, renderToString } from 'solid-js/web';
 import fileRoutes, {} from 'vinxi/routes';
@@ -8,58 +8,102 @@ import { handleServerFunction } from './utils/server-action.server';
 import { readFile } from 'node:fs/promises';
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
-const isPageFile = (file) => file.endsWith('page.tsx')
-    || file.endsWith('page.jsx')
-    || file.endsWith('page.ts')
-    || file.endsWith('page.js');
+const isPageFile = (file) => file.endsWith('page.tsx') ||
+    file.endsWith('page.jsx') ||
+    file.endsWith('page.ts') ||
+    file.endsWith('page.js');
 const isRouteFile = (file) => file.endsWith('route.ts') || file.endsWith('route.js');
-const parseSegment = (part) => part.startsWith('[') ? `:${part.slice(1, -1).replace(/\.\.\./, '*')}` : part;
+const parseSegment = (part) => {
+    if (part.startsWith('[[') && part.endsWith(']]')) {
+        return `:^*${part.slice(5, -2)}`;
+    }
+    return part.startsWith('[')
+        ? `:${part.slice(1, -1).replace(/\.\.\./, '*')}`
+        : part;
+};
+const createMatcher = (routePath) => {
+    const keys = [];
+    const segments = routePath.split('/').map((part) => {
+        if (part.startsWith(':')) {
+            if (part.startsWith(':^*')) {
+                // Catch-all inclusive
+                keys.push(part.slice(3));
+                return '?(.*)?';
+            }
+            if (part.startsWith(':*')) {
+                // Catch-all
+                keys.push(part.slice(2));
+                return '.*';
+            }
+            // Standard param
+            keys.push(part.slice(1));
+            return '([^/]+)';
+        }
+        return part;
+    });
+    return {
+        regex: new RegExp(`^${segments.join('/')}$`),
+        keys,
+    };
+};
+const getNormalizedPath = (path, clean) => {
+    const segments = path.split('/').slice(2).map(parseSegment);
+    if (clean)
+        return `/${segments.filter((s) => !s.startsWith('(')).join('/')}`;
+    return `/${segments.join('/')}`;
+};
 const createRouteManifest = async () => {
     const entries = {};
     const allRoutes = [];
-    const allLayouts = [];
-    const allLoadingPages = [];
-    const allErrorPages = [];
-    const allGroups = [];
+    const layoutsMap = new Map();
+    const loadingPagesMap = new Map();
+    const errorPagesMap = new Map();
+    const groupsMap = new Map();
     let notFoundPage;
     for (const fileRoute of fileRoutes) {
         if (fileRoute.type === 'route') {
             allRoutes.push(fileRoute);
         }
         if (fileRoute.type === 'layout') {
-            allLayouts.push(fileRoute);
+            const path = getNormalizedPath(fileRoute.path);
+            layoutsMap.set(path, fileRoute);
         }
         if (fileRoute.type === 'not-found') {
             notFoundPage = fileRoute;
         }
         if (fileRoute.type === 'loading') {
-            allLoadingPages.push(fileRoute);
+            const path = getNormalizedPath(fileRoute.path);
+            loadingPagesMap.set(path, fileRoute);
         }
         if (fileRoute.type === 'error') {
-            allErrorPages.push(fileRoute);
+            const path = getNormalizedPath(fileRoute.path);
+            errorPagesMap.set(path, fileRoute);
         }
         if (fileRoute.type === 'group') {
-            allGroups.push(fileRoute);
+            const parentPath = fileRoute.parent
+                ? getNormalizedPath(fileRoute.parent)
+                : '';
+            const existing = groupsMap.get(parentPath) || [];
+            existing.push(fileRoute);
+            groupsMap.set(parentPath, existing);
         }
     }
+    const regex = /\?(?:pick=.*)*/g;
     for (const fileRoute of allRoutes) {
-        const segments = fileRoute.path.split('/').slice(2).map(parseSegment);
-        const routePath = `/${segments.filter(s => !(s.startsWith('('))).join('/')}`;
-        const regex = /\?(?:pick=.*)*/g;
+        const routePath = getNormalizedPath(fileRoute.path, true);
+        const routeMatcherPath = getNormalizedPath(fileRoute.path);
         const src = fileRoute.$handler?.src.replace(regex, '');
         if (src && isPageFile(src)) {
-            const loadingPage = allLoadingPages.find(route => {
-                const path = `/${route.path.split('/').slice(2).map(parseSegment).join('/')}`;
-                return path === routePath;
-            });
-            const matchedGroups = allGroups.filter(route => {
-                const parentPath = route.parent ? `/${route.parent.split('/').slice(2).map(parseSegment).join('/')}` : '';
-                return parentPath === routePath;
-            });
+            const loadingPage = loadingPagesMap.get(routeMatcherPath);
+            const matchedGroups = groupsMap.get(routePath);
             const groups = {};
             if (matchedGroups && matchedGroups.length > 0) {
                 for (const group of matchedGroups) {
-                    const groupName = group.path.split('/').filter(s => !(s.startsWith('('))).map(parseSegment).at(-1);
+                    const groupName = group.path
+                        .split('/')
+                        .filter((s) => !s.startsWith('('))
+                        .map(parseSegment)
+                        .at(-1);
                     if (!groupName)
                         continue;
                     groups[groupName] = {
@@ -69,20 +113,18 @@ const createRouteManifest = async () => {
                     };
                 }
             }
+            const segments = routeMatcherPath.split('/').filter(Boolean);
             let errorPage;
             const layouts = [];
-            for (let i = segments.length; i > (routePath === '/' ? 0 : -1); i--) {
-                const path = `/${segments.slice(0, i).join('/')}`;
+            // We need to traverse from root to leaf to build layouts order correctly?
+            // Original code: i = segments.length down to 0. unshift matches.
+            // i=length: /a/b/c. i=0: /.
+            for (let i = segments.length; i >= 0; i--) {
+                const path = i === 0 ? '/' : `/${segments.slice(0, i).join('/')}`;
                 if (!errorPage) {
-                    errorPage = allErrorPages.find(route => {
-                        const routePath = `/${route.path.split('/').slice(2).map(parseSegment).join('/')}`;
-                        return routePath === path;
-                    });
+                    errorPage = errorPagesMap.get(path);
                 }
-                const layout = allLayouts.find(route => {
-                    const routePath = `/${route.path.split('/').slice(2).map(parseSegment).join('/')}`;
-                    return routePath === path;
-                });
+                const layout = layoutsMap.get(path);
                 if (layout) {
                     layouts.unshift({
                         manifestPath: layout.path,
@@ -92,8 +134,11 @@ const createRouteManifest = async () => {
                     });
                 }
             }
+            const { regex: matcherRegex, keys } = createMatcher(routePath);
             entries[routePath] = {
                 type: 'page',
+                regex: matcherRegex,
+                paramKeys: keys,
                 mainPage: {
                     manifestPath: fileRoute.path,
                     page: fileRoute.$component,
@@ -101,28 +146,37 @@ const createRouteManifest = async () => {
                     generateMeta: fileRoute.$generateMeta,
                     options: fileRoute.$options,
                 },
-                loadingPage: loadingPage ? {
-                    page: loadingPage.$component,
-                    generateMeta: loadingPage.$generateMeta,
-                    manifestPath: loadingPage.path,
-                } : undefined,
-                errorPage: errorPage ? {
-                    page: errorPage.$component,
-                    generateMeta: errorPage.$generateMeta,
-                    manifestPath: errorPage.path,
-                } : undefined,
-                notFoundPage: routePath === '/' && notFoundPage ? {
-                    page: notFoundPage.$component,
-                    generateMeta: notFoundPage.$generateMeta,
-                    manifestPath: notFoundPage.path,
-                } : undefined,
+                loadingPage: loadingPage
+                    ? {
+                        page: loadingPage.$component,
+                        generateMeta: loadingPage.$generateMeta,
+                        manifestPath: loadingPage.path,
+                    }
+                    : undefined,
+                errorPage: errorPage
+                    ? {
+                        page: errorPage.$component,
+                        generateMeta: errorPage.$generateMeta,
+                        manifestPath: errorPage.path,
+                    }
+                    : undefined,
+                notFoundPage: routePath === '/' && notFoundPage
+                    ? {
+                        page: notFoundPage.$component,
+                        generateMeta: notFoundPage.$generateMeta,
+                        manifestPath: notFoundPage.path,
+                    }
+                    : undefined,
                 layouts: layouts,
                 groups: groups,
             };
         }
         else if (src && isRouteFile(src)) {
+            const { regex: matcherRegex, keys } = createMatcher(routePath);
             entries[routePath] = {
                 type: 'route',
+                regex: matcherRegex,
+                paramKeys: keys,
                 handler: fileRoute.$handler,
                 manifestPath: fileRoute.path,
             };
@@ -158,12 +212,12 @@ const extractRouteParams = (route, url) => {
     if (matched)
         return { route, params };
 };
-const template = `
-    <!DOCTYPE html>
-    <html lang="en">
-    <head><!--app-head--></head>
-    <!--app-body-->
-    </html>
+const template = `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head><!--app-head--></head>
+    <!--app-body-->
+    </html>
 `;
 const generateHtmlHead = (meta) => {
     const head = Object.entries(meta)
@@ -177,7 +231,9 @@ const generateHtmlHead = (meta) => {
                 .join(' ');
             return `<meta ${attrs}>`;
         }
-        if (value.type === 'link' || value.type === 'style' || value.type === 'script') {
+        if (value.type === 'link' ||
+            value.type === 'style' ||
+            value.type === 'script') {
             const attrs = Object.entries(value.attributes)
                 .map(([attrKey, attrValue]) => `${attrKey}="${attrValue}"`)
                 .join(' ');
@@ -188,45 +244,11 @@ const generateHtmlHead = (meta) => {
         .join('\n');
     return head;
 };
-const sendNodeResponse = async (res, response) => {
-    // Set status code
-    res.statusCode = response.status;
-    // Set headers
-    response.headers.forEach((value, key) => {
-        res.setHeader(key, value);
-    });
-    // Stream the body
-    if (response.body) {
-        const reader = response.body.getReader();
-        const push = async () => {
-            const { done, value } = await reader.read();
-            if (done) {
-                res.end();
-                return;
-            }
-            res.write(Buffer.from(value));
-            await push();
-        };
-        await push();
-    }
-    else {
-        const text = await response.text();
-        res.end(text);
-    }
-};
-const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonce, }) => {
+const render = async ({ toRender, entry, routeParams, searchParams, req, pageOptions, cspNonce, error }) => {
     const url = new URL(req.url);
     const path = url.pathname;
     const cachedEntry = getCache(path);
     if (cachedEntry && toRender === 'main') {
-        const { options } = entry.mainPage.options ? await entry.mainPage.options.import() : { options: {} };
-        if (options?.responseHeaders) {
-            const headers = options.responseHeaders;
-            const event = getEvent();
-            for (const [key, value] of Object.entries(headers)) {
-                setResponseHeader(event, key, value);
-            }
-        }
         return {
             rendered: cachedEntry.rendered,
             documentMeta: cachedEntry.documentMeta,
@@ -234,7 +256,6 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonc
             loaderData: cachedEntry.loaderData,
         };
     }
-    let cachingOptions = undefined;
     let meta = {};
     const loaderData = {};
     const clientManifest = getManifest('client');
@@ -242,12 +263,14 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonc
     const compose = entry.layouts.reduceRight((children, layout, index) => async () => {
         const moduleSrc = `${layout.layout.src}&pick=$css`;
         const moduleAssets = await clientManifest.inputs[moduleSrc].assets();
-        for (const asset of moduleAssets) {
-            assets.push(asset);
-        }
+        assets.push(...moduleAssets);
         const { default: layoutModule } = await layout.layout.import();
-        const { loader: layoutLoader } = layout.loader ? await layout.loader.import() : { loader: null };
-        const { generateMeta: generateMetaPage } = layout.generateMeta ? await layout.generateMeta.import() : { generateMeta: null };
+        const { loader: layoutLoader } = layout.loader
+            ? await layout.loader.import()
+            : { loader: null };
+        const { generateMeta: generateMetaPage } = layout.generateMeta
+            ? await layout.generateMeta.import()
+            : { generateMeta: null };
         let data = {};
         if (generateMetaPage) {
             const metaData = await generateMetaPage({
@@ -257,7 +280,7 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonc
             if (metaData) {
                 meta = {
                     ...meta,
-                    ...metaData
+                    ...metaData,
                 };
             }
         }
@@ -275,11 +298,11 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonc
                 slotPromises.push((async () => {
                     const moduleSrc = `${group.page.src}&pick=$css`;
                     const moduleAssets = await clientManifest.inputs[moduleSrc].assets();
-                    for (const asset of moduleAssets) {
-                        assets.push(asset);
-                    }
+                    assets.push(...moduleAssets);
                     const { default: groupPage } = await group.page.import();
-                    const { loader: groupLoader } = group.loader ? await group.loader.import() : { loader: null };
+                    const { loader: groupLoader } = group.loader
+                        ? await group.loader.import()
+                        : { loader: null };
                     let data = {};
                     if (groupLoader) {
                         const result = await groupLoader.loader(req);
@@ -289,7 +312,7 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonc
                     slots[groupName.replace('@', '')] = () => groupPage({
                         routeParams,
                         searchParams,
-                        loaderData: data
+                        loaderData: data,
                     });
                 })());
             }
@@ -303,7 +326,7 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonc
             slots: slots,
             locals: {
                 cspNonce: cspNonce,
-            }
+            },
         });
     }, async () => {
         const pageToRender = toRender === 'loading'
@@ -315,23 +338,14 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonc
                     : entry.mainPage;
         const moduleSrc = `${pageToRender.page.src}&pick=$css`;
         const moduleAssets = await clientManifest.inputs[moduleSrc].assets();
-        for (const asset of moduleAssets) {
-            assets.push(asset);
-        }
+        assets.push(...moduleAssets);
         const { default: page } = await pageToRender.page.import();
-        const { loader: pageLoader } = pageToRender.loader ? await pageToRender.loader.import() : { loader: null };
-        const { generateMeta } = pageToRender.generateMeta ? await pageToRender.generateMeta.import() : { generateMeta: null };
-        const { options } = pageToRender.options ? await pageToRender.options.import() : { options: {} };
-        if (options?.cache) {
-            cachingOptions = options.cache;
-        }
-        if (options?.responseHeaders) {
-            const headers = options.responseHeaders;
-            const event = getEvent();
-            for (const [key, value] of Object.entries(headers)) {
-                setResponseHeader(event, key, value);
-            }
-        }
+        const { loader: pageLoader } = pageToRender.loader
+            ? await pageToRender.loader.import()
+            : { loader: null };
+        const { generateMeta } = pageToRender.generateMeta
+            ? await pageToRender.generateMeta.import()
+            : { generateMeta: null };
         let data = {};
         if (pageLoader) {
             const result = await pageLoader.loader(req);
@@ -346,23 +360,27 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonc
             if (metaData) {
                 meta = {
                     ...meta,
-                    ...metaData
+                    ...metaData,
                 };
             }
         }
-        return () => page({
+        const props = {
             routeParams,
             searchParams,
             loaderData: data,
             locals: {
                 cspNonce: cspNonce,
-            }
-        });
+            },
+        };
+        if (toRender === 'error') {
+            props.error = error;
+        }
+        return () => page(props);
     });
     const composed = await compose();
     const rendered = await renderToString(() => composed());
     if (toRender === 'main') {
-        const options = cachingOptions;
+        const options = pageOptions?.cache;
         setCache(path, {
             rendered: rendered,
             documentMeta: meta,
@@ -380,7 +398,9 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonc
 let routeManifest = {};
 const hydrationScript = ({ nonce, }) => {
     const script = generateHydrationScript();
-    return nonce ? script.replace('<script', `<script nonce="${nonce}"`) : script;
+    return nonce
+        ? script.replace('<script', `<script nonce="${nonce}"`)
+        : script;
 };
 const onStart = async () => {
     try {
@@ -399,8 +419,7 @@ const onStart = async () => {
 };
 onStart();
 const handler = eventHandler(async (event) => {
-    const req = event.node.req;
-    const res = event.node.res;
+    const req = toWebRequest(event);
     try {
         if (req.url?.includes('_server')) {
             return handleServerFunction(event);
@@ -410,9 +429,9 @@ const handler = eventHandler(async (event) => {
             routeManifest = await createRouteManifest();
         }
         const cspNonce = event.locals?.cspNonce;
-        const url = req.url || '/';
+        const url = new URL(req.url).pathname;
         // extract route params and search params
-        const params = {};
+        let params = {};
         const searchParams = {};
         const [pathnamePart, searchParamPart] = url.split('?');
         if (searchParamPart) {
@@ -421,22 +440,21 @@ const handler = eventHandler(async (event) => {
                 searchParams[key] = decodeURIComponent(value || '');
             }
         }
-        const matched = Object.entries(routeManifest).find(([path, entry]) => {
-            const pattern = path
-                .replace(/:\[\*[^/\]]+\]/g, '?(.*)?') // [[...slug]] -> (.*)?
-                .replace(/:\*[^/]*/g, '.*') // :*slug or :* -> .*
-                .replace(/:[^/]+/g, '[^/]+'); // :post -> [^/]+
-            const re = new RegExp(`^${pattern}$`);
-            return re.test(pathnamePart);
-        })?.[1];
-        const routePath = matched && matched.type === 'route'
-            ? matched.manifestPath.split('/').slice(2).join('/')
-            : matched && matched.type === 'page'
-                ? matched.mainPage.manifestPath.split('/').slice(2).join('/')
-                : '/';
-        const routeParams = extractRouteParams(routePath, pathnamePart);
-        if (routeParams) {
-            Object.assign(params, routeParams.params);
+        let matched;
+        for (const entry of Object.values(routeManifest)) {
+            const match = entry.regex.exec(pathnamePart);
+            if (match) {
+                matched = entry;
+                if (entry.paramKeys) {
+                    const routePath = matched && matched.type === 'route'
+                        ? matched.manifestPath.split('/').slice(2).join('/')
+                        : matched && matched.type === 'page'
+                            ? matched.mainPage.manifestPath.split('/').slice(2).join('/')
+                            : '/';
+                    params = extractRouteParams(routePath, pathnamePart)?.params || {};
+                }
+                break;
+            }
         }
         if (matched && matched.type === 'route') {
             const routeModule = await matched.handler.import();
@@ -444,12 +462,11 @@ const handler = eventHandler(async (event) => {
             if (reqMethod) {
                 const handler = routeModule[reqMethod];
                 if (typeof handler === 'function') {
-                    const result = await handler(toWebRequest(event), {
+                    const result = await handler(req, {
                         params: params,
                         searchParams: searchParams,
                     });
-                    await sendNodeResponse(res, result);
-                    return;
+                    return result;
                 }
                 throw new Error(`Method ${reqMethod} not implemented in ${matched.handler.src}`);
             }
@@ -461,245 +478,274 @@ const handler = eventHandler(async (event) => {
             charset: {
                 type: 'meta',
                 attributes: {
-                    charset: 'UTF-8'
-                }
+                    charset: 'UTF-8',
+                },
             },
             viewport: {
                 type: 'meta',
                 attributes: {
                     name: 'viewport',
-                    content: 'width=device-width, initial-scale=1.0'
-                }
+                    content: 'width=device-width, initial-scale=1.0',
+                },
             },
             title: {
                 type: 'title',
                 attributes: {},
-                content: 'SolidStep'
+                content: 'SolidStep',
             },
             build_time: {
                 type: 'meta',
                 attributes: {
                     name: 'x-build-time',
                     content: Date.now().toString(),
-                    description: 'IMPORTANT: This tag indicates the build time of the application and should not be removed.'
+                    description: 'IMPORTANT: This tag indicates the build time of the application and should not be removed.',
                 },
-            }
+            },
         };
         const assets = await clientManifest.inputs[clientManifest.handler].assets();
         const manifestHtml = `<script ${cspNonce ? `nonce="${cspNonce}"` : ''}>window.manifest=${JSON.stringify(await clientManifest.json())}</script>`;
         let clientHydrationScript = undefined;
-        res.setHeader('Content-Type', 'text/html');
-        res.setHeader('Cache-Control', 'no-cache');
-        try {
-            if (!matched) {
+        setHeader('Content-Type', 'text/html');
+        setHeader('Cache-Control', 'no-cache');
+        const stream = new ReadableStream({
+            async start(controller) {
+                const encoder = new TextEncoder();
+                const push = (text) => controller.enqueue(encoder.encode(text));
                 try {
-                    const notFoundPage = routeManifest['/'];
-                    const { rendered, documentMeta, documentAssets, loaderData, } = await render({
-                        toRender: 'not-found',
-                        entry: notFoundPage,
-                        routeParams: {},
-                        searchParams: {},
-                        req: toWebRequest(event),
-                        cspNonce,
-                    });
-                    for (const asset of documentAssets) {
-                        assets.push(asset);
+                    if (!matched) {
+                        try {
+                            const notFoundPage = routeManifest['/'];
+                            const { rendered, documentMeta, documentAssets, loaderData, } = await render({
+                                toRender: 'not-found',
+                                entry: notFoundPage,
+                                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 matched.mainPage.options.import()
+                            : { options: {} };
+                        if (options?.responseHeaders) {
+                            const headers = options.responseHeaders;
+                            for (const [key, value] of Object.entries(headers)) {
+                                setHeader(key, value);
+                            }
+                        }
+                        try {
+                            if (!matched.loadingPage) {
+                                throw new Error('No loading page');
+                            }
+                            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,
+                            })}
+                                        ${assetsHtml}
+                                        ${hydrationScript({ nonce: cspNonce })}
+                                    </head>
+                                    <noscript>
+                                        Please enable JavaScript to view the content.<br/>
+                                    </noscript>
+                                    ${rendered}
+                                </html>
+                                `;
+                            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 = `
+                            <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);
                     }
-                    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
-                    };
-                    res.statusCode = 404;
-                }
-                catch (e) {
-                    console.error('404 module not found:', e);
-                    res.statusCode = 404;
-                    return res.end('Not Found');
                 }
-            }
-            else {
-                try {
-                    if (!matched.loadingPage) {
-                        throw new Error('No loading page');
+                catch (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: 'loading',
-                        entry: matched,
-                        routeParams: params,
-                        searchParams,
-                        req: toWebRequest(event),
-                        cspNonce,
-                    });
-                    const assetsHtml = assets.concat(documentAssets).map((asset) => {
+                    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);
+                    }
+                    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 === '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,
-                    })}
-                                ${assetsHtml}
-                                ${hydrationScript({ nonce: cspNonce })}
-                            </head>
-                            <noscript>
-                                Please enable JavaScript to view the content.<br/>
-                            </noscript>
-                            ${rendered}
-                        </html>
-                        `;
-                    res.write(html);
-                    res.write(`
-                    <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>
+                        return '';
+                    })
+                        .join('\n');
+                    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');
+                        loading.innerHTML = \`${html}\`;
+                        </script> 
                     `);
-                    loading = true;
-                }
-                catch (e) {
-                    // skip
-                }
-                const { rendered, documentMeta, documentAssets, loaderData, } = await render({
-                    toRender: 'main',
-                    entry: matched,
-                    routeParams: params,
-                    searchParams,
-                    req: toWebRequest(event),
-                    cspNonce,
-                });
-                for (const asset of documentAssets) {
-                    assets.push(asset);
-                }
-                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
-                };
-            }
-        }
-        catch (e1) {
-            if (e1 instanceof RedirectError ||
-                e1.name === 'RedirectError') {
-                throw 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: toWebRequest(event),
-                    cspNonce,
-                });
-                for (const asset of documentAssets) {
-                    assets.push(asset);
-                }
-                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
-                };
-                res.statusCode = 500;
-            }
-            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>`;
+                    push(manifestHtml);
+                    push(clientHydrationScript);
+                    controller.close();
+                    return;
                 }
-                return '';
-            }).join('\n');
-            res.write(`
-                <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');
-                loading.innerHTML = \`${html}\`;
-                </script> 
-            `);
-            res.write(manifestHtml);
-            return res.end(clientHydrationScript);
-        }
-        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>`;
-            }
-        }).join('\n');
-        const transformHtml = template
-            .replace('<!--app-head-->', `${generateHtmlHead(meta)}\n${assetsHtml}\n${hydrationScript({ nonce: cspNonce })}`)
-            .replace('<!--app-body-->', (html ?? '') + manifestHtml + clientHydrationScript);
-        return res.end(transformHtml);
+                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>`;
+                    }
+                })
+                    .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') {
-            res.statusCode = 302;
-            res.setHeader('Location', e.message);
-            return res.end('Redirecting...');
-        }
         console.error(e);
-        res.statusCode = 500;
-        return res.end('Internal Server Error');
+        return new Response('Internal Server Error', { status: 500 });
     }
 });
 export default handler;

package/utils/server-action.server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server-action.server.d.ts","sourceRoot":"","sources":["../../utils/server-action.server.ts"],"names":[],"mappings":"AAgBA,OAAO,EAIN,KAAK,SAAS,EAWd,MAAM,YAAY,CAAC;AAuHpB,wBAAsB,oBAAoB,CAAC,KAAK,EAAE,SAAS,oBA0M1D;;AAED,wBAAkD"}
+{"version":3,"file":"server-action.server.d.ts","sourceRoot":"","sources":["../../utils/server-action.server.ts"],"names":[],"mappings":"AAgBA,OAAO,EAIN,KAAK,SAAS,EAWd,MAAM,YAAY,CAAC;AAuHpB,wBAAsB,oBAAoB,CAAC,KAAK,EAAE,SAAS,oBA2M1D;;AAED,wBAAkD"}

package/utils/server-action.server.js

@@ -244,9 +244,10 @@ export async function handleServerFunction(event) {
                 // Step 4: diff the cache with new html from server
                 const reqUrl = new URL(request.url);
                 const serverUrl = reqUrl.origin;
-                await fetch(serverUrl + revalidatePath, {
+                const response = await fetch(serverUrl + revalidatePath, {
                     method: 'GET'
                 }, false);
+                await response.text(); // ensure the fetch is completed and cache is populated
                 const newCacheValue = getCache(revalidatePath);
                 const newHtml = newCacheValue?.rendered;
                 const dd = createDiffDOM({