ag-grid-url-sync 0.5.1 → 0.5.2

package/dist/react/use-ag-grid-url-sync.js

@@ -1,170 +1,118 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { AGGridUrlSync } from '../core/ag-grid-url-sync.js';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { createSync, handOver, IDLE_SNAPSHOT } from '../core/grid-url-sync.js';
 import { parseUrlFilters as parseFilters } from '../core/url-parser.js';
-import { resolveParamPrefix } from '../core/individual-params.js';
+import { generateUrl } from '../core/url-generator.js';
+import { getFilterModel } from '../core/grid-integration.js';
+import { serializeGrouped } from '../core/serialization/grouped.js';
 import { createViewStore } from '../core/view-storage.js';
 import { DEFAULT_CONFIG, resolveOptions } from '../core/options.js';
 import { toError } from '../core/to-error.js';
-import { isDataIssue, shouldThrow, toIssue } from '../core/issues.js';
+import { isDataIssue, shouldThrow } from '../core/issues.js';
 import { URLSyncError } from '../core/types.js';
-function sameViews(a, b) {
-    return a.length === b.length && JSON.stringify(a) === JSON.stringify(b);
-}
-function sameFilterModel(a, b) {
-    const keys = Object.keys(a);
-    return (keys.length === Object.keys(b).length &&
-        keys.every(key => JSON.stringify(a[key]) === JSON.stringify(b[key])));
-}
+import { createSyncHolder } from './sync-holder.js';
+import { gridUrlSyncOptions } from './sync-options.js';
 const NO_ISSUES = [];
-function sameIssues(a, b) {
-    return (a.length === b.length &&
-        a.every((issue, index) => issue.code === b[index]?.code &&
-            issue.message === b[index]?.message &&
-            issue.column === b[index]?.column));
+const getServerSnapshot = () => IDLE_SNAPSHOT;
+const WRITE_CODES = new Set([
+    'STORAGE_WRITE_FAILED',
+    'STORAGE_FULL',
+    'STORAGE_UNAVAILABLE',
+    'HISTORY_WRITE_FAILED'
+]);
+const LOAD_STOP_CODES = new Set([
+    'VIEW_NOT_FOUND',
+    'GRID_ERROR'
+]);
+function newSession(grid, storageKey) {
+    return {
+        grid,
+        storageKey,
+        autoApplied: false,
+        urlApplied: false,
+        activeViewId: null,
+        applyIssues: NO_ISSUES,
+        handover: null
+    };
 }
-function keepIssues(list) {
-    const next = list.filter(isDataIssue);
-    return previous => (sameIssues(previous, next) ? previous : next);
+function dataIssues(issues) {
+    const data = issues.filter(isDataIssue);
+    return data.length ? data : NO_ISSUES;
 }
-function callGrid(call) {
+function pageGivesFilters(options) {
     try {
-        return call();
+        const filters = parseFilters(pageUrl(), {
+            ...options,
+            onParseError: () => { }
+        });
+        return Object.keys(filters).length > 0;
     }
-    catch (cause) {
-        throw toIssue(cause, 'GRID_ERROR');
+    catch {
+        return false;
     }
 }
-function applicableModel(gridApi, model) {
-    if (!('getColumn' in gridApi))
-        return model;
-    return Object.fromEntries(Object.entries(model).filter(([colId]) => gridApi.getColumn(colId)?.isFilterAllowed() ?? false));
+function urlWithFilters(api, base, options) {
+    return generateUrl(base, getFilterModel(api, options), options);
+}
+function filtersAsFormat(api, format, options) {
+    const filters = getFilterModel(api, options);
+    return serializeGrouped(filters, {
+        ...options,
+        format,
+        serialization: 'grouped'
+    }).value;
+}
+function hasWindow() {
+    return typeof window !== 'undefined';
 }
-function couldBeLanding(live, expected, before) {
-    return Object.keys(live).every(colId => Object.hasOwn(expected, colId) ||
-        (before !== null &&
-            Object.hasOwn(before, colId) &&
-            JSON.stringify(live[colId]) === JSON.stringify(before[colId])));
+function pageUrl() {
+    return hasWindow() ? window.location.href : '';
 }
 export function useAGGridUrlSync(gridApi, options = {}) {
-    const { autoApplyOnMount = false, enabledWhenReady = true, onError, storageKey, throwOnError, ...coreOptions } = options;
-    const [isReady, setIsReady] = useState(false);
-    const [currentUrl, setCurrentUrl] = useState('');
-    const [hasFilters, setHasFilters] = useState(false);
-    const [applyIssues, setApplyIssues] = useState(NO_ISSUES);
-    const [writeIssues, setWriteIssues] = useState(NO_ISSUES);
+    const { autoApplyOnMount = false, enabledWhenReady = true, onError, storageKey, history = 'none', popstate, throwOnError, ...coreOptions } = options;
+    const resolved = resolveOptions(coreOptions);
+    const { paramPrefix, maxValueLength, serialization, groupedParam, format } = resolved;
+    const urlOptions = useMemo(() => ({
+        paramPrefix,
+        maxValueLength,
+        serialization,
+        groupedParam,
+        format
+    }), [paramPrefix, maxValueLength, serialization, groupedParam, format]);
+    const [holder] = useState(createSyncHolder);
+    const snapshot = useSyncExternalStore(holder.subscribe, holder.getSnapshot, getServerSnapshot);
+    const isReady = snapshot.status === 'active';
+    const currentUrl = isReady ? snapshot.url : '';
+    const hasFilters = isReady && snapshot.hasFilters;
     const viewStore = useMemo(() => (storageKey ? createViewStore(storageKey) : null), [storageKey]);
-    const [views, setViews] = useState([]);
-    const [activeViewId, setActiveViewId] = useState(null);
-    const activeViewIdRef = useRef(null);
-    const appliedModelRef = useRef(null);
-    const pendingWriteRef = useRef(null);
-    const writingRef = useRef(false);
-    const commitActiveViewId = useCallback((id) => {
-        activeViewIdRef.current = id;
-        setActiveViewId(id);
-        if (id === null) {
-            appliedModelRef.current = null;
-            pendingWriteRef.current = null;
-        }
-    }, []);
-    const applyModelToGrid = useCallback((api, model) => {
-        let before = null;
-        try {
-            before = api.getFilterModel() ?? {};
-        }
-        catch {
-        }
-        pendingWriteRef.current = {
-            before,
-            expected: applicableModel(api, model)
-        };
-        writingRef.current = true;
-        try {
-            callGrid(() => api.setFilterModel(model));
-        }
-        catch (error) {
-            pendingWriteRef.current = null;
-            throw error;
-        }
-        finally {
-            writingRef.current = false;
-        }
-        if (!pendingWriteRef.current)
-            return;
-        let live = null;
-        try {
-            live = api.getFilterModel() ?? {};
-        }
-        catch {
-        }
-        if (live && (!before || !sameFilterModel(live, before))) {
-            pendingWriteRef.current = null;
-            appliedModelRef.current = live;
-        }
-    }, []);
-    const writeOverPendingView = useCallback((write) => {
-        const pending = pendingWriteRef.current;
-        if (!pending || !gridApi) {
-            write();
-            return;
-        }
-        const applied = appliedModelRef.current;
-        const activeId = activeViewIdRef.current;
-        let before = null;
-        try {
-            before = gridApi.getFilterModel() ?? {};
-        }
-        catch {
-        }
-        pendingWriteRef.current = null;
-        appliedModelRef.current = pending.expected;
-        const reinstate = () => {
-            if (pendingWriteRef.current || activeViewIdRef.current !== activeId) {
-                return;
-            }
-            pendingWriteRef.current = pending;
-            appliedModelRef.current = applied;
-        };
-        try {
-            write();
-        }
-        catch (error) {
-            reinstate();
-            throw error;
-        }
-        if (!before)
-            return;
-        try {
-            const live = gridApi.getFilterModel() ?? {};
-            if (sameFilterModel(live, before))
-                reinstate();
-        }
-        catch {
-        }
-    }, [gridApi]);
-    const syncViewsFromStore = useCallback(() => {
-        const nextViews = viewStore ? viewStore.listViews() : [];
-        setViews(prev => (sameViews(prev, nextViews) ? prev : nextViews));
-    }, [viewStore]);
-    const urlSyncRef = useRef(null);
-    const autoAppliedRef = useRef(false);
-    const urlAppliedRef = useRef(false);
-    const lastGridApiRef = useRef(null);
-    useEffect(() => {
-        syncViewsFromStore();
-        commitActiveViewId(null);
-        if (viewStore) {
-            autoAppliedRef.current = false;
-        }
-    }, [syncViewsFromStore, viewStore, commitActiveViewId]);
     const callbacksRef = useRef({
         onError,
-        onParseError: coreOptions.onParseError
+        onParseError: coreOptions.onParseError,
+        history
     });
     useEffect(() => {
-        callbacksRef.current = { onError, onParseError: coreOptions.onParseError };
+        callbacksRef.current = {
+            onError,
+            onParseError: coreOptions.onParseError,
+            history
+        };
     });
+    const historyKind = history instanceof Function ? 'function' : history;
+    const followsPopstate = popstate ?? historyKind === 'push';
+    const addressBar = useMemo(() => ({
+        history: historyKind === 'function'
+            ? url => {
+                const write = callbacksRef.current.history;
+                if (write instanceof Function)
+                    write(url);
+            }
+            : historyKind,
+        popstate: followsPopstate
+    }), [historyKind, followsPopstate]);
     const contextRef = useRef('initialization');
+    const sessionRef = useRef(newSession(null, undefined));
+    const liveSyncRef = useRef(null);
+    const loadStoppedRef = useRef(false);
     const reportFailure = useCallback((cause, context) => {
         const error = toError(cause);
         const callbacks = callbacksRef.current;
@@ -178,465 +126,299 @@ export function useAGGridUrlSync(gridApi, options = {}) {
     const reportNotReady = useCallback((operation, context) => {
         reportFailure(new URLSyncError(`${operation} called while the hook is not ready.`, undefined, { code: 'NOT_READY' }), context);
     }, [reportFailure]);
+    const dropSync = useCallback((current) => {
+        sessionRef.current.activeViewId = current.sync.getSnapshot().activeViewId;
+        sessionRef.current.handover = handOver(current.sync);
+        current.stopPopstate();
+        current.sync.destroy();
+        holder.set(null);
+        liveSyncRef.current = null;
+    }, [holder]);
+    const activeSync = useCallback(() => {
+        const sync = holder.get();
+        return sync?.getSnapshot().status === 'active' ? sync : null;
+    }, [holder]);
+    const keepApplyIssues = useCallback((issues) => {
+        sessionRef.current.applyIssues = dataIssues(issues);
+        holder.setCarriedIssues(NO_ISSUES);
+    }, [holder]);
+    const loadAndKeep = useCallback((sync, id) => {
+        loadStoppedRef.current = false;
+        sync.loadView(id);
+        if (!loadStoppedRef.current)
+            keepApplyIssues(NO_ISSUES);
+    }, [keepApplyIssues]);
     useEffect(() => {
-        if (gridApi && enabledWhenReady) {
-            if (lastGridApiRef.current && lastGridApiRef.current !== gridApi) {
-                urlSyncRef.current?.destroy();
-                urlSyncRef.current = null;
-                autoAppliedRef.current = false;
-                urlAppliedRef.current = false;
-                commitActiveViewId(null);
-                setApplyIssues(NO_ISSUES);
-            }
-            if (!urlSyncRef.current) {
-                try {
-                    urlSyncRef.current = new AGGridUrlSync(gridApi, {
-                        ...coreOptions,
-                        onParseError: issue => reportFailure(issue, contextRef.current)
-                    });
-                    setIsReady(true);
-                    lastGridApiRef.current = gridApi;
-                }
-                catch (error) {
-                    reportFailure(error, 'initialization');
-                    setIsReady(false);
-                }
-            }
+        const live = gridApi && enabledWhenReady ? gridApi : null;
+        const current = liveSyncRef.current;
+        const newGrid = live !== sessionRef.current.grid;
+        if (newGrid) {
+            if (current)
+                dropSync(current);
+            sessionRef.current = newSession(live, storageKey);
+        }
+        const session = sessionRef.current;
+        const sameKey = session.storageKey === storageKey;
+        const autoApply = autoApplyOnMount &&
+            (!session.autoApplied || (!sameKey && viewStore !== null));
+        if (current &&
+            !newGrid &&
+            current.urlOptions === urlOptions &&
+            current.addressBar === addressBar &&
+            current.viewStore === viewStore &&
+            !autoApply) {
+            return;
         }
-        else {
-            if (urlSyncRef.current) {
-                urlSyncRef.current.destroy();
-                urlSyncRef.current = null;
-                autoAppliedRef.current = false;
-                urlAppliedRef.current = false;
-                commitActiveViewId(null);
-                setApplyIssues(NO_ISSUES);
-            }
-            setIsReady(false);
-            lastGridApiRef.current = null;
+        if (current && !newGrid)
+            dropSync(current);
+        if (!live) {
+            holder.setIdleViews(viewStore?.listViews() ?? []);
+            return;
         }
-    }, [
-        gridApi,
-        enabledWhenReady,
-        coreOptions,
-        reportFailure,
-        commitActiveViewId
-    ]);
-    const urlHasFilterParams = useCallback(() => {
-        if (typeof window === 'undefined')
-            return false;
-        const options = resolveOptions(coreOptions);
-        const prefix = resolveParamPrefix(options.paramPrefix);
-        const { groupedParam } = options;
-        const search = window.location.search;
-        const params = new URLSearchParams(search);
-        let hasFilterParam = false;
-        for (const key of params.keys()) {
-            if (key.startsWith(prefix) || key === groupedParam) {
-                hasFilterParam = true;
-                break;
+        const kept = sameKey ? session.activeViewId : null;
+        session.storageKey = storageKey;
+        session.activeViewId = null;
+        if (!sameKey && viewStore)
+            session.autoApplied = false;
+        const landsOnCreate = autoApply && viewStore !== null && !session.urlApplied;
+        if (autoApply)
+            session.autoApplied = true;
+        if (landsOnCreate)
+            session.urlApplied = true;
+        let urlIssues = [];
+        let urlPhase = 'create';
+        const keptView = autoApply ? null : kept;
+        const createContext = keptView === null ? 'auto-apply-filters' : 'initialization';
+        const onIssue = ({ issue, source }) => {
+            if (source === 'api' && LOAD_STOP_CODES.has(issue.code)) {
+                loadStoppedRef.current = true;
             }
-        }
-        if (!hasFilterParam)
-            return false;
-        const probeConfig = {
-            ...options,
-            onParseError: () => { }
+            if (source === 'url' && urlPhase !== 'live' && isDataIssue(issue)) {
+                urlIssues.push(issue);
+            }
+            const urlContext = urlPhase === 'popstate'
+                ? 'popstate'
+                : issue.code === 'HISTORY_WRITE_FAILED'
+                    ? 'filter-change'
+                    : createContext;
+            reportFailure(issue, source === 'grid'
+                ? WRITE_CODES.has(issue.code)
+                    ? 'filter-change'
+                    : 'update-state'
+                : source === 'url'
+                    ? urlContext
+                    : contextRef.current);
+        };
+        const beforePopstate = () => {
+            urlPhase = 'popstate';
+            urlIssues = [];
         };
+        const afterPopstate = () => {
+            urlPhase = 'live';
+            keepApplyIssues(urlIssues);
+        };
+        const listens = addressBar.popstate && hasWindow();
+        if (listens)
+            window.addEventListener('popstate', beforePopstate);
+        const stopPopstate = () => {
+            if (!listens)
+                return;
+            window.removeEventListener('popstate', beforePopstate);
+            window.removeEventListener('popstate', afterPopstate);
+        };
+        let sync;
+        contextRef.current = 'initialization';
+        holder.setCarriedIssues(session.applyIssues);
+        const { handover } = session;
+        session.handover = null;
         try {
-            return Object.keys(parseFilters(search, probeConfig)).length > 0;
+            sync = createSync(gridUrlSyncOptions(live, urlOptions, onIssue, viewStore ?? undefined, landsOnCreate, addressBar), { keptViewId: keptView, handover });
+        }
+        catch (error) {
+            stopPopstate();
+            reportFailure(error, 'initialization');
+            return;
         }
-        catch {
-            return false;
+        if (sync.getSnapshot().status !== 'active') {
+            stopPopstate();
         }
-    }, [coreOptions]);
-    useEffect(() => {
-        if (isReady &&
-            autoApplyOnMount &&
-            !autoAppliedRef.current &&
-            urlSyncRef.current) {
-            autoAppliedRef.current = true;
-            try {
-                if (!viewStore ||
-                    !gridApi ||
-                    (!urlAppliedRef.current && urlHasFilterParams())) {
-                    contextRef.current = 'auto-apply-filters';
-                    const applied = urlSyncRef.current.applyFromUrl();
-                    setApplyIssues(keepIssues(applied.issues));
-                    if (viewStore && gridApi) {
-                        urlAppliedRef.current = true;
-                    }
-                    commitActiveViewId(null);
-                    try {
-                        viewStore?.persistActiveViewId(null);
-                    }
-                    catch (error) {
-                        reportFailure(error, 'auto-apply-filters');
-                    }
-                    return;
-                }
-                const storedId = viewStore.getActiveViewId();
-                const stored = storedId
-                    ? viewStore.listViews().find(view => view.id === storedId)
-                    : undefined;
-                if (stored) {
-                    try {
-                        applyModelToGrid(gridApi, stored.filterModel);
-                        commitActiveViewId(stored.id);
-                        setApplyIssues(NO_ISSUES);
-                    }
-                    catch (error) {
-                        reportFailure(error, 'auto-apply-filters');
-                    }
-                }
+        else if (listens) {
+            window.addEventListener('popstate', afterPopstate);
+        }
+        holder.set(sync);
+        liveSyncRef.current = {
+            sync,
+            urlOptions,
+            addressBar,
+            viewStore,
+            stopPopstate
+        };
+        if (sync.getSnapshot().status === 'active') {
+            if (autoApply)
+                contextRef.current = 'auto-apply-filters';
+            if (landsOnCreate &&
+                (sync.getSnapshot().activeViewId !== null ||
+                    pageGivesFilters(urlOptions))) {
+                keepApplyIssues(urlIssues);
             }
-            catch (error) {
-                reportFailure(error, 'auto-apply-filters');
-                setApplyIssues(keepIssues([toError(error)]));
+            else if (autoApply && !viewStore) {
+                keepApplyIssues(sync.applyUrl().issues);
+            }
+            else if (autoApply && viewStore && !landsOnCreate) {
+                const pointer = viewStore.getActiveViewId();
+                if (sync.getSnapshot().views.some(view => view.id === pointer)) {
+                    loadAndKeep(sync, pointer);
+                }
             }
         }
+        urlPhase = 'live';
     }, [
-        isReady,
+        gridApi,
+        enabledWhenReady,
+        urlOptions,
+        addressBar,
+        viewStore,
+        storageKey,
         autoApplyOnMount,
-        coreOptions,
+        holder,
         reportFailure,
-        urlHasFilterParams,
-        viewStore,
-        gridApi,
-        commitActiveViewId,
-        applyModelToGrid
+        dropSync,
+        keepApplyIssues,
+        loadAndKeep
     ]);
-    useEffect(() => {
-        if (!isReady || !urlSyncRef.current || !gridApi) {
-            setCurrentUrl('');
-            setHasFilters(false);
-            setWriteIssues(NO_ISSUES);
-            return;
-        }
-        const syncActiveViewToGrid = (fromEvent, source) => {
-            const activeId = activeViewIdRef.current;
-            let applied = appliedModelRef.current;
-            if (!pendingWriteRef.current && (!activeId || !applied || !viewStore)) {
-                return;
-            }
-            let live;
-            try {
-                live = gridApi.getFilterModel() ?? {};
-            }
-            catch {
-                return;
-            }
-            const pending = pendingWriteRef.current;
-            if (pending) {
-                if (!fromEvent)
-                    return;
-                const inWrite = writingRef.current;
-                if (!inWrite &&
-                    pending.before &&
-                    sameFilterModel(live, pending.before)) {
-                    return;
-                }
-                pendingWriteRef.current = null;
-                if (inWrite ||
-                    (source === 'api' &&
-                        couldBeLanding(live, pending.expected, pending.before)) ||
-                    sameFilterModel(live, pending.expected)) {
-                    appliedModelRef.current = live;
-                    return;
-                }
-                applied = pending.expected;
-            }
-            if (!activeId || !applied || !viewStore)
-                return;
-            if (sameFilterModel(live, applied))
-                return;
-            commitActiveViewId(null);
-            try {
-                if (viewStore.getActiveViewId() === activeId) {
-                    viewStore.persistActiveViewId(null);
-                }
-            }
-            catch (error) {
-                reportFailure(error, 'filter-change');
-            }
-        };
-        const updateState = (fromEvent, source) => {
-            syncActiveViewToGrid(fromEvent, source);
-            try {
-                contextRef.current = 'update-state';
-                const { url, hasFilters, issues } = urlSyncRef.current.getUrlState();
-                setCurrentUrl(url);
-                setHasFilters(hasFilters);
-                setWriteIssues(keepIssues(issues));
-            }
-            catch (error) {
-                reportFailure(error, 'update-state');
-            }
-        };
-        const onFilterChanged = (event) => updateState(true, event?.source);
-        gridApi.addEventListener('filterChanged', onFilterChanged);
-        updateState(false);
-        return () => {
-            gridApi.removeEventListener('filterChanged', onFilterChanged);
-        };
-    }, [isReady, gridApi, reportFailure, viewStore, commitActiveViewId]);
-    useEffect(() => {
-        return () => {
-            if (urlSyncRef.current) {
-                urlSyncRef.current.destroy();
-                urlSyncRef.current = null;
-            }
-        };
-    }, []);
+    useEffect(() => () => {
+        const current = liveSyncRef.current;
+        if (current)
+            dropSync(current);
+    }, [dropSync]);
+    const readOptions = useCallback((context) => resolveOptions({
+        ...urlOptions,
+        onParseError: issue => reportFailure(issue, context)
+    }), [urlOptions, reportFailure]);
     const shareUrl = useCallback((baseUrl) => {
-        if (!urlSyncRef.current) {
-            return (baseUrl ?? (typeof window !== 'undefined' ? window.location.href : ''));
-        }
+        const fallback = baseUrl ?? pageUrl();
+        if (!gridApi || !activeSync())
+            return fallback;
         try {
-            contextRef.current = 'generate-share-url';
-            return urlSyncRef.current.generateUrl(baseUrl);
+            return urlWithFilters(gridApi, fallback, readOptions('generate-share-url'));
         }
         catch (error) {
             reportFailure(error, 'generate-share-url');
-            return (baseUrl ?? (typeof window !== 'undefined' ? window.location.href : ''));
+            return fallback;
         }
-    }, [reportFailure]);
+    }, [gridApi, activeSync, readOptions, reportFailure]);
     const getQueryParams = useCallback(() => {
-        if (!urlSyncRef.current) {
+        if (!gridApi || !activeSync())
             return '';
-        }
         try {
-            contextRef.current = 'get-query-params';
-            return urlSyncRef.current.getQueryParams();
+            const url = urlWithFilters(gridApi, pageUrl(), readOptions('get-query-params'));
+            return new URL(url).search;
         }
         catch (error) {
             reportFailure(error, 'get-query-params');
             return '';
         }
-    }, [reportFailure]);
+    }, [gridApi, activeSync, readOptions, reportFailure]);
     const applyUrlFilters = useCallback((url) => {
-        if (!urlSyncRef.current) {
+        const sync = activeSync();
+        if (!sync) {
             reportNotReady('applyUrlFilters', 'apply-url-filters');
             return;
         }
-        try {
-            const sync = urlSyncRef.current;
-            contextRef.current = 'apply-url-filters';
-            const applied = { issues: NO_ISSUES };
-            writeOverPendingView(() => {
-                applied.issues = sync.applyFromUrl(url).issues;
-            });
-            setApplyIssues(keepIssues(applied.issues));
-        }
-        catch (error) {
-            reportFailure(error, 'apply-url-filters');
-            setApplyIssues(keepIssues([toError(error)]));
-        }
-    }, [reportFailure, reportNotReady, writeOverPendingView]);
+        contextRef.current = 'apply-url-filters';
+        keepApplyIssues(sync.applyUrl(url).issues);
+    }, [activeSync, reportNotReady, keepApplyIssues]);
     const clearFilters = useCallback(() => {
-        if (!urlSyncRef.current) {
+        const sync = activeSync();
+        if (!sync) {
             reportNotReady('clearFilters', 'clear-filters');
             return;
         }
-        try {
-            const sync = urlSyncRef.current;
-            contextRef.current = 'clear-filters';
-            writeOverPendingView(() => sync.clearFilters());
-            setApplyIssues(NO_ISSUES);
-        }
-        catch (error) {
-            reportFailure(error, 'clear-filters');
-        }
-    }, [reportFailure, reportNotReady, writeOverPendingView]);
+        contextRef.current = 'clear-filters';
+        keepApplyIssues(sync.applyFilters({}).issues);
+    }, [activeSync, reportNotReady, keepApplyIssues]);
     const parseUrlFilters = useCallback((url) => {
         if (!gridApi) {
             return {};
         }
         try {
-            return parseFilters(url, coreOptions);
+            return parseFilters(url, {
+                ...urlOptions,
+                onParseError: issue => callbacksRef.current.onParseError?.(issue)
+            });
         }
         catch (error) {
             reportFailure(error, 'parse-url-filters');
             return {};
         }
-    }, [coreOptions, gridApi, reportFailure]);
+    }, [urlOptions, gridApi, reportFailure]);
     const applyFilters = useCallback((filters) => {
-        if (!urlSyncRef.current) {
+        const sync = activeSync();
+        if (!sync) {
             reportNotReady('applyFilters', 'apply-filters');
             return;
         }
-        try {
-            const sync = urlSyncRef.current;
-            contextRef.current = 'apply-filters';
-            const applied = { issues: NO_ISSUES };
-            writeOverPendingView(() => {
-                applied.issues = sync.applyFilters(filters).issues;
-            });
-            setApplyIssues(keepIssues(applied.issues));
-        }
-        catch (error) {
-            reportFailure(error, 'apply-filters');
-        }
-    }, [reportFailure, reportNotReady, writeOverPendingView]);
-    const getFiltersAsFormat = useCallback((format) => {
-        if (!urlSyncRef.current) {
+        contextRef.current = 'apply-filters';
+        keepApplyIssues(sync.applyFilters(filters).issues);
+    }, [activeSync, reportNotReady, keepApplyIssues]);
+    const getFiltersAsFormat = useCallback((asFormat) => {
+        if (!gridApi || !activeSync())
             return '';
-        }
         try {
-            contextRef.current = 'get-filters-as-format';
-            return urlSyncRef.current.getFiltersAsFormat(format);
+            return filtersAsFormat(gridApi, asFormat, readOptions('get-filters-as-format'));
         }
         catch (error) {
             reportFailure(error, 'get-filters-as-format');
             return '';
         }
-    }, [reportFailure]);
-    const getCurrentFormat = useCallback(() => {
-        if (!urlSyncRef.current) {
-            return DEFAULT_CONFIG.serialization;
-        }
-        try {
-            return urlSyncRef.current.getSerializationMode();
-        }
-        catch (error) {
-            reportFailure(error, 'get-current-format');
-            return DEFAULT_CONFIG.serialization;
-        }
-    }, [reportFailure]);
+    }, [gridApi, activeSync, readOptions, reportFailure]);
+    const getSerializationMode = useCallback(() => activeSync() ? serialization : DEFAULT_CONFIG.serialization, [activeSync, serialization]);
+    const getCurrentFormat = getSerializationMode;
     const saveView = useCallback((name) => {
-        if (!viewStore || !enabledWhenReady) {
+        if (!viewStore || !enabledWhenReady)
             return null;
-        }
-        if (!urlSyncRef.current || !gridApi) {
+        const sync = activeSync();
+        if (!sync) {
             reportNotReady('saveView', 'save-view');
             return null;
         }
-        try {
-            const view = viewStore.saveView(name, callGrid(() => gridApi.getFilterModel()));
-            syncViewsFromStore();
-            commitActiveViewId(view.id);
-            appliedModelRef.current = view.filterModel;
-            pendingWriteRef.current = null;
-            return view;
-        }
-        catch (error) {
-            reportFailure(error, 'save-view');
-            return null;
-        }
-    }, [
-        viewStore,
-        gridApi,
-        reportFailure,
-        syncViewsFromStore,
-        reportNotReady,
-        enabledWhenReady,
-        commitActiveViewId
-    ]);
+        contextRef.current = 'save-view';
+        return sync.saveView(name);
+    }, [viewStore, enabledWhenReady, activeSync, reportNotReady]);
     const loadView = useCallback((id) => {
-        if (!viewStore || !enabledWhenReady) {
+        if (!viewStore || !enabledWhenReady)
             return;
-        }
-        if (!urlSyncRef.current || !gridApi) {
+        const sync = activeSync();
+        if (!sync) {
             reportNotReady('loadView', 'load-view');
             return;
         }
-        try {
-            const previous = activeViewIdRef.current;
-            const previousApplied = appliedModelRef.current;
-            const rollBack = () => {
-                commitActiveViewId(previous);
-                appliedModelRef.current = previousApplied;
-            };
-            if (id == null) {
-                commitActiveViewId(null);
-                try {
-                    applyModelToGrid(gridApi, {});
-                }
-                catch (error) {
-                    rollBack();
-                    throw error;
-                }
-                setApplyIssues(NO_ISSUES);
-                viewStore.persistActiveViewId(null);
-                return;
-            }
-            const view = viewStore
-                .listViews()
-                .find(candidate => candidate.id === id);
-            if (!view) {
-                syncViewsFromStore();
-                reportFailure(new URLSyncError(`No saved view with id "${id}"`, undefined, {
-                    code: 'VIEW_NOT_FOUND'
-                }), 'load-view');
-                return;
-            }
-            commitActiveViewId(view.id);
-            try {
-                applyModelToGrid(gridApi, view.filterModel);
-            }
-            catch (error) {
-                rollBack();
-                throw error;
-            }
-            setApplyIssues(NO_ISSUES);
-            if (activeViewIdRef.current === view.id) {
-                viewStore.persistActiveViewId(view.id);
-            }
-        }
-        catch (error) {
-            reportFailure(error, 'load-view');
-        }
-    }, [
-        gridApi,
-        viewStore,
-        reportFailure,
-        reportNotReady,
-        syncViewsFromStore,
-        enabledWhenReady,
-        commitActiveViewId,
-        applyModelToGrid
-    ]);
+        contextRef.current = 'load-view';
+        loadAndKeep(sync, id);
+    }, [viewStore, enabledWhenReady, activeSync, reportNotReady, loadAndKeep]);
     const deleteView = useCallback((id) => {
-        if (!viewStore || !enabledWhenReady) {
+        if (!viewStore || !enabledWhenReady)
+            return;
+        const sync = holder.get();
+        if (sync) {
+            contextRef.current = 'delete-view';
+            sync.deleteView(id);
             return;
         }
         try {
-            const wasActive = activeViewIdRef.current === id;
-            const view = viewStore.listViews().find(entry => entry.id === id);
-            const applied = appliedModelRef.current ?? view?.filterModel;
             viewStore.deleteView(id);
-            syncViewsFromStore();
-            if (wasActive) {
-                commitActiveViewId(null);
-            }
-            if (wasActive && applied !== undefined && gridApi !== null) {
-                try {
-                    const current = callGrid(() => gridApi.getFilterModel());
-                    if (current && sameFilterModel(current, applied)) {
-                        callGrid(() => gridApi.setFilterModel({}));
-                    }
-                }
-                catch (error) {
-                    reportFailure(error, 'delete-view');
-                }
-            }
         }
         catch (error) {
             reportFailure(error, 'delete-view');
         }
-    }, [
-        viewStore,
-        gridApi,
-        reportFailure,
-        syncViewsFromStore,
-        enabledWhenReady,
-        commitActiveViewId
-    ]);
-    const issues = useMemo(() => applyIssues.length === 0
-        ? writeIssues
-        : writeIssues.length === 0
-            ? applyIssues
-            : [...applyIssues, ...writeIssues], [applyIssues, writeIssues]);
+        holder.setIdleViews(viewStore.listViews());
+    }, [viewStore, enabledWhenReady, holder, reportFailure]);
+    const views = useMemo(() => [...snapshot.views], [snapshot.views]);
+    const { activeViewId } = snapshot;
+    const issues = useMemo(() => {
+        const data = isReady ? snapshot.issues.filter(isDataIssue) : NO_ISSUES;
+        return data.length ? data : NO_ISSUES;
+    }, [isReady, snapshot.issues]);
     const hookApi = useMemo(() => ({
         shareUrl,
         getQueryParams,
@@ -649,6 +431,7 @@ export function useAGGridUrlSync(gridApi, options = {}) {
         parseUrlFilters,
         applyFilters,
         getFiltersAsFormat,
+        getSerializationMode,
         getCurrentFormat,
         views,
         activeViewId,
@@ -667,6 +450,7 @@ export function useAGGridUrlSync(gridApi, options = {}) {
         parseUrlFilters,
         applyFilters,
         getFiltersAsFormat,
+        getSerializationMode,
         getCurrentFormat,
         views,
         activeViewId,