@varlabs/create-solidstep 0.1.2 → 0.1.3

package/generate/app/middleware.ts

@@ -0,0 +1,49 @@
+import { defineMiddleware } from 'vinxi/http';
+import { csp } from '../utils/csp';
+import { cors } from '../utils/cors';
+import { csrf } from '../utils/csrf';
+
+const trustedOrigins = ['https://example.com', 'https://another-example.com'];
+
+const corsMiddleware = cors(trustedOrigins);
+const csrfMiddleware = csrf(trustedOrigins);
+
+const middleware = defineMiddleware({
+    onRequest: async (event) => {
+        event.node.res.setHeader('Content-Security-Policy', csp);
+        event.node.res.setHeader('Vary', 'Origin, Access-Control-Request-Method');
+        
+        const origin = event.node.req.headers.origin || '';
+        const requestUrl = new URL(event.node.req.url, `http://${event.node.req.headers.host || 'localhost'}`);
+
+        const csrfResult = csrfMiddleware(
+            event.node.req.method,
+            requestUrl,
+            origin,
+            event.node.req.headers.referer
+        );
+
+        if (!csrfResult.success) {
+            event.node.res.statusCode = 403; // Forbidden
+            event.node.res.end(csrfResult.message);
+            return;
+        }
+
+        if (origin) {
+            const corsHeaders = corsMiddleware(origin, event.node.req.method === 'OPTIONS');
+            for (const [key, value] of Object.entries(corsHeaders)) {
+                event.node.res.setHeader(key, value);
+            }
+            if (
+                event.node.req.method === 'OPTIONS'
+                && event.node.req.headers['access-control-request-method']
+            ) {
+                event.node.res.statusCode = 204; // No Content for preflight requests
+                event.node.res.end();
+                return;
+            }
+        }
+    },
+});
+
+export default middleware;

package/generate/app.config.ts

@@ -1,7 +1,7 @@
 import { createApp } from 'vinxi';
 import solid from 'vite-plugin-solid';
 import { serverFunctions } from '@vinxi/server-functions/plugin';
-import { Router } from './utils/router';
+import { ServerRouter. ClientRouter } from './utils/router';
 import path from 'path';
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -10,6 +10,9 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 
 export default createApp({
     server: {
+        experimental: {
+            asyncContext: true,
+        },
     },
     routers: [
         {
@@ -19,18 +22,14 @@ export default createApp({
             base: '/',
         },
         {
-            name: 'ssr',
-            type: 'http',
-            base: '/',
-            handler: './server.ts',
-            target: 'server',
-            plugins: () => [solid({ ssr: true })],
-            link: {
-				client: 'client',
-			},
-            middleware: './app/middleware.ts',
+            name: 'client',
+            type: 'client',
+            target: 'browser',
+            handler: './client.ts',
+            plugins: () => [serverFunctions.client(), solid({ ssr: true })],
+            base: '/_build',
             routes: (router, app) => {
-                return new Router(
+                return new ServerRouter(
                     {
                         dir: path.join(__dirname, 'app'),
                         extensions: ['jsx', 'js', 'tsx', 'ts'],
@@ -41,14 +40,21 @@ export default createApp({
             }
         },
         {
-            name: 'client',
-            type: 'client',
-            target: 'browser',
-            handler: './client.ts',
-            plugins: () => [serverFunctions.client(), solid({ ssr: true })],
-            base: '/_build',
+            name: 'ssr',
+            type: 'http',
+            base: '/',
+            handler: './server.ts',
+            target: 'server',
+            plugins: () => [
+                serverFunctions.server(),
+                solid({ ssr: true })
+            ],
+            // link: {
+			// 	client: 'client',
+			// },
+            middleware: './app/middleware.ts',
             routes: (router, app) => {
-                return new Router(
+                return new ClientRouter(
                     {
                         dir: path.join(__dirname, 'app'),
                         extensions: ['jsx', 'js', 'tsx', 'ts'],
@@ -58,6 +64,6 @@ export default createApp({
                 );
             }
         },
-        serverFunctions.router(),
+        // serverFunctions.router(),
     ],
 });

package/generate/client.ts

@@ -8,31 +8,6 @@ const importModule = async (routeModule: any) => {
     if ((import.meta as any).env.DEV) {
         return await manifest.inputs[routeModule.src].import();
     }
-    const assets = await manifest.inputs?.[routeModule.src].assets();
-    if (typeof window !== 'undefined' && assets && assets.length > 0) {
-        const styles = assets.filter(
-            (asset) => asset.tag === 'style' || asset.attrs.rel === 'stylesheet',
-        );
-        for (const asset of styles) {
-            const attributeString = Object.entries(asset.attrs)
-                .map(([key, value]) => `${key}="${value}"`)
-                .join(' ');
-            if (asset.tag === 'style') {
-                document.head.insertAdjacentHTML(
-                    'beforeend',
-                    `<style ${attributeString}>${asset.children}</style>`,
-                );
-            } else {
-                const link = document.createElement('link');
-                link.rel = 'stylesheet';
-                link.href = asset.attrs.href;
-                Object.entries(asset.attrs).forEach(([key, value]) => {
-                    link.setAttribute(key, value);
-                });
-                document.head.appendChild(link);
-            }
-        }
-    }
     return await routeModule.import();
 };
 
@@ -40,6 +15,7 @@ export const main = async (
     modulePath: string,
     routeParams: Record<string, string> = {},
     searchParams: Record<string, string> = {},
+    loaderDataManifest: Record<string, any> = {}
 ) => {
     // find the route that matches the path
     const pageModule = fileRoutes.find((route) => route.path === modulePath);
@@ -47,15 +23,18 @@ export const main = async (
         console.error(`No route found for path: ${modulePath}`);
         return;
     }
+    const pageLoaderData = loaderDataManifest[modulePath];
 
     const segments = modulePath.split('/').slice(2);
     if (segments.at(0)) {
         segments.unshift('');
     }
-    let layouts: any[] = [];
-    let groups: Record<string, any> = {};
+    const layouts: any[] = [];
+    const layoutLoaderData: any[] = [];
+    const groups: Record<string, any> = {};
     for (let i = 0; i < segments.length; i++) {
         const path = '/' + segments.slice(1, segments.length - i).join('/');
+        const loaderData = loaderDataManifest[`/layout${path}`];
         const layoutModule = fileRoutes.find((route) => {
             const routePath = '/' + route.path.split('/').slice(2).join('/');
             return routePath === path && (route as any).type === 'layout';
@@ -63,6 +42,9 @@ export const main = async (
         if (layoutModule) {
             layouts.unshift(layoutModule);
         }
+        if (loaderData) {
+            layoutLoaderData.unshift(loaderData);
+        }
     }
     const groupModules = fileRoutes.filter((route) => {
         const parentPath = (route as any).parent || '';
@@ -77,23 +59,32 @@ export const main = async (
     const compose = layouts.reduceRight(
         (children, layout, index) => async () => {
             const { default: layoutModule } = await importModule(layout.$component);
-            let slots: Record<string, any> = {};
+            const loaderData = layoutLoaderData[index] || {};
+            const slots: Record<string, any> = {};
+            const slotPromises: Promise<any>[] = [children()];
             if (index === layouts.length - 1) {
                 // last layout, we can render slots
                 for (const [groupName, group] of Object.entries(groups)) {
-                    const { default: groupPage } = await importModule(group.$component);
-                    slots[groupName] = () => groupPage({
-                        routeParams,
-                        searchParams,
-                    });
+                    slotPromises.push(
+                        (async () => {
+                            const { default: groupPage } = await importModule(group.$component);
+                            const groupLoaderData = loaderDataManifest[group.path] || {};
+                            slots[groupName] = () => groupPage({
+                                routeParams,
+                                searchParams,
+                                loaderData: groupLoaderData,
+                            });
+                        })()
+                    );
                 }
             }
-            const childrenRendered = await children();
+            const [childrenRendered] = await Promise.all(slotPromises);
             return () => layoutModule({
                 children: childrenRendered,
                 routeParams,
                 searchParams,
                 slots: slots,
+                loaderData,
             });
         },
         async () => {
@@ -101,6 +92,7 @@ export const main = async (
             return () => page({
                 routeParams,
                 searchParams,
+                loaderData: pageLoaderData || {},
             });
         }
     );