edges-svelte 1.1.0 → 1.3.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()]
+});
 ```
 
 ---
@@ -53,8 +47,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 ```ts
 import { createStore } from 'edges-svelte';
-// First argument is a unique name. Each store must havew a unique name.
-const myStore = createStore('MyStore', ({ createState, createDerivedState }) => {
+const myStore = createStore(({ 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
@@ -94,7 +87,7 @@ const myStore = createStore('MyStore', ({ createState, createDerivedState }) =>
 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 myCachedStore = createStore('MyCachedStore', ({ createState }) => {
+const myCachedStore = createStore(({ createState }) => {
 	const data = createState(() => 'cached data');
 	return { data };
 });
@@ -154,12 +147,12 @@ counter.value += 1;
 
 ## Dependency Injection
 
-You can inject dependencies into providers with `createStoreFactory`:
+You can inject dependencies into stores with `createStoreFactory`:
 
 ```ts
 const withDeps = createStoreFactory({ user: getUserFromSession });
 
-const useUserStore = withDeps('UserStore', ({ user, createState }) => {
+const useUserStore = withDeps(({ user, createState }) => {
 	const userState = createState(user);
 	return { userState };
 });
@@ -190,30 +183,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,115 @@
+import { browser } from '$app/environment';
+const stateUpdateCallbacks = new Map();
+const UNDEFINED_MARKER = '__EDGES_UNDEFINED__';
+const NULL_MARKER = '__EDGES_NULL__';
+const safeReviver = (key, value) => {
+    if (value && typeof value === 'object') {
+        if (UNDEFINED_MARKER in value) {
+            return undefined;
+        }
+        if (NULL_MARKER in value) {
+            return null;
+        }
+    }
+    return value;
+};
+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)) {
+        let processedValue = value;
+        if (typeof value === 'string') {
+            try {
+                processedValue = JSON.parse(value, safeReviver);
+            }
+            catch {
+                // If not JSON then use without handling
+            }
+        }
+        window.__SAFE_SSR_STATE__.set(key, processedValue);
+        const callback = stateUpdateCallbacks.get(key);
+        if (callback) {
+            callback(processedValue);
+        }
+    }
+}
+if (browser) {
+    const originalFetch = window.fetch;
+    let processingResponse = false;
+    window.fetch = async function (...args) {
+        const response = await originalFetch.apply(this, args);
+        if (processingResponse) {
+            return response;
+        }
+        const [input, init] = args;
+        const url = typeof input === 'string' ? input : input instanceof Request ? input.url : '';
+        const isSvelteKitGet = init.__sveltekit_fetch__ || url.includes('__data.json');
+        const isSvelteKitPost = input instanceof URL && input.search.startsWith('?/');
+        if (isSvelteKitGet || isSvelteKitPost) {
+            const contentType = response.headers.get('content-type');
+            if (contentType?.includes('application/json')) {
+                processingResponse = true;
+                try {
+                    const cloned = response.clone();
+                    const text = await cloned.text();
+                    if (text) {
+                        try {
+                            const json = JSON.parse(text);
+                            if (json && typeof json === 'object' && '__edges_state__' in json) {
+                                processEdgesState(json.__edges_state__);
+                            }
+                        }
+                        catch {
+                            // ignore no JSON or parse Errors
+                        }
+                    }
+                }
+                catch {
+                    // Ошибка клонирования или чтения - игнорируем
+                }
+                finally {
+                    processingResponse = false;
+                }
+            }
+        }
+        return response;
+    };
+    if (typeof MutationObserver !== 'undefined') {
+        const observer = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                if (mutation.type === 'childList') {
+                    for (const node of mutation.addedNodes) {
+                        if (node instanceof HTMLScriptElement) {
+                            const text = node.textContent || '';
+                            if (text.includes('__SAFE_SSR_STATE__') && text.includes('__EDGES_REVIVER__')) {
+                                setTimeout(() => {
+                                    if (window.__SAFE_SSR_STATE__) {
+                                        for (const [key, value] of window.__SAFE_SSR_STATE__) {
+                                            const callback = stateUpdateCallbacks.get(key);
+                                            if (callback) {
+                                                callback(value);
+                                            }
+                                        }
+                                    }
+                                }, 0);
+                            }
+                        }
+                    }
+                }
+            }
+        });
+        observer.observe(document.documentElement, {
+            childList: true,
+            subtree: true
+        });
+    }
+}

package/dist/context/Context.d.ts

@@ -4,8 +4,8 @@ export interface ContextData {
     symbol?: symbol;
     data: {
         providers?: Map<string, unknown>;
-        [p: string]: unknown;
-    };
+        boundary?: Map<string, unknown>;
+    } & App.ContextDataExtended;
 }
 declare const _default: {
     current(): ContextData;

package/dist/context/Context.js

@@ -2,7 +2,7 @@ import { browser } from '$app/environment';
 export default {
     current() {
         if (!browser) {
-            throw new Error('AsyncLocalStorage has not been initialized');
+            throw new Error('[edges] AsyncLocalStorage not initialized');
         }
         return { data: {} };
     }

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

@@ -4,7 +4,6 @@ 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;
@@ -12,8 +11,30 @@ type StoreDeps = {
     createState: <T>(initial: T | (() => T)) => Writable<T>;
     createDerivedState: typeof BaseCreateDerivedState;
 };
-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;
+/**
+ * Creates store without name needed
+ * @example
+ * export const useUserStore = createStore(({ createState }) => {
+ *   const user = createState(null);
+ *   return { user };
+ * });
+ */
+export declare function createStore<T, I extends Record<string, unknown> = Record<string, unknown>>(factory: (args: StoreDeps & NoConflict<I, StoreDeps>) => T, inject?: I): () => T;
+export declare function createNamedStore<T, I extends Record<string, unknown> = Record<string, unknown>>(name: string, factory: (args: StoreDeps & NoConflict<I, StoreDeps>) => T, inject?: I): () => T;
+/**
+ * Store factory
+ */
+export declare const createStoreFactory: <I extends Record<string, unknown>>(inject: I) => <T>(factory: (args: StoreDeps & NoConflict<I, StoreDeps>) => T) => () => T;
+/**
+ * Presenter without name needed
+ */
+export declare function createPresenter<T, I extends Record<string, unknown> = Record<string, unknown>>(factory: (args: I) => T, inject?: I): () => T;
+/**
+ * Named presenter
+ */
+export declare function createNamedPresenter<T, I extends Record<string, unknown> = Record<string, unknown>>(name: string, factory: (args: I) => T, inject?: I): () => T;
+/**
+ * Presenter factory
+ */
+export declare const createPresenterFactory: <I extends Record<string, unknown>>(inject: I) => <T>(factory: (args: I) => T) => () => T;
 export {};

package/dist/provider/Provider.js

@@ -1,7 +1,37 @@
 import { createState as BaseCreateState, createDerivedState as BaseCreateDerivedState, createRawState as BaseCreateRawState } from '../store/index.js';
 import { RequestContext } from '../context/index.js';
 import { browser } from '$app/environment';
+// Global client cache
 const globalClientCache = new Map();
+// Key auto-generate
+class AutoKeyGenerator {
+    static cache = new WeakMap();
+    static counters = new Map();
+    static generate(factory) {
+        if (this.cache.has(factory)) {
+            return this.cache.get(factory);
+        }
+        const fnString = factory.toString();
+        let hash = 0;
+        for (let i = 0; i < fnString.length; i++) {
+            const char = fnString.charCodeAt(i);
+            hash = (hash << 5) - hash + char;
+            hash = hash & hash;
+        }
+        const baseKey = `store_${Math.abs(hash).toString(36)}`;
+        let finalKey = baseKey;
+        if (this.counters.has(baseKey)) {
+            const count = this.counters.get(baseKey) + 1;
+            this.counters.set(baseKey, count);
+            finalKey = `${baseKey}_${count}`;
+        }
+        else {
+            this.counters.set(baseKey, 0);
+        }
+        this.cache.set(factory, finalKey);
+        return finalKey;
+    }
+}
 export const clearCache = (pattern) => {
     if (browser) {
         if (pattern) {
@@ -16,21 +46,25 @@ export const clearCache = (pattern) => {
         }
     }
 };
-export const createUiProvider = (name, factory, dependencies, inject) => {
-    const cacheKey = name;
+const createUiProvider = (cacheKey, factory, dependencies, inject) => {
     return () => {
         let contextMap;
         if (browser) {
             contextMap = globalClientCache;
         }
         else {
-            const context = RequestContext.current();
-            if (!context.data.providers) {
-                context.data.providers = new Map();
+            try {
+                const context = RequestContext.current();
+                if (!context.data.providers) {
+                    context.data.providers = new Map();
+                }
+                contextMap = context.data.providers;
+            }
+            catch {
+                contextMap = new Map();
             }
-            contextMap = context.data.providers;
         }
-        if (cacheKey && contextMap.has(cacheKey)) {
+        if (contextMap.has(cacheKey)) {
             const cached = contextMap.get(cacheKey);
             if (cached !== undefined) {
                 return cached;
@@ -41,13 +75,39 @@ export const createUiProvider = (name, factory, dependencies, inject) => {
             ...inject
         };
         const instance = factory(deps);
-        if (cacheKey) {
-            contextMap.set(cacheKey, instance);
-        }
+        contextMap.set(cacheKey, instance);
         return instance;
     };
 };
-export const createStore = (name, factory, inject) => {
+/**
+ * Creates store without name needed
+ * @example
+ * export const useUserStore = createStore(({ createState }) => {
+ *   const user = createState(null);
+ *   return { user };
+ * });
+ */
+export function createStore(factory, inject) {
+    const cacheKey = AutoKeyGenerator.generate(factory);
+    return createUiProvider(cacheKey, factory, (key) => {
+        let stateCounter = 0;
+        return {
+            createState: (initial) => {
+                const stateKey = `${key}::state::${stateCounter++}`;
+                const initFn = typeof initial === 'function' ? initial : () => initial;
+                return BaseCreateState(stateKey, initFn);
+            },
+            createRawState: (initial) => {
+                const stateKey = `${key}::rawstate::${stateCounter++}`;
+                const initFn = typeof initial === 'function' ? initial : () => initial;
+                return BaseCreateRawState(stateKey, initFn);
+            },
+            createDerivedState: BaseCreateDerivedState
+        };
+    }, inject);
+}
+// Creates store with nmame
+export function createNamedStore(name, factory, inject) {
     return createUiProvider(name, factory, (cacheKey) => {
         let stateCounter = 0;
         return {
@@ -64,17 +124,33 @@ export const createStore = (name, factory, inject) => {
             createDerivedState: BaseCreateDerivedState
         };
     }, inject);
-};
+}
+/**
+ * Store factory
+ */
 export const createStoreFactory = (inject) => {
-    return function createInjectedStore(name, factory) {
-        return createStore(name, factory, inject);
+    return function (factory) {
+        return createStore(factory, inject);
     };
 };
-export const createPresenter = (name, factory, inject) => {
+/**
+ * Presenter without name needed
+ */
+export function createPresenter(factory, inject) {
+    const cacheKey = AutoKeyGenerator.generate(factory);
+    return createUiProvider(cacheKey, factory, {}, inject);
+}
+/**
+ * Named presenter
+ */
+export function createNamedPresenter(name, factory, inject) {
     return createUiProvider(name, factory, {}, inject);
-};
+}
+/**
+ * Presenter factory
+ */
 export const createPresenterFactory = (inject) => {
-    return function createInjectedStore(name, factory) {
-        return createPresenter(name, factory, inject);
+    return function (factory) {
+        return createPresenter(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.d.ts

@@ -4,15 +4,7 @@ type EdgesHandle = (event: RequestEvent, callback: (params: {
     serialize: (html: string) => string;
 }) => Promise<Response> | Response, silentChromeDevtools?: boolean) => Promise<Response>;
 /**
- * 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 event and a serialize function,
- *   and returns a Response or a Promise of one.
- * @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 instead of a 404 error.
+ * Wraps request handling in an AsyncLocalStorage context
  */
 export declare const edgesHandle: EdgesHandle;
 export {};

package/dist/server/EdgesHandle.js

@@ -1,20 +1,32 @@
-import { stateSerialize } from '../store/State.svelte.js';
-import { AsyncLocalStorage } from 'async_hooks';
+import { stateSerialize, getStateMap } from '../store/State.svelte.js';
+import { AsyncLocalStorage } from 'node:async_hooks';
 import RequestContext, {} from '../context/Context.js';
 const storage = new AsyncLocalStorage();
+const textEncoder = new TextEncoder();
+// Маркеры для специальных значений
+const UNDEFINED_MARKER = '__EDGES_UNDEFINED__';
+const NULL_MARKER = '__EDGES_NULL__';
+// Безопасный replacer для JSON
+const safeReplacer = (key, value) => {
+    if (value === undefined) {
+        return { [UNDEFINED_MARKER]: true };
+    }
+    if (value === null) {
+        return { [NULL_MARKER]: true };
+    }
+    return value;
+};
 /**
- * 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 event and a serialize function,
- *   and returns a Response or a Promise of one.
- * @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 instead of a 404 error.
+ * Wraps request handling in an AsyncLocalStorage context
  */
 export const edgesHandle = async (event, callback, silentChromeDevtools = false) => {
-    return await storage.run({ event: event, symbol: Symbol(), data: { providers: new Map() } }, async () => {
+    const requestSymbol = Symbol('request');
+    return await storage.run({
+        event: event,
+        symbol: requestSymbol,
+        data: { providers: new Map() }
+    }, async () => {
+        // Настраиваем RequestContext
         RequestContext.current = () => {
             const context = storage.getStore();
             if (context === undefined) {
@@ -30,16 +42,61 @@ export const edgesHandle = async (event, callback, silentChromeDevtools = false)
             }
             return context;
         };
+        // Chrome DevTools handling
         if (silentChromeDevtools && event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {
             return new Response(null, { status: 204 });
         }
-        return callback({
+        // Выполняем основной callback
+        const response = await callback({
             edgesEvent: event,
             serialize: (html) => {
                 if (!html)
                     return html ?? '';
-                return html.replace('</body>', `${stateSerialize()}</body>`);
+                // Вставляем сериализованное состояние перед </body>
+                const serialized = stateSerialize();
+                if (!serialized)
+                    return html;
+                return html.replace('</body>', `${serialized}</body>`);
             }
         });
+        // Проверяем, нужно ли инжектить состояние в JSON
+        const contentType = response.headers.get('content-type');
+        if (contentType?.includes('application/json')) {
+            const stateMap = getStateMap();
+            // Если есть состояние для передачи
+            if (stateMap && stateMap.size > 0) {
+                try {
+                    // Клонируем response для чтения
+                    const clonedResponse = response.clone();
+                    const json = await clonedResponse.json();
+                    // Подготавливаем состояние для передачи
+                    const stateObj = {};
+                    for (const [key, value] of stateMap) {
+                        // Сериализуем каждое значение отдельно с поддержкой undefined
+                        stateObj[key] = JSON.stringify(value, safeReplacer);
+                    }
+                    // Добавляем состояние в JSON
+                    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 (e) {
+                    console.error('[edges] Failed to inject state into JSON response:', e);
+                    // При ошибке возвращаем оригинальный response
+                    return 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

@@ -1,84 +1,177 @@
 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();
+const UNDEFINED_MARKER = '__EDGES_UNDEFINED__';
+const NULL_MARKER = '__EDGES_NULL__';
+const safeReplacer = (key, value) => {
+    if (value === undefined) {
+        return { [UNDEFINED_MARKER]: true };
+    }
+    if (value === null) {
+        return { [NULL_MARKER]: true };
+    }
+    if (typeof value === 'function' || typeof value === 'symbol') {
+        return undefined;
+    }
+    return value;
+};
+// const safeReviver = (key: string, value: unknown): unknown => {
+// 	if (value && typeof value === 'object') {
+// 		if (UNDEFINED_MARKER in value) {
+// 			return undefined;
+// 		}
+// 		if (NULL_MARKER in value) {
+// 			return null;
+// 		}
+// 	}
+// 	return value;
+// };
 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) {
+        const serialized = JSON.stringify(value, safeReplacer);
+        const escaped = serialized.replace(/'/g, "\\'").replace(/\\/g, '\\\\');
+        entries.push(`window.__SAFE_SSR_STATE__.set('${key}',JSON.parse('${escaped}',window.__EDGES_REVIVER__))`);
     }
-    return '';
+    const reviverCode = `window.__EDGES_REVIVER__=function(k,v){if(v&&typeof v==='object'){if('${UNDEFINED_MARKER}' in v)return undefined;if('${NULL_MARKER}' in v)return null}return v};`;
+    return `<script>${reviverCode}window.__SAFE_SSR_STATE__=new Map();${entries.join(';')}</script>`;
 };
 const getRequestContext = () => {
-    const sym = RequestContext.current().symbol;
+    const context = RequestContext.current();
+    const sym = context.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) => {
-    const state = window.__SAFE_SSR_STATE__?.get(key);
-    if (state)
+    if (!window.__SAFE_SSR_STATE__) {
+        return initial;
+    }
+    const state = window.__SAFE_SSR_STATE__.get(key);
+    if (window.__SAFE_SSR_STATE__.has(key)) {
         return state;
+    }
     return initial;
 };
 export const createRawState = (key, initial) => {
     if (browser) {
         let state = $state(getBrowserState(key, initial()));
+        const callback = (newValue) => {
+            state = newValue;
+        };
+        registerStateUpdate(key, callback);
+        const updateWindowState = (val) => {
+            if (!window.__SAFE_SSR_STATE__) {
+                window.__SAFE_SSR_STATE__ = new Map();
+            }
+            window.__SAFE_SSR_STATE__.set(key, val);
+        };
         return {
             get value() {
                 return state;
             },
             set value(val) {
                 state = val;
+                updateWindowState(val);
             }
         };
     }
     const map = getRequestContext();
+    if (!map) {
+        const val = initial();
+        return {
+            get value() {
+                return val;
+            },
+            set value(_) {
+                /* noop */
+            }
+        };
+    }
     return {
         get value() {
-            if (!map)
-                return initial();
-            if (!map.has(key))
-                map.set(key, structuredClone(initial()));
+            if (!map.has(key)) {
+                map.set(key, initial());
+            }
             return map.get(key);
         },
         set value(val) {
-            if (map) {
-                map.set(key, val);
-            }
+            map.set(key, val);
         }
     };
 };
 export const createState = (key, initial) => {
     if (browser) {
-        return writable(getBrowserState(key, initial()));
+        const initialValue = getBrowserState(key, initial());
+        const state = writable(initialValue);
+        const callback = (newValue) => {
+            state.set(newValue);
+        };
+        registerStateUpdate(key, callback);
+        const originalSet = state.set;
+        const originalUpdate = state.update;
+        state.set = (value) => {
+            originalSet(value);
+            if (!window.__SAFE_SSR_STATE__) {
+                window.__SAFE_SSR_STATE__ = new Map();
+            }
+            window.__SAFE_SSR_STATE__.set(key, value);
+        };
+        state.update = (updater) => {
+            originalUpdate((current) => {
+                const newValue = updater(current);
+                if (!window.__SAFE_SSR_STATE__) {
+                    window.__SAFE_SSR_STATE__ = new Map();
+                }
+                window.__SAFE_SSR_STATE__.set(key, newValue);
+                return newValue;
+            });
+        };
+        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();
+    if (!map) {
+        const val = initial();
+        return {
+            subscribe(run) {
+                run(val);
+                return () => { };
+            },
+            set() { },
+            update() { }
+        };
+    }
+    if (!map.has(key)) {
+        map.set(key, initial());
+    }
     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);
             const newVal = updater(oldVal);
             map.set(key, newVal);
-            //subscribers.forEach((fn) => fn(newVal));
         }
     };
 };

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.3.0",
   "license": "MIT",
   "author": "Pixel1917",
   "description": "A blazing-fast, extremely lightweight and SSR-friendly store for Svelte",
@@ -34,8 +34,8 @@
       "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"
     },
     "./context": {
       "types": "./dist/context/index.d.ts",
@@ -44,6 +44,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": {