edges-svelte 1.1.0 → 1.2.0

package/README.md

@@ -26,23 +26,17 @@ npm install edges-svelte
 
 ## Setup
 
-To enable **EdgeS**, wrap your SvelteKit `handle` hook and serialize the state in `transformPageChunks`:
+To enable **EdgeS** install edgesPlugin, it will wrap your SvelteKit `handle` hook with AsyncLocalStorage:
 
 ```ts
-// hooks.server.ts
-import { dev } from '$app/environment';
-import { edgesHandle } from 'edges-svelte/server';
-
-export const handle: Handle = async ({ event, resolve }) => {
-	return edgesHandle(
-		event,
-		({ serialize, edgesEvent }) => {
-			//...Your handle code, use edgesEvent as a default svelte event (RequestEvent)
-			return resolve(edgesEvent, { transformPageChunk: ({ html }) => serialize(html) });
-		},
-		dev
-	);
-};
+// vite.config.ts
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import { edgesPlugin } from 'edges-svelte/plugin';
+
+export default defineConfig({
+	plugins: [sveltekit(), edgesPlugin()]
+});
 ```
 
 ---
@@ -190,30 +184,7 @@ While createStore provides state primitives (createState, createDerivedState, cr
 | Feature                                                                          | Import from           |
 | -------------------------------------------------------------------------------- | --------------------- |
 | `createStore`, `createStoreFactory`, `createPresenter`, `createPresenterFactory` | `edges-svelte`        |
-| `edgesHandle`                                                                    | `edges-svelte/server` |
-
----
-
-## About `edgesHandle`
-
-```ts
-/**
- * Wraps request handling in an AsyncLocalStorage context and provides a `serialize` function
- * for injecting state into the HTML response.
- *
- * @param event - The SvelteKit RequestEvent for the current request.
- * @param callback - A function that receives the edgesEvent and a serialize function,
- *   and expects resolve of edgesEvent as a return result.
- * @param silentChromeDevtools - If true, intercepts requests to
- *   `/.well-known/appspecific/com.chrome.devtools.json` (triggered by Chrome DevTools)
- *   and returns a 204 No Content response just to avoid spamming logs.
- */
-type EdgesHandle = (
-	event: RequestEvent,
-	callback: (params: { edgesEvent: RequestEvent; serialize: (html: string) => string }) => Promise<Response> | Response,
-	silentChromeDevtools?: boolean
-) => Promise<Response>;
-```
+| `edgesPlugin`                                                                    | `edges-svelte/plugin` |
 
 ---
 

package/dist/client/NavigationSync.svelte.d.ts

@@ -0,0 +1,3 @@
+export declare function registerStateUpdate(key: string, callback: (value: unknown) => void): void;
+export declare function unregisterStateUpdate(key: string): void;
+export declare function processEdgesState(edgesState: Record<string, unknown>): void;

package/dist/client/NavigationSync.svelte.js

@@ -0,0 +1,43 @@
+import { browser } from '$app/environment';
+const stateUpdateCallbacks = new Map();
+export function registerStateUpdate(key, callback) {
+    if (browser) {
+        stateUpdateCallbacks.set(key, callback);
+    }
+}
+export function unregisterStateUpdate(key) {
+    stateUpdateCallbacks.delete(key);
+}
+export function processEdgesState(edgesState) {
+    if (!window.__SAFE_SSR_STATE__) {
+        window.__SAFE_SSR_STATE__ = new Map();
+    }
+    for (const [key, value] of Object.entries(edgesState)) {
+        window.__SAFE_SSR_STATE__.set(key, value);
+        const callback = stateUpdateCallbacks.get(key);
+        if (callback) {
+            callback(value);
+        }
+    }
+}
+if (browser) {
+    const originalFetch = window.fetch;
+    window.fetch = async function (...args) {
+        const response = await originalFetch.apply(this, args);
+        const clonedResponse = response.clone();
+        try {
+            const contentType = clonedResponse.headers.get('content-type');
+            if (contentType?.includes('application/json')) {
+                const json = await clonedResponse.json();
+                if (json && typeof json === 'object' && '__edges_state__' in json) {
+                    const edgesState = json.__edges_state__;
+                    processEdgesState(edgesState);
+                }
+            }
+        }
+        catch {
+            // Ignore JSON parsing errors
+        }
+        return response;
+    };
+}

package/dist/client/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/plugin/EdgesAutoHandlePlugin.d.ts

@@ -0,0 +1,49 @@
+import type { Plugin } from 'vite';
+/**
+ * Vite plugin that automatically wraps the SvelteKit handle hook with edgesHandle.
+ *
+ * This eliminates the need to manually wrap your handle function, while still allowing
+ * full customization of the handle logic.
+ *
+ * @param isPackageDevelopment - Set to `true` when developing the edges-svelte package itself.
+ *   This uses `$lib/server` imports. For all other cases (production or consuming the package), use `false` (default).
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts (consuming the package)
+ * import { sveltekit } from '@sveltejs/kit/vite';
+ * import { defineConfig } from 'vite';
+ * import { edgesPlugin } from 'edges-svelte/plugin';
+ *
+ * export default defineConfig({
+ *   plugins: [sveltekit(), edgesPlugin()]
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts (developing edges-svelte package)
+ * import { edgesPlugin } from './src/lib/plugin/index.js';
+ *
+ * export default defineConfig({
+ *   plugins: [sveltekit(), edgesPlugin(true)] // true = package development mode
+ * });
+ * ```
+ *
+ * After adding the plugin, you can write your hooks.server.ts normally:
+ *
+ * @example
+ * ```ts
+ * // hooks.server.ts - No manual wrapping needed!
+ *
+ * // Option 1: No handle defined - plugin creates default
+ * // (nothing to write, it just works)
+ *
+ * // Option 2: Custom handle - plugin automatically wraps it
+ * export const handle = async ({ event, resolve }) => {
+ *   console.log('My custom middleware');
+ *   return resolve(event);
+ * };
+ * ```
+ */
+export declare function edgesPlugin(isPackageDevelopment?: boolean): Plugin;

package/dist/plugin/EdgesAutoHandlePlugin.js

@@ -0,0 +1,97 @@
+/**
+ * Vite plugin that automatically wraps the SvelteKit handle hook with edgesHandle.
+ *
+ * This eliminates the need to manually wrap your handle function, while still allowing
+ * full customization of the handle logic.
+ *
+ * @param isPackageDevelopment - Set to `true` when developing the edges-svelte package itself.
+ *   This uses `$lib/server` imports. For all other cases (production or consuming the package), use `false` (default).
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts (consuming the package)
+ * import { sveltekit } from '@sveltejs/kit/vite';
+ * import { defineConfig } from 'vite';
+ * import { edgesPlugin } from 'edges-svelte/plugin';
+ *
+ * export default defineConfig({
+ *   plugins: [sveltekit(), edgesPlugin()]
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts (developing edges-svelte package)
+ * import { edgesPlugin } from './src/lib/plugin/index.js';
+ *
+ * export default defineConfig({
+ *   plugins: [sveltekit(), edgesPlugin(true)] // true = package development mode
+ * });
+ * ```
+ *
+ * After adding the plugin, you can write your hooks.server.ts normally:
+ *
+ * @example
+ * ```ts
+ * // hooks.server.ts - No manual wrapping needed!
+ *
+ * // Option 1: No handle defined - plugin creates default
+ * // (nothing to write, it just works)
+ *
+ * // Option 2: Custom handle - plugin automatically wraps it
+ * export const handle = async ({ event, resolve }) => {
+ *   console.log('My custom middleware');
+ *   return resolve(event);
+ * };
+ * ```
+ */
+export function edgesPlugin(isPackageDevelopment = false) {
+    return {
+        name: 'edges-auto-handle',
+        enforce: 'pre', // Run before SvelteKit
+        transform(code, id) {
+            // Only transform hooks.server.ts
+            if (!id.includes('hooks.server.ts'))
+                return null;
+            // If already wrapped by the plugin, skip
+            if (code.includes('__EDGES_AUTO_WRAPPED__'))
+                return null;
+            // If user is manually using edges-svelte, skip auto-wrapping
+            const hasManualEdgesImport = code.includes("from 'edges-svelte/server'") ||
+                code.includes('from "edges-svelte/server"') ||
+                code.includes("from '$lib/server'") ||
+                code.includes('from "$lib/server"');
+            if (hasManualEdgesImport) {
+                return null;
+            }
+            // Determine the correct import path
+            // If developing the package itself, use $lib
+            // Otherwise, use the published package path
+            const importPath = isPackageDevelopment ? '$lib/server/index.js' : 'edges-svelte/server';
+            // Check if user defined a handle export
+            const hasHandleExport = /export\s+const\s+handle/.test(code);
+            if (!hasHandleExport) {
+                // No handle defined - create default
+                return {
+                    code: `// __EDGES_AUTO_WRAPPED__\n` +
+                        `import { edgesHandle } from '${importPath}';\n\n` +
+                        code +
+                        `\n\n` +
+                        `export const handle = edgesHandle(({ serialize, edgesEvent, resolve }) => ` +
+                        `resolve(edgesEvent, { transformPageChunk: ({ html }) => serialize(html) }));`,
+                    map: null
+                };
+            }
+            // User defined a handle - wrap it
+            const wrappedCode = `// __EDGES_AUTO_WRAPPED__\n` +
+                `import { __autoWrapHandle } from '${importPath}';\n\n` +
+                code.replace(/export\s+const\s+handle/, 'const __userHandle') +
+                `\n\n` +
+                `export const handle = __autoWrapHandle(__userHandle);`;
+            return {
+                code: wrappedCode,
+                map: null
+            };
+        }
+    };
+}

package/dist/plugin/index.d.ts

@@ -0,0 +1 @@
+export { edgesPlugin } from './EdgesAutoHandlePlugin.js';

package/dist/plugin/index.js

@@ -0,0 +1 @@
+export { edgesPlugin } from './EdgesAutoHandlePlugin.js';

package/dist/server/AutoWrapHandle.d.ts

@@ -0,0 +1,11 @@
+import type { Handle } from '@sveltejs/kit';
+/**
+ * Automatically wraps a user-defined handle function with edgesHandle.
+ * This is used internally by the Vite plugin to provide automatic state management.
+ *
+ * @internal This function is called automatically by the Vite plugin. You don't need to use it manually.
+ *
+ * @param userHandle - Optional user-defined handle function from hooks.server.ts
+ * @returns A handle function wrapped with edgesHandle for automatic state serialization
+ */
+export declare function __autoWrapHandle(userHandle?: Handle): Handle;

package/dist/server/AutoWrapHandle.js

@@ -0,0 +1,31 @@
+import { edgesHandle } from './EdgesHandleSimplified.js';
+/**
+ * Automatically wraps a user-defined handle function with edgesHandle.
+ * This is used internally by the Vite plugin to provide automatic state management.
+ *
+ * @internal This function is called automatically by the Vite plugin. You don't need to use it manually.
+ *
+ * @param userHandle - Optional user-defined handle function from hooks.server.ts
+ * @returns A handle function wrapped with edgesHandle for automatic state serialization
+ */
+export function __autoWrapHandle(userHandle) {
+    if (!userHandle) {
+        // No user handle - return default edgesHandle
+        return edgesHandle(({ serialize, edgesEvent, resolve }) => resolve(edgesEvent, { transformPageChunk: ({ html }) => serialize(html) }));
+    }
+    // Wrap user's handle with edgesHandle
+    return edgesHandle(({ serialize, edgesEvent, resolve }) => {
+        return userHandle({
+            event: edgesEvent,
+            resolve: (e, opts) => resolve(e, {
+                ...opts,
+                transformPageChunk: ({ html, done }) => {
+                    // Apply user's transform first (if any)
+                    const userTransformed = opts?.transformPageChunk?.({ html, done }) ?? html;
+                    // Then apply edges serialization
+                    return typeof userTransformed === 'string' ? serialize(userTransformed) : userTransformed;
+                }
+            })
+        });
+    });
+}

package/dist/server/EdgesHandle.js

@@ -1,7 +1,8 @@
-import { stateSerialize } from '../store/State.svelte.js';
+import { stateSerialize, getStateMap } from '../store/State.svelte.js';
 import { AsyncLocalStorage } from 'async_hooks';
 import RequestContext, {} from '../context/Context.js';
 const storage = new AsyncLocalStorage();
+const textEncoder = new TextEncoder();
 /**
  * Wraps request handling in an AsyncLocalStorage context and provides a `serialize` function
  * for injecting state into the HTML response.
@@ -33,7 +34,7 @@ export const edgesHandle = async (event, callback, silentChromeDevtools = false)
         if (silentChromeDevtools && event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {
             return new Response(null, { status: 204 });
         }
-        return callback({
+        const response = await callback({
             edgesEvent: event,
             serialize: (html) => {
                 if (!html)
@@ -41,5 +42,35 @@ export const edgesHandle = async (event, callback, silentChromeDevtools = false)
                 return html.replace('</body>', `${stateSerialize()}</body>`);
             }
         });
+        const contentType = response.headers.get('content-type');
+        if (contentType?.includes('application/json')) {
+            try {
+                const clonedResponse = response.clone();
+                const json = await clonedResponse.json();
+                const stateMap = getStateMap();
+                if (stateMap && stateMap.size > 0) {
+                    const stateObj = {};
+                    for (const [key, value] of stateMap) {
+                        stateObj[key] = value;
+                    }
+                    const modifiedJson = {
+                        ...json,
+                        __edges_state__: stateObj
+                    };
+                    const modifiedBody = JSON.stringify(modifiedJson);
+                    const newHeaders = new Headers(response.headers);
+                    newHeaders.set('content-length', String(textEncoder.encode(modifiedBody).length));
+                    return new Response(modifiedBody, {
+                        status: response.status,
+                        statusText: response.statusText,
+                        headers: newHeaders
+                    });
+                }
+            }
+            catch {
+                // Failed to inject state - return original response
+            }
+        }
+        return response;
     });
 };

package/dist/server/EdgesHandleSimplified.d.ts

@@ -0,0 +1,25 @@
+import type { Handle, RequestEvent, ResolveOptions } from '@sveltejs/kit';
+type SimplifiedCallback = (params: {
+    serialize: (html: string) => string;
+    edgesEvent: RequestEvent;
+    resolve: (event: RequestEvent, opts?: ResolveOptions) => Response | Promise<Response>;
+}) => Response | Promise<Response>;
+/**
+ * Simplified wrapper around edgesHandle that provides a more convenient API.
+ *
+ * @example
+ * ```ts
+ * // Simple usage with default behavior
+ * export const handle = edgesHandle(({ serialize, edgesEvent, resolve }) =>
+ *   resolve(edgesEvent, { transformPageChunk: ({ html }) => serialize(html) })
+ * );
+ *
+ * // You can still access resolve for custom logic
+ * export const handle = edgesHandle(({ serialize, edgesEvent, resolve }) => {
+ *   // Custom logic here
+ *   return resolve(edgesEvent, { transformPageChunk: ({ html }) => serialize(html) });
+ * });
+ * ```
+ */
+export declare const edgesHandle: (callback: SimplifiedCallback, silentChromeDevtools?: boolean) => Handle;
+export {};

package/dist/server/EdgesHandleSimplified.js

@@ -0,0 +1,25 @@
+import { edgesHandle as originalEdgesHandle } from './EdgesHandle.js';
+/**
+ * Simplified wrapper around edgesHandle that provides a more convenient API.
+ *
+ * @example
+ * ```ts
+ * // Simple usage with default behavior
+ * export const handle = edgesHandle(({ serialize, edgesEvent, resolve }) =>
+ *   resolve(edgesEvent, { transformPageChunk: ({ html }) => serialize(html) })
+ * );
+ *
+ * // You can still access resolve for custom logic
+ * export const handle = edgesHandle(({ serialize, edgesEvent, resolve }) => {
+ *   // Custom logic here
+ *   return resolve(edgesEvent, { transformPageChunk: ({ html }) => serialize(html) });
+ * });
+ * ```
+ */
+export const edgesHandle = (callback, silentChromeDevtools = true) => {
+    return async ({ event, resolve }) => {
+        return originalEdgesHandle(event, ({ serialize, edgesEvent }) => {
+            return callback({ serialize, edgesEvent, resolve });
+        }, silentChromeDevtools);
+    };
+};

package/dist/server/index.d.ts

@@ -1 +1,3 @@
-export * from './EdgesHandle.js';
+export { edgesHandle as edgesHandleRaw } from './EdgesHandle.js';
+export { edgesHandle } from './EdgesHandleSimplified.js';
+export { __autoWrapHandle } from './AutoWrapHandle.js';

package/dist/server/index.js

@@ -1 +1,3 @@
-export * from './EdgesHandle.js';
+export { edgesHandle as edgesHandleRaw } from './EdgesHandle.js';
+export { edgesHandle } from './EdgesHandleSimplified.js';
+export { __autoWrapHandle } from './AutoWrapHandle.js';

package/dist/store/State.svelte.d.ts

@@ -5,6 +5,7 @@ declare global {
     }
 }
 export declare const stateSerialize: () => string;
+export declare const getStateMap: () => Map<string, unknown> | undefined;
 export declare const createRawState: <T>(key: string, initial: () => T) => {
     value: T;
 };

package/dist/store/State.svelte.js

@@ -2,22 +2,33 @@ import RequestContext from '../context/Context.js';
 import { uneval } from 'devalue';
 import { browser } from '$app/environment';
 import { derived, writable } from 'svelte/store';
+import { registerStateUpdate } from '../client/NavigationSync.svelte.js';
 const RequestStores = new WeakMap();
 export const stateSerialize = () => {
     const map = getRequestContext();
-    if (map) {
-        const entries = Array.from(map).map(([key, value]) => [uneval(key), uneval(value)]);
-        return `<script>
-			window.__SAFE_SSR_STATE__ = new Map();
-			${entries.map(([key, value]) => `window.__SAFE_SSR_STATE__.set(${key}, ${value})`).join(';')}
-			</script>`;
+    if (!map || map.size === 0)
+        return '';
+    const entries = [];
+    for (const [key, value] of map) {
+        entries.push(`window.__SAFE_SSR_STATE__.set(${uneval(key)},${uneval(value)})`);
     }
-    return '';
+    return `<script>window.__SAFE_SSR_STATE__=new Map();${entries.join(';')}</script>`;
 };
 const getRequestContext = () => {
     const sym = RequestContext.current().symbol;
     if (sym) {
-        return RequestStores.get(sym) ?? RequestStores.set(sym, new Map()).get(sym);
+        if (!RequestStores.has(sym)) {
+            RequestStores.set(sym, new Map());
+        }
+        return RequestStores.get(sym);
+    }
+};
+export const getStateMap = () => {
+    try {
+        return getRequestContext();
+    }
+    catch {
+        return undefined;
     }
 };
 const getBrowserState = (key, initial) => {
@@ -29,6 +40,10 @@ const getBrowserState = (key, initial) => {
 export const createRawState = (key, initial) => {
     if (browser) {
         let state = $state(getBrowserState(key, initial()));
+        const callback = (newValue) => {
+            state = newValue;
+        };
+        registerStateUpdate(key, callback);
         return {
             get value() {
                 return state;
@@ -56,23 +71,25 @@ export const createRawState = (key, initial) => {
 };
 export const createState = (key, initial) => {
     if (browser) {
-        return writable(getBrowserState(key, initial()));
+        const state = writable(getBrowserState(key, initial()));
+        const callback = (newValue) => {
+            state.set(newValue);
+        };
+        registerStateUpdate(key, callback);
+        return state;
     }
     const map = getRequestContext();
     if (!map)
         throw new Error('No RequestContext available');
     if (!map.has(key))
         map.set(key, structuredClone(initial()));
-    //const subscribers: Set<(val: T) => void> = new Set();
     return {
         subscribe(run) {
             run(map.get(key));
-            //subscribers.add(run);
             return () => { };
         },
         set(val) {
             map.set(key, val);
-            //subscribers.forEach((fn) => fn(val));
         },
         update(updater) {
             const oldVal = map.get(key);

package/dist/store/index.d.ts

@@ -1 +1 @@
-export { createState, createRawState, createDerivedState } from './State.svelte.js';
+export { createState, createRawState, createDerivedState, getStateMap } from './State.svelte.js';

package/dist/store/index.js

@@ -1 +1 @@
-export { createState, createRawState, createDerivedState } from './State.svelte.js';
+export { createState, createRawState, createDerivedState, getStateMap } from './State.svelte.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "edges-svelte",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "MIT",
   "author": "Pixel1917",
   "description": "A blazing-fast, extremely lightweight and SSR-friendly store for Svelte",
@@ -34,8 +34,12 @@
       "svelte": "./dist/index.js"
     },
     "./server": {
-      "types": "./dist/server/EdgesHandle.d.ts",
-      "svelte": "./dist/server/EdgesHandle.js"
+      "types": "./dist/server/index.d.ts",
+      "svelte": "./dist/server/index.js"
+    },
+    "./client": {
+      "types": "./dist/client/index.d.ts",
+      "svelte": "./dist/client/index.js"
     },
     "./context": {
       "types": "./dist/context/index.d.ts",
@@ -44,6 +48,10 @@
     "./state": {
       "types": "./dist/store/index.d.ts",
       "svelte": "./dist/store/index.js"
+    },
+    "./plugin": {
+      "types": "./dist/plugin/index.d.ts",
+      "default": "./dist/plugin/index.js"
     }
   },
   "peerDependencies": {