solidstep 0.1.4 → 0.1.6

package/README.md

@@ -48,6 +48,7 @@ Configure your app in `app.config.ts`:
 
 ```tsx
 import { defineConfig } from 'solidstep';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
   server: {
@@ -55,13 +56,53 @@ export default defineConfig({
   },
   plugins: [
     {
-      type: 'both',
-      plugin: myVitePlugin(),
-    },
+      type: 'client', // or 'server' or 'both' - depends on where you want to use the plugin
+      plugin: tailwindcss()
+    }
   ],
 });
 ```
 
+#### Vite Configuration
+
+You can customize Vite settings for both client and server builds. 
+
+__When trying to configure absolute path imports__
+1. Add the path alias in tsconfig.json (for TypeScript support):
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
+```
+
+2. Then add the same alias in the Vite config inside `app.config.ts` to ensure it works during build and runtime:
+```tsx
+import { defineConfig } from 'solidstep';
+import { resolve } from 'node:path';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  server: {
+    preset: 'node',
+  },
+  vite: {
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, '.'),
+      },
+    },
+  },
+});
+```
+
 ### Project Structure
 
 ```
@@ -169,15 +210,13 @@ export default function RootLayout(props: {
   slots: { graph1: any; graph2: any; };
 }) {
   return (
-    <div>
-      <main>
-        {props.children()}
-        <aside>
-          <div>{props.slots.graph1()}</div>
-          <div>{props.slots.graph2()}</div>
-        </aside>
-      </main>
-    </div>
+    <main>
+      {props.children()}
+      <aside>
+        <div>{props.slots.graph1()}</div>
+        <div>{props.slots.graph2()}</div>
+      </aside>
+    </main>
   );
 }
 ```
@@ -323,7 +362,7 @@ Configure page-level caching:
 ```tsx
 export const options = {
   cache: {
-    ttl: 60000,
+    ttl: 60000, // Cache for 60 seconds
   },
 };
 ```
@@ -350,6 +389,21 @@ export async function POST(request: Request) {
 }
 ```
 
+## Server Assets
+Serve static files from the `server-assets/` directory:
+
+```my-app/
+├── server-assets/
+│   └── secret.txt
+```
+
+Access via `my-app/server-assets/secret.txt` URL:
+
+```ts
+const TEMPLATE_PATH = join(process.cwd(), 'server-assets', 'templates', 'template.ejs');
+const template = await fs.promises.readFile(TEMPLATE_PATH, 'utf-8');
+```
+
 ## Utilities
 
 ### Cookies
@@ -400,7 +454,7 @@ const corsHeaders = corsMiddleware(origin, event.node.req.method === 'OPTIONS');
 
 ### CSP
 ```tsx
-import { createBasePolicy, serializePolicy, withNonce } from '@varlabs/solidstep/utils/csp';
+import { createBasePolicy, serializePolicy, withNonce } from 'solidstep/utils/csp';
 
 let cspPolicy = createBasePolicy();
 
@@ -417,7 +471,7 @@ event.response.headers.set('Content-Security-Policy', serializePolicy(cspPolicy)
 
 ### CSRF Protection
 ```tsx
-import { csrf } from '@varlabs/solidstep/utils/csrf';
+import { csrf } from 'solidstep/utils/csrf';
 
 const trustedOrigins = ['https://example.com', 'https://another-example.com'];
 
@@ -539,7 +593,7 @@ export default defineConfig({
   logger: {
     level: 'info',
     transport: {
-      target: 'pino-pretty',
+      target: 'pino-pretty', // Use pino-pretty for human-readable logs
       options: {
         colorize: true
       }
@@ -653,14 +707,52 @@ If accidentally imported on the client, it will throw:
 Error: This module is only available on the server side.
 ```
 
+## Preloading/prefetching strategies
+SolidStep supports various preloading and prefetching strategies to enhance user experience by loading data and resources ahead of time. This can significantly reduce perceived latency and improve navigation speed within your application. Solidstep does not include any preloading/prefetching by default, but you can implement your own strategies using the built-in fetch utilities and SolidJS features.
+
+Some common strategies include:
+- **Link Prefetching**: Use the `<link rel="prefetch">` tag to hint the browser to prefetch resources for links that users are likely to click on next.
+- **Using Intersection Observer**: Implement lazy loading and prefetching of data when certain elements come into the viewport.
+- **Using [instant.page](https://instant.page/)**: A small library that preloads pages on hover or touchstart events.
+```tsx
+export const RootLayout = (props) => {
+  return (
+    <body>
+      ...
+      <NoHydration>
+      <script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
+      </NoHydration>
+    </body>
+  );
+};
+```
+- **Using [Foresight.js](https://foresightjs.com/)**: A library that preloads pages based on user behavior and patterns.
+```tsx
+import { ForesightManager } from "js.foresight";
+import { onMount } from "solid-js";
+
+export const RootLayout = (props) => {
+  onMount(() => {
+    ForesightManager.initialize({
+      // Configuration options
+    });
+  });
+  return (
+    <body>
+      ...
+    </body>
+  );
+};
+```
+- **Custom Preloading Logic**: Write custom logic to preload data for specific routes or components based on user behavior or application state.
+
 ## Future Plans
 - Revalidate on demand
-- Preloading/prefetching strategies
 - Support for dynamic site.webmanifest, robots.txt, sitemap.xml, manifest.json, and llms.txt
 - Support loading and error pages for parallel routes
 - Support deferring loaders
 - Image/font optimizations
-- Possible CSR/SPA, SSG, ISR, and PPR
+- Possible SSG, ISR, and PPR
 - Advanced caching strategies
 - WebSocket support
 

package/index.d.ts

@@ -1,5 +1,11 @@
 import type { AppOptions } from 'vinxi';
 import type { LoggerOptions } from 'pino';
+import type { CustomizableConfig } from 'vinxi/dist/types/lib/vite-dev';
+import type { InlineConfig } from 'vite';
+type VinxiViteServerOptions = Omit<InlineConfig["server"], "port" | "strictPort" | "host" | "middlewareMode" | "open">;
+type ViteCustomizableConfig = CustomizableConfig & {
+    server?: VinxiViteServerOptions;
+};
 type Config = {
     server?: Omit<AppOptions['server'], 'experimental'>;
     plugins?: {
@@ -7,6 +13,9 @@ type Config = {
         plugin: any;
     }[];
     logger?: true | LoggerOptions;
+    vite?: ViteCustomizableConfig | ((options: {
+        router: 'server' | 'client';
+    }) => ViteCustomizableConfig);
 };
 export declare const defineConfig: (config?: Config) => import("vinxi").App;
 export {};

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAUxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,MAAM,CAAC;AAE1C,KAAK,MAAM,GAAG;IACV,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE;QACN,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;QACnC,MAAM,EAAE,GAAG,CAAC;KACf,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,IAAI,GAAG,aAAa,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,SAAQ,MAGpC,wBA4GA,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAUxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,MAAM,CAAC;AAC1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAExE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,MAAM,CAAC;AAGzC,KAAK,sBAAsB,GAAG,IAAI,CAC9B,YAAY,CAAC,QAAQ,CAAC,EACtB,MAAM,GAAG,YAAY,GAAG,MAAM,GAAG,gBAAgB,GAAG,MAAM,CAC7D,CAAC;AAEF,KAAK,sBAAsB,GAAG,kBAAkB,GAAG;IAC/C,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACnC,CAAC;AAEF,KAAK,MAAM,GAAG;IACV,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE;QACN,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;QACnC,MAAM,EAAE,GAAG,CAAC;KACf,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE,IAAI,GAAG,aAAa,CAAC;IAC9B,IAAI,CAAC,EACC,sBAAsB,GACtB,CAAC,CAAC,OAAO,EAAE;QACT,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC;KAC/B,KAAK,sBAAsB,CAAC,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,SAAQ,MAIpC,wBAsHA,CAAC"}

package/index.js

@@ -7,9 +7,11 @@ import { join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { cpSync, mkdirSync, existsSync, writeFileSync } from 'node:fs';
 import { normalize } from 'vinxi/lib/path';
+import { config as viteConfigPlugin } from 'vinxi/plugins/config';
 export const defineConfig = (config = {
     server: {},
     plugins: [],
+    vite: {},
 }) => {
     let middlewarePath = join(process.cwd(), 'app', 'middleware.ts');
     if (!existsSync(middlewarePath)) {
@@ -20,6 +22,9 @@ export const defineConfig = (config = {
     };
     // @ts-ignore
     globalThis.__SOLIDSTEP_CONFIG__ = sharedConfig;
+    const viteConfig = typeof config.vite === 'function'
+        ? config.vite
+        : () => config.vite || {};
     const app = createApp({
         server: {
             ...config.server,
@@ -47,6 +52,9 @@ export const defineConfig = (config = {
                         runtime: normalize(fileURLToPath(new URL('./utils/server-action.client.js', import.meta.url))),
                     }),
                     solid({ ssr: true }),
+                    viteConfigPlugin('app-client', {
+                        ...(viteConfig({ router: 'client' }) || {}),
+                    }),
                 ],
                 base: '/_build',
                 routes: (router, app) => {
@@ -68,6 +76,9 @@ export const defineConfig = (config = {
                         .map(p => p.plugin) || []),
                     serverFunctions.server(),
                     solid({ ssr: true }),
+                    viteConfigPlugin('app-server', {
+                        ...(viteConfig({ router: 'server' }) || {}),
+                    }),
                 ],
                 middleware: './app/middleware.ts',
                 routes: (router, app) => {

package/package.json

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