@mapsight/lib-redux 2.0.0

package/src/js/enable-controlled-dispatch-and-observe.ts

@@ -0,0 +1,128 @@
+import {AnyAction, Dispatch, Store} from "redux";
+
+type CompareFunction = (a: unknown, b: unknown) => boolean;
+
+const strictEqualCompare: CompareFunction = (a, b) => a === b;
+
+type UncontrolledActionListener<State = unknown> = (
+	previousState: State,
+	state: State,
+) => void;
+type SubscribeUncontrolled<State = unknown> = (
+	listener: UncontrolledActionListener<State>,
+) => () => void;
+
+export type ObserveHandler<State = unknown, Value = unknown> = (
+	newValue?: Value,
+	previousValue?: Value,
+	state?: State,
+) => void;
+
+export type ObserveUncontrolled<State = unknown, Value = unknown> = (
+	selector: (state: State) => Value,
+	onChange: ObserveHandler<State, Value>,
+	compare?: CompareFunction,
+) => () => void;
+
+export type StoreExtControlledActions<TState = unknown> = {
+	subscribeUncontrolled: SubscribeUncontrolled<TState>;
+	observeUncontrolled: ObserveUncontrolled<TState>;
+};
+
+export type StoreWithControlledActions<
+	S extends Store = Store,
+	TState = unknown,
+> = S & StoreExtControlledActions<TState>;
+
+function isActionWithMeta(
+	action: AnyAction,
+): action is AnyAction & {meta: Record<string, unknown>} {
+	return "meta" in action;
+}
+
+function isControlledAction(
+	action: AnyAction,
+	controlledActionFlag: string,
+): boolean {
+	return (
+		isActionWithMeta(action) && action.meta?.[controlledActionFlag] === true
+	);
+}
+
+/**
+ * Enhances the store. Allows actions to be flagged as controlled and adds a new function
+ * store.observeUncontrolled(selector, onChange, compare) to the store.
+ *
+ * @param {object} store redux store
+ * @param {string|symbol} controlledActionFlag flag that controlled actions expose (action[controlledActionFlag] == true)
+ */
+export default function enableControlledDispatchAndObserve<State = unknown>(
+	store: Store<State>,
+	controlledActionFlag = "isControlled",
+) {
+	let listeners: Array<UncontrolledActionListener<State>> = [];
+
+	function removeListener(listener: UncontrolledActionListener<State>) {
+		listeners = listeners.filter((l) => l !== listener);
+	}
+
+	function addListener(listener: UncontrolledActionListener<State>) {
+		listeners.push(listener);
+	}
+
+	const subscribeUncontrolled: SubscribeUncontrolled<State> = (listener) => {
+		addListener(listener);
+
+		return function removeListenerBound() {
+			removeListener(listener);
+		};
+	};
+
+	const observeUncontrolled: ObserveUncontrolled<State> = (
+		selector,
+		onChange,
+		compare = strictEqualCompare,
+	) =>
+		subscribeUncontrolled(
+			function handleUncontrolledChange(previousState, state) {
+				const previousValue = selector(previousState);
+				const newValue = selector(state);
+
+				if (!compare(previousValue, newValue)) {
+					onChange(newValue, previousValue, state);
+				}
+			},
+		);
+
+	let wasControlled = false;
+	const baseDispatch = store.dispatch;
+
+	const enhancedDispatch: Dispatch = (action) => {
+		wasControlled = isControlledAction(action, controlledActionFlag);
+		return baseDispatch(action);
+	};
+
+	let previousState = store.getState();
+
+	function listenForUncontrolledActions() {
+		const state = store.getState();
+
+		if (!wasControlled) {
+			listeners.forEach(
+				function callUncontrolledChangeListener(listener) {
+					listener(previousState, state);
+				},
+			);
+		}
+
+		previousState = state;
+	}
+
+	store.subscribe(listenForUncontrolledActions);
+
+	Object.assign(store, {
+		dispatch: enhancedDispatch,
+		subscribeUncontrolled: subscribeUncontrolled,
+		observeUncontrolled: observeUncontrolled,
+	});
+}

package/src/js/enable-initialization.ts

@@ -0,0 +1,36 @@
+import {AnyAction, Reducer} from "redux";
+
+/**
+ * Add initialization reducer to existing reducer
+ *
+ * @deprecated Use redux preloadedState or mergeAll actions instead.
+ *
+ * @param reducer base reducer to enhance
+ * @param [actionName] name of action, default: 'INITIALIZE'
+ * @returns enhanced reducer
+ */
+
+export default function enableInitialization(
+	reducer: Reducer,
+	actionName = "INITIALIZE",
+) {
+	const aReducerWithInitialization: Reducer = <T>(
+		state: T,
+		action: AnyAction,
+	) => {
+		if (action.type === actionName) {
+			return action.value as T;
+		}
+
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+		return reducer(state, action);
+	};
+
+	if (reducer.name) {
+		Object.defineProperty(aReducerWithInitialization, "name", {
+			value: reducer.name + "__with-initialization",
+		});
+	}
+
+	return aReducerWithInitialization;
+}

package/src/js/flatten-actions.ts

@@ -0,0 +1,22 @@
+import {AnyAction} from "redux";
+
+/**
+ * Flattens (deeply) batched actions into a flat array of actions
+ *
+ * @param {object} action the root action
+ * @returns {Array<object>} flattened array of actions
+ */
+export default function flattenActions(action: AnyAction): Array<AnyAction> {
+	if (
+		"meta" in action &&
+		"payload" in action &&
+		Array.isArray(action.payload) &&
+		typeof action.meta === "object" &&
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+		action.meta.batch === true
+	) {
+		return action.payload.flatMap(flattenActions);
+	}
+
+	return [action];
+}

package/src/js/index.ts

@@ -0,0 +1 @@
+//

package/src/js/local-storage.ts

@@ -0,0 +1,96 @@
+import get from "lodash/get";
+import set from "lodash/set";
+import {Store} from "redux";
+
+import {observeState} from "./observe-state";
+
+/**
+ * Creates a storage object to access local storage.
+ *
+ * @param [storageKey=null] key to be used in local storage
+ * @returns storage adapter
+ */
+export function createStorage(storageKey: string | null = null) {
+	function setStorageKey(k: string | null) {
+		storageKey = k;
+	}
+
+	function getLocalStorageState(): unknown {
+		if (!storageKey) {
+			throw Error(
+				"@mapsight/lib-redux: Cannot access local storage without a key. Please set a storage key using the `string: storageKey` property on `createStorage(string?: storageKey)` or using the `setStorageKey(string: storageKey)` method on an existing storage object.",
+			);
+		}
+
+		if (typeof window !== "undefined") {
+			const value = window.localStorage.getItem(storageKey);
+			return window.localStorage && value ? JSON.parse(value) : null;
+		}
+
+		return null;
+	}
+
+	function setLocalStorageState(state: unknown) {
+		if (!storageKey) {
+			throw Error(
+				"@mapsight/lib-redux: Cannot access local storage without a key. Please set a storage key using the `string: storageKey` property on `createStorage(string?: storageKey)` or using the `setStorageKey(string: storageKey)` method on an existing storage object.",
+			);
+		}
+
+		if (window.localStorage) {
+			window.localStorage.setItem(storageKey, JSON.stringify(state));
+		}
+	}
+
+	function updateLocalStorageState(
+		path: Array<string> | string,
+		value: unknown,
+	) {
+		if (!storageKey) {
+			throw Error(
+				"@mapsight/lib-redux: Cannot access local storage without a key. Please set a storage key using the `string: storageKey` property on `createStorage(string?: storageKey)` or using the `setStorageKey(string: storageKey)` method on an existing storage object.",
+			);
+		}
+
+		setLocalStorageState(set<any>(getLocalStorageState(), path, value));
+	}
+
+	/**
+	 * Observes and synchronizes the state of the given store with local storage.
+	 *
+	 * @see lodash/get for path definition
+	 *
+	 * @param store the store to observe
+	 * @param paths array of path strings (string[]) or path arrays (string[][])
+	 */
+	function synchronizePathsToLocalStorage(
+		store: Store,
+		paths: Array<string | Array<string>>,
+	) {
+		if (!storageKey) {
+			throw Error(
+				"@mapsight/lib-redux: Cannot access local storage without a key. Please set a storage key using the `string: storageKey` property on `createStorage(string?: storageKey)` or using the `setStorageKey(string: storageKey)` method on an existing storage object.",
+			);
+		}
+
+		if (window.localStorage) {
+			paths.forEach(function synchronizePathToLocalStorage(path) {
+				observeState(
+					store,
+					(state): unknown =>
+						// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+						get(state, path),
+					(value) => updateLocalStorageState(path, value),
+				);
+			});
+		}
+	}
+
+	return {
+		setStorageKey: setStorageKey,
+		getLocalStorageState: getLocalStorageState,
+		setLocalStorageState: setLocalStorageState,
+		updateLocalStorageState: updateLocalStorageState,
+		synchronizePathsToLocalStorage: synchronizePathsToLocalStorage,
+	};
+}

package/src/js/matchPath.ts

@@ -0,0 +1,78 @@
+import {zip} from "@mapsight/lib-js/array";
+
+type PatternSegment = {isParam: boolean; name: string};
+
+/**
+ * Parses a pattern segment.
+ *
+ * @param patternSegment segment string
+ * @returns parsed segment
+ */
+function parsePatternSegment(patternSegment: string): PatternSegment {
+	if (patternSegment.startsWith(":")) {
+		return {
+			isParam: true,
+			name: patternSegment.slice(1),
+		};
+	} else {
+		return {
+			isParam: false,
+			name: patternSegment,
+		};
+	}
+}
+
+// TODO: lru/limit cache?
+const parsePathPatternCache: Record<string, Array<PatternSegment>> = {};
+
+/**
+ * Parses a path pattern
+ *
+ * @param pattern path pattern
+ * @returns parsed pattern
+ */
+function parsePathPattern(pattern: string): Array<PatternSegment> {
+	const fromCache = parsePathPatternCache[pattern];
+	if (fromCache !== undefined) {
+		return fromCache;
+	}
+
+	const patternSegments = pattern.split("/").map(parsePatternSegment);
+	parsePathPatternCache[pattern] = patternSegments;
+	return patternSegments;
+}
+
+/**
+ * This function matches the given path array to a path pattern. The pattern consists of / delimited names and/or
+ * named parameters defined as `:name` where name may be any string which will be used in the returned object to
+ * access the parameter value.
+ *
+ * If the path matches the pattern, the return value will be an object containing any present
+ * named parameter values that may be in the pattern, otherwise it will return false if any path segment does not
+ * match the specified pattern.
+ *
+ * @param pathArr path array
+ * @param pattern pattern to match
+ * @returns object containing matched named parameter values or false if the path did not patch the pattern
+ */
+export default function matchPath(
+	pathArr: Array<string>,
+	pattern: string,
+): false | Record<string, string> {
+	const patternSegments = parsePathPattern(pattern);
+	if (patternSegments.length !== pathArr.length) {
+		return false;
+	}
+
+	const params: Record<string, string> = {};
+
+	for (const [pathValue, patternSegment] of zip(pathArr, patternSegments)) {
+		if (patternSegment.isParam) {
+			params[patternSegment.name] = pathValue;
+		} else if (pathValue !== patternSegment.name) {
+			return false;
+		}
+	}
+
+	return params;
+}

package/src/js/matchesPath.ts

@@ -0,0 +1,23 @@
+import matchPath from "./matchPath";
+
+const noMatch: Record<string, string> = {};
+
+/**
+ * This function matches the given path array to a path pattern. The pattern consists of / delimited names and/or
+ * named parameters defined as `:name` where name may be any string which will be used in the returned object to
+ * access the parameter value.
+ *
+ * If the path matches the pattern it will return an object containing any present
+ * named parameter values that may be in the pattern otherwise an empty object is returned.
+ *
+ * @param pathArr path array
+ * @param pattern pattern to match
+ * @returns 2-ary array with boolean that is true if the path did match the pattern and an object containing matched named parameter values
+ */
+export default function matchesPath(
+	pathArr: Array<string>,
+	pattern: string,
+): [boolean, Record<string, string>] {
+	const match = matchPath(pathArr, pattern);
+	return match ? [true, match] : [false, noMatch];
+}

package/src/js/observe-state.ts

@@ -0,0 +1,109 @@
+import {Store} from "redux";
+
+function strictEqualCompare<T>(a: T, b: T): boolean {
+	return a === b;
+}
+
+//const jsonCompare = (a, b)  => JSON.stringify(a) !== JSON.stringify(b);
+
+export const AbortObserving = Symbol(); // TODO: Use Symbol()
+
+function internalObserveState<State = unknown, Value = unknown>(
+	store: Store<State>,
+	selector: (state: State) => Value,
+	listener: (
+		newValue: Value,
+		oldValue: Value | null,
+		state: State,
+	) => void | typeof AbortObserving,
+	compare = strictEqualCompare,
+	initialValue: Value | null = null,
+) {
+	let currentValue = initialValue;
+	const unsubscribe = store.subscribe(function onStateChange() {
+		const state = store.getState();
+		const newValue = selector(state);
+
+		if (!compare(currentValue, newValue)) {
+			const oldValue = currentValue;
+			currentValue = newValue;
+
+			const returnValue = listener(newValue, oldValue, state);
+			if (returnValue === AbortObserving) {
+				unsubscribe();
+			}
+		}
+	});
+
+	return unsubscribe;
+}
+
+export function observeState<State = unknown, Value = unknown>(
+	store: Store<State>,
+	selector: (state: State) => Value,
+	listener: (
+		newValue: Value,
+		oldValue: Value | null,
+		state: State,
+	) => void | typeof AbortObserving,
+	compare = strictEqualCompare,
+) {
+	const initialValue = selector(store.getState());
+	return internalObserveState(
+		store,
+		selector,
+		listener,
+		compare,
+		initialValue,
+	);
+}
+
+export function observeStateOnce<State = unknown, Value = unknown>(
+	store: Store,
+	selector: (state: State) => Value,
+	listener: (
+		newValue: Value,
+		oldValue: Value | null,
+		state: State,
+	) => void | typeof AbortObserving,
+	compare = strictEqualCompare,
+) {
+	const unsubscribe = observeState(
+		store,
+		selector,
+		function handleChange(newValue, oldValue, state: State) {
+			listener(newValue, oldValue, state);
+			unsubscribe();
+		},
+		compare,
+	);
+
+	return unsubscribe;
+}
+
+export function getAndObserveState<State = unknown, Value = unknown>(
+	store: Store<State>,
+	selector: (state: State) => Value,
+	listener: (
+		newValue: Value,
+		oldValue: Value | null,
+		state: State,
+	) => void | typeof AbortObserving,
+	compare = strictEqualCompare,
+) {
+	const initialState = store.getState();
+	const initialValue = selector(initialState);
+
+	const initialReturnValue = listener(initialValue, null, initialState);
+	if (initialReturnValue === AbortObserving) {
+		return () => undefined;
+	}
+
+	return internalObserveState(
+		store,
+		selector,
+		listener,
+		compare,
+		initialValue,
+	);
+}

package/src/js/reducers/immutable/add-to.ts

@@ -0,0 +1,6 @@
+import {Reducer} from "redux";
+
+const addTo: Reducer<Array<unknown>> = (state, action) =>
+	(state || []).concat([action.element]);
+
+export default addTo;

package/src/js/reducers/immutable/index.ts

@@ -0,0 +1,17 @@
+import {Reducer} from "redux";
+
+import addTo from "./add-to";
+import merge from "./merge";
+import noop from "./noop";
+import removeFrom from "./remove-from";
+import set from "./set";
+
+const reducers: Record<string, Reducer> = {
+	addTo: addTo,
+	merge: merge,
+	noop: noop,
+	removeFrom: removeFrom,
+	set: set,
+};
+
+export default reducers;

package/src/js/reducers/immutable/merge.ts

@@ -0,0 +1,18 @@
+import merge from "lodash/merge";
+import {AnyAction, Reducer} from "redux";
+
+const mergeReducer: Reducer = <
+	T extends Array<unknown> | Record<string | number | symbol, unknown>,
+>(
+	state: T,
+	action: AnyAction,
+): T => {
+	const result: T = (Array.isArray(state) ? [] : {}) as T;
+
+	// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+	merge(result, state, action.value);
+
+	return result;
+};
+
+export default mergeReducer;

package/src/js/reducers/immutable/noop.ts

@@ -0,0 +1,5 @@
+import {Reducer} from "redux";
+
+const noopReducer: Reducer = <T>(state: T): T => state;
+
+export default noopReducer;

package/src/js/reducers/immutable/remove-from.ts

@@ -0,0 +1,8 @@
+import {AnyAction, Reducer} from "redux";
+
+const removeFromReducer: Reducer = <T extends Array<unknown>>(
+	state: T,
+	action: AnyAction,
+) => state.filter((element) => element !== action.element);
+
+export default removeFromReducer;

package/src/js/reducers/immutable/set.ts

@@ -0,0 +1,5 @@
+import {AnyAction, Reducer} from "redux";
+
+const setReducer: Reducer = (state, action: AnyAction): unknown => action.value;
+
+export default setReducer;

package/src/js/reducers/immutable-path/add-to.ts

@@ -0,0 +1,4 @@
+import createImmutablePathReducer from "../../create-immutable-path-reducer";
+import addTo from "../immutable/add-to";
+
+export default createImmutablePathReducer(addTo);

package/src/js/reducers/immutable-path/index.ts

@@ -0,0 +1,17 @@
+import {Reducer} from "redux";
+
+import addTo from "./add-to";
+import merge from "./merge";
+import noop from "./noop";
+import removeFrom from "./remove-from";
+import set from "./set";
+
+const reducers = {
+	addTo: addTo,
+	merge: merge,
+	noop: noop,
+	removeFrom: removeFrom,
+	set: set,
+} satisfies Record<string, Reducer>;
+
+export default reducers;

package/src/js/reducers/immutable-path/merge.ts

@@ -0,0 +1,4 @@
+import createImmutablePathReducer from "../../create-immutable-path-reducer";
+import merge from "../immutable/merge";
+
+export default createImmutablePathReducer(merge);

package/src/js/reducers/immutable-path/noop.ts

@@ -0,0 +1,3 @@
+export default function noopReducer<T>(state: T) {
+	return state;
+}

package/src/js/reducers/immutable-path/remove-from.ts

@@ -0,0 +1,4 @@
+import createImmutablePathReducer from "../../create-immutable-path-reducer";
+import removeFrom from "../immutable/remove-from";
+
+export default createImmutablePathReducer(removeFrom);

package/src/js/reducers/immutable-path/set.ts

@@ -0,0 +1,4 @@
+import createImmutablePathReducer from "../../create-immutable-path-reducer";
+import set from "../immutable/set";
+
+export default createImmutablePathReducer(set);

package/src/js/reducers/reduce-by-keys.ts

@@ -0,0 +1,19 @@
+import unique from "lodash/uniq";
+
+export default function reduceByKeys(
+	keys: Array<string>,
+	state: Record<string, unknown>,
+) {
+	if (keys && state) {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+		const uniqueKeys: Array<string> = unique(keys);
+
+		return uniqueKeys.reduce(function reduceByKey(newState, key) {
+			return state[key] !== undefined
+				? {...newState, [key]: state[key]}
+				: newState;
+		}, {});
+	}
+
+	return state;
+}