edges-svelte 1.0.4 → 1.2.0

package/README.md

@@ -10,7 +10,7 @@ No context boilerplate. No hydration headaches. Just drop-in SSR-compatible stat
 - 🧠 Persistent per-request memory via `AsyncLocalStorage`
 - 💧 Tiny API
 - 💥 Instant serialization without magic
-- 🧩 Provider-based dependency injection, zero runtime overhead
+- 🧩 Dependency injection, zero runtime overhead
 
 > Designed for **SvelteKit**.
 
@@ -26,35 +26,29 @@ 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()]
+});
 ```
 
 ---
 
 ## Basic usage
 
-### `createProvider` - creates a provider function that can manage states
+### `createStore` - creates a store function that can manage states
 
 ```ts
-import { createProvider } from 'edges-svelte';
-
-const myProvider = createProvider('MyProvider', ({ createState, createDerivedState }) => {
+import { createStore } from 'edges-svelte';
+// First argument is a unique name. Each store must havew a unique name.
+const myStore = createStore('MyStore', ({ createState, createDerivedState }) => {
 	// createState creates a writable, SSR-safe store with a unique key
 	const collection = createState<number[]>([]);
 	// createDerivedState creates a derived store, SSR-safe as well
@@ -70,9 +64,9 @@ const myProvider = createProvider('MyProvider', ({ createState, createDerivedSta
 
 ```svelte
 <script lang="ts">
-	import { myProvider } from 'your-alias';
+	import { myStore } from 'your-alias';
 
-	const { collection, collectionLengthDoubled, updateAction } = myProvider();
+	const { collection, collectionLengthDoubled, updateAction } = myStore();
 </script>
 
 {$collection.join(', ')}
@@ -84,17 +78,17 @@ const myProvider = createProvider('MyProvider', ({ createState, createDerivedSta
 <!-- Will update the state -->
 ```
 
-- 💡 All stores created inside `createProvider` use unique keys automatically and are request-scoped
+- 💡 All stores created inside `createStore` use unique keys automatically and are request-scoped
 - 🛡️ Fully SSR-safe — stores are isolated per request and serialized automatically
 
 ---
 
-## Provider Caching (built-in)
+## Store Caching (built-in)
 
-Providers are cached per request by their unique provider name (cache key). Calling the same provider multiple times in the same request returns the cached instance.
+Stores are cached per request by their unique name (cache key). Calling the same store multiple times in the same request returns the cached instance.
 
 ```ts
-const myCachedProvider = createProvider('MyCachedProvider', ({ createState }) => {
+const myCachedStore = createStore('MyCachedStore', ({ createState }) => {
 	const data = createState(() => 'cached data');
 	return { data };
 });
@@ -108,7 +102,7 @@ const myCachedProvider = createProvider('MyCachedProvider', ({ createState }) =>
 
 State is isolated per request using `AsyncLocalStorage` internally. You never share data between users.
 
-You **must** always create stores inside providers returned by `createProvider`.
+You **must** always create stores inside using `createStore`.
 
 ---
 
@@ -154,10 +148,10 @@ counter.value += 1;
 
 ## Dependency Injection
 
-You can inject dependencies into providers with `createProviderFactory`:
+You can inject dependencies into providers with `createStoreFactory`:
 
 ```ts
-const withDeps = createProviderFactory({ user: getUserFromSession });
+const withDeps = createStoreFactory({ user: getUserFromSession });
 
 const useUserStore = withDeps('UserStore', ({ user, createState }) => {
 	const userState = createState(user);
@@ -167,35 +161,30 @@ const useUserStore = withDeps('UserStore', ({ user, createState }) => {
 
 ---
 
-## Exports summary
+## createPresenter
+
+A cached provider for UI logic without direct state management primitives. Perfect for separating business logic from state management.
+
+#### When to use
 
-| Feature                                   | Import from           |
-| ----------------------------------------- | --------------------- |
-| `createProvider`, `createProviderFactory` | `edges-svelte`        |
-| `edgesHandle`                             | `edges-svelte/server` |
+createPresenter is ideal when you want to:
+
+1. Keep state management separate from UI logic
+2. Create reusable business logic that doesn't directly manage state
+3. Build presenters that orchestrate between services and stores
+4. Follow clean architecture patterns with clear separation of concerns
+
+Difference from createStore
+While createStore provides state primitives (createState, createDerivedState, createRawState), createPresenter focuses purely on business logic and coordination. It maintains all the caching and dependency injection features of createStore but without state management utilities.
 
 ---
 
-## About `edgesHandle`
+## Exports summary
 
-```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>;
-```
+| Feature                                                                          | Import from           |
+| -------------------------------------------------------------------------------- | --------------------- |
+| `createStore`, `createStoreFactory`, `createPresenter`, `createPresenterFactory` | `edges-svelte`        |
+| `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/provider/Provider.d.ts

@@ -1,5 +1,10 @@
 import { createDerivedState as BaseCreateDerivedState } from '../store/index.js';
 import type { Writable } from 'svelte/store';
+type NoConflict<I, D> = {
+    [K in keyof I]: K extends keyof D ? never : I[K];
+};
+export declare const clearCache: (pattern?: string) => void;
+export declare const createUiProvider: <T, F, D extends Record<string, unknown> | ((cacheKey: string) => Record<string, unknown>), I extends Record<string, unknown> = Record<string, unknown>>(name: string, factory: (deps: F) => T, dependencies: D, inject?: I) => (() => T);
 type StoreDeps = {
     createRawState: <T>(initial: T | (() => T)) => {
         value: T;
@@ -7,10 +12,8 @@ type StoreDeps = {
     createState: <T>(initial: T | (() => T)) => Writable<T>;
     createDerivedState: typeof BaseCreateDerivedState;
 };
-type NoConflict<I> = {
-    [K in keyof I]: K extends keyof StoreDeps ? never : I[K];
-};
-export declare const clearProviderCache: (pattern?: string) => void;
-export declare const createProvider: <T, I extends Record<string, unknown> = Record<string, unknown>>(name: string, factory: (args: StoreDeps & NoConflict<I>) => T, inject?: I) => (() => T);
-export declare const createProviderFactory: <I extends Record<string, unknown>>(inject: I) => <T>(name: string, factory: (args: StoreDeps & NoConflict<I>) => T) => () => T;
+export declare const createStore: <T, I extends Record<string, unknown> = Record<string, unknown>>(name: string, factory: (args: StoreDeps & NoConflict<I, StoreDeps>) => T, inject?: I) => (() => T);
+export declare const createStoreFactory: <I extends Record<string, unknown>>(inject: I) => <T>(name: string, factory: (args: StoreDeps & NoConflict<I, StoreDeps>) => T) => () => T;
+export declare const createPresenter: <T, I extends Record<string, unknown> = Record<string, unknown>>(name: string, factory: (args: I) => T, inject?: I) => (() => T);
+export declare const createPresenterFactory: <I extends Record<string, unknown>>(inject: I) => <T>(name: string, factory: (args: I) => T) => () => T;
 export {};

package/dist/provider/Provider.js

@@ -2,7 +2,7 @@ import { createState as BaseCreateState, createDerivedState as BaseCreateDerived
 import { RequestContext } from '../context/index.js';
 import { browser } from '$app/environment';
 const globalClientCache = new Map();
-export const clearProviderCache = (pattern) => {
+export const clearCache = (pattern) => {
     if (browser) {
         if (pattern) {
             for (const [key] of globalClientCache) {
@@ -16,7 +16,7 @@ export const clearProviderCache = (pattern) => {
         }
     }
 };
-export const createProvider = (name, factory, inject) => {
+export const createUiProvider = (name, factory, dependencies, inject) => {
     const cacheKey = name;
     return () => {
         let contextMap;
@@ -36,30 +36,45 @@ export const createProvider = (name, factory, inject) => {
                 return cached;
             }
         }
+        const deps = {
+            ...(typeof dependencies === 'function' ? dependencies(cacheKey) : dependencies),
+            ...inject
+        };
+        const instance = factory(deps);
+        if (cacheKey) {
+            contextMap.set(cacheKey, instance);
+        }
+        return instance;
+    };
+};
+export const createStore = (name, factory, inject) => {
+    return createUiProvider(name, factory, (cacheKey) => {
         let stateCounter = 0;
-        const autoKeyDeps = {
-            ...inject,
+        return {
             createState: (initial) => {
-                const key = `${cacheKey ?? 'provider'}::state::${stateCounter++}`;
+                const key = `${cacheKey}::state::${stateCounter++}`;
                 const initFn = typeof initial === 'function' ? initial : () => initial;
                 return BaseCreateState(key, initFn);
             },
             createRawState: (initial) => {
-                const key = `${cacheKey ?? 'provider'}::rawstate::${stateCounter++}`;
+                const key = `${cacheKey}::rawstate::${stateCounter++}`;
                 const initFn = typeof initial === 'function' ? initial : () => initial;
                 return BaseCreateRawState(key, initFn);
             },
             createDerivedState: BaseCreateDerivedState
         };
-        const instance = factory(autoKeyDeps);
-        if (cacheKey) {
-            contextMap.set(cacheKey, instance);
-        }
-        return instance;
+    }, inject);
+};
+export const createStoreFactory = (inject) => {
+    return function createInjectedStore(name, factory) {
+        return createStore(name, factory, inject);
     };
 };
-export const createProviderFactory = (inject) => {
-    return function createInjectedProvider(name, factory) {
-        return createProvider(name, factory, inject);
+export const createPresenter = (name, factory, inject) => {
+    return createUiProvider(name, factory, {}, inject);
+};
+export const createPresenterFactory = (inject) => {
+    return function createInjectedStore(name, factory) {
+        return createPresenter(name, factory, inject);
     };
 };

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.0.4",
+  "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": {