@octanejs/recharts 0.1.0

package/src/state/hooks.ts

@@ -0,0 +1,46 @@
+// Port of recharts' state/hooks.ts on @octanejs/redux primitives. The recharts
+// variants differ from stock useSelector/useDispatch: OUTSIDE a chart they
+// return undefined / a no-op instead of throwing, so components remain usable
+// standalone with all props passed explicitly.
+import { useContext, useMemo } from 'octane';
+import { useSyncExternalStoreWithSelector } from '@octanejs/redux';
+import { RechartsReduxContext } from './RechartsReduxContext';
+import { splitSlot, subSlot } from '../internal';
+
+const noopDispatch = (a: any) => a;
+
+export function useAppDispatch(): (action: any) => any {
+	const context = useContext(RechartsReduxContext);
+	if (context) {
+		return context.store.dispatch;
+	}
+	return noopDispatch;
+}
+
+const noop = () => {};
+const addNestedSubNoop = () => noop;
+const refEquality = (a: unknown, b: unknown) => a === b;
+
+export function useAppSelector<T>(selector: (state: any) => T, ...rest: any[]): T | undefined {
+	const [, slot] = splitSlot(rest);
+	const context = useContext(RechartsReduxContext);
+	const outOfContextSelector = useMemo(
+		() => {
+			if (!context) return noop as (state: any) => undefined;
+			return (state: any) => {
+				if (state == null) return undefined;
+				return selector(state);
+			};
+		},
+		[context, selector],
+		subSlot(slot, 'as:memo'),
+	);
+	return useSyncExternalStoreWithSelector(
+		context ? context.subscription.addNestedSub : addNestedSubNoop,
+		context ? context.store.getState : noop,
+		context ? context.store.getState : noop,
+		outOfContextSelector,
+		refEquality,
+		subSlot(slot, 'as:ws'),
+	) as T | undefined;
+}

package/src/state/keyboardEventsMiddleware.js

@@ -0,0 +1,226 @@
+// Vendored verbatim from recharts@3.9.2 es6/state/keyboardEventsMiddleware.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
+import { setKeyboardInteraction } from './tooltipSlice';
+import {
+	selectTooltipAxisDomain,
+	selectTooltipAxisTicks,
+	selectTooltipDisplayedData,
+} from './selectors/tooltipSelectors';
+import { selectCoordinateForDefaultIndex } from './selectors/selectors';
+import { selectChartDirection, selectTooltipAxisDataKey } from './selectors/axisSelectors';
+import { combineActiveTooltipIndex } from './selectors/combiners/combineActiveTooltipIndex';
+import { selectTooltipEventType } from './selectors/selectTooltipEventType';
+export var keyDownAction = createAction('keyDown');
+export var focusAction = createAction('focus');
+export var blurAction = createAction('blur');
+export var keyboardEventsMiddleware = createListenerMiddleware();
+var rafId = null;
+var timeoutId = null;
+var latestKeyboardActionPayload = null;
+keyboardEventsMiddleware.startListening({
+	actionCreator: keyDownAction,
+	effect: (action, listenerApi) => {
+		latestKeyboardActionPayload = action.payload;
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+		var state = listenerApi.getState();
+		var _state$eventSettings = state.eventSettings,
+			throttleDelay = _state$eventSettings.throttleDelay,
+			throttledEvents = _state$eventSettings.throttledEvents;
+		var isThrottled = throttledEvents === 'all' || throttledEvents.includes('keydown');
+		if (timeoutId !== null && (typeof throttleDelay !== 'number' || !isThrottled)) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
+		var callback = () => {
+			try {
+				var currentState = listenerApi.getState();
+				var accessibilityLayerIsActive = currentState.rootProps.accessibilityLayer !== false;
+				if (!accessibilityLayerIsActive) {
+					return;
+				}
+				var keyboardInteraction = currentState.tooltip.keyboardInteraction;
+				var key = latestKeyboardActionPayload;
+				if (key !== 'ArrowRight' && key !== 'ArrowLeft' && key !== 'Enter') {
+					return;
+				}
+
+				// TODO this is lacking index for charts that do not support numeric indexes
+				var resolvedIndex = combineActiveTooltipIndex(
+					keyboardInteraction,
+					selectTooltipDisplayedData(currentState),
+					selectTooltipAxisDataKey(currentState),
+					selectTooltipAxisDomain(currentState),
+				);
+				var currentIndex = resolvedIndex == null ? -1 : Number(resolvedIndex);
+				var isOutsideDomain = !Number.isFinite(currentIndex) || currentIndex < 0;
+				var tooltipTicks = selectTooltipAxisTicks(currentState);
+				var displayedData = selectTooltipDisplayedData(currentState);
+				var tooltipEventType = selectTooltipEventType(
+					currentState,
+					currentState.tooltip.settings.shared,
+				);
+				if (key === 'Enter') {
+					if (isOutsideDomain) {
+						return;
+					}
+					var _coordinate = selectCoordinateForDefaultIndex(
+						currentState,
+						tooltipEventType,
+						'hover',
+						String(keyboardInteraction.index),
+					);
+					listenerApi.dispatch(
+						setKeyboardInteraction({
+							active: !keyboardInteraction.active,
+							activeIndex: keyboardInteraction.index,
+							activeCoordinate: _coordinate,
+						}),
+					);
+					return;
+				}
+				var direction = selectChartDirection(currentState);
+				var directionMultiplier = direction === 'left-to-right' ? 1 : -1;
+				var movement = key === 'ArrowRight' ? 1 : -1;
+				var nextIndex;
+				if (isOutsideDomain) {
+					var axisDataKey = selectTooltipAxisDataKey(currentState);
+					var domain = selectTooltipAxisDomain(currentState);
+					var effectiveMovement = movement * directionMultiplier;
+
+					// Build a minimal TooltipInteractionState for the candidate-index check.
+					var mkInteraction = (i) => ({
+						active: false,
+						index: String(i),
+						dataKey: undefined,
+						graphicalItemId: undefined,
+						coordinate: undefined,
+					});
+					nextIndex = -1;
+					if (effectiveMovement > 0) {
+						for (var i = 0; i < displayedData.length; i++) {
+							if (
+								combineActiveTooltipIndex(mkInteraction(i), displayedData, axisDataKey, domain) !=
+								null
+							) {
+								nextIndex = i;
+								break;
+							}
+						}
+					} else {
+						for (var _i = displayedData.length - 1; _i >= 0; _i--) {
+							if (
+								combineActiveTooltipIndex(mkInteraction(_i), displayedData, axisDataKey, domain) !=
+								null
+							) {
+								nextIndex = _i;
+								break;
+							}
+						}
+					}
+					if (nextIndex < 0) {
+						return;
+					}
+				} else {
+					nextIndex = currentIndex + movement * directionMultiplier;
+					var dataLength =
+						(tooltipTicks === null || tooltipTicks === void 0 ? void 0 : tooltipTicks.length) ||
+						displayedData.length;
+					if (dataLength === 0 || nextIndex >= dataLength || nextIndex < 0) {
+						return;
+					}
+				}
+				var coordinate = selectCoordinateForDefaultIndex(
+					currentState,
+					tooltipEventType,
+					'hover',
+					String(nextIndex),
+				);
+				listenerApi.dispatch(
+					setKeyboardInteraction({
+						active: true,
+						activeIndex: nextIndex.toString(),
+						activeCoordinate: coordinate,
+					}),
+				);
+			} finally {
+				rafId = null;
+				timeoutId = null;
+			}
+		};
+		if (!isThrottled) {
+			callback();
+			return;
+		}
+		if (throttleDelay === 'raf') {
+			rafId = requestAnimationFrame(callback);
+		} else if (typeof throttleDelay === 'number') {
+			if (timeoutId === null) {
+				callback();
+				latestKeyboardActionPayload = null;
+				timeoutId = setTimeout(() => {
+					if (latestKeyboardActionPayload) {
+						callback();
+					} else {
+						timeoutId = null;
+						rafId = null;
+					}
+				}, throttleDelay);
+			}
+		}
+	},
+});
+keyboardEventsMiddleware.startListening({
+	actionCreator: focusAction,
+	effect: (_action, listenerApi) => {
+		var state = listenerApi.getState();
+		var accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
+		if (!accessibilityLayerIsActive) {
+			return;
+		}
+		var keyboardInteraction = state.tooltip.keyboardInteraction;
+		if (keyboardInteraction.active) {
+			return;
+		}
+		if (keyboardInteraction.index == null) {
+			var nextIndex = '0';
+			var tooltipEventType = selectTooltipEventType(state, state.tooltip.settings.shared);
+			var coordinate = selectCoordinateForDefaultIndex(
+				state,
+				tooltipEventType,
+				'hover',
+				String(nextIndex),
+			);
+			listenerApi.dispatch(
+				setKeyboardInteraction({
+					active: true,
+					activeIndex: nextIndex,
+					activeCoordinate: coordinate,
+				}),
+			);
+		}
+	},
+});
+keyboardEventsMiddleware.startListening({
+	actionCreator: blurAction,
+	effect: (_action, listenerApi) => {
+		var state = listenerApi.getState();
+		var accessibilityLayerIsActive = state.rootProps.accessibilityLayer !== false;
+		if (!accessibilityLayerIsActive) {
+			return;
+		}
+		var keyboardInteraction = state.tooltip.keyboardInteraction;
+		if (keyboardInteraction.active) {
+			listenerApi.dispatch(
+				setKeyboardInteraction({
+					active: false,
+					activeIndex: keyboardInteraction.index,
+					activeCoordinate: keyboardInteraction.coordinate,
+				}),
+			);
+		}
+	},
+});

package/src/state/layoutSlice.js

@@ -0,0 +1,57 @@
+// Vendored verbatim from recharts@3.9.2 es6/state/layoutSlice.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { createSlice } from '@reduxjs/toolkit';
+var initialState = {
+	layoutType: 'horizontal',
+	width: 0,
+	height: 0,
+	margin: {
+		top: 5,
+		right: 5,
+		bottom: 5,
+		left: 5,
+	},
+	scale: 1,
+};
+var chartLayoutSlice = createSlice({
+	name: 'chartLayout',
+	initialState,
+	reducers: {
+		setLayout(state, action) {
+			state.layoutType = action.payload;
+		},
+		setChartSize(state, action) {
+			state.width = action.payload.width;
+			state.height = action.payload.height;
+		},
+		setMargin(state, action) {
+			var _action$payload$top, _action$payload$right, _action$payload$botto, _action$payload$left;
+			state.margin.top =
+				(_action$payload$top = action.payload.top) !== null && _action$payload$top !== void 0
+					? _action$payload$top
+					: 0;
+			state.margin.right =
+				(_action$payload$right = action.payload.right) !== null && _action$payload$right !== void 0
+					? _action$payload$right
+					: 0;
+			state.margin.bottom =
+				(_action$payload$botto = action.payload.bottom) !== null && _action$payload$botto !== void 0
+					? _action$payload$botto
+					: 0;
+			state.margin.left =
+				(_action$payload$left = action.payload.left) !== null && _action$payload$left !== void 0
+					? _action$payload$left
+					: 0;
+		},
+		setScale(state, action) {
+			state.scale = action.payload;
+		},
+	},
+});
+var _chartLayoutSlice$act = chartLayoutSlice.actions,
+	setMargin = _chartLayoutSlice$act.setMargin,
+	setLayout = _chartLayoutSlice$act.setLayout,
+	setChartSize = _chartLayoutSlice$act.setChartSize,
+	setScale = _chartLayoutSlice$act.setScale;
+export { setMargin, setLayout, setChartSize, setScale };
+export var chartLayoutReducer = chartLayoutSlice.reducer;

package/src/state/legendSlice.js

@@ -0,0 +1,83 @@
+// Vendored verbatim from recharts@3.9.2 es6/state/legendSlice.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { createSlice, current, prepareAutoBatched } from '@reduxjs/toolkit';
+import { castDraft } from 'immer';
+
+/**
+ * The properties inside this state update independently of each other and quite often.
+ * When selecting, never select the whole state because you are going to get
+ * unnecessary re-renders. Select only the properties you need.
+ *
+ * This is why this state type is not exported - don't use it directly.
+ */
+
+var initialState = {
+	settings: {
+		layout: 'horizontal',
+		align: 'center',
+		verticalAlign: 'bottom',
+		itemSorter: 'value',
+	},
+	size: {
+		width: 0,
+		height: 0,
+	},
+	payload: [],
+};
+var legendSlice = createSlice({
+	name: 'legend',
+	initialState,
+	reducers: {
+		setLegendSize(state, action) {
+			state.size.width = action.payload.width;
+			state.size.height = action.payload.height;
+		},
+		setLegendSettings(state, action) {
+			state.settings.align = action.payload.align;
+			state.settings.layout = action.payload.layout;
+			state.settings.verticalAlign = action.payload.verticalAlign;
+			state.settings.itemSorter = action.payload.itemSorter;
+		},
+		addLegendPayload: {
+			reducer(state, action) {
+				state.payload.push(castDraft(action.payload));
+			},
+			prepare: prepareAutoBatched(),
+		},
+		replaceLegendPayload: {
+			reducer(state, action) {
+				var _action$payload = action.payload,
+					prev = _action$payload.prev,
+					next = _action$payload.next;
+				var index = current(state).payload.indexOf(castDraft(prev));
+				if (index > -1) {
+					state.payload[index] = castDraft(next);
+				}
+			},
+			prepare: prepareAutoBatched(),
+		},
+		removeLegendPayload: {
+			reducer(state, action) {
+				var index = current(state).payload.indexOf(castDraft(action.payload));
+				if (index > -1) {
+					state.payload.splice(index, 1);
+				}
+			},
+			prepare: prepareAutoBatched(),
+		},
+	},
+});
+var _legendSlice$actions = legendSlice.actions,
+	setLegendSize = _legendSlice$actions.setLegendSize,
+	setLegendSettings = _legendSlice$actions.setLegendSettings,
+	addLegendPayload = _legendSlice$actions.addLegendPayload,
+	replaceLegendPayload = _legendSlice$actions.replaceLegendPayload,
+	removeLegendPayload = _legendSlice$actions.removeLegendPayload;
+export {
+	setLegendSize,
+	setLegendSettings,
+	addLegendPayload,
+	replaceLegendPayload,
+	removeLegendPayload,
+};
+export var legendReducer = legendSlice.reducer;

package/src/state/mouseEventsMiddleware.js

@@ -0,0 +1,130 @@
+// Vendored verbatim from recharts@3.9.2 es6/state/mouseEventsMiddleware.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
+import { mouseLeaveChart, setMouseClickAxisIndex, setMouseOverAxisIndex } from './tooltipSlice';
+import { selectActivePropsFromChartPointer } from './selectors/selectActivePropsFromChartPointer';
+import { selectTooltipEventType } from './selectors/selectTooltipEventType';
+import { getRelativeCoordinate } from '../util/getRelativeCoordinate';
+export var mouseClickAction = createAction('mouseClick');
+export var mouseClickMiddleware = createListenerMiddleware();
+
+// TODO: there's a bug here when you click the chart the activeIndex resets to zero
+mouseClickMiddleware.startListening({
+	actionCreator: mouseClickAction,
+	effect: (action, listenerApi) => {
+		var mousePointer = action.payload;
+		var activeProps = selectActivePropsFromChartPointer(
+			listenerApi.getState(),
+			getRelativeCoordinate(mousePointer),
+		);
+		if (
+			(activeProps === null || activeProps === void 0 ? void 0 : activeProps.activeIndex) != null
+		) {
+			listenerApi.dispatch(
+				setMouseClickAxisIndex({
+					activeIndex: activeProps.activeIndex,
+					activeDataKey: undefined,
+					activeCoordinate: activeProps.activeCoordinate,
+				}),
+			);
+		}
+	},
+});
+export var mouseMoveAction = createAction('mouseMove');
+export var mouseMoveMiddleware = createListenerMiddleware();
+
+/*
+ * This single rafId is safe because:
+ * 1. Each chart has its own Redux store instance with its own middleware
+ * 2. mouseMoveAction only fires from one DOM element (the chart wrapper)
+ * 3. Rapid mousemove events from the same element SHOULD debounce - we only care about the latest position
+ * This is different from externalEventsMiddleware which handles multiple event types
+ * (click, mouseenter, mouseleave, etc.) that should NOT cancel each other.
+ */
+var rafId = null;
+var timeoutId = null;
+var latestChartPointer = null;
+mouseMoveMiddleware.startListening({
+	actionCreator: mouseMoveAction,
+	effect: (action, listenerApi) => {
+		var mousePointer = action.payload;
+		var state = listenerApi.getState();
+		var _state$eventSettings = state.eventSettings,
+			throttleDelay = _state$eventSettings.throttleDelay,
+			throttledEvents = _state$eventSettings.throttledEvents;
+		var isThrottled =
+			throttledEvents === 'all' ||
+			(throttledEvents === null || throttledEvents === void 0
+				? void 0
+				: throttledEvents.includes('mousemove'));
+
+		// Cancel any pending execution
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+		if (timeoutId !== null && (typeof throttleDelay !== 'number' || !isThrottled)) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
+
+		/*
+		 * Here it is important to resolve the chart pointer _before_ the callback,
+		 * because once we leave the current event loop, the mousePointer event object will lose
+		 * reference to currentTarget which getRelativeCoordinate uses.
+		 */
+		latestChartPointer = getRelativeCoordinate(mousePointer);
+		var callback = () => {
+			/*
+			 * Here we read a fresh state again inside the callback to ensure we have the latest state values
+			 * after any potential actions that may have been dispatched between the original event and this callback.
+			 */
+			var currentState = listenerApi.getState();
+			var tooltipEventType = selectTooltipEventType(
+				currentState,
+				currentState.tooltip.settings.shared,
+			);
+			if (!latestChartPointer) {
+				rafId = null;
+				timeoutId = null;
+				return;
+			}
+
+			/*
+			 * This functionality only applies to charts that have axes.
+			 * Graphical items have its own mouse events handling mechanism where they attach events directly to the items.
+			 */
+			if (tooltipEventType === 'axis') {
+				var activeProps = selectActivePropsFromChartPointer(currentState, latestChartPointer);
+				if (
+					(activeProps === null || activeProps === void 0 ? void 0 : activeProps.activeIndex) !=
+					null
+				) {
+					listenerApi.dispatch(
+						setMouseOverAxisIndex({
+							activeIndex: activeProps.activeIndex,
+							activeDataKey: undefined,
+							activeCoordinate: activeProps.activeCoordinate,
+						}),
+					);
+				} else {
+					// this is needed to clear tooltip state when the mouse moves out of the inRange (svg - offset) function, but not yet out of the svg
+					listenerApi.dispatch(mouseLeaveChart());
+				}
+			}
+			rafId = null;
+			timeoutId = null;
+		};
+		if (!isThrottled) {
+			callback();
+			return;
+		}
+		if (throttleDelay === 'raf') {
+			rafId = requestAnimationFrame(callback);
+		} else if (typeof throttleDelay === 'number') {
+			if (timeoutId === null) {
+				timeoutId = setTimeout(callback, throttleDelay);
+			}
+		}
+	},
+});

package/src/state/optionsSlice.js

@@ -0,0 +1,45 @@
+// Vendored verbatim from recharts@3.9.2 es6/state/optionsSlice.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { createSlice } from '@reduxjs/toolkit';
+import { isNan } from '../util/DataUtils';
+
+/**
+ * These chart options are decided internally, by Recharts,
+ * and will not change during the lifetime of the chart.
+ *
+ * Changing these options can be done by swapping the root element
+ * which will make a brand-new Redux store.
+ *
+ * If you want to store options that can be changed by the user,
+ * use UpdatableChartOptions in rootPropsSlice.ts.
+ */
+
+export var arrayTooltipSearcher = (data, strIndex) => {
+	if (!strIndex) return undefined;
+	if (!Array.isArray(data)) return undefined;
+	var numIndex = Number.parseInt(strIndex, 10);
+	if (isNan(numIndex)) {
+		return undefined;
+	}
+	return data[numIndex];
+};
+var initialState = {
+	chartName: '',
+	tooltipPayloadSearcher: () => undefined,
+	eventEmitter: undefined,
+	defaultTooltipEventType: 'axis',
+};
+var optionsSlice = createSlice({
+	name: 'options',
+	initialState,
+	reducers: {
+		createEventEmitter: (state) => {
+			if (state.eventEmitter == null) {
+				state.eventEmitter = Symbol('rechartsEventEmitter');
+			}
+		},
+	},
+});
+export var optionsReducer = optionsSlice.reducer;
+var createEventEmitter = optionsSlice.actions.createEventEmitter;
+export { createEventEmitter };

package/src/state/polarAxisSlice.js

@@ -0,0 +1,33 @@
+// Vendored verbatim from recharts@3.9.2 es6/state/polarAxisSlice.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { createSlice } from '@reduxjs/toolkit';
+import { castDraft } from 'immer';
+var initialState = {
+	radiusAxis: {},
+	angleAxis: {},
+};
+var polarAxisSlice = createSlice({
+	name: 'polarAxis',
+	initialState,
+	reducers: {
+		addRadiusAxis(state, action) {
+			state.radiusAxis[action.payload.id] = castDraft(action.payload);
+		},
+		removeRadiusAxis(state, action) {
+			delete state.radiusAxis[action.payload.id];
+		},
+		addAngleAxis(state, action) {
+			state.angleAxis[action.payload.id] = castDraft(action.payload);
+		},
+		removeAngleAxis(state, action) {
+			delete state.angleAxis[action.payload.id];
+		},
+	},
+});
+var _polarAxisSlice$actio = polarAxisSlice.actions,
+	addRadiusAxis = _polarAxisSlice$actio.addRadiusAxis,
+	removeRadiusAxis = _polarAxisSlice$actio.removeRadiusAxis,
+	addAngleAxis = _polarAxisSlice$actio.addAngleAxis,
+	removeAngleAxis = _polarAxisSlice$actio.removeAngleAxis;
+export { addRadiusAxis, removeRadiusAxis, addAngleAxis, removeAngleAxis };
+export var polarAxisReducer = polarAxisSlice.reducer;

package/src/state/polarOptionsSlice.js

@@ -0,0 +1,26 @@
+// Vendored verbatim from recharts@3.9.2 es6/state/polarOptionsSlice.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+import { createSlice } from '@reduxjs/toolkit';
+var initialState = null;
+var reducers = {
+	updatePolarOptions: (state, action) => {
+		if (state === null) {
+			return action.payload;
+		}
+		state.startAngle = action.payload.startAngle;
+		state.endAngle = action.payload.endAngle;
+		state.cx = action.payload.cx;
+		state.cy = action.payload.cy;
+		state.innerRadius = action.payload.innerRadius;
+		state.outerRadius = action.payload.outerRadius;
+		return state;
+	},
+};
+var polarOptionsSlice = createSlice({
+	name: 'polarOptions',
+	initialState,
+	reducers,
+});
+var updatePolarOptions = polarOptionsSlice.actions.updatePolarOptions;
+export { updatePolarOptions };
+export var polarOptionsReducer = polarOptionsSlice.reducer;

package/src/state/reduxDevtoolsJsonStringifyReplacer.js

@@ -0,0 +1,14 @@
+// Vendored verbatim from recharts@3.9.2 es6/state/reduxDevtoolsJsonStringifyReplacer.js (framework-agnostic).
+// Do not edit — update by re-vendoring when the recharts devDependency moves.
+export function reduxDevtoolsJsonStringifyReplacer(key, value) {
+	if (value instanceof HTMLElement) {
+		return 'HTMLElement <'.concat(value.tagName, ' class="').concat(value.className, '">');
+	}
+	if (value === window) {
+		return 'global.window';
+	}
+	if (key === 'children' && typeof value === 'object' && value !== null) {
+		return '<<CHILDREN>>';
+	}
+	return value;
+}