edges-svelte 2.2.0 → 3.0.0

package/dist/server/EdgesHandle.js

@@ -1,28 +1,14 @@
-import { stateSerialize, getStateMap } from '../store/State.svelte.js';
+import { stateSerialize } 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__';
-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
- */
+let requestRevision = 0;
 export const edgesHandle = async (event, callback, silentChromeDevtools = false) => {
     const requestSymbol = Symbol('request');
     return await storage.run({
         event: event,
         symbol: requestSymbol,
-        data: { providers: new Map() }
+        data: { providers: new Map(), edgesDirtyKeys: new Set(), edgesRevision: ++requestRevision }
     }, async () => {
         RequestContext.init(() => {
             const context = storage.getStore();
@@ -44,56 +30,15 @@ export const edgesHandle = async (event, callback, silentChromeDevtools = false)
         }
         const response = await callback({
             edgesEvent: event,
-            serialize: (html, options) => {
+            serialize: (html) => {
                 if (!html)
                     return html ?? '';
-                const serialized = stateSerialize({
-                    compress: options?.compress,
-                    threshold: options?.compressionThreshold
-                });
+                const serialized = stateSerialize();
                 if (!serialized)
                     return html;
                 return html.replace('</body>', `${serialized}</body>`);
             }
         });
-        const contentType = response.headers.get('content-type');
-        if (contentType?.includes('application/json')) {
-            const stateMap = getStateMap();
-            if (stateMap && stateMap.size > 0) {
-                try {
-                    const text = await response.text();
-                    try {
-                        const stateObj = {};
-                        for (const [key, value] of stateMap) {
-                            stateObj[key] = JSON.stringify(value, safeReplacer);
-                        }
-                        const modifiedBody = JSON.stringify({
-                            ...JSON.parse(text),
-                            __edges_state__: stateObj
-                        });
-                        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 {
-                        return new Response(text, {
-                            status: response.status,
-                            statusText: response.statusText,
-                            headers: response.headers
-                        });
-                    }
-                }
-                catch (e) {
-                    console.error('[edges] Failed to inject state into JSON response:', e);
-                    // Original response
-                    return response;
-                }
-            }
-        }
         return response;
     });
 };

package/dist/server/EdgesHandleSimplified.d.ts

@@ -1,24 +1,12 @@
 import type { Handle, RequestEvent, ResolveOptions } from '@sveltejs/kit';
-interface SerializeOptions {
-    compress?: boolean;
-    compressionThreshold?: number;
-}
 type SimplifiedCallback = (params: {
-    serialize: (html: string, options?: SerializeOptions) => string;
+    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) });

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/server/ServerSync.d.ts

@@ -0,0 +1,3 @@
+export declare const __withEdgesServerLoad: <T extends (...args: unknown[]) => unknown>(load: T) => T;
+export declare const __withEdgesActions: <T extends Record<string, (...args: unknown[]) => unknown>>(actions: T) => T;
+export declare const __withEdgesUniversalLoad: <T extends (...args: unknown[]) => unknown>(load: T) => T;

package/dist/server/ServerSync.js

@@ -0,0 +1,125 @@
+import { getStateMap } from '../store/State.svelte.js';
+import { RequestContext } from '../context/Context.js';
+import { build, dev } from '../utils/environment.js';
+const UNDEFINED_MARKER = '__EDGES_UNDEFINED__';
+const NULL_MARKER = '__EDGES_NULL__';
+const BIGINT_MARKER = '__EDGES_BIGINT__';
+const EDGES_STATE_FIELD = '__edges_state__';
+const EDGES_REV_FIELD = '__edges_rev__';
+const isObjectRecord = (value) => {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+};
+const PROFILE_EDGES_DELTA = dev && !build;
+const encodeEdgesValue = (value) => {
+    if (value === undefined)
+        return { [UNDEFINED_MARKER]: true };
+    if (value === null)
+        return { [NULL_MARKER]: true };
+    if (typeof value === 'bigint')
+        return { [BIGINT_MARKER]: value.toString() };
+    if (Array.isArray(value)) {
+        return value.map((item) => encodeEdgesValue(item));
+    }
+    if (typeof value === 'object' && value !== null) {
+        const encoded = {};
+        for (const [key, nested] of Object.entries(value)) {
+            encoded[key] = encodeEdgesValue(nested);
+        }
+        return encoded;
+    }
+    return value;
+};
+const getEdgesDelta = () => {
+    const startedAt = PROFILE_EDGES_DELTA ? performance.now() : 0;
+    try {
+        const context = RequestContext.current();
+        const dirtyKeys = context.data.edgesDirtyKeys;
+        const rev = context.data.edgesRevision ?? 0;
+        const stateMap = getStateMap();
+        if (!dirtyKeys || dirtyKeys.size === 0 || !stateMap || stateMap.size === 0)
+            return undefined;
+        const state = {};
+        for (const key of dirtyKeys) {
+            if (!stateMap.has(key))
+                continue;
+            state[key] = encodeEdgesValue(stateMap.get(key));
+        }
+        if (Object.keys(state).length === 0)
+            return undefined;
+        return { state, rev };
+    }
+    catch {
+        return undefined;
+    }
+    finally {
+        if (PROFILE_EDGES_DELTA) {
+            const duration = performance.now() - startedAt;
+            if (duration > 4) {
+                console.debug(`[edges-svelte] edges delta encode took ${duration.toFixed(2)}ms`);
+            }
+        }
+    }
+};
+const mergePayloadWithEdges = (payload) => {
+    const edges = getEdgesDelta();
+    if (!edges)
+        return payload;
+    if (isObjectRecord(payload)) {
+        return {
+            ...payload,
+            [EDGES_STATE_FIELD]: edges.state,
+            [EDGES_REV_FIELD]: edges.rev
+        };
+    }
+    if (payload === undefined) {
+        return {
+            [EDGES_STATE_FIELD]: edges.state,
+            [EDGES_REV_FIELD]: edges.rev
+        };
+    }
+    return payload;
+};
+export const __withEdgesServerLoad = (load) => {
+    const wrapped = (async (...args) => {
+        const result = await load(...args);
+        return mergePayloadWithEdges(result);
+    });
+    return wrapped;
+};
+export const __withEdgesActions = (actions) => {
+    const wrapped = {};
+    for (const [name, action] of Object.entries(actions)) {
+        wrapped[name] = async (...args) => {
+            const result = await action(...args);
+            return mergePayloadWithEdges(result);
+        };
+    }
+    return wrapped;
+};
+export const __withEdgesUniversalLoad = (load) => {
+    const wrapped = (async (...args) => {
+        const event = args[0];
+        const result = await load(...args);
+        if (!isObjectRecord(event?.data))
+            return result;
+        const inheritedState = event.data[EDGES_STATE_FIELD];
+        const inheritedRev = event.data[EDGES_REV_FIELD];
+        if (!inheritedState)
+            return result;
+        if (isObjectRecord(result)) {
+            return {
+                ...result,
+                [EDGES_STATE_FIELD]: inheritedState,
+                [EDGES_REV_FIELD]: inheritedRev
+            };
+        }
+        if (result === undefined) {
+            return {
+                [EDGES_STATE_FIELD]: inheritedState,
+                [EDGES_REV_FIELD]: inheritedRev
+            };
+        }
+        return result;
+    });
+    return wrapped;
+};

package/dist/server/index.d.ts

@@ -1,3 +1,4 @@
 export { edgesHandle as edgesHandleRaw } from './EdgesHandle.js';
 export { edgesHandle } from './EdgesHandleSimplified.js';
 export { __autoWrapHandle } from './AutoWrapHandle.js';
+export { __withEdgesServerLoad, __withEdgesActions, __withEdgesUniversalLoad } from './ServerSync.js';

package/dist/server/index.js

@@ -1,3 +1,4 @@
 export { edgesHandle as edgesHandleRaw } from './EdgesHandle.js';
 export { edgesHandle } from './EdgesHandleSimplified.js';
 export { __autoWrapHandle } from './AutoWrapHandle.js';
+export { __withEdgesServerLoad, __withEdgesActions, __withEdgesUniversalLoad } from './ServerSync.js';

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

@@ -5,10 +5,7 @@ declare global {
         __EDGES_DEVTOOLS__: Record<string, unknown>;
     }
 }
-export declare const stateSerialize: (options?: {
-    compress?: boolean;
-    threshold?: number;
-}) => string;
+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,11 +2,12 @@ import { RequestContext } from '../context/Context.js';
 import { browser } from '../utils/environment.js';
 import { derived, writable } from 'svelte/store';
 import { registerStateUpdate } from '../client/NavigationSync.svelte.js';
+import { queueUpdate, isBatching } from '../utils/batch.js';
 const RequestStores = new WeakMap();
 const UNDEFINED_MARKER = '__EDGES_UNDEFINED__';
 const NULL_MARKER = '__EDGES_NULL__';
-// Pre-compiled reviver code for better performance (cached once instead of regenerated per request)
-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 BIGINT_MARKER = '__EDGES_BIGINT__';
+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;if('${BIGINT_MARKER}' in v)return BigInt(v['${BIGINT_MARKER}'])}return v};`;
 const safeReplacer = (key, value) => {
     if (value === undefined) {
         return { [UNDEFINED_MARKER]: true };
@@ -14,53 +15,34 @@ const safeReplacer = (key, value) => {
     if (value === null) {
         return { [NULL_MARKER]: true };
     }
+    if (typeof value === 'bigint') {
+        return { [BIGINT_MARKER]: value.toString() };
+    }
     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 = (options) => {
+const escapeInlineScriptString = (value) => value
+    .replace(/[\\']/g, (ch) => '\\' + ch)
+    .replace(/</g, '\\u003C')
+    .replace(/>/g, '\\u003E')
+    .replace(/&/g, '\\u0026')
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
+export const stateSerialize = () => {
     const map = getRequestContext();
     if (!map || map.size === 0)
         return '';
     const entries = [];
-    const shouldCompress = options?.compress ?? false;
-    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
-            // Optimized: Use Array.from instead of reduce for 10x performance improvement
-            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);
-				for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-				const decoded = new TextDecoder().decode(bytes);
-				window.__SAFE_SSR_STATE__.set('${key}', JSON.parse(decoded, window.__EDGES_REVIVER__));
-			}`);
-        }
-        else {
-            // Optimized: Single-pass escape instead of two separate replace calls
-            const escaped = serialized.replace(/[\\']/g, (ch) => '\\' + ch);
-            entries.push(`window.__SAFE_SSR_STATE__.set('${key}',JSON.parse('${escaped}',window.__EDGES_REVIVER__))`);
-        }
+        if (serialized === undefined)
+            continue;
+        const escapedKey = escapeInlineScriptString(key);
+        const escaped = escapeInlineScriptString(serialized);
+        entries.push(`window.__SAFE_SSR_STATE__.set('${escapedKey}',JSON.parse('${escaped}',window.__EDGES_REVIVER__))`);
     }
-    // Use pre-compiled reviver code for better performance
     return `<script>${REVIVER_CODE}window.__SAFE_SSR_STATE__=new Map();${entries.join(';')}</script>`;
 };
 const getRequestContext = () => {
@@ -73,6 +55,17 @@ const getRequestContext = () => {
         return RequestStores.get(sym);
     }
 };
+const markStateDirty = (key) => {
+    if (browser)
+        return;
+    try {
+        const context = RequestContext.current();
+        (context.data.edgesDirtyKeys ??= new Set()).add(key);
+    }
+    catch {
+        // no request context, ignore
+    }
+};
 export const getStateMap = () => {
     try {
         return getRequestContext();
@@ -94,23 +87,30 @@ 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);
         const updateWindowState = (val) => {
             if (!window.__SAFE_SSR_STATE__) {
                 window.__SAFE_SSR_STATE__ = new Map();
             }
             window.__SAFE_SSR_STATE__.set(key, val);
         };
+        const applyValue = (val) => {
+            state = val;
+            updateWindowState(val);
+        };
+        const callback = (newValue) => {
+            queueUpdate(key, newValue, (next) => applyValue(next));
+        };
+        registerStateUpdate(key, callback);
         return {
             get value() {
                 return state;
             },
             set value(val) {
-                state = val;
-                updateWindowState(val);
+                if (isBatching()) {
+                    queueUpdate(key, val, (next) => applyValue(next));
+                    return;
+                }
+                applyValue(val);
             }
         };
     }
@@ -121,9 +121,7 @@ export const createRawState = (key, initial) => {
             get value() {
                 return val;
             },
-            set value(_) {
-                /* noop */
-            }
+            set value(_) { }
         };
     }
     return {
@@ -135,6 +133,7 @@ export const createRawState = (key, initial) => {
         },
         set value(val) {
             map.set(key, val);
+            markStateDirty(key);
         }
     };
 };
@@ -142,22 +141,45 @@ export const createState = (key, initial) => {
     if (browser) {
         const initialValue = getBrowserState(key, initial());
         const state = writable(initialValue);
+        let currentValue = initialValue;
         const callback = (newValue) => {
-            state.set(newValue);
+            queueUpdate(key, newValue, (next) => {
+                applyValue(next);
+            });
         };
         registerStateUpdate(key, callback);
         const originalSet = state.set;
         const originalUpdate = state.update;
-        state.set = (value) => {
+        const applyValue = (value) => {
+            currentValue = value;
             originalSet(value);
             if (!window.__SAFE_SSR_STATE__) {
                 window.__SAFE_SSR_STATE__ = new Map();
             }
             window.__SAFE_SSR_STATE__.set(key, value);
         };
+        state.set = (value) => {
+            if (isBatching()) {
+                currentValue = value;
+                queueUpdate(key, value, (next) => {
+                    applyValue(next);
+                });
+                return;
+            }
+            applyValue(value);
+        };
         state.update = (updater) => {
+            if (isBatching()) {
+                const nextValue = updater(currentValue);
+                currentValue = nextValue;
+                queueUpdate(key, nextValue, (next) => {
+                    applyValue(next);
+                });
+                return;
+            }
             originalUpdate((current) => {
                 const newValue = updater(current);
+                currentValue = newValue;
                 if (!window.__SAFE_SSR_STATE__) {
                     window.__SAFE_SSR_STATE__ = new Map();
                 }
@@ -189,11 +211,13 @@ export const createState = (key, initial) => {
         },
         set(val) {
             map.set(key, val);
+            markStateDirty(key);
         },
         update(updater) {
             const oldVal = map.get(key);
             const newVal = updater(oldVal);
             map.set(key, newVal);
+            markStateDirty(key);
         }
     };
 };

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,20 @@ 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,5 @@
-/**
- * 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 isBatching: () => boolean;
 export declare const transaction: <T>(fn: () => Promise<T>) => Promise<T>;