solidstep 0.1.7 → 0.1.8

package/README.md

@@ -364,6 +364,10 @@ export const options = {
   cache: {
     ttl: 60000, // Cache for 60 seconds
   },
+  responseHeaders: { // Custom headers for pages
+    'X-Custom-Header': 'MyValue',
+    'Cache-Control': 'public, max-age=60', // Client-side caching
+  },
 };
 ```
 
@@ -406,6 +410,45 @@ const template = await fs.promises.readFile(TEMPLATE_PATH, 'utf-8');
 
 ## Utilities
 
+### Cache (Server-Side)
+- Every page can be cached by setting the `options.cache` property in the page.
+- You can also manually invalidate the cache for specific routes.
+- Invalidation can be done in two ways:
+1. Using the `invalidateCache` utility to only invalidate paths.
+```tsx
+import { invalidateCache } from 'solidstep/utils/cache';
+
+const action = async () => {
+    'use server';
+
+    ...
+
+    // Invalidate cache after data mutation
+    await invalidateCache('/some-route');
+
+    ...
+
+    return { success: true };
+};
+```
+2. Using the `revalidatePath` utility to revalidate specific paths and revalidate the frontend DOM - signaling the server action as a Single Flight Mutation query.
+```tsx
+import { revalidatePath } from 'solidstep/utils/cache';
+
+const action = async () => {
+    'use server';
+
+    ...
+
+    // Revalidate path after data mutation
+    await revalidatePath('/some-route');
+
+    ...
+
+    return { success: true };
+};
+```
+
 ### Cookies
 ```tsx
 import { getCookie, setCookie } from 'solidstep/utils/cookies';
@@ -750,7 +793,6 @@ export const RootLayout = (props) => {
 As SolidStep is built using Vite, it follows the same guide as stated in [Vite docs](https://vite.dev/guide/env-and-mode) regarding environment variables.
 
 ## Future Plans
-- Revalidate on demand
 - 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

package/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../client.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAYtB,eAAO,MAAM,IAAI,GACb,YAAY,MAAM,EAClB,cAAa,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,EACxC,eAAc,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,EACzC,qBAAoB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,kBAsF/C,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../client.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAwCtB,eAAO,MAAM,IAAI,GACb,YAAY,MAAM,EAClB,cAAa,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,EACxC,eAAc,MAAM,CAAC,MAAM,EAAE,MAAM,CAAM,EACzC,qBAAoB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,kBAsF/C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/client.js

@@ -2,6 +2,32 @@ import { hydrate } from 'solid-js/web';
 import 'vinxi/client';
 import fileRoutes from 'vinxi/routes';
 import { getManifest } from 'vinxi/manifest';
+import { createDiffDOM } from './utils/diff-dom';
+window.onpageshow = () => {
+    const state = window.history.state;
+    const key = `${window.location.pathname}:build-time`;
+    const buildTimeMeta = document.querySelector('meta[name="x-build-time"]');
+    const buildTime = buildTimeMeta ? Number.parseInt(buildTimeMeta.getAttribute('content') || '0', 10) : 0;
+    const lastBuildTime = Number.parseInt(sessionStorage.getItem(key) || '0', 10);
+    const diffString = sessionStorage.getItem(window.location.pathname);
+    if (state?.revalidated && buildTime === lastBuildTime && diffString) {
+        // we need to re-apply the diff from session storage
+        const diff = JSON.parse(diffString);
+        const dd = createDiffDOM();
+        const didApply = dd.apply(document.body, diff);
+        if (didApply) {
+            const key = window.location.pathname;
+            sessionStorage.setItem(key, JSON.stringify(diff));
+            window.history.pushState({ revalidated: true }, '', window.location.href);
+        }
+        if (import.meta.env.DEV && !didApply) {
+            console.error('The mutation was not applied, this seems to be an edge case.');
+            console.error('Please raise an issue on GitHub describing your case.');
+            console.error('The diff calculated:', diff);
+        }
+    }
+    sessionStorage.setItem(key, buildTime.toString());
+};
 const importModule = async (routeModule) => {
     const manifest = getManifest('client');
     if (import.meta.env.DEV) {

package/package.json

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

package/server.d.ts.map

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

package/server.js

@@ -1,4 +1,4 @@
-import { eventHandler, toWebRequest } from 'vinxi/http';
+import { eventHandler, toWebRequest, setResponseHeader, getEvent } from 'vinxi/http';
 import { getManifest } from 'vinxi/manifest';
 import { generateHydrationScript, renderToString } from 'solid-js/web';
 import fileRoutes, {} from 'vinxi/routes';
@@ -215,9 +215,18 @@ const sendNodeResponse = async (res, response) => {
     }
 };
 const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonce, }) => {
-    const url = req.url || '/';
-    const cachedEntry = getCache(url);
+    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,
@@ -316,6 +325,13 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonc
         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);
+            }
+        }
         let data = {};
         if (pageLoader) {
             const result = await pageLoader.loader(req);
@@ -345,13 +361,13 @@ const render = async ({ toRender, entry, routeParams, searchParams, req, cspNonc
     });
     const composed = await compose();
     const rendered = await renderToString(() => composed());
-    if (cachingOptions && toRender === 'main') {
-        setCache(url, {
+    if (toRender === 'main') {
+        setCache(path, {
             rendered: rendered,
             documentMeta: meta,
             documentAssets: assets,
             loaderData: loaderData,
-        }, cachingOptions.ttl);
+        }, cachingOptions ? cachingOptions.ttl : 0);
     }
     return {
         rendered: rendered,
@@ -458,6 +474,14 @@ const handler = eventHandler(async (event) => {
                 type: 'title',
                 attributes: {},
                 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.'
+                },
             }
         };
         const assets = await clientManifest.inputs[clientManifest.handler].assets();
@@ -501,6 +525,9 @@ const handler = eventHandler(async (event) => {
             }
             else {
                 try {
+                    if (!matched.loadingPage) {
+                        throw new Error('No loading page');
+                    }
                     const { rendered, documentMeta, documentAssets, loaderData, } = await render({
                         toRender: 'loading',
                         entry: matched,

package/utils/cache.d.ts

@@ -2,4 +2,5 @@ export declare const getCache: <T>(key: string) => T | null;
 export declare const setCache: <T>(key: string, value: T, ttlMs?: number) => void;
 export declare const invalidateCache: (key: string) => void;
 export declare const clearAllCache: () => void;
+export declare const revalidatePath: (path: string) => void;
 //# sourceMappingURL=cache.d.ts.map

package/utils/cache.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cache.d.ts","sourceRoot":"","sources":["../../utils/cache.ts"],"names":[],"mappings":"AA6CA,eAAO,MAAM,QAAQ,GAAI,CAAC,EAAE,KAAK,MAAM,KAAG,CAAC,GAAG,IAe7C,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,CAAC,EAAE,KAAK,MAAM,EAAE,OAAO,CAAC,EAAE,QAAQ,MAAM,SA0BhE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM,SAU1C,CAAC;AAEF,eAAO,MAAM,aAAa,YAGzB,CAAC"}
+{"version":3,"file":"cache.d.ts","sourceRoot":"","sources":["../../utils/cache.ts"],"names":[],"mappings":"AA+CA,eAAO,MAAM,QAAQ,GAAI,CAAC,EAAE,KAAK,MAAM,KAAG,CAAC,GAAG,IAe7C,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,CAAC,EAAE,KAAK,MAAM,EAAE,OAAO,CAAC,EAAE,QAAQ,MAAM,SA0BhE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,KAAK,MAAM,SAU1C,CAAC;AAEF,eAAO,MAAM,aAAa,YAGzB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,MAAM,SAS1C,CAAC"}

package/utils/cache.js

@@ -1,3 +1,4 @@
+import { getEvent, setResponseHeader } from 'vinxi/http';
 const MAX_CACHE_ENTRIES = 1000;
 const cacheMap = new Map();
 let head;
@@ -95,3 +96,12 @@ export const clearAllCache = () => {
     cacheMap.clear();
     head = tail = undefined;
 };
+export const revalidatePath = (path) => {
+    // get and verify the event
+    const event = getEvent();
+    if (!event.path.includes('_server')) {
+        throw new Error('This function can only be used in server functions.');
+    }
+    // add the revalidate header as a flag for the server action to do diffing 
+    setResponseHeader(event, 'X-Revalidate', path);
+};

package/utils/diff-dom.d.ts

@@ -0,0 +1,72 @@
+declare const SKIP_MODES: {
+    readonly CHILDREN: "children";
+    readonly FULL: "full";
+};
+type SkipMode = (typeof SKIP_MODES)[keyof typeof SKIP_MODES];
+type SkipPredicate = (domNode: Node | VirtualNode, virtualNode: VirtualNode) => boolean | SkipMode;
+type PreDiffApplyHook = (info: {
+    diff: DiffResult;
+    node: Node;
+}) => boolean | undefined;
+type PostDiffApplyHook = (info: {
+    diff: DiffResult;
+    node: Node;
+}) => void;
+type FilterOuterDiffHook = (oldNode: VirtualNode, newNode: VirtualNode, diffs: DiffResult[]) => DiffResult[] | undefined;
+type TextDiffHook = (target: Node, currentData: string, oldValue: string, newValue: string) => void;
+interface DiffOptions {
+    skipSelector: string | null;
+    skipPredicate: SkipPredicate | null;
+    skipAttributes: string[];
+    skipChildren: boolean;
+    skipMode: SkipMode;
+    debug: boolean;
+    diffcap: number;
+    valueDiffing: boolean;
+    caseSensitive: boolean;
+    preVirtualDiffApply: PreDiffApplyHook | null;
+    postVirtualDiffApply: PostDiffApplyHook | null;
+    preDiffApply: PreDiffApplyHook | null;
+    postDiffApply: PostDiffApplyHook | null;
+    filterOuterDiff: FilterOuterDiffHook | null;
+    textDiff: TextDiffHook | null;
+    document: Document | null;
+}
+interface VirtualNode {
+    nodeType: number;
+    nodeName: string;
+    route?: number[];
+    data?: string;
+    attributes?: Record<string, string>;
+    value?: string;
+    checked?: boolean;
+    selected?: boolean;
+    childNodes?: VirtualNode[];
+    innerDone?: boolean;
+    skipFull?: boolean;
+}
+interface DiffResult {
+    action: string;
+    route: number[];
+    from?: number[];
+    to?: number[];
+    element?: VirtualNode;
+    index?: number;
+    name?: string;
+    value?: string;
+    oldValue?: string | boolean | VirtualNode;
+    newValue?: string | boolean | VirtualNode;
+}
+export declare const nodeToObj: (node: Node, options?: Partial<DiffOptions>) => VirtualNode | null;
+export declare const stringToObj: (htmlString: string, options?: Partial<DiffOptions>) => VirtualNode;
+export declare const objToNode: (obj: VirtualNode, options?: Partial<DiffOptions>) => Node | null;
+export declare const diff: (elementA: string | Node | VirtualNode, elementB: string | Node | VirtualNode, options?: Partial<DiffOptions>) => DiffResult[];
+export declare const apply: (element: Node, diffs: DiffResult[], options?: Partial<DiffOptions>) => boolean;
+export declare const undo: (element: Node, diffs: DiffResult[], options?: Partial<DiffOptions>) => boolean;
+export declare const createDiffDOM: (userOptions?: Partial<DiffOptions>) => {
+    diff: (elementA: string | Node | VirtualNode, elementB: string | Node | VirtualNode) => DiffResult[];
+    apply: (element: Node, diffs: DiffResult[]) => boolean;
+    undo: (element: Node, diffs: DiffResult[]) => boolean;
+};
+export {};
+//# sourceMappingURL=diff-dom.d.ts.map

package/utils/diff-dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff-dom.d.ts","sourceRoot":"","sources":["../../utils/diff-dom.ts"],"names":[],"mappings":"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"}