@tanstack/vue-table/dist/reactivity.js

Headless UI for building powerful tables & datagrids for Vue.

import { computed, shallowRef, watch } from "vue";

//#region src/reactivity.ts
function observerToCallback(observerOrNext) {
	return typeof observerOrNext === "function" ? observerOrNext : (value) => observerOrNext.next?.(value);
}
function refToReadonlyAtom(source) {
	return Object.assign(source, {
		get: () => source.value,
		subscribe: ((observerOrNext) => {
			return { unsubscribe: watch(source, observerToCallback(observerOrNext), { flush: "sync" }) };
		})
	});
}
function refToWritableAtom(source) {
	return Object.assign(source, {
		set: (updater) => {
			source.value = typeof updater === "function" ? updater(source.value) : updater;
		},
		get: () => source.value,
		subscribe: ((observerOrNext) => {
			return { unsubscribe: watch(source, observerToCallback(observerOrNext), { flush: "sync" }) };
		})
	});
}
/**
* Creates the table-core reactivity bindings used by the Vue adapter.
*
* Table state atoms are backed by TanStack Store atoms. The options store stays
* framework-native because row-model APIs read `table.options` directly during
* render. Readonly table atoms bridge Store dependency tracking into Vue computed
* refs.
*/
function vueReactivity() {
	const subscriptions = /* @__PURE__ */ new Set();
	return {
		createOptionsStore: true,
		wrapExternalAtoms: true,
		addSubscription: (subscription) => {
			subscriptions.add(subscription);
		},
		unmount: () => {
			subscriptions.forEach((s) => s.unsubscribe());
			subscriptions.clear();
		},
		schedule: (fn) => queueMicrotask(() => fn()),
		createReadonlyAtom: (fn, _options) => {
			return refToReadonlyAtom(computed(() => fn()));
		},
		createWritableAtom: (value, _options) => {
			return refToWritableAtom(shallowRef(value));
		},
		untrack: (fn) => fn(),
		batch: (fn) => fn()
	};
}

//#endregion
export { vueReactivity };