ag-grid-url-sync 0.5.0 → 0.5.2

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

@@ -1,588 +1,425 @@
 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 { 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 } from '../core/validation.js';
-function sameViews(a, b) {
-    return a.length === b.length && JSON.stringify(a) === JSON.stringify(b);
+import { DEFAULT_CONFIG, resolveOptions } from '../core/options.js';
+import { toError } from '../core/to-error.js';
+import { isDataIssue, shouldThrow } from '../core/issues.js';
+import { URLSyncError } from '../core/types.js';
+import { createSyncHolder } from './sync-holder.js';
+import { gridUrlSyncOptions } from './sync-options.js';
+const NO_ISSUES = [];
+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 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])));
+function dataIssues(issues) {
+    const data = issues.filter(isDataIssue);
+    return data.length ? data : NO_ISSUES;
 }
-function applicableModel(gridApi, model) {
-    if (typeof gridApi.getColumn !== 'function')
-        return model;
-    return Object.fromEntries(Object.entries(model).filter(([colId]) => gridApi.getColumn(colId)?.isFilterAllowed() ?? false));
+function pageGivesFilters(options) {
+    try {
+        const filters = parseFilters(pageUrl(), {
+            ...options,
+            onParseError: () => { }
+        });
+        return Object.keys(filters).length > 0;
+    }
+    catch {
+        return false;
+    }
 }
-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 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 pageUrl() {
+    return hasWindow() ? window.location.href : '';
 }
 export function useAGGridUrlSync(gridApi, options = {}) {
-    const { autoApplyOnMount = false, enabledWhenReady = true, onError, storageKey, ...coreOptions } = options;
-    const [isReady, setIsReady] = useState(false);
-    const [currentUrl, setCurrentUrl] = useState('');
-    const [hasFilters, setHasFilters] = useState(false);
+    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)
+    const callbacksRef = useRef({
+        onError,
+        onParseError: coreOptions.onParseError,
+        history
+    });
+    useEffect(() => {
+        callbacksRef.current = {
+            onError,
+            onParseError: coreOptions.onParseError,
+            history
         };
-        writingRef.current = true;
-        try {
-            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 {
+    });
+    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;
+        if (isDataIssue(error)) {
+            callbacks.onParseError?.(error);
         }
-        if (live && (!before || !sameFilterModel(live, before))) {
-            pendingWriteRef.current = null;
-            appliedModelRef.current = live;
+        else {
+            callbacks.onError?.(error, context);
         }
     }, []);
-    const writeOverPendingView = useCallback((write) => {
-        const pending = pendingWriteRef.current;
-        if (!pending || !gridApi) {
-            write();
+    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(() => {
+        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;
         }
-        const applied = appliedModelRef.current;
-        const activeId = activeViewIdRef.current;
-        let before = null;
-        try {
-            before = gridApi.getFilterModel() ?? {};
-        }
-        catch {
+        if (current && !newGrid)
+            dropSync(current);
+        if (!live) {
+            holder.setIdleViews(viewStore?.listViews() ?? []);
+            return;
         }
-        pendingWriteRef.current = null;
-        appliedModelRef.current = pending.expected;
-        const reinstate = () => {
-            if (pendingWriteRef.current || activeViewIdRef.current !== activeId) {
-                return;
+        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 (source === 'url' && urlPhase !== 'live' && isDataIssue(issue)) {
+                urlIssues.push(issue);
             }
-            pendingWriteRef.current = pending;
-            appliedModelRef.current = applied;
+            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 {
-            write();
+            sync = createSync(gridUrlSyncOptions(live, urlOptions, onIssue, viewStore ?? undefined, landsOnCreate, addressBar), { keptViewId: keptView, handover });
         }
         catch (error) {
-            reinstate();
-            throw error;
-        }
-        if (!before)
+            stopPopstate();
+            reportFailure(error, 'initialization');
             return;
-        try {
-            const live = gridApi.getFilterModel() ?? {};
-            if (sameFilterModel(live, before))
-                reinstate();
         }
-        catch {
+        if (sync.getSnapshot().status !== 'active') {
+            stopPopstate();
         }
-    }, [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;
+        else if (listens) {
+            window.addEventListener('popstate', afterPopstate);
         }
-    }, [syncViewsFromStore, viewStore, commitActiveViewId]);
-    const handleError = useCallback((error, context) => {
-        const errorObj = error instanceof Error ? error : new Error(String(error));
-        if (onError) {
-            onError(errorObj, context);
-        }
-        else if (process.env.NODE_ENV === 'development') {
-            console.error(`AG Grid URL Sync Error [${context}]:`, errorObj);
-        }
-    }, [onError]);
-    useEffect(() => {
-        if (gridApi && enabledWhenReady) {
-            if (lastGridApiRef.current && lastGridApiRef.current !== gridApi) {
-                urlSyncRef.current?.destroy();
-                urlSyncRef.current = null;
-                autoAppliedRef.current = false;
-                urlAppliedRef.current = false;
-                commitActiveViewId(null);
-            }
-            if (!urlSyncRef.current) {
-                try {
-                    urlSyncRef.current = new AGGridUrlSync(gridApi, coreOptions);
-                    setIsReady(true);
-                    lastGridApiRef.current = gridApi;
-                }
-                catch (error) {
-                    handleError(error, 'initialization');
-                    setIsReady(false);
-                }
-            }
-        }
-        else {
-            if (urlSyncRef.current) {
-                urlSyncRef.current.destroy();
-                urlSyncRef.current = null;
-                autoAppliedRef.current = false;
-                urlAppliedRef.current = false;
-                commitActiveViewId(null);
+        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);
             }
-            setIsReady(false);
-            lastGridApiRef.current = null;
-        }
-    }, [gridApi, enabledWhenReady, coreOptions, handleError, commitActiveViewId]);
-    const urlHasFilterParams = useCallback(() => {
-        if (typeof window === 'undefined')
-            return false;
-        const rawPrefix = coreOptions.paramPrefix || DEFAULT_CONFIG.paramPrefix;
-        const prefix = rawPrefix.endsWith('_') ? rawPrefix : `${rawPrefix}_`;
-        const groupedParam = coreOptions.groupedParam ?? DEFAULT_CONFIG.groupedParam;
-        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;
+            else if (autoApply && !viewStore) {
+                keepApplyIssues(sync.applyUrl().issues);
             }
-        }
-        if (!hasFilterParam)
-            return false;
-        const probeConfig = {
-            paramPrefix: coreOptions.paramPrefix ?? DEFAULT_CONFIG.paramPrefix,
-            maxValueLength: coreOptions.maxValueLength ?? DEFAULT_CONFIG.maxValueLength,
-            onParseError: () => { },
-            serialization: coreOptions.serialization ?? DEFAULT_CONFIG.serialization,
-            groupedParam: coreOptions.groupedParam ?? DEFAULT_CONFIG.groupedParam,
-            format: coreOptions.format ?? DEFAULT_CONFIG.format
-        };
-        try {
-            return Object.keys(parseFilters(search, probeConfig)).length > 0;
-        }
-        catch {
-            return false;
-        }
-    }, [coreOptions]);
-    useEffect(() => {
-        if (isReady &&
-            autoApplyOnMount &&
-            !autoAppliedRef.current &&
-            urlSyncRef.current) {
-            autoAppliedRef.current = true;
-            try {
-                if (!viewStore ||
-                    !gridApi ||
-                    (!urlAppliedRef.current && urlHasFilterParams())) {
-                    urlSyncRef.current.applyFromUrl();
-                    if (viewStore && gridApi) {
-                        urlAppliedRef.current = true;
-                    }
-                    commitActiveViewId(null);
-                    try {
-                        viewStore?.persistActiveViewId(null);
-                    }
-                    catch (error) {
-                        handleError(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);
-                    }
-                    catch (error) {
-                        handleError(error, 'auto-apply-filters');
-                    }
+            else if (autoApply && viewStore && !landsOnCreate) {
+                const pointer = viewStore.getActiveViewId();
+                if (sync.getSnapshot().views.some(view => view.id === pointer)) {
+                    loadAndKeep(sync, pointer);
                 }
             }
-            catch (error) {
-                handleError(error, 'auto-apply-filters');
-                coreOptions.onParseError?.(error);
-            }
         }
+        urlPhase = 'live';
     }, [
-        isReady,
-        autoApplyOnMount,
-        coreOptions,
-        handleError,
-        urlHasFilterParams,
-        viewStore,
         gridApi,
-        commitActiveViewId,
-        applyModelToGrid
+        enabledWhenReady,
+        urlOptions,
+        addressBar,
+        viewStore,
+        storageKey,
+        autoApplyOnMount,
+        holder,
+        reportFailure,
+        dropSync,
+        keepApplyIssues,
+        loadAndKeep
     ]);
-    useEffect(() => {
-        if (!isReady || !urlSyncRef.current || !gridApi) {
-            setCurrentUrl('');
-            setHasFilters(false);
-            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) {
-                handleError(error, 'filter-change');
-            }
-        };
-        const updateState = (fromEvent, source) => {
-            syncActiveViewToGrid(fromEvent, source);
-            try {
-                const { url, hasFilters } = urlSyncRef.current.getUrlState();
-                setCurrentUrl(url);
-                setHasFilters(hasFilters);
-            }
-            catch (error) {
-                handleError(error, 'update-state');
-            }
-        };
-        const onFilterChanged = (event) => updateState(true, event?.source);
-        gridApi.addEventListener('filterChanged', onFilterChanged);
-        updateState(false);
-        return () => {
-            gridApi.removeEventListener('filterChanged', onFilterChanged);
-        };
-    }, [isReady, gridApi, handleError, 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 {
-            return urlSyncRef.current.generateUrl(baseUrl);
+            return urlWithFilters(gridApi, fallback, readOptions('generate-share-url'));
         }
         catch (error) {
-            handleError(error, 'generate-share-url');
-            return (baseUrl ?? (typeof window !== 'undefined' ? window.location.href : ''));
+            reportFailure(error, 'generate-share-url');
+            return fallback;
         }
-    }, [handleError]);
+    }, [gridApi, activeSync, readOptions, reportFailure]);
     const getQueryParams = useCallback(() => {
-        if (!urlSyncRef.current) {
+        if (!gridApi || !activeSync())
             return '';
-        }
         try {
-            return urlSyncRef.current.getQueryParams();
+            const url = urlWithFilters(gridApi, pageUrl(), readOptions('get-query-params'));
+            return new URL(url).search;
         }
         catch (error) {
-            handleError(error, 'get-query-params');
+            reportFailure(error, 'get-query-params');
             return '';
         }
-    }, [handleError]);
+    }, [gridApi, activeSync, readOptions, reportFailure]);
     const applyUrlFilters = useCallback((url) => {
-        if (!urlSyncRef.current) {
-            const warningMessage = 'applyUrlFilters called while the hook is not ready.';
-            console.warn(warningMessage);
-            coreOptions.onParseError?.(new Error(warningMessage));
+        const sync = activeSync();
+        if (!sync) {
+            reportNotReady('applyUrlFilters', 'apply-url-filters');
             return;
         }
-        try {
-            const sync = urlSyncRef.current;
-            writeOverPendingView(() => sync.applyFromUrl(url));
-        }
-        catch (error) {
-            handleError(error, 'apply-url-filters');
-            coreOptions.onParseError?.(error);
-        }
-    }, [coreOptions, handleError, writeOverPendingView]);
+        contextRef.current = 'apply-url-filters';
+        keepApplyIssues(sync.applyUrl(url).issues);
+    }, [activeSync, reportNotReady, keepApplyIssues]);
     const clearFilters = useCallback(() => {
-        if (!urlSyncRef.current) {
-            const warningMessage = 'clearFilters called while the hook is not ready.';
-            console.warn(warningMessage);
-            coreOptions.onParseError?.(new Error(warningMessage));
+        const sync = activeSync();
+        if (!sync) {
+            reportNotReady('clearFilters', 'clear-filters');
             return;
         }
-        try {
-            const sync = urlSyncRef.current;
-            writeOverPendingView(() => sync.clearFilters());
-        }
-        catch (error) {
-            handleError(error, 'clear-filters');
-        }
-    }, [handleError, coreOptions, writeOverPendingView]);
+        contextRef.current = 'clear-filters';
+        keepApplyIssues(sync.applyFilters({}).issues);
+    }, [activeSync, reportNotReady, keepApplyIssues]);
     const parseUrlFilters = useCallback((url) => {
         if (!gridApi) {
             return {};
         }
         try {
-            const config = {
-                gridApi,
-                paramPrefix: coreOptions.paramPrefix ?? DEFAULT_CONFIG.paramPrefix,
-                maxValueLength: coreOptions.maxValueLength ?? DEFAULT_CONFIG.maxValueLength,
-                onParseError: coreOptions.onParseError ?? (() => { }),
-                serialization: coreOptions.serialization ?? DEFAULT_CONFIG.serialization,
-                groupedParam: coreOptions.groupedParam ?? DEFAULT_CONFIG.groupedParam,
-                format: coreOptions.format ?? DEFAULT_CONFIG.format
-            };
-            return parseFilters(url, config);
+            return parseFilters(url, {
+                ...urlOptions,
+                onParseError: issue => callbacksRef.current.onParseError?.(issue)
+            });
         }
         catch (error) {
-            handleError(error, 'parse-url-filters');
-            coreOptions.onParseError?.(error);
+            reportFailure(error, 'parse-url-filters');
             return {};
         }
-    }, [coreOptions, gridApi, handleError]);
+    }, [urlOptions, gridApi, reportFailure]);
     const applyFilters = useCallback((filters) => {
-        if (!urlSyncRef.current) {
-            const warningMessage = 'applyFilters called while the hook is not ready.';
-            console.warn(warningMessage);
-            coreOptions.onParseError?.(new Error(warningMessage));
+        const sync = activeSync();
+        if (!sync) {
+            reportNotReady('applyFilters', 'apply-filters');
             return;
         }
-        try {
-            const sync = urlSyncRef.current;
-            writeOverPendingView(() => sync.applyFilters(filters));
-        }
-        catch (error) {
-            handleError(error, 'apply-filters');
-        }
-    }, [handleError, coreOptions, 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 {
-            return urlSyncRef.current.getFiltersAsFormat(format);
+            return filtersAsFormat(gridApi, asFormat, readOptions('get-filters-as-format'));
         }
         catch (error) {
-            handleError(error, 'get-filters-as-format');
+            reportFailure(error, 'get-filters-as-format');
             return '';
         }
-    }, [handleError]);
-    const getCurrentFormat = useCallback(() => {
-        if (!urlSyncRef.current) {
-            return DEFAULT_CONFIG.serialization;
-        }
-        try {
-            return urlSyncRef.current.getSerializationMode();
-        }
-        catch (error) {
-            handleError(error, 'get-current-format');
-            return DEFAULT_CONFIG.serialization;
-        }
-    }, [handleError]);
-    const reportNotReady = useCallback((operation, context) => {
-        handleError(new Error(`${operation} called while the hook is not ready.`), context);
-    }, [handleError]);
+    }, [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, gridApi.getFilterModel());
-            syncViewsFromStore();
-            commitActiveViewId(view.id);
-            appliedModelRef.current = view.filterModel;
-            pendingWriteRef.current = null;
-            return view;
-        }
-        catch (error) {
-            handleError(error, 'save-view');
-            return null;
-        }
-    }, [
-        viewStore,
-        gridApi,
-        handleError,
-        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;
-                }
-                viewStore.persistActiveViewId(null);
-                return;
-            }
-            const view = viewStore
-                .listViews()
-                .find(candidate => candidate.id === id);
-            if (!view) {
-                syncViewsFromStore();
-                handleError(new Error(`No saved view with id "${id}"`), 'load-view');
-                return;
-            }
-            commitActiveViewId(view.id);
-            try {
-                applyModelToGrid(gridApi, view.filterModel);
-            }
-            catch (error) {
-                rollBack();
-                throw error;
-            }
-            if (activeViewIdRef.current === view.id) {
-                viewStore.persistActiveViewId(view.id);
-            }
-        }
-        catch (error) {
-            handleError(error, 'load-view');
-        }
-    }, [
-        gridApi,
-        viewStore,
-        handleError,
-        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 = gridApi.getFilterModel();
-                    if (current && sameFilterModel(current, applied)) {
-                        gridApi.setFilterModel({});
-                    }
-                }
-                catch (error) {
-                    handleError(error, 'delete-view');
-                }
-            }
         }
         catch (error) {
-            handleError(error, 'delete-view');
-        }
-    }, [
-        viewStore,
-        gridApi,
-        handleError,
-        syncViewsFromStore,
-        enabledWhenReady,
-        commitActiveViewId
-    ]);
-    return useMemo(() => ({
+            reportFailure(error, 'delete-view');
+        }
+        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,
         applyUrlFilters,
@@ -590,9 +427,11 @@ export function useAGGridUrlSync(gridApi, options = {}) {
         isReady,
         currentUrl,
         hasFilters,
+        issues,
         parseUrlFilters,
         applyFilters,
         getFiltersAsFormat,
+        getSerializationMode,
         getCurrentFormat,
         views,
         activeViewId,
@@ -607,9 +446,11 @@ export function useAGGridUrlSync(gridApi, options = {}) {
         isReady,
         currentUrl,
         hasFilters,
+        issues,
         parseUrlFilters,
         applyFilters,
         getFiltersAsFormat,
+        getSerializationMode,
         getCurrentFormat,
         views,
         activeViewId,
@@ -617,5 +458,9 @@ export function useAGGridUrlSync(gridApi, options = {}) {
         loadView,
         deleteView
     ]);
+    const thrownIssue = issues.find(issue => shouldThrow(throwOnError, issue));
+    if (thrownIssue)
+        throw thrownIssue;
+    return hookApi;
 }
 //# sourceMappingURL=use-ag-grid-url-sync.js.map