ag-grid-url-sync 0.5.1 → 0.5.2

package/dist/core/grid-url-sync.js

@@ -0,0 +1,738 @@
+import { URLSyncError } from './types.js';
+import { DEFAULT_CONFIG } from './options.js';
+import { codecOptions, individual } from './codecs.js';
+import { reportIssue, rethrowIfThrown, toIssue } from './issues.js';
+import { toError } from './to-error.js';
+import { parseUrlFilters } from './url-parser.js';
+import { generateUrl } from './url-generator.js';
+import { resolveParamPrefix } from './individual-params.js';
+import { fromGridModel, getFilterModel, toGridModel } from './grid-integration.js';
+import { classifyEvent, modelKey, settleWrite, startWrite, takeOver } from './own-write.js';
+const NO_ISSUES = Object.freeze([]);
+const NO_VIEWS = Object.freeze([]);
+export const IDLE_SNAPSHOT = Object.freeze({
+    status: 'idle',
+    url: '',
+    hasFilters: false,
+    issues: NO_ISSUES,
+    views: NO_VIEWS,
+    activeViewId: null
+});
+function hasWindow() {
+    return typeof window !== 'undefined';
+}
+function sameIssues(a, b) {
+    return (a.length === b.length &&
+        a.every((issue, index) => issue.code === b[index]?.code &&
+            issue.column === b[index]?.column &&
+            issue.message === b[index]?.message));
+}
+export function createGridUrlSync(options) {
+    return createSync(options);
+}
+const handovers = new WeakMap();
+export function handOver(sync) {
+    return handovers.get(sync)?.() ?? null;
+}
+export function createSync(options, start = {}) {
+    const { api, onIssue, views } = options;
+    const codec = codecOptions(options.codec ?? individual());
+    const maxValueLength = options.maxValueLength ?? DEFAULT_CONFIG.maxValueLength;
+    const keys = JSON.stringify({ ...codec, maxValueLength });
+    const listeners = new Set();
+    let status = 'active';
+    let state = {};
+    let url = '';
+    let applyIssues = NO_ISSUES;
+    let readIssues = NO_ISSUES;
+    let writeIssues = NO_ISSUES;
+    const historyMode = options.history ?? 'none';
+    let own = null;
+    let ownSource = 'grid';
+    const listensToPopstate = options.popstate ?? historyMode === 'push';
+    let active = null;
+    let viewList = NO_VIEWS;
+    let snapshot = IDLE_SNAPSHOT;
+    function emit(issue, source) {
+        try {
+            onIssue?.({ issue, source });
+        }
+        catch (error) {
+            reportLater(toError(error));
+        }
+    }
+    function startCall(source, mode) {
+        const issues = [];
+        return {
+            source,
+            issues,
+            options: {
+                ...codec,
+                maxValueLength,
+                onParseError: error => {
+                    if (!(error instanceof URLSyncError))
+                        return;
+                    issues.push(error);
+                    if (mode !== 'collect')
+                        emit(error, source);
+                },
+                throwOnError: mode === 'throw' ? (options.throwOnError ?? false) : false
+            }
+        };
+    }
+    function fail(call, cause, code) {
+        rethrowIfThrown(cause);
+        reportIssue(call.options, toIssue(cause, code));
+    }
+    function refreshViews() {
+        if (!views)
+            return;
+        const next = views.listViews();
+        if (!sameViews(viewList, next))
+            viewList = Object.freeze(next);
+    }
+    function notReady() {
+        const call = startCall('api', 'throw');
+        fail(call, new URLSyncError('The sync is destroyed', undefined, {
+            code: 'NOT_READY'
+        }), 'NOT_READY');
+    }
+    function publish() {
+        const list = [...applyIssues, ...readIssues, ...writeIssues];
+        const hasFilters = Object.keys(state).length > 0;
+        const sameList = sameIssues(snapshot.issues, list);
+        const activeViewId = active?.id ?? null;
+        if (snapshot.status === status &&
+            snapshot.url === url &&
+            snapshot.hasFilters === hasFilters &&
+            snapshot.views === viewList &&
+            snapshot.activeViewId === activeViewId &&
+            sameList) {
+            return;
+        }
+        const issues = sameList
+            ? snapshot.issues
+            : list.length
+                ? Object.freeze(list)
+                : NO_ISSUES;
+        snapshot = Object.freeze({
+            status,
+            url,
+            hasFilters,
+            issues,
+            views: viewList,
+            activeViewId
+        });
+        for (const listener of Array.from(listeners)) {
+            try {
+                listener();
+            }
+            catch (error) {
+                reportLater(toError(error));
+            }
+        }
+    }
+    function readGrid() {
+        const call = startCall('grid', 'collect');
+        try {
+            state = getFilterModel(api, call.options);
+        }
+        catch (cause) {
+            fail(call, cause, 'GRID_ERROR');
+        }
+        url = hasWindow()
+            ? generateUrl(window.location.href, state, call.options)
+            : '';
+        const known = new Set(readIssues.map(issueKey));
+        for (const issue of call.issues) {
+            if (!known.has(issueKey(issue)))
+                emit(issue, 'grid');
+        }
+        readIssues = call.issues.length ? call.issues : NO_ISSUES;
+    }
+    function apply(target, source, mode, onCreate) {
+        const call = startCall(source, mode);
+        let filters;
+        try {
+            filters = parseUrlFilters(target, call.options);
+        }
+        catch (cause) {
+            fail(call, cause, 'INVALID_URL');
+        }
+        const applies = filters && !(onCreate && Object.keys(filters).length === 0);
+        const before = applies ? liveState() : null;
+        let failed = false;
+        if (filters && applies) {
+            let model;
+            try {
+                model = toGridModel(filters, api, call.options);
+            }
+            catch (cause) {
+                own = null;
+                failed = true;
+                fail(call, cause, 'GRID_ERROR');
+            }
+            if (model)
+                failed = !setModel(model, 'url', call);
+        }
+        applyIssues = call.issues.length ? call.issues : NO_ISSUES;
+        readGrid();
+        if (filters && applies && settleUrlWrite(filters, before, failed)) {
+            followActiveView('url');
+        }
+        publish();
+        return { issues: call.issues };
+    }
+    function setModel(model, kind, call) {
+        own = startWrite(own, kind);
+        ownSource = call.source;
+        try {
+            api.setFilterModel(model);
+            return true;
+        }
+        catch (cause) {
+            own = null;
+            fail(call, cause, 'GRID_ERROR');
+            return false;
+        }
+    }
+    function writeModel(model, kind, call) {
+        const before = liveModel();
+        if (!setModel(model, kind, call))
+            return false;
+        const accepted = acceptedPart(model);
+        const after = liveModel();
+        const settled = settleWrite(own, {
+            kind,
+            failed: false,
+            afterKey: after ? modelKey(after) : null,
+            before,
+            beforeKey: before ? modelKey(before) : null,
+            accepted,
+            acceptedKey: modelKey(accepted),
+            acceptedUrlKey: urlKey(accepted),
+            acceptedColumnUrlKeys: columnUrlKeys(accepted)
+        });
+        own = settled.own;
+        readGrid();
+        if (settled.landed) {
+            followActiveView(kind);
+            writeLanding(kind, call.source);
+        }
+        return true;
+    }
+    function liveState() {
+        try {
+            return getFilterModel(api, startCall('grid', 'collect').options);
+        }
+        catch {
+            return null;
+        }
+    }
+    function liveModel() {
+        try {
+            return api.getFilterModel() ?? {};
+        }
+        catch {
+            return null;
+        }
+    }
+    function liveKey(kind) {
+        if (kind === 'url') {
+            const live = liveState();
+            return live ? filtersKey(live) : null;
+        }
+        const live = liveModel();
+        return live ? modelKey(live) : null;
+    }
+    function liveKeys(kind) {
+        const key = liveKey(kind);
+        if (key === null)
+            return null;
+        if (kind === 'url')
+            return { key };
+        return { key, urlKey: urlKey(liveModel() ?? {}) };
+    }
+    function urlKey(model) {
+        return filtersKey(urlForm(model));
+    }
+    function urlForm(model) {
+        return fromGridModel(model, startCall('grid', 'collect').options);
+    }
+    function columnUrlKeys(model) {
+        const keys = new Map();
+        for (const [colId, column] of Object.entries(model)) {
+            const filters = urlForm(Object.fromEntries([[colId, column]]));
+            if (Object.keys(filters).length > 0)
+                keys.set(colId, filtersKey(filters));
+        }
+        return keys;
+    }
+    function pendingView(id, model) {
+        const accepted = acceptedPart(model);
+        const filters = urlForm(accepted);
+        return {
+            id,
+            model: null,
+            key: modelKey(accepted),
+            urlKey: Object.keys(filters).length > 0 ? filtersKey(filters) : null
+        };
+    }
+    function landsActive(view, live, api) {
+        return (modelKey(live) === view.key ||
+            (api && view.urlKey !== null && urlKey(live) === view.urlKey));
+    }
+    function shows(model) {
+        if (model === null)
+            return false;
+        const live = liveModel();
+        return live !== null && modelKey(live) === modelKey(model);
+    }
+    function followActiveView(landing, seen = 'call', api = true) {
+        if (!active)
+            return;
+        if (landing === 'view' || landing === 'restore') {
+            active = { ...active, model: liveModel() };
+            return;
+        }
+        if (active.model === null) {
+            const live = liveModel();
+            if (live !== null && landsActive(active, live, api)) {
+                active = { ...active, model: live };
+                return;
+            }
+            if (seen === 'echo')
+                return;
+        }
+        if (seen === 'queued' || shows(active.model))
+            return;
+        const { id } = active;
+        active = null;
+        clearPointer(id, startCall('grid', 'report'));
+    }
+    function clearPointer(id, call) {
+        try {
+            if (views?.getActiveViewId() === id)
+                views.persistActiveViewId(null);
+        }
+        catch (cause) {
+            fail(call, cause, 'STORAGE_WRITE_FAILED');
+        }
+    }
+    function persistPointer(id, call) {
+        try {
+            views?.persistActiveViewId(id);
+        }
+        catch (cause) {
+            fail(call, cause, 'STORAGE_WRITE_FAILED');
+        }
+    }
+    function settleUrlWrite(filters, before, failed) {
+        const accepted = acceptedPart(filters);
+        const settled = settleWrite(own, {
+            kind: 'url',
+            failed,
+            afterKey: filtersKey(state),
+            before,
+            beforeKey: before ? filtersKey(before) : null,
+            accepted,
+            acceptedKey: filtersKey(accepted)
+        });
+        own = settled.own;
+        return settled.landed;
+    }
+    function acceptedPart(filters) {
+        if (!('getColumn' in api))
+            return filters;
+        return Object.fromEntries(Object.entries(filters).filter(([colId]) => {
+            try {
+                return api.getColumn(colId) !== null;
+            }
+            catch {
+                return true;
+            }
+        }));
+    }
+    function classify(source) {
+        const modelForm = own !== null && own.kind !== 'url';
+        const live = modelForm ? (liveModel() ?? {}) : state;
+        const pendingModel = modelForm && own?.phase === 'pending';
+        const result = classifyEvent(own, {
+            key: modelForm ? modelKey(live) : filtersKey(state),
+            live,
+            source,
+            urlKey: pendingModel ? urlKey(live) : undefined,
+            columnUrlKeys: pendingModel ? columnUrlKeys(live) : undefined
+        });
+        own = result.own;
+        return result;
+    }
+    function givesFilters(target) {
+        try {
+            const filters = parseUrlFilters(target, startCall('url', 'collect').options);
+            return Object.keys(filters).length > 0;
+        }
+        catch {
+            return false;
+        }
+    }
+    function hasFilterParams(target) {
+        const prefix = resolveParamPrefix(codec.paramPrefix);
+        try {
+            return Array.from(new URL(target).searchParams.keys()).some(key => key.startsWith(prefix) || key === codec.groupedParam);
+        }
+        catch {
+            return false;
+        }
+    }
+    function filtersKey(filters) {
+        const sorted = Object.fromEntries(Object.entries(filters).sort(byColumnId));
+        return generateUrl('http://key.invalid/', sorted, startCall('grid', 'collect').options);
+    }
+    function write(source, replace) {
+        try {
+            if (historyMode instanceof Function) {
+                historyMode(url);
+            }
+            else if (replace || historyMode === 'replace') {
+                window.history.replaceState(window.history.state, '', url);
+            }
+            else {
+                window.history.pushState(window.history.state, '', url);
+            }
+            writeIssues = NO_ISSUES;
+        }
+        catch (cause) {
+            const issue = toIssue(cause, 'HISTORY_WRITE_FAILED');
+            writeIssues = [issue];
+            emit(issue, source);
+        }
+    }
+    function writeChange(source, replace) {
+        if (historyMode === 'none' || !hasWindow())
+            return;
+        const key = filtersKey(state);
+        const current = parseUrlFilters(window.location.href, startCall('grid', 'collect').options);
+        if (key === filtersKey(current))
+            return;
+        write(source, replace);
+    }
+    function writeLanding(kind, source) {
+        if (kind !== 'url')
+            writeChange(source, kind === 'restore');
+    }
+    function holdsView(target, view) {
+        try {
+            const filters = parseUrlFilters(target, startCall('url', 'collect').options);
+            return filtersKey(filters) === urlKey(view.filterModel);
+        }
+        catch {
+            return false;
+        }
+    }
+    function restore(view) {
+        active = pendingView(view.id, view.filterModel);
+        if (!writeModel(view.filterModel, 'restore', startCall('url', 'report'))) {
+            active = null;
+        }
+        publish();
+    }
+    function onFilterChanged(event) {
+        if (status !== 'active')
+            return;
+        if (own?.phase === 'writing') {
+            const key = liveKey(own.kind);
+            own = key === null ? null : { phase: 'landed', kind: own.kind, key };
+            return;
+        }
+        readGrid();
+        const result = classify(event?.source);
+        followActiveView(result.kind === 'landing' ? result.write : null, result.kind !== 'echo' ? 'change' : result.queued ? 'queued' : 'echo', event?.source === 'api');
+        if (result.kind === 'change')
+            writeChange('grid', false);
+        if (result.kind === 'landing' && result.write !== null) {
+            writeLanding(result.write, ownSource);
+        }
+        if (result.queued && shownWhilePending(own)) {
+            own = { ...own, before: null, beforeKey: null };
+            writeLanding(own.kind, ownSource);
+        }
+        publish();
+    }
+    function shownWhilePending(record) {
+        return (record?.phase === 'pending' &&
+            record.kind !== 'url' &&
+            (record.waits?.length ?? 0) === 0 &&
+            record.acceptedUrlKey !== undefined &&
+            urlKey(liveModel() ?? {}) === record.acceptedUrlKey);
+    }
+    function onPopstate() {
+        if (status !== 'active')
+            return;
+        apply(window.location.href, 'url', 'report', false);
+    }
+    function destroy() {
+        if (status === 'destroyed')
+            return;
+        status = 'destroyed';
+        if (listensToPopstate && hasWindow()) {
+            window.removeEventListener('popstate', onPopstate);
+        }
+        api.removeEventListener('filterChanged', onFilterChanged);
+        api.removeEventListener('gridPreDestroyed', destroy);
+        publish();
+    }
+    const sync = {
+        getSnapshot: () => snapshot,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        applyUrl(target) {
+            if (status !== 'active') {
+                notReady();
+                return { issues: NO_ISSUES };
+            }
+            const href = target ?? (hasWindow() ? window.location.href : undefined);
+            if (href === undefined)
+                return { issues: NO_ISSUES };
+            return apply(href, 'api', 'throw', false);
+        },
+        applyFilters(filters) {
+            if (status !== 'active') {
+                notReady();
+                return { issues: NO_ISSUES };
+            }
+            const call = startCall('api', 'throw');
+            let model;
+            try {
+                model = toGridModel(filters, api, call.options);
+            }
+            catch (cause) {
+                fail(call, cause, 'GRID_ERROR');
+            }
+            if (model)
+                writeModel(model, 'app', call);
+            applyIssues = call.issues.length ? call.issues : NO_ISSUES;
+            publish();
+            return { issues: call.issues };
+        },
+        getUrl(baseUrl) {
+            const base = baseUrl ?? (hasWindow() ? window.location.href : undefined);
+            if (base === undefined)
+                return '';
+            const call = startCall('api', 'throw');
+            let filters = state;
+            if (status === 'active') {
+                try {
+                    filters = getFilterModel(api, call.options);
+                }
+                catch (cause) {
+                    fail(call, cause, 'GRID_ERROR');
+                }
+            }
+            try {
+                return generateUrl(base, filters, call.options);
+            }
+            catch (cause) {
+                fail(call, cause, 'INVALID_URL');
+                return '';
+            }
+        },
+        saveView(name) {
+            if (!views)
+                return null;
+            if (status !== 'active') {
+                notReady();
+                return null;
+            }
+            const call = startCall('api', 'throw');
+            let model;
+            try {
+                model = api.getFilterModel() ?? {};
+            }
+            catch (cause) {
+                fail(call, cause, 'GRID_ERROR');
+                return null;
+            }
+            let view;
+            try {
+                view = views.saveView(name, model);
+            }
+            catch (cause) {
+                fail(call, cause, 'STORAGE_WRITE_FAILED');
+                return null;
+            }
+            if (own?.phase === 'pending' &&
+                (own.kind === 'view' || own.kind === 'restore')) {
+                own = null;
+            }
+            active = { ...pendingView(view.id, model), model };
+            refreshViews();
+            publish();
+            return view;
+        },
+        loadView(id) {
+            if (!views)
+                return;
+            if (status !== 'active') {
+                notReady();
+                return;
+            }
+            const call = startCall('api', 'throw');
+            const wanted = id ?? null;
+            const view = wanted === null
+                ? null
+                : views.listViews().find(candidate => candidate.id === wanted);
+            if (view === undefined) {
+                refreshViews();
+                publish();
+                fail(call, new URLSyncError(`No saved view with id "${wanted}"`, undefined, {
+                    code: 'VIEW_NOT_FOUND'
+                }), 'VIEW_NOT_FOUND');
+                return;
+            }
+            const previous = active;
+            active = view ? pendingView(view.id, view.filterModel) : null;
+            let wrote = false;
+            try {
+                wrote = writeModel(view?.filterModel ?? {}, 'view', call);
+            }
+            finally {
+                if (!wrote)
+                    active = previous;
+            }
+            if (!wrote)
+                return;
+            applyIssues = NO_ISSUES;
+            publish();
+            if ((active?.id ?? null) === wanted)
+                persistPointer(wanted, call);
+        },
+        deleteView(id) {
+            if (!views)
+                return;
+            const call = startCall('api', 'throw');
+            try {
+                views.deleteView(id);
+            }
+            catch (cause) {
+                fail(call, cause, 'STORAGE_WRITE_FAILED');
+                return;
+            }
+            const clears = status === 'active' && active?.id === id && shows(active.model);
+            if (active?.id === id)
+                active = null;
+            refreshViews();
+            try {
+                if (clears)
+                    writeModel({}, 'view', call);
+            }
+            finally {
+                publish();
+            }
+        },
+        destroy
+    };
+    if (isDestroyed(api)) {
+        status = 'destroyed';
+        emit(new URLSyncError('The grid is already destroyed', undefined, {
+            code: 'NOT_READY'
+        }), 'api');
+        publish();
+        return sync;
+    }
+    refreshViews();
+    const handed = start.handover;
+    if (handed?.own && handed.keys === keys) {
+        own = takeOver(handed.own, liveKeys(handed.own.kind));
+        ownSource = handed.source;
+    }
+    if (handed && start.keepApplyIssues)
+        applyIssues = handed.applyIssues;
+    handovers.set(sync, () => ({
+        own: own?.phase === 'writing' ? null : own,
+        source: ownSource,
+        keys,
+        applyIssues
+    }));
+    const pointer = views?.getActiveViewId();
+    const stored = pointer
+        ? viewList.find(view => view.id === pointer)
+        : undefined;
+    api.addEventListener('filterChanged', onFilterChanged);
+    api.addEventListener('gridPreDestroyed', destroy);
+    if (listensToPopstate && hasWindow()) {
+        window.addEventListener('popstate', onPopstate);
+    }
+    if (options.applyUrlOnCreate !== false && hasWindow()) {
+        const href = window.location.href;
+        const hasParams = hasFilterParams(href);
+        const claims = hasParams && givesFilters(href);
+        if (stored && (!claims || holdsView(href, stored))) {
+            restore(stored);
+        }
+        else if (views && !claims) {
+            readGrid();
+            publish();
+        }
+        else {
+            apply(href, 'url', 'report', true);
+            if (claims && pointer)
+                persistPointer(null, startCall('url', 'report'));
+        }
+        if (!stored &&
+            !hasParams &&
+            historyMode !== 'none' &&
+            Object.keys(state).length > 0) {
+            write('url', true);
+            publish();
+        }
+    }
+    else {
+        const keptViewId = start.keptViewId ?? null;
+        const kept = keptViewId === null
+            ? undefined
+            : viewList.find(view => view.id === keptViewId);
+        if (kept) {
+            restore(kept);
+        }
+        else {
+            readGrid();
+            publish();
+        }
+    }
+    return sync;
+}
+function sameViews(a, b) {
+    return (a.length === b.length &&
+        a.every((view, index) => {
+            const other = b[index];
+            return (other !== undefined &&
+                view.id === other.id &&
+                view.name === other.name &&
+                view.updatedAt === other.updatedAt &&
+                JSON.stringify(view.filterModel) === JSON.stringify(other.filterModel));
+        }));
+}
+function byColumnId([a], [b]) {
+    return a < b ? -1 : a > b ? 1 : 0;
+}
+function issueKey(issue) {
+    return `${issue.code}\u0000${issue.column ?? ''}\u0000${issue.message}`;
+}
+function reportLater(error) {
+    if ('reportError' in globalThis) {
+        globalThis.reportError(error);
+        return;
+    }
+    setTimeout(() => {
+        throw error;
+    });
+}
+function isDestroyed(api) {
+    return 'isDestroyed' in api && api.isDestroyed();
+}
+//# sourceMappingURL=grid-url-sync.js.map