atom.io 0.33.12 → 0.33.13

package/dist/react-devtools/index.js

@@ -1,22 +1,25 @@
 import { useI, useO } from "../use-o-BrXc7Qro.js";
-import { IMPLICIT, become, createAtomFamily, createStandaloneAtom, findInStore } from "atom.io/internal";
+import { IMPLICIT, actUponStore, arbitrary, become, createAtomFamily, createStandaloneAtom, createTransaction, findInStore, getFromStore } from "atom.io/internal";
 import { JSON_DEFAULTS, fromEntries, isJson, stringifyJson, toEntries } from "atom.io/json";
-import { getState, redo, undo } from "atom.io";
+import { redo, undo } from "atom.io";
 import { Component, Fragment, createContext, forwardRef, useContext, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { StoreContext, useI as useI$1, useO as useO$1 } from "atom.io/react";
 import { LayoutGroup, motion } from "motion/react";
-import { attachIntrospectionStates, discoverType, jsonRefinery, prettyJson, primitiveRefinery } from "atom.io/introspection";
+import { attachIntrospectionStates, discoverType, isPlainObject, jsonRefinery, prettyJson, primitiveRefinery } from "atom.io/introspection";
 import { persistSync } from "atom.io/web";
 
 //#region src/react-devtools/Button.tsx
-const OpenClose = ({ isOpen, setIsOpen, disabled, testid }) => {
+const OpenClose = ({ isOpen, setIsOpen, onShiftClick, disabled, testid }) => {
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"data-testid": testid,
 		className: `carat ${isOpen ? `open` : `closed`}`,
-		onClick: () => {
-			setIsOpen((prev) => !prev);
+		onClick: (event) => {
+			if (onShiftClick && event.shiftKey) {
+				if (!onShiftClick(event)) return;
+			}
+			setIsOpen?.((prev) => !prev);
 		},
 		disabled,
 		children: /* @__PURE__ */ jsx("span", {
@@ -189,7 +192,52 @@ function attachDevtoolsStates(store) {
 	const viewIsOpenAtoms = createAtomFamily(store, {
 		key: `🔍 Devtools View Is Open`,
 		default: false,
-		effects: (key) => typeof window === `undefined` ? [] : [persistSync(window.localStorage, JSON, key + `:view-is-open`)]
+		effects: (key) => typeof window === `undefined` ? [] : [persistSync(window.localStorage, JSON, `view-is-open:${key.join()}`)]
+	});
+	const openCloseAllTX = createTransaction(store, {
+		key: `openCloseMultiView`,
+		do: ({ get, set }, path, current) => {
+			const currentView = get(devtoolsViewSelectionState);
+			let states;
+			switch (currentView) {
+				case `atoms`:
+					states = get(introspectionStates.atomIndex);
+					break;
+				case `selectors`:
+					states = get(introspectionStates.selectorIndex);
+					break;
+				case `transactions`:
+				case `timelines`: return;
+			}
+			switch (path.length) {
+				case 1:
+					for (const [key] of states) set(viewIsOpenAtoms, [key], !current);
+					break;
+				default: {
+					const item = states.get(path[0]);
+					let value;
+					let segments;
+					if (item) {
+						if (`familyMembers` in item) {
+							if (path.length === 2) {
+								for (const [subKey] of item.familyMembers) set(viewIsOpenAtoms, [path[0], subKey], !current);
+								return;
+							}
+							const token = item.familyMembers.get(path[1]);
+							value = get(token);
+							segments = path.slice(2, -1);
+						} else {
+							value = get(item);
+							segments = path.slice(1, -1);
+						}
+						for (const segment of segments) if (value && typeof value === `object`) value = value[segment];
+						const head = path.slice(0, -1);
+						if (Array.isArray(value)) for (let i = 0; i < value.length; i++) set(viewIsOpenAtoms, [...head, i], !current);
+						else if (isPlainObject(value)) for (const key of Object.keys(value)) set(viewIsOpenAtoms, [...head, key], !current);
+					}
+				}
+			}
+		}
 	});
 	return {
 		...introspectionStates,
@@ -197,6 +245,7 @@ function attachDevtoolsStates(store) {
 		devtoolsViewSelectionState,
 		devtoolsViewOptionsState,
 		viewIsOpenAtoms,
+		openCloseAllTX,
 		store
 	};
 }
@@ -410,6 +459,7 @@ const NonJsonEditor = ({ data, testid }) => {
 //#endregion
 //#region src/react-devtools/json-editor/json-editor-internal.tsx
 const JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [], isReadonly = () => false, isHidden = () => false, className, style, Components, isOpen, setIsOpen, testid }) => {
+	const { openCloseAllTX, store } = useContext(DevtoolsContext);
 	const dataIsJson = isJson(data);
 	const refined = jsonRefinery.refine(data) ?? {
 		type: `non-json`,
@@ -418,23 +468,21 @@ const JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [
 	const SubEditor = dataIsJson ? SubEditors[refined.type] : NonJsonEditor;
 	const disabled = isReadonly(path);
 	const dataIsTree = refined.type === `array` || refined.type === `object`;
+	const dataIsExpandable = dataIsTree && isOpen !== void 0 && setIsOpen;
 	return isHidden(path) ? null : /* @__PURE__ */ jsx(Components.ErrorBoundary, { children: /* @__PURE__ */ jsxs(Components.EditorWrapper, {
 		className,
 		style,
 		testid,
-		children: [/* @__PURE__ */ jsxs("header", { children: [
-			remove ? /* @__PURE__ */ jsx(Components.Button, {
-				disabled,
-				onClick: () => {
-					remove();
-				},
-				testid: `${testid}-delete`,
-				children: /* @__PURE__ */ jsx(Components.DeleteIcon, {})
-			}) : null,
-			dataIsTree && isOpen !== void 0 && setIsOpen ? /* @__PURE__ */ jsx(button.OpenClose, {
-				isOpen,
+		children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsxs("main", { children: [
+			remove || dataIsExpandable ? /* @__PURE__ */ jsx(button.OpenClose, {
+				isOpen: isOpen ?? false,
 				testid: `${testid}-open-close`,
-				setIsOpen
+				onShiftClick: () => {
+					actUponStore(store, openCloseAllTX, arbitrary())(path, isOpen);
+					return false;
+				},
+				setIsOpen,
+				disabled: !dataIsExpandable
 			}) : null,
 			rename && /* @__PURE__ */ jsx(Components.KeyWrapper, { children: /* @__PURE__ */ jsx(ElasticInput, {
 				value: name,
@@ -444,7 +492,10 @@ const JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [
 				disabled,
 				"data-testid": `${testid}-rename`
 			}) }),
-			dataIsTree ? /* @__PURE__ */ jsxs(Fragment$1, { children: [recast ? /* @__PURE__ */ jsx("select", {
+			dataIsTree ? /* @__PURE__ */ jsxs(Fragment$1, { children: [isOpen !== void 0 && setIsOpen ? /* @__PURE__ */ jsx("span", {
+				className: "json_viewer",
+				children: JSON.stringify(data)
+			}) : null, recast ? /* @__PURE__ */ jsx("select", {
 				onChange: (e) => {
 					recast(e.target.value);
 				},
@@ -455,9 +506,6 @@ const JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [
 					value: type,
 					children: type
 				}, type))
-			}) : null, isOpen !== void 0 && setIsOpen ? /* @__PURE__ */ jsx("span", {
-				className: "json_viewer",
-				children: JSON.stringify(data)
 			}) : null] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SubEditor, {
 				data: refined.data,
 				set,
@@ -480,7 +528,14 @@ const JsonEditor_INTERNAL = ({ data, set, name, rename, remove, recast, path = [
 					children: type
 				}, type))
 			}) : null] })
-		] }), dataIsTree && isOpen !== false ? /* @__PURE__ */ jsx(SubEditor, {
+		] }), remove ? /* @__PURE__ */ jsx(Components.Button, {
+			disabled,
+			onClick: () => {
+				remove();
+			},
+			testid: `${testid}-delete`,
+			children: /* @__PURE__ */ jsx(Components.DeleteIcon, {})
+		}) : null] }), dataIsTree && isOpen !== false ? /* @__PURE__ */ jsx(SubEditor, {
 			data: refined.data,
 			set,
 			remove,
@@ -775,12 +830,12 @@ const ArrayEditor = ({ path = [], isReadonly = () => false, isHidden = () => fal
 	const setElement = makeElementSetters(data, set);
 	const removeElement = makePropertyRemovers(data, set);
 	const recastElement = makePropertyRecasters(data, set);
-	return /* @__PURE__ */ jsxs(Components.ArrayWrapper, { children: [/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Components.ArrayWrapper, { children: [/* @__PURE__ */ jsx("main", {
 		className: `json_editor_elements${disabled ? ` readonly` : ``}`,
 		children: data.map((element, index) => {
 			const elementPath = [...path, index];
 			const pathKey = elementPath.join(`,`);
-			const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, `${testid}__${pathKey}`);
+			const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, [...path, index]);
 			return /* @__PURE__ */ jsx(ArrayElement, {
 				path: elementPath,
 				isReadonly,
@@ -794,7 +849,7 @@ const ArrayEditor = ({ path = [], isReadonly = () => false, isHidden = () => fal
 				viewIsOpenAtom
 			}, pathKey);
 		})
-	}), /* @__PURE__ */ jsx(Components.Button, {
+	}), !disabled ? /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(Components.Button, {
 		testid: `${testid}-add-element`,
 		disabled,
 		onClick: () => {
@@ -804,7 +859,7 @@ const ArrayEditor = ({ path = [], isReadonly = () => false, isHidden = () => fal
 			});
 		},
 		children: /* @__PURE__ */ jsx(Components.AddIcon, {})
-	})] });
+	}) }) : null] });
 };
 
 //#endregion
@@ -850,7 +905,7 @@ const ObjectEditor = ({ path = [], isReadonly = () => false, isHidden = () => fa
 			const propertyPath = [...path, key];
 			const originalPropertyPath = [...path, originalKey];
 			const stablePathKey = originalPropertyPath.join(`.`);
-			const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, `${testid}__${stablePathKey}`);
+			const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, [...path, key]);
 			return /* @__PURE__ */ jsx(ObjectProperty, {
 				path: propertyPath,
 				isReadonly,
@@ -865,7 +920,7 @@ const ObjectEditor = ({ path = [], isReadonly = () => false, isHidden = () => fa
 				viewIsOpenAtom
 			}, stablePathKey);
 		})
-	}), disabled ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Components.Button, {
+	}), disabled ? null : /* @__PURE__ */ jsxs("footer", { children: [/* @__PURE__ */ jsx(Components.Button, {
 		disabled,
 		testid: `${testid}-add-property`,
 		onClick: () => {
@@ -923,7 +978,7 @@ const SubEditors = {
 	object: ObjectEditor,
 	string: StringEditor
 };
-const JsonEditor = ({ data, set, name, rename, remove, isReadonly = () => false, isHidden = () => false, className, Header, style, Components: CustomComponents = {}, testid }) => {
+const JsonEditor = ({ data, set, name, rename, remove, path = [], isReadonly = () => false, isHidden = () => false, className, Header, style, Components: CustomComponents = {}, testid }) => {
 	const Components = {
 		...DEFAULT_JSON_EDITOR_COMPONENTS,
 		...CustomComponents
@@ -934,7 +989,7 @@ const JsonEditor = ({ data, set, name, rename, remove, isReadonly = () => false,
 		name,
 		rename,
 		remove,
-		path: [],
+		path,
 		isReadonly,
 		isHidden,
 		className,
@@ -950,19 +1005,23 @@ const JsonEditor = ({ data, set, name, rename, remove, isReadonly = () => false,
 const StateEditor = ({ token }) => {
 	const set = useI$1(token);
 	const data = useO$1(token);
+	const metaPath = token.family ? [token.family.key, token.family.subKey] : [token.key];
 	return /* @__PURE__ */ jsx(JsonEditor, {
 		testid: `${token.key}-state-editor`,
 		data,
-		set
+		set,
+		path: metaPath
 	});
 };
 const ReadonlySelectorViewer = ({ token }) => {
 	const data = useO$1(token);
+	const metaPath = token.family ? [token.family.key, token.family.subKey] : [token.key];
 	return /* @__PURE__ */ jsx(JsonEditor, {
 		testid: `${token.key}-state-editor`,
 		data,
 		set: () => null,
-		isReadonly: () => true
+		isReadonly: () => true,
+		path: metaPath
 	});
 };
 const StoreEditor = ({ token }) => {
@@ -979,59 +1038,73 @@ const StoreEditor = ({ token }) => {
 //#endregion
 //#region src/react-devtools/StateIndex.tsx
 const StateIndexLeafNode = ({ node, isOpenState, typeState }) => {
+	const { openCloseAllTX, store } = useContext(DevtoolsContext);
 	const setIsOpen = useI$1(isOpenState);
 	const isOpen = useO$1(isOpenState);
 	const state = useO$1(node);
 	const stateTypeLoadable = useO$1(typeState);
 	const stateType = stateTypeLoadable instanceof Promise ? `Promise` : stateTypeLoadable;
 	const isPrimitive = Boolean(primitiveRefinery.refine(state));
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("header", { children: [
-		/* @__PURE__ */ jsx(button.OpenClose, {
-			isOpen: isOpen && !isPrimitive,
-			testid: `open-close-state-${node.key}`,
-			setIsOpen,
-			disabled: isPrimitive
-		}),
-		/* @__PURE__ */ jsxs("main", {
-			onClick: () => {
-				console.log(node, getState(node));
-			},
-			onKeyUp: () => {
-				console.log(node, getState(node));
-			},
-			children: [/* @__PURE__ */ jsx("h2", { children: node.family?.subKey ?? node.key }), /* @__PURE__ */ jsxs("span", {
+	const path = node.family ? [node.family.key, node.family.subKey] : [node.key];
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsxs("main", {
+		onClick: () => {
+			console.log(node, getFromStore(store, node));
+		},
+		onKeyUp: () => {
+			console.log(node, getFromStore(store, node));
+		},
+		children: [
+			/* @__PURE__ */ jsx(button.OpenClose, {
+				isOpen: isOpen && !isPrimitive,
+				testid: `open-close-state-${node.key}`,
+				onShiftClick: () => {
+					actUponStore(store, openCloseAllTX, arbitrary())(path, isOpen);
+					return false;
+				},
+				setIsOpen,
+				disabled: isPrimitive
+			}),
+			/* @__PURE__ */ jsx("h2", { children: node.family?.subKey ?? node.key }),
+			/* @__PURE__ */ jsxs("span", {
 				className: "type detail",
 				children: [
 					"(",
 					stateType,
 					")"
 				]
-			})]
-		}),
-		isPrimitive ? /* @__PURE__ */ jsx(StoreEditor, { token: node }) : /* @__PURE__ */ jsx("div", {
-			className: "json_viewer",
-			children: JSON.stringify(state)
-		})
-	] }), isOpen && !isPrimitive ? /* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsx(StoreEditor, { token: node }) }) : null] });
+			})
+		]
+	}), isPrimitive ? /* @__PURE__ */ jsx(StoreEditor, { token: node }) : /* @__PURE__ */ jsx("div", {
+		className: "json_viewer",
+		children: JSON.stringify(state)
+	})] }), isOpen && !isPrimitive ? /* @__PURE__ */ jsx("main", { children: /* @__PURE__ */ jsx(StoreEditor, { token: node }) }) : null] });
 };
 const StateIndexTreeNode = ({ node, isOpenState }) => {
 	const setIsOpen = useI$1(isOpenState);
 	const isOpen = useO$1(isOpenState);
-	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
+	const { typeSelectors, viewIsOpenAtoms, openCloseAllTX, store } = useContext(DevtoolsContext);
 	for (const [key, childNode] of node.familyMembers) {
-		findInStore(store, viewIsOpenAtoms, key);
+		findInStore(store, viewIsOpenAtoms, [key]);
 		findInStore(store, typeSelectors, childNode.key);
 	}
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx(button.OpenClose, {
-		isOpen,
-		testid: `open-close-state-family-${node.key}`,
-		setIsOpen
-	}), /* @__PURE__ */ jsxs("main", { children: [/* @__PURE__ */ jsx("h2", { children: node.key }), /* @__PURE__ */ jsx("span", {
-		className: "type detail",
-		children: " (family)"
-	})] })] }), isOpen ? [...node.familyMembers.entries()].map(([key, childNode]) => /* @__PURE__ */ jsx(StateIndexNode, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsxs("main", { children: [
+		/* @__PURE__ */ jsx(button.OpenClose, {
+			isOpen,
+			testid: `open-close-state-family-${node.key}`,
+			onShiftClick: () => {
+				actUponStore(store, openCloseAllTX, arbitrary())([node.key], isOpen);
+				return false;
+			},
+			setIsOpen
+		}),
+		/* @__PURE__ */ jsx("h2", { children: node.key }),
+		/* @__PURE__ */ jsx("span", {
+			className: "type detail",
+			children: " (family)"
+		})
+	] }) }), isOpen ? [...node.familyMembers.entries()].map(([key, childNode]) => /* @__PURE__ */ jsx(StateIndexNode, {
 		node: childNode,
-		isOpenState: findInStore(store, viewIsOpenAtoms, childNode.key),
+		isOpenState: findInStore(store, viewIsOpenAtoms, [node.key, key]),
 		typeState: findInStore(store, typeSelectors, childNode.key)
 	}, key)) : null] });
 };
@@ -1052,14 +1125,13 @@ const StateIndexNode = ({ node, isOpenState, typeState }) => {
 const StateIndex = ({ tokenIndex }) => {
 	const tokenIds = useO$1(tokenIndex);
 	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext);
-	console.log(tokenIds);
 	return /* @__PURE__ */ jsx("article", {
 		className: "index state_index",
 		"data-testid": "state-index",
 		children: [...tokenIds.entries()].map(([key, node]) => {
 			return /* @__PURE__ */ jsx(StateIndexNode, {
 				node,
-				isOpenState: findInStore(store, viewIsOpenAtoms, node.key),
+				isOpenState: findInStore(store, viewIsOpenAtoms, [node.key]),
 				typeState: findInStore(store, typeSelectors, node.key)
 			}, key);
 		})
@@ -1270,7 +1342,7 @@ const TimelineIndex = () => {
 		children: tokenIds.filter((token) => !token.key.startsWith(`👁‍🗨`)).map((token) => {
 			return /* @__PURE__ */ jsx(TimelineLog, {
 				token,
-				isOpenState: findInStore(store, viewIsOpenAtoms, token.key),
+				isOpenState: findInStore(store, viewIsOpenAtoms, [token.key]),
 				timelineState: findInStore(store, timelineSelectors, token.key)
 			}, token.key);
 		})
@@ -1312,7 +1384,7 @@ const TransactionIndex = () => {
 		children: tokenIds.filter((token) => !token.key.startsWith(`🔍`)).map((token) => {
 			return /* @__PURE__ */ jsx(TransactionLog, {
 				token,
-				isOpenState: findInStore(store, viewIsOpenAtoms, token.key),
+				isOpenState: findInStore(store, viewIsOpenAtoms, [token.key]),
 				logState: findInStore(store, transactionLogSelectors, token.key)
 			}, token.key);
 		})