npm - @varlabs/create-solidstep - Versions diffs - 0.1.6 → 0.2.0 - Mend

@varlabs/create-solidstep 0.1.6 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/generate/app/instrumentation.ts +33 -0
package/generate/app/layout.tsx +37 -39
package/generate/app/middleware.ts +66 -49
package/generate/app/page.tsx +37 -40
package/generate/app.config.ts +18 -69
package/generate/package.json +3 -4
package/generate/sqlite-stub.mjs +9 -0
package/generate/tsconfig.json +3 -2
package/package.json +1 -1
package/generate/client.ts +0 -105
package/generate/server.ts +0 -784
package/generate/utils/cache.ts +0 -106
package/generate/utils/cookies.ts +0 -25
package/generate/utils/cors.ts +0 -16
package/generate/utils/csp.ts +0 -27
package/generate/utils/csrf.ts +0 -62
package/generate/utils/loader.ts +0 -35
package/generate/utils/redirect.ts +0 -16
package/generate/utils/router.ts +0 -272
package/generate/utils/server-only.ts +0 -5
package/generate/utils/types.ts +0 -8

package/generate/app/instrumentation.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { defineInstrumentation } from 'solidstep/utils/instrumentation';
+export default defineInstrumentation({
+    async register() {
+        // Called once at server startup.
+        // Initialize your telemetry SDK here (e.g., OpenTelemetry, Sentry).
+        console.log('[instrumentation] Server starting...');
+    },
+    async onRequest(request, context) {
+        // Called before each request is processed.
+        // context.metadata is a mutable object you can use to pass data between hooks.
+        context.metadata.requestId = crypto.randomUUID();
+        console.log(
+            `[instrumentation] ${request.method} ${context.pathname} (${context.routeType})`,
+        );
+    },
+    async onResponseEnd(request, context) {
+        // Called after the response stream is complete.
+        console.log(
+            `[instrumentation] ${context.statusCode} ${context.pathname} ${context.duration.toFixed(1)}ms`,
+        );
+    },
+    async onRequestError(error, request, context) {
+        // Called when an unhandled error occurs during request processing.
+        console.error(
+            `[instrumentation] Error in ${context.pathname}:`,
+            error.message,
+        );
+    },
+});

package/generate/app/layout.tsx CHANGED Viewed

@@ -1,39 +1,37 @@
-import type { Component, JSX } from 'solid-js';
-import './globals.css';
-export const generateMeta = () => ({
-    'title': {
-        type: 'title',
-        attributes: {},
-        content: 'SolidStep App'
-    },
-    'description': {
-        type: 'meta',
-        attributes: {
-            name: 'description',
-            content: 'This is simple SolidStep application.'
-        },
-    },
-    'favicon': {
-        type: 'link',
-        attributes: {
-            rel: 'icon',
-            href: '/favicon-32x32.png',
-            type: 'image/png'
-        }
-    },
-});
-const Layout: Component<{
-    children: JSX.Element;
-}> = ({
-    children,
-}) => {
-    return (
-        <body>
-            {children}
-        </body>
-    );
-}
-export default Layout;
+import type { Component, JSX } from 'solid-js';
+import './globals.css';
+export const generateMeta = () => ({
+    'title': {
+        type: 'title',
+        attributes: {},
+        content: 'SolidStep App'
+    },
+    'description': {
+        type: 'meta',
+        attributes: {
+            name: 'description',
+            content: 'This is a simple SolidStep application.'
+        },
+    },
+    'favicon': {
+        type: 'link',
+        attributes: {
+            rel: 'icon',
+            href: '/favicon-32x32.png',
+            type: 'image/png'
+        }
+    },
+});
+const Layout: Component<{
+    children: () => JSX.Element;
+}> = (props) => {
+    return (
+        <body>
+            {props.children()}
+        </body>
+    );
+};
+export default Layout;

package/generate/app/middleware.ts CHANGED Viewed

@@ -1,49 +1,66 @@
-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;
+import { defineMiddleware, type Middleware } from 'solidstep/utils/middleware';
+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);
+// Logs every request. A lightweight composable unit.
+const logger: Middleware = {
+    onRequest: (event) => {
+        console.log(`[req] ${event.node.req.method} ${event.path}`);
+    },
+};
+// Sets a per-request CSP nonce, enforces CSRF on unsafe methods, and applies
+// CORS for trusted origins. Short-circuits the chain by returning a Response.
+const security: Middleware = {
+    onRequest: (event) => {
+        const nonce = randomBytes(16).toString('base64');
+        (event as any).locals = { cspNonce: nonce };
+        let policy = createBasePolicy();
+        policy = withNonce(policy, nonce);
+        event.node.res.setHeader('Content-Security-Policy', serializePolicy(policy));
+        event.node.res.setHeader('Vary', 'Origin, Access-Control-Request-Method');
+        const origin = (event.node.req.headers.origin as string) || '';
+        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 || 'GET',
+            requestUrl,
+            origin,
+            event.node.req.headers.referer,
+        );
+        if (!csrfResult.success) {
+            return new Response(csrfResult.message, { status: 403 });
+        }
+        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']
+            ) {
+                return new Response(null, { status: 204 });
+            }
+        }
+    },
+};
+export default defineMiddleware([logger, security]);

package/generate/app/page.tsx CHANGED Viewed

@@ -1,40 +1,37 @@
-import { defineLoader, type LoaderDataFromFunction } from '../utils/loader';
-import { NoHydration } from 'solid-js/web';
-export const loader = defineLoader(async () => {
-    const response = await fetch('https://jsonplaceholder.typicode.com/todos/2');
-    if (!response.ok) {
-        throw new Error('Failed to fetch data');
-    }
-    console.log('Fetching data from API...');
-    const data = await response.json() as Promise<{ userId: number; id: number; title: string; completed: boolean }>;
-    return data;
-});
-export const generateMeta = () => ({
-    'title': {
-        type: 'title',
-        attributes: {},
-        content: 'SolidStep Example Main Page'
-    },
-});
-type LoaderData = LoaderDataFromFunction<typeof loader>;
-const Page = ({
-    loaderData
-}: {
-    loaderData: LoaderData;
-}) => {
-    return (
-        <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
-            <NoHydration>
-                <p class="text-lg text-gray-700">ID: {loaderData.id}</p>
-            </NoHydration>
-            <h1 class="text-4xl font-bold mb-4">Welcome to My App</h1>
-            <p class="text-lg text-gray-700">This is a simple Next.js application.</p>
-        </div>
-    );
-};
-export default Page;
+import { defineLoader, type LoaderDataFromFunction } from 'solidstep/utils/loader';
+export const loader = defineLoader(async () => {
+    const response = await fetch('https://jsonplaceholder.typicode.com/todos/2');
+    if (!response.ok) {
+        throw new Error('Failed to fetch data');
+    }
+    const data = (await response.json()) as {
+        userId: number;
+        id: number;
+        title: string;
+        completed: boolean;
+    };
+    return data;
+});
+export const generateMeta = () => ({
+    'title': {
+        type: 'title',
+        attributes: {},
+        content: 'SolidStep Main Page'
+    },
+});
+type LoaderData = LoaderDataFromFunction<typeof loader>;
+const Page = (props: { loaderData: LoaderData }) => {
+    return (
+        <main>
+            <h1>Welcome to SolidStep</h1>
+            <p>Edit <code>app/page.tsx</code> to get started.</p>
+            <p>Loaded todo #{props.loaderData.id}: {props.loaderData.title}</p>
+        </main>
+    );
+};
+export default Page;

package/generate/app.config.ts CHANGED Viewed

@@ -1,69 +1,18 @@
-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';
-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(),
-    ],
-});
+import { defineConfig } from 'solidstep';
+import { fileURLToPath } from 'node:url';
+// Nitro's default Node database connector bundles an unused `import 'node:sqlite'`,
+// a builtin that only exists in Node 22.5+. This starter uses no database, so we both
+// pass an empty `database` config and alias the builtin to an empty stub, keeping the
+// production server runnable on Node 20/21.
+const sqliteStub = fileURLToPath(new URL('./sqlite-stub.mjs', import.meta.url));
+export default defineConfig({
+    server: {
+        preset: 'node-server',
+        database: {},
+        alias: {
+            'node:sqlite': sqliteStub,
+        },
+    },
+});

package/generate/package.json CHANGED Viewed

@@ -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.3.5",
         "vinxi": "^0.5.8"
     },
     "devDependencies": {
-        "typescript": "^5.8.3",
-        "vite-plugin-solid": "^2.11.7"
+        "typescript": "^5.8.3"
     }
 }

package/generate/sqlite-stub.mjs ADDED Viewed

@@ -0,0 +1,9 @@
+// Stub for `node:sqlite`.
+//
+// Nitro's default Node database connector bundles an (unused) `import 'node:sqlite'`
+// into the server output. That builtin only exists in Node 22.5+, so on Node 20/21
+// the server crashes at startup even though no database is ever used. This app has
+// no database, so app.config.ts aliases `node:sqlite` to this empty stub.
+export class DatabaseSync {}
+export class StatementSync {}
+export default { DatabaseSync, StatementSync };

package/generate/tsconfig.json CHANGED Viewed

@@ -8,9 +8,10 @@
 		"jsx": "preserve",
 		"jsxImportSource": "solid-js",
 		"allowJs": true,
-		"checkJs": true,
+		"checkJs": false,
 		"noEmit": true,
 		"types": ["vinxi/client"],
-		"isolatedModules": true
+		"isolatedModules": true,
+		"skipLibCheck": true
 	}
 }

package/package.json CHANGED Viewed

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

package/generate/client.ts DELETED Viewed

@@ -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;