@varlabs/create-solidstep 0.1.5 → 0.1.7

package/generate/app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Component, JSX } from 'solid-js';
-import 'globals.css';
+import './globals.css';
 
-export const generateMeta = () => ({
+export const generateMeta = ({ cspNonce }) => ({
     'title': {
         type: 'title',
         attributes: {},

package/generate/app/middleware.ts

@@ -1,20 +1,31 @@
 import { defineMiddleware } from 'vinxi/http';
-import { csp } from '../utils/csp';
-import { cors } from '../utils/cors';
-import { csrf } from '../utils/csrf';
+import { createBasePolicy, serializePolicy, withNonce } from 'solidstep/utils/csp';
+import { cors } from 'solidstep/utils/cors';
+import { csrf } from 'solidstep/utils/csrf';
+import { randomBytes } from 'node:crypto';
 
 const trustedOrigins = ['https://example.com', 'https://another-example.com'];
 
 const corsMiddleware = cors(trustedOrigins);
 const csrfMiddleware = csrf(trustedOrigins);
+let cspPolicy = createBasePolicy();
 
 const middleware = defineMiddleware({
     onRequest: async (event) => {
-        event.node.res.setHeader('Content-Security-Policy', csp);
+        const nonce = randomBytes(16).toString('base64');
+
+        (event as any).locals = {
+            cspNonce: nonce,
+        };
+
+        cspPolicy = withNonce(cspPolicy, nonce);
+
+        event.node.res.setHeader('Content-Security-Policy', serializePolicy(cspPolicy));
         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 protocol = origin.startsWith('https') ? 'https' : 'http';
+        const requestUrl = new URL(event.node.req.url, `${protocol}://${event.node.req.headers.host || 'localhost'}`);
 
         const csrfResult = csrfMiddleware(
             event.node.req.method,

package/generate/app/page.tsx

@@ -1,4 +1,4 @@
-import { defineLoader, type LoaderDataFromFunction } from '../utils/loader';
+import { defineLoader, type LoaderDataFromFunction } from 'solidstep/utils/loader';
 import { NoHydration } from 'solid-js/web';
 
 export const loader = defineLoader(async () => {

package/generate/app.config.ts

@@ -1,69 +1,3 @@
-import { createApp } from 'vinxi';
-import solid from 'vite-plugin-solid';
-import { serverFunctions } from '@vinxi/server-functions/plugin';
-import { ServerRouter, ClientRouter } from './utils/router';
-import path from 'path';
-import { dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { defineConfig } from 'solidstep';
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-export default createApp({
-    server: {
-        experimental: {
-            asyncContext: true,
-        },
-    },
-    routers: [
-        {
-            name: 'public',
-            type: 'static',
-            dir: './public',
-            base: '/',
-        },
-        {
-            name: 'client',
-            type: 'client',
-            target: 'browser',
-            handler: './client.ts',
-            plugins: () => [serverFunctions.client(), solid({ ssr: true })],
-            base: '/_build',
-            routes: (router, app) => {
-                return new ClientRouter(
-                    {
-                        dir: path.join(__dirname, 'app'),
-                        extensions: ['jsx', 'js', 'tsx', 'ts'],
-                    },
-                    router,
-                    app
-                );
-            }
-        },
-        {
-            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 ServerRouter(
-                    {
-                        dir: path.join(__dirname, 'app'),
-                        extensions: ['jsx', 'js', 'tsx', 'ts'],
-                    },
-                    router,
-                    app
-                );
-            }
-        },
-        // serverFunctions.router(),
-    ],
-});
+export default defineConfig({});

package/generate/package.json

@@ -11,12 +11,11 @@
     "keywords": [],
     "author": "",
     "dependencies": {
-        "@vinxi/server-functions": "0.5.1",
-        "solid-js": "^1.9.7",
+        "solid-js": "^1.9.9",
+        "solidstep": "^0.1.1",
         "vinxi": "^0.5.8"
     },
     "devDependencies": {
-        "typescript": "^5.8.3",
-        "vite-plugin-solid": "^2.11.7"
+        "typescript": "^5.8.3"
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@varlabs/create-solidstep",
-    "version": "0.1.5",
+    "version": "0.1.7",
     "description": "Next Step SolidJS CLI for building web applications.",
     "type": "module",
     "author": "HamzaKV <hamzakv333@gmail.com>",

package/generate/client.ts

@@ -1,105 +0,0 @@
-import { hydrate } from 'solid-js/web';
-import 'vinxi/client';
-import fileRoutes from 'vinxi/routes';
-import { getManifest } from 'vinxi/manifest';
-
-const importModule = async (routeModule: any) => {
-    const manifest = getManifest('client');
-    if ((import.meta as any).env.DEV) {
-        return await manifest.inputs[routeModule.src].import();
-    }
-    return await routeModule.import();
-};
-
-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);
-    if (!pageModule) {
-        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('');
-    }
-    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';
-        });
-        if (layoutModule) {
-            layouts.unshift(layoutModule);
-        }
-        if (loaderData) {
-            layoutLoaderData.unshift(loaderData);
-        }
-    }
-    const groupModules = fileRoutes.filter((route) => {
-        const parentPath = (route as any).parent || '';
-        return parentPath === segments.join('/') && (route as any).type === 'group';
-    });
-    if (groupModules && groupModules.length > 0) {
-        for (const groupModule of groupModules) {
-            const groupName = groupModule.path.split('/').at(-1).replace('@', '');
-            groups[groupName] = groupModule;
-        }
-    }
-    const compose = layouts.reduceRight(
-        (children, layout, index) => async () => {
-            const { default: layoutModule } = await importModule(layout.$component);
-            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)) {
-                    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 Promise.all(slotPromises);
-            return () => layoutModule({
-                children: childrenRendered,
-                routeParams,
-                searchParams,
-                slots: slots,
-                loaderData,
-            });
-        },
-        async () => {
-            const { default: page } = await importModule(pageModule.$component);
-            return () => page({
-                routeParams,
-                searchParams,
-                loaderData: pageLoaderData || {},
-            });
-        }
-    );
-
-    const composed = await compose();
-
-    hydrate(() => composed(), document);
-};
-
-export default main;