edges-svelte 2.1.1 → 2.2.1

package/README.md

@@ -130,7 +130,7 @@ const doubled = createDerivedState([count], ([$n]) => $n * 2);
 $doubled;
 ```
 
-> Like Svelte’s `derived`.
+> Like Svelte’s `derived`. On the server side will not subscribe to store like derived, just reads initial value, on client side works like derived.
 
 ---
 
@@ -329,12 +329,55 @@ export const handle = edgesHandle(({ serialize, edgesEvent, resolve }) => {
 | Feature                                                                                                  | Import from           |
 | -------------------------------------------------------------------------------------------------------- | --------------------- |
 | `createStore`, `createStoreFactory`, `createPresenter`, `createPresenterFactory`, `batch`, `transaction` | `edges-svelte`        |
-| `edgesPlugin`                                                                                            | `edges-svelte/plugin` |
+| `edgesPlugin`, `createEdgesPluginFactory`                                                                | `edges-svelte/plugin` |
 | `edgesHandle`                                                                                            | `edges-svelte/server` |
 | `DevTools`                                                                                               | `edges-svelte/dev`    |
 
 ---
 
+## Creating Wrapper Packages
+
+If you're building a custom state management solution on top of `edges-svelte`, you can create your own plugin using the factory:
+
+```typescript
+// my-awesome-edges/plugin/index.ts
+import { createEdgesPluginFactory } from 'edges-svelte/plugin';
+
+// Create your plugin with custom package name and server path
+export const myAwesomePlugin = createEdgesPluginFactory(
+	'my-awesome-edges', // Your package name
+	'my-awesome-edges/server' // Your server module path
+);
+```
+
+Then your users can use it just like the original:
+
+```typescript
+// User's vite.config.ts
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import { myAwesomePlugin } from 'my-awesome-edges/plugin';
+
+export default defineConfig({
+	plugins: [sveltekit(), myAwesomePlugin()]
+});
+```
+
+**For package development/testing:**
+
+```typescript
+// vite.config.ts - when developing edges-svelte itself
+import { createEdgesPluginFactory } from './src/lib/plugin/index.js';
+
+const edgesPluginDev = createEdgesPluginFactory('edges-svelte', '$lib/server');
+
+export default defineConfig({
+	plugins: [sveltekit(), edgesPluginDev()]
+});
+```
+
+---
+
 ## FAQ
 
 ### Why not just use `writable`, `derived` from Svelte?

package/dist/client/NavigationSync.svelte.js

@@ -166,7 +166,7 @@ if (browser) {
                         if (node instanceof HTMLScriptElement) {
                             const text = node.textContent || '';
                             if (text.includes('__SAFE_SSR_STATE__') && text.includes('__EDGES_REVIVER__')) {
-                                setTimeout(() => {
+                                queueMicrotask(() => {
                                     if (window.__SAFE_SSR_STATE__) {
                                         for (const [key, value] of window.__SAFE_SSR_STATE__) {
                                             const callback = stateUpdateCallbacks.get(key);
@@ -175,16 +175,16 @@ if (browser) {
                                             }
                                         }
                                     }
-                                }, 0);
+                                });
                             }
                         }
                     }
                 }
             }
         });
-        observer.observe(document.documentElement, {
+        observer.observe(document.body || document.documentElement, {
             childList: true,
-            subtree: true
+            subtree: false
         });
         if (typeof window !== 'undefined') {
             window.addEventListener('beforeunload', () => observer.disconnect());

package/dist/plugin/EdgesAutoHandlePlugin.d.ts

@@ -1,90 +1,43 @@
 import type { Plugin } from 'vite';
 export interface EdgesPluginOptions {
-    /**
-     * Set to `true` when developing the edges-svelte package itself.
-     * This uses `$lib/server` imports. For all other cases, use `false` (default).
-     * @default false
-     */
-    isPackageDevelopment?: boolean;
-    /**
-     * State compression options
-     */
     compression?: {
-        /**
-         * Enable compression for large state objects
-         * @default false
-         */
         enabled?: boolean;
-        /**
-         * Minimum size in bytes before compression is applied
-         * @default 1024 (1KB)
-         */
         threshold?: number;
     };
-    /**
-     * Silence Chrome DevTools requests
-     * @default true
-     */
     silentChromeDevtools?: boolean;
 }
 /**
- * Vite plugin that automatically wraps the SvelteKit handle hook with edgesHandle.
+ * Creates a factory for the edges plugin with a custom package name and server path.
  *
- * This eliminates the need to manually wrap your handle function, while still allowing
- * full customization of the handle logic.
+ * Use this when:
+ * - Creating a wrapper package that re-exports edges-svelte functionality
+ *
+ * @param packageName - The name that will be used in generated imports (e.g., 'edges-svelte', 'my-wrapper')
+ * @param serverPath - The import path to the server module (e.g., 'edges-svelte/server', '$lib/server')
  *
  * @example
  * ```ts
- * // vite.config.ts - Basic usage
- * import { sveltekit } from '@sveltejs/kit/vite';
- * import { defineConfig } from 'vite';
- * import { edgesPlugin } from 'edges-svelte/plugin';
+ * // For wrapper packages
+ * import { createEdgesPluginFactory } from 'edges-svelte/plugin';
  *
- * export default defineConfig({
- *   plugins: [sveltekit(), edgesPlugin()]
- * });
+ * export const myWrapperPlugin = createEdgesPluginFactory('my-wrapper', 'my-wrapper/server');
  * ```
+ */
+export declare function createEdgesPluginFactory(packageName: string, serverPath: string): (options?: EdgesPluginOptions) => Plugin;
+/**
  *
- * @example
- * ```ts
- * // vite.config.ts - With compression
- * export default defineConfig({
- *   plugins: [
- *     sveltekit(),
- *     edgesPlugin({
- *       compression: {
- *         enabled: true,
- *         threshold: 2048  // Compress states larger than 2KB
- *       }
- *     })
- *   ]
- * });
- * ```
+ * This plugin automatically wraps the SvelteKit handle hook with edgesHandle,
  *
  * @example
  * ```ts
- * // vite.config.ts - Package development mode
- * import { edgesPlugin } from './src/lib/plugin/index.js';
+ * // vite.config.ts - Basic usage
+ * import { sveltekit } from '@sveltejs/kit/vite';
+ * import { defineConfig } from 'vite';
+ * import { edgesPlugin } from 'edges-svelte/plugin';
  *
  * export default defineConfig({
- *   plugins: [sveltekit(), edgesPlugin({ isPackageDevelopment: true })]
+ *   plugins: [sveltekit(), edgesPlugin()]
  * });
  * ```
- *
- * 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(options?: EdgesPluginOptions | boolean): Plugin;
+export declare const edgesPlugin: (options?: EdgesPluginOptions) => Plugin;

package/dist/plugin/EdgesAutoHandlePlugin.js

@@ -1,150 +1,101 @@
 /**
- * Vite plugin that automatically wraps the SvelteKit handle hook with edgesHandle.
+ * Creates a factory for the edges plugin with a custom package name and server path.
  *
- * This eliminates the need to manually wrap your handle function, while still allowing
- * full customization of the handle logic.
+ * Use this when:
+ * - Creating a wrapper package that re-exports edges-svelte functionality
  *
- * @example
- * ```ts
- * // vite.config.ts - Basic usage
- * import { sveltekit } from '@sveltejs/kit/vite';
- * import { defineConfig } from 'vite';
- * import { edgesPlugin } from 'edges-svelte/plugin';
- *
- * export default defineConfig({
- *   plugins: [sveltekit(), edgesPlugin()]
- * });
- * ```
+ * @param packageName - The name that will be used in generated imports (e.g., 'edges-svelte', 'my-wrapper')
+ * @param serverPath - The import path to the server module (e.g., 'edges-svelte/server', '$lib/server')
  *
  * @example
  * ```ts
- * // vite.config.ts - With compression
- * export default defineConfig({
- *   plugins: [
- *     sveltekit(),
- *     edgesPlugin({
- *       compression: {
- *         enabled: true,
- *         threshold: 2048  // Compress states larger than 2KB
- *       }
- *     })
- *   ]
- * });
- * ```
- *
- * @example
- * ```ts
- * // vite.config.ts - Package development mode
- * import { edgesPlugin } from './src/lib/plugin/index.js';
+ * // For wrapper packages
+ * import { createEdgesPluginFactory } from 'edges-svelte/plugin';
  *
- * export default defineConfig({
- *   plugins: [sveltekit(), edgesPlugin({ isPackageDevelopment: true })]
- * });
- * ```
- *
- * 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 const myWrapperPlugin = createEdgesPluginFactory('my-wrapper', 'my-wrapper/server');
  * ```
  */
-export function edgesPlugin(options) {
-    // Backward compatibility: if boolean passed, treat as isPackageDevelopment
-    const config = typeof options === 'boolean' ? { isPackageDevelopment: options } : options || {};
-    const { isPackageDevelopment = false, compression = {}, silentChromeDevtools = true } = config;
-    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);
-            // Build compression options string
-            const compressionOptions = compression.enabled ? `, { compress: true, compressionThreshold: ${compression.threshold || 1024} }` : '';
-            // Build silent devtools option
-            const silentOption = silentChromeDevtools ? '' : `, false`;
-            // Find the position after the last import statement to preserve import order
-            const findImportInsertPosition = (sourceCode) => {
-                const lines = sourceCode.split('\n');
-                let lastImportIndex = -1;
-                for (let i = 0; i < lines.length; i++) {
-                    const line = lines[i].trim();
-                    // Check for import statements (including type imports and dynamic imports)
-                    if (line.startsWith('import ') || (line.startsWith('export ') && line.includes(' from '))) {
-                        lastImportIndex = i;
+export function createEdgesPluginFactory(packageName, serverPath) {
+    // Compile regex patterns once per factory (performance optimization)
+    const MANUAL_IMPORT_PATTERN = new RegExp(`from\\s+['"](?:${packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}/server|\\$lib/server)['"]`, 'g');
+    // Match "export const handle" with optional type annotation (e.g., ": Handle")
+    const HANDLE_EXPORT_PATTERN = /export\s+const\s+handle\s*(?::\s*\w+\s*)?=/;
+    return function edgesPlugin(options) {
+        const { compression = {}, silentChromeDevtools = true } = options || {};
+        return {
+            name: `${packageName}-auto-handle`,
+            enforce: 'pre',
+            transform(code, id) {
+                if (!id.includes('hooks.server.ts'))
+                    return null;
+                if (code.includes('__EDGES_AUTO_WRAPPED__'))
+                    return null;
+                if (MANUAL_IMPORT_PATTERN.test(code)) {
+                    return null;
+                }
+                const hasHandleExport = HANDLE_EXPORT_PATTERN.test(code);
+                const compressionOptions = compression.enabled ? `, { compress: true, compressionThreshold: ${compression.threshold || 1024} }` : '';
+                const silentOption = silentChromeDevtools ? '' : `, false`;
+                const findImportInsertPosition = (sourceCode) => {
+                    const importRegex = /(?:^|\n)((?:import|export)\s+(?:type\s+)?(?:\{[^}]*\}|\*|\w+)(?:\s+from)?\s+['"][^'"]+['"];?)/gm;
+                    let lastMatch = null;
+                    let match;
+                    while ((match = importRegex.exec(sourceCode)) !== null) {
+                        lastMatch = match;
                     }
-                    // Stop at first non-import, non-comment, non-empty line after imports started
-                    else if (lastImportIndex !== -1 && line && !line.startsWith('//') && !line.startsWith('/*') && !line.startsWith('*')) {
-                        break;
+                    if (!lastMatch) {
+                        return 0;
                     }
+                    return lastMatch.index + lastMatch[0].length;
+                };
+                if (!hasHandleExport) {
+                    const insertPos = findImportInsertPosition(code);
+                    const beforeImports = code.slice(0, insertPos);
+                    const afterImports = code.slice(insertPos);
+                    return {
+                        code: beforeImports +
+                            `// __EDGES_AUTO_WRAPPED__\n` +
+                            `import { edgesHandle } from '${serverPath}';\n\n` +
+                            afterImports +
+                            `\n\n` +
+                            `export const handle = edgesHandle(({ serialize, edgesEvent, resolve }) => ` +
+                            `resolve(edgesEvent, { transformPageChunk: ({ html }) => serialize(html${compressionOptions}) })${silentOption});`,
+                        map: null
+                    };
                 }
-                if (lastImportIndex === -1) {
-                    // No imports found, insert at the beginning
-                    return 0;
-                }
-                // Calculate character position after the last import line
-                const position = lines.slice(0, lastImportIndex + 1).join('\n').length;
-                return position > 0 ? position + 1 : 0; // +1 for the newline after last import
-            };
-            if (!hasHandleExport) {
-                // No handle defined - create default with compression options
                 const insertPos = findImportInsertPosition(code);
                 const beforeImports = code.slice(0, insertPos);
                 const afterImports = code.slice(insertPos);
+                const wrappedCode = beforeImports +
+                    `// __EDGES_AUTO_WRAPPED__\n` +
+                    `import { __autoWrapHandle } from '${serverPath}';\n\n` +
+                    afterImports.replace(/export\s+const\s+handle\s*(?::\s*\w+\s*)?=/, 'const __userHandle =') +
+                    `\n\n` +
+                    `const __compressionOptions = ${JSON.stringify({ compress: compression.enabled, compressionThreshold: compression.threshold })};\n` +
+                    `const __silentChromeDevtools = ${silentChromeDevtools};\n` +
+                    `export const handle = __autoWrapHandle(__userHandle, __compressionOptions, __silentChromeDevtools);`;
                 return {
-                    code: beforeImports +
-                        `// __EDGES_AUTO_WRAPPED__\n` +
-                        `import { edgesHandle } from '${importPath}';\n\n` +
-                        afterImports +
-                        `\n\n` +
-                        `export const handle = edgesHandle(({ serialize, edgesEvent, resolve }) => ` +
-                        `resolve(edgesEvent, { transformPageChunk: ({ html }) => serialize(html${compressionOptions}) })${silentOption});`,
+                    code: wrappedCode,
                     map: null
                 };
             }
-            // User defined a handle - wrap it with options
-            const insertPos = findImportInsertPosition(code);
-            const beforeImports = code.slice(0, insertPos);
-            const afterImports = code.slice(insertPos);
-            const wrappedCode = beforeImports +
-                `// __EDGES_AUTO_WRAPPED__\n` +
-                `import { __autoWrapHandle } from '${importPath}';\n\n` +
-                afterImports.replace(/export\s+const\s+handle/, 'const __userHandle') +
-                `\n\n` +
-                `const __compressionOptions = ${JSON.stringify({ compress: compression.enabled, compressionThreshold: compression.threshold })};\n` +
-                `const __silentChromeDevtools = ${silentChromeDevtools};\n` +
-                `export const handle = __autoWrapHandle(__userHandle, __compressionOptions, __silentChromeDevtools);`;
-            return {
-                code: wrappedCode,
-                map: null
-            };
-        }
+        };
     };
 }
+/**
+ *
+ * This plugin automatically wraps the SvelteKit handle hook with edgesHandle,
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts - Basic usage
+ * import { sveltekit } from '@sveltejs/kit/vite';
+ * import { defineConfig } from 'vite';
+ * import { edgesPlugin } from 'edges-svelte/plugin';
+ *
+ * export default defineConfig({
+ *   plugins: [sveltekit(), edgesPlugin()]
+ * });
+ * ```
+ */
+export const edgesPlugin = createEdgesPluginFactory('edges-svelte', 'edges-svelte/server');

package/dist/plugin/index.d.ts

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

package/dist/plugin/index.js

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

package/dist/provider/Provider.d.ts

@@ -11,52 +11,14 @@ type StoreDeps = {
     createState: <T>(initial: T | (() => T)) => Writable<T>;
     createDerivedState: typeof BaseCreateDerivedState;
 };
-/**
- * Creates store with optional name
- * @example
- * // Without key (auto-generated)
- * export const useUserStore = createStore(({ createState }) => {
- *   const user = createState(null);
- *   return { user };
- * });
- *
- * @example
- * // With explicit key (recommended for production)
- * export const useUserStore = createStore('user-store', ({ 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 createStore<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;
     <T>(name: string, factory: (args: StoreDeps & NoConflict<I, StoreDeps>) => T): () => T;
 };
-/**
- * Creates presenter with optional name
- * @example
- * // Without key (auto-generated)
- * export const useAuthPresenter = createPresenter(() => {
- *   const login = async () => { ... };
- *   return { login };
- * });
- *
- * @example
- * // With explicit key
- * export const useAuthPresenter = createPresenter('auth-presenter', () => {
- *   const login = async () => { ... };
- *   return { login };
- * });
- */
 export declare function createPresenter<T, I extends Record<string, unknown> = Record<string, unknown>>(factory: (args: I) => T, inject?: I): () => T;
 export declare function createPresenter<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;
     <T>(name: string, factory: (args: I) => T): () => T;

package/dist/provider/Provider.js

@@ -2,9 +2,7 @@ import { createState as BaseCreateState, createDerivedState as BaseCreateDerived
 import { RequestContext } from '../context/index.js';
 import { browser } from '../utils/environment.js';
 import { DevTools } from '../utils/dev.js';
-// Global client cache
 const globalClientCache = new Map();
-// Key auto-generate
 class AutoKeyGenerator {
     static cache = new WeakMap();
     static counters = new Map();
@@ -30,9 +28,6 @@ class AutoKeyGenerator {
         }
         if (cache.has(factory))
             return cache.get(factory);
-        // Use multiple sources for stable key generation
-        // Priority: displayName > name > toString
-        // This ensures stability even with minification
         const fnIdentifier = factory.__storeKey__ || factory.displayName || factory.name || factory.toString();
         const hash = this.hash(fnIdentifier);
         const baseKey = `store_${Math.abs(hash).toString(36)}`;
@@ -46,16 +41,14 @@ class AutoKeyGenerator {
             counters.set(baseKey, 0);
         }
         cache.set(factory, finalKey);
-        // Dev mode validation
         DevTools.validateFactoryUniqueness(factory, finalKey);
         return finalKey;
     }
     static hash(str) {
-        let hash = 0;
+        let hash = 2166136261;
         for (let i = 0; i < str.length; i++) {
-            const char = str.charCodeAt(i);
-            hash = (hash << 5) - hash + char;
-            hash = hash & hash;
+            hash = (hash ^ str.charCodeAt(i)) * 16777619;
+            hash = hash >>> 0;
         }
         return hash;
     }
@@ -108,12 +101,10 @@ const createUiProvider = (cacheKey, factory, dependencies, inject) => {
     };
 };
 export function createStore(nameOrFactory, factoryOrInject, inject) {
-    // Handle overloads
     const isNameProvided = typeof nameOrFactory === 'string';
     const name = isNameProvided ? nameOrFactory : undefined;
     const factory = isNameProvided ? factoryOrInject : nameOrFactory;
     const injections = isNameProvided ? inject : factoryOrInject;
-    // Use provided name or auto-generate
     const cacheKey = name || AutoKeyGenerator.generate(factory);
     return createUiProvider(cacheKey, factory, (key) => {
         let stateCounter = 0;
@@ -132,9 +123,6 @@ export function createStore(nameOrFactory, factoryOrInject, inject) {
         };
     }, injections);
 }
-/**
- * Store factory
- */
 export const createStoreFactory = (inject) => {
     function storeFactory(nameOrFactory, factory) {
         if (typeof nameOrFactory === 'string') {
@@ -147,18 +135,13 @@ export const createStoreFactory = (inject) => {
     return storeFactory;
 };
 export function createPresenter(nameOrFactory, factoryOrInject, inject) {
-    // Handle overloads
     const isNameProvided = typeof nameOrFactory === 'string';
     const name = isNameProvided ? nameOrFactory : undefined;
     const factory = isNameProvided ? factoryOrInject : nameOrFactory;
     const injections = isNameProvided ? inject : factoryOrInject;
-    // Use provided name or auto-generate
     const cacheKey = name || AutoKeyGenerator.generate(factory);
     return createUiProvider(cacheKey, factory, {}, injections);
 }
-/**
- * Presenter factory
- */
 export const createPresenterFactory = (inject) => {
     function presenterFactory(nameOrFactory, factory) {
         if (typeof nameOrFactory === 'string') {

package/dist/server/AutoWrapHandle.js

@@ -12,21 +12,17 @@ import { edgesHandle } from './EdgesHandleSimplified.js';
  */
 export function __autoWrapHandle(userHandle, compressionOptions, silentChromeDevtools = true) {
     if (!userHandle) {
-        // No user handle - return default edgesHandle with compression options
         return edgesHandle(({ serialize, edgesEvent, resolve }) => resolve(edgesEvent, {
             transformPageChunk: ({ html }) => serialize(html, compressionOptions)
         }), silentChromeDevtools);
     }
-    // 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 with compression options
                     return typeof userTransformed === 'string' ? serialize(userTransformed, compressionOptions) : userTransformed;
                 }
             })

package/dist/server/EdgesHandle.d.ts

@@ -7,8 +7,5 @@ type EdgesHandle = (event: RequestEvent, callback: (params: {
     edgesEvent: RequestEvent;
     serialize: (html: string, options?: SerializeOptions) => string;
 }) => Promise<Response> | Response, silentChromeDevtools?: boolean) => Promise<Response>;
-/**
- * Wraps request handling in an AsyncLocalStorage context
- */
 export declare const edgesHandle: EdgesHandle;
 export {};

package/dist/server/EdgesHandle.js

@@ -14,9 +14,6 @@ const safeReplacer = (key, value) => {
     }
     return value;
 };
-/**
- * Wraps request handling in an AsyncLocalStorage context
- */
 export const edgesHandle = async (event, callback, silentChromeDevtools = false) => {
     const requestSymbol = Symbol('request');
     return await storage.run({
@@ -89,7 +86,6 @@ export const edgesHandle = async (event, callback, silentChromeDevtools = false)
                 }
                 catch (e) {
                     console.error('[edges] Failed to inject state into JSON response:', e);
-                    // Original response
                     return response;
                 }
             }

package/dist/server/EdgesHandleSimplified.d.ts

@@ -9,16 +9,8 @@ type SimplifiedCallback = (params: {
     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) });

package/dist/server/EdgesHandleSimplified.js

@@ -1,15 +1,7 @@
 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) });

package/dist/store/State.svelte.js

@@ -5,6 +5,7 @@ import { registerStateUpdate } from '../client/NavigationSync.svelte.js';
 const RequestStores = new WeakMap();
 const UNDEFINED_MARKER = '__EDGES_UNDEFINED__';
 const NULL_MARKER = '__EDGES_NULL__';
+const REVIVER_CODE = `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};`;
 const safeReplacer = (key, value) => {
     if (value === undefined) {
         return { [UNDEFINED_MARKER]: true };
@@ -17,17 +18,6 @@ const safeReplacer = (key, value) => {
     }
     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 = (options) => {
     const map = getRequestContext();
     if (!map || map.size === 0)
@@ -37,11 +27,10 @@ export const stateSerialize = (options) => {
     const threshold = options?.threshold ?? 1024; // 1KB default
     for (const [key, value] of map) {
         const serialized = JSON.stringify(value, safeReplacer);
-        // Check if we should compress this entry
         if (shouldCompress && serialized.length > threshold) {
-            // For large values, use base64 encoding as a simple compression
-            // In production, you might want to use actual compression like gzip
-            const encoded = btoa(new TextEncoder().encode(serialized).reduce((acc, byte) => acc + String.fromCharCode(byte), ''));
+            const bytes = new TextEncoder().encode(serialized);
+            const binary = Array.from(bytes, (byte) => String.fromCharCode(byte)).join('');
+            const encoded = btoa(binary);
             entries.push(`{
 				const binary = atob('${encoded}');
 				const bytes = new Uint8Array(binary.length);
@@ -51,12 +40,11 @@ export const stateSerialize = (options) => {
 			}`);
         }
         else {
-            const escaped = serialized.replace(/'/g, "\\'").replace(/\\/g, '\\\\');
+            const escaped = serialized.replace(/[\\']/g, (ch) => '\\' + ch);
             entries.push(`window.__SAFE_SSR_STATE__.set('${key}',JSON.parse('${escaped}',window.__EDGES_REVIVER__))`);
         }
     }
-    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>`;
+    return `<script>${REVIVER_CODE}window.__SAFE_SSR_STATE__=new Map();${entries.join(';')}</script>`;
 };
 const getRequestContext = () => {
     const context = RequestContext.current();

package/dist/types.d.ts

@@ -1,25 +1,8 @@
 import type { Writable, Readable } from 'svelte/store';
-/**
- * Configuration for store creation with minification resistance
- */
 export interface StoreConfig {
-    /**
-     * Explicit key for the store to avoid minification issues
-     * @example
-     * ```ts
-     * const factory = (deps) => { ... };
-     * factory.__storeKey__ = 'userStore';
-     * ```
-     */
     __storeKey__?: string;
-    /**
-     * Display name for debugging
-     */
     displayName?: string;
 }
-/**
- * Store factory function with configuration
- */
 export type StoreFactory<T, I = Record<string, unknown>> = ((args: {
     createState: <T>(initial: T | (() => T)) => Writable<T>;
     createRawState: <T>(initial: T | (() => T)) => {
@@ -27,89 +10,26 @@ export type StoreFactory<T, I = Record<string, unknown>> = ((args: {
     };
     createDerivedState: <T extends Readable<unknown>[], D>(stores: T, deriveFn: (values: unknown[]) => D) => Readable<D>;
 } & I) => T) & StoreConfig;
-/**
- * Presenter factory function with configuration
- */
 export type PresenterFactory<T, I = Record<string, unknown>> = ((args: I) => T) & StoreConfig;
-/**
- * Options for batched state updates
- */
 export interface BatchOptions {
-    /**
-     * Whether to defer DOM updates to the next microtask
-     * @default true
-     */
     defer?: boolean;
-    /**
-     * Callback when batch completes
-     */
     onComplete?: () => void;
 }
-/**
- * Compression options for state serialization
- */
 export interface CompressionOptions {
-    /**
-     * Enable compression for large state objects
-     * @default false
-     */
     enabled?: boolean;
-    /**
-     * Minimum size in bytes before compression is applied
-     * @default 1024 (1KB)
-     */
     threshold?: number;
-    /**
-     * Compression algorithm to use
-     * @default 'base64'
-     */
     algorithm?: 'base64' | 'gzip' | 'brotli';
 }
-/**
- * Development tools configuration
- */
 export interface DevToolsConfig {
-    /**
-     * Enable development mode validations
-     * @default true in dev, false in production
-     */
     enabled?: boolean;
-    /**
-     * Warn about large state objects
-     * @default true
-     */
     warnLargeState?: boolean;
-    /**
-     * Size threshold for large state warnings (in bytes)
-     * @default 50000 (50KB)
-     */
     largeStateThreshold?: number;
-    /**
-     * Check for direct state mutations
-     * @default true
-     */
     checkMutations?: boolean;
-    /**
-     * Log performance metrics
-     * @default false
-     */
     logPerformance?: boolean;
 }
-/**
- * Global configuration for edges-svelte
- */
 export interface EdgesConfig {
-    /**
-     * Development tools configuration
-     */
     devTools?: DevToolsConfig;
-    /**
-     * Default compression options for state serialization
-     */
     compression?: CompressionOptions;
-    /**
-     * Default batch options
-     */
     batch?: BatchOptions;
 }
 export type UnknownFunc = {

package/dist/utils/batch.d.ts

@@ -1,25 +1,4 @@
-/**
- * Batch multiple state updates to avoid unnecessary re-renders
- *
- * @example
- * ```ts
- * batch(() => {
- *   store1.set(value1);
- *   store2.set(value2);
- *   store3.set(value3);
- * });
- * ```
- */
 export declare const batch: (fn: () => void) => void;
-/**
- * Queue an update for batching (internal use)
- */
 export declare const queueUpdate: (key: string, value: unknown, callback?: (value: unknown) => void) => void;
-/**
- * Register a callback for batch completion (internal use)
- */
 export declare const onBatchComplete: (callback: () => void) => void;
-/**
- * Transaction-like API for complex state updates
- */
 export declare const transaction: <T>(fn: () => Promise<T>) => Promise<T>;

package/dist/utils/batch.js

@@ -3,16 +3,11 @@ class BatchManager {
     pendingUpdates = new Map();
     scheduled = false;
     batchCallbacks = new Set();
-    /**
-     * Batch multiple state updates into a single render cycle
-     */
     batch(fn) {
         if (!browser) {
-            // On server, execute immediately
             fn();
             return;
         }
-        // Collect all updates
         const startBatching = !this.scheduled;
         if (startBatching) {
             this.scheduled = true;
@@ -26,44 +21,31 @@ class BatchManager {
             }
         }
     }
-    /**
-     * Add an update to the batch queue
-     */
     queueUpdate(key, value, callback) {
         if (!browser || !this.scheduled) {
-            // Execute immediately if not batching
             if (callback)
                 callback(value);
             return;
         }
         this.pendingUpdates.set(key, { key, value, callback });
     }
-    /**
-     * Register a callback to be called when batch completes
-     */
     onBatchComplete(callback) {
         this.batchCallbacks.add(callback);
     }
-    /**
-     * Flush all pending updates
-     */
     flush() {
         if (this.pendingUpdates.size === 0) {
             this.scheduled = false;
             return;
         }
-        // Use microtask to batch DOM updates
         queueMicrotask(() => {
             const updates = Array.from(this.pendingUpdates.values());
             this.pendingUpdates.clear();
             this.scheduled = false;
-            // Apply all updates
             for (const update of updates) {
                 if (update.callback) {
                     update.callback(update.value);
                 }
             }
-            // Notify batch complete
             for (const callback of this.batchCallbacks) {
                 callback();
             }
@@ -71,32 +53,10 @@ class BatchManager {
         });
     }
 }
-// Global batch manager instance
 const batchManager = new BatchManager();
-/**
- * Batch multiple state updates to avoid unnecessary re-renders
- *
- * @example
- * ```ts
- * batch(() => {
- *   store1.set(value1);
- *   store2.set(value2);
- *   store3.set(value3);
- * });
- * ```
- */
 export const batch = (fn) => batchManager.batch(fn);
-/**
- * Queue an update for batching (internal use)
- */
 export const queueUpdate = (key, value, callback) => batchManager.queueUpdate(key, value, callback);
-/**
- * Register a callback for batch completion (internal use)
- */
 export const onBatchComplete = (callback) => batchManager.onBatchComplete(callback);
-/**
- * Transaction-like API for complex state updates
- */
 export const transaction = async (fn) => {
     return new Promise((resolve, reject) => {
         batch(() => {

package/dist/utils/dev.d.ts

@@ -1,26 +1,9 @@
 import type { UnknownFunc } from '../types.js';
-/**
- * Development-mode validations and warnings
- */
 export declare const DevTools: {
-    /**
-     * Validates factory uniqueness in development
-     */
     validateFactoryUniqueness(factory: UnknownFunc, key: string): void;
-    /**
-     * Warns about large state objects
-     */
+    getSize(value: unknown): number;
     warnOnLargeState(key: string, value: unknown): void;
-    /**
-     * Validates state mutations
-     */
     checkStateMutation(key: string, oldValue: unknown, newValue: unknown): void;
-    /**
-     * Performance metrics collection
-     */
     measurePerformance<T>(name: string, fn: () => T): T;
-    /**
-     * Debug state tree visualization
-     */
     visualizeStateTree(stateMap: Map<string, unknown>): void;
 };

package/dist/utils/dev.js

@@ -1,35 +1,37 @@
 import { browser, dev } from './environment.js';
 const seenFactories = new WeakSet();
 const largeStateWarnings = new Set();
-/**
- * Development-mode validations and warnings
- */
+const sizeCache = new WeakMap();
 export const DevTools = {
-    /**
-     * Validates factory uniqueness in development
-     */
     validateFactoryUniqueness(factory, key) {
         if (!dev)
             return;
         if (seenFactories.has(factory)) {
             console.warn(`[edges-svelte] Factory collision detected for key "${key}". ` +
-                `This might cause unexpected behavior. Consider using createNamedStore() ` +
-                `or setting a unique __storeKey__ property on your factory function.`);
+                `This might cause unexpected behavior.` +
+                `Set a unique __storeKey__ property on your factory function.`);
         }
         seenFactories.add(factory);
     },
-    /**
-     * Warns about large state objects
-     */
+    getSize(value) {
+        if (typeof value === 'object' && value !== null) {
+            if (sizeCache.has(value)) {
+                return sizeCache.get(value);
+            }
+            const size = JSON.stringify(value).length;
+            sizeCache.set(value, size);
+            return size;
+        }
+        return JSON.stringify(value).length;
+    },
     warnOnLargeState(key, value) {
         if (!dev)
             return;
         if (largeStateWarnings.has(key))
             return;
         try {
-            const size = JSON.stringify(value).length;
+            const size = this.getSize(value);
             if (size > 50000) {
-                // 50KB threshold
                 largeStateWarnings.add(key);
                 console.warn(`[edges-svelte] Large state detected for key "${key}" (${Math.round(size / 1024)}KB). ` +
                     `Consider splitting into smaller stores or enabling compression.`);
@@ -39,21 +41,14 @@ export const DevTools = {
             // Ignore serialization errors in dev warnings
         }
     },
-    /**
-     * Validates state mutations
-     */
     checkStateMutation(key, oldValue, newValue) {
         if (!dev || !browser)
             return;
-        // Check for direct object mutations
         if (typeof oldValue === 'object' && oldValue !== null && oldValue === newValue && !Array.isArray(oldValue)) {
             console.error(`[edges-svelte] Direct mutation detected for key "${key}". ` +
                 `State should be immutable. Use spread operator or Object.assign() to create new objects.`);
         }
     },
-    /**
-     * Performance metrics collection
-     */
     measurePerformance(name, fn) {
         if (!dev)
             return fn();
@@ -61,14 +56,10 @@ export const DevTools = {
         const result = fn();
         const duration = performance.now() - start;
         if (duration > 16) {
-            // Longer than a frame
             console.warn(`[edges-svelte] Slow operation "${name}" took ${duration.toFixed(2)}ms. ` + `Consider optimizing for better performance.`);
         }
         return result;
     },
-    /**
-     * Debug state tree visualization
-     */
     visualizeStateTree(stateMap) {
         if (!dev || !browser)
             return;
@@ -89,7 +80,6 @@ export const DevTools = {
         console.groupEnd();
     }
 };
-// Export for browser devtools integration
 if (browser && dev) {
     window.__EDGES_DEVTOOLS__ = {
         version: '1.3.0',
@@ -111,7 +101,7 @@ if (browser && dev) {
             const sizes = {};
             for (const [key, value] of stateMap) {
                 try {
-                    const size = JSON.stringify(value).length;
+                    const size = DevTools.getSize(value);
                     sizes[key] = size;
                     totalSize += size;
                 }

package/dist/utils/environment.d.ts

@@ -1,6 +1,2 @@
-/**
- * Universal browser detection that works in both SvelteKit and non-SvelteKit environments
- * This fixes SSR issues when the package is used in different contexts
- */
 export declare const browser: boolean;
 export declare const dev: boolean;

package/dist/utils/environment.js

@@ -1,6 +1,2 @@
-/**
- * Universal browser detection that works in both SvelteKit and non-SvelteKit environments
- * This fixes SSR issues when the package is used in different contexts
- */
 export const browser = !import.meta.env.SSR && typeof window !== 'undefined' && typeof document !== 'undefined';
 export const dev = import.meta.env.DEV;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "edges-svelte",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "license": "MIT",
   "author": "Pixel1917",
   "description": "A blazing-fast, extremely lightweight and SSR-friendly store for Svelte",
@@ -107,9 +107,6 @@
     "state management",
     "ssr store"
   ],
-  "dependencies": {
-    "devalue": "^5.1.1"
-  },
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",