atom.io 0.33.11 → 0.33.13

package/src/react-devtools/json-editor/editors-by-type/array-editor.tsx

@@ -1,6 +1,12 @@
-import { type Json, JSON_DEFAULTS } from "atom.io/json"
-import type { ReactElement } from "react"
+import type { RegularAtomToken } from "atom.io"
+import { findInStore } from "atom.io/internal"
+import type { Json, JsonTypes } from "atom.io/json"
+import { JSON_DEFAULTS } from "atom.io/json"
+import { useI, useO } from "atom.io/react"
+import { DevtoolsContext } from "atom.io/react-devtools/store"
+import { type ReactElement, useContext } from "react"
 
+import type { JsonEditorComponents, SetterOrUpdater } from ".."
 import type { JsonEditorProps_INTERNAL } from "../json-editor-internal"
 import { JsonEditor_INTERNAL } from "../json-editor-internal"
 import { makeElementSetters } from "./utilities/array-elements"
@@ -9,6 +15,53 @@ import {
 	makePropertyRemovers,
 } from "./utilities/object-properties"
 
+type ArrayElementProps = {
+	path: ReadonlyArray<number | string>
+	isReadonly: (path: ReadonlyArray<number | string>) => boolean
+	isHidden: (path: ReadonlyArray<number | string>) => boolean
+	data: unknown
+	set: SetterOrUpdater<Json.Tree.Array>
+	remove: (() => void) | undefined
+	recast: (newType: keyof JsonTypes) => void
+	Components: JsonEditorComponents
+	testid?: string | undefined
+	viewIsOpenAtom: RegularAtomToken<boolean, readonly (number | string)[]>
+}
+const ArrayElement = ({
+	path,
+	isReadonly,
+	isHidden,
+	data,
+	set,
+	remove,
+	recast,
+	Components,
+	testid,
+	viewIsOpenAtom,
+}: ArrayElementProps): ReactElement => {
+	const index = path[path.length - 1]
+	const viewIsOpen = useO(viewIsOpenAtom)
+	const setViewIsOpen = useI(viewIsOpenAtom)
+
+	return (
+		<JsonEditor_INTERNAL
+			path={path}
+			name={`${index}`}
+			isReadonly={isReadonly}
+			isHidden={isHidden}
+			data={data}
+			set={set}
+			remove={remove}
+			recast={recast}
+			className="json_editor_element"
+			Components={Components}
+			isOpen={viewIsOpen}
+			setIsOpen={setViewIsOpen}
+			testid={`${testid}-element-${index}`}
+		/>
+	)
+}
+
 export const ArrayEditor = ({
 	path = [],
 	isReadonly = () => false,
@@ -18,6 +71,7 @@ export const ArrayEditor = ({
 	Components,
 	testid,
 }: JsonEditorProps_INTERNAL<Json.Tree.Array>): ReactElement => {
+	const { viewIsOpenAtoms, store } = useContext(DevtoolsContext)
 	const disabled = isReadonly(path)
 
 	const setElement = makeElementSetters(data, set)
@@ -26,41 +80,47 @@ export const ArrayEditor = ({
 
 	return (
 		<Components.ArrayWrapper>
-			<div className={`json_editor_elements${disabled ? ` readonly` : ``}`}>
+			<main className={`json_editor_elements${disabled ? ` readonly` : ``}`}>
 				{data.map((element, index) => {
-					const newPath = [...path, index]
+					const elementPath = [...path, index]
+					const pathKey = elementPath.join(`,`)
+					const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, [
+						...path,
+						index,
+					])
 					return (
-						<JsonEditor_INTERNAL
-							key={newPath.join(``)}
-							path={newPath}
-							name={`${index}`}
+						<ArrayElement
+							key={pathKey}
+							path={elementPath}
 							isReadonly={isReadonly}
 							isHidden={isHidden}
 							data={element}
 							set={setElement[index]}
 							remove={removeElement[index]}
 							recast={recastElement[index]}
-							className="json_editor_element"
 							Components={Components}
-							testid={`${testid}-element-${index}`}
+							testid={testid}
+							viewIsOpenAtom={viewIsOpenAtom}
 						/>
 					)
 				})}
-			</div>
-			{disabled ? null : (
-				<Components.Button
-					testid={`${testid}-add-element`}
-					disabled={disabled}
-					onClick={() => {
-						set((current) => {
-							const newData = [...current, JSON_DEFAULTS.string]
-							return newData
-						})
-					}}
-				>
-					+
-				</Components.Button>
-			)}
+			</main>
+			{!disabled ? (
+				<footer>
+					<Components.Button
+						testid={`${testid}-add-element`}
+						disabled={disabled}
+						onClick={() => {
+							set((current) => {
+								const newData = [...current, JSON_DEFAULTS.string]
+								return newData
+							})
+						}}
+					>
+						<Components.AddIcon />
+					</Components.Button>
+				</footer>
+			) : null}
 		</Components.ArrayWrapper>
 	)
 }

package/src/react-devtools/json-editor/editors-by-type/object-editor.tsx

@@ -1,8 +1,14 @@
-import type { Json } from "atom.io/json"
+import type { RegularAtomToken } from "atom.io"
+import { findInStore } from "atom.io/internal"
+import type { Json, JsonTypes } from "atom.io/json"
+import { useI } from "atom.io/react/use-i"
+import { useO } from "atom.io/react/use-o"
+import { DevtoolsContext } from "atom.io/react-devtools/store"
 import type { FC, ReactElement } from "react"
-import { useRef } from "react"
+import { useContext, useRef } from "react"
 
 import { ElasticInput } from "../../elastic-input"
+import type { SetterOrUpdater } from ".."
 import type { JsonEditorComponents } from "../default-components"
 import type { JsonEditorProps_INTERNAL } from "../json-editor-internal"
 import { JsonEditor_INTERNAL } from "../json-editor-internal"
@@ -43,6 +49,56 @@ export const PropertyAdder: FC<PropertyAdderProps> = ({
 	</Components.MissingPropertyWrapper>
 )
 
+type ObjectPropertyProps = {
+	path: ReadonlyArray<number | string>
+	isReadonly: (path: ReadonlyArray<number | string>) => boolean
+	isHidden: (path: ReadonlyArray<number | string>) => boolean
+	data: unknown
+	set: SetterOrUpdater<Json.Tree.Object>
+	rename: (newKey: string) => void
+	remove: (() => void) | undefined
+	recast: (newType: keyof JsonTypes) => void
+	Components: JsonEditorComponents
+	testid?: string | undefined
+	viewIsOpenAtom: RegularAtomToken<boolean, readonly (number | string)[]>
+}
+const ObjectProperty = ({
+	path,
+	isReadonly,
+	isHidden,
+	data,
+	set,
+	rename,
+	remove,
+	recast,
+	Components,
+	testid,
+	viewIsOpenAtom,
+}: ObjectPropertyProps): ReactElement => {
+	const key = path[path.length - 1]
+	const viewIsOpen = useO(viewIsOpenAtom)
+	const setViewIsOpen = useI(viewIsOpenAtom)
+
+	return (
+		<JsonEditor_INTERNAL
+			path={path}
+			name={`${key}`}
+			isReadonly={isReadonly}
+			isHidden={isHidden}
+			data={data}
+			set={set}
+			rename={rename}
+			remove={remove}
+			recast={recast}
+			className="json_editor_property"
+			Components={Components}
+			isOpen={viewIsOpen}
+			setIsOpen={setViewIsOpen}
+			testid={`${testid}-property-${key}`}
+		/>
+	)
+}
+
 export const ObjectEditor = <T extends Json.Tree.Object>({
 	path = [],
 	isReadonly = () => false,
@@ -52,6 +108,8 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 	Components,
 	testid,
 }: JsonEditorProps_INTERNAL<T>): ReactElement => {
+	const { viewIsOpenAtoms, store } = useContext(DevtoolsContext)
+
 	const disabled = isReadonly(path)
 
 	const stableKeyMap = useRef<Record<keyof T, keyof T>>(
@@ -76,30 +134,34 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 			<div className={`json_editor_properties${disabled ? ` readonly` : ``}`}>
 				{Object.keys(data).map((key) => {
 					const originalKey = stableKeyMap.current[key]
-					const newPath = [...path, key]
-					const originalPath = [...path, originalKey]
+					const propertyPath = [...path, key]
+					const originalPropertyPath = [...path, originalKey]
+					const stablePathKey = originalPropertyPath.join(`.`)
+					const viewIsOpenAtom = findInStore(store, viewIsOpenAtoms, [
+						...path,
+						key,
+					])
 
 					return (
-						<JsonEditor_INTERNAL
-							key={originalPath.join(`.`)}
-							path={newPath}
-							name={key}
+						<ObjectProperty
+							key={stablePathKey}
+							path={propertyPath}
 							isReadonly={isReadonly}
 							isHidden={isHidden}
-							data={data[key as keyof T]}
-							set={setProperty[key as keyof T]}
-							rename={renameProperty[key as keyof T]}
-							remove={removeProperty[key as keyof T]}
-							recast={recastProperty[key as keyof T]}
-							className="json_editor_property"
+							data={data[key]}
+							set={setProperty[key]}
+							rename={renameProperty[key]}
+							remove={removeProperty[key]}
+							recast={recastProperty[key]}
 							Components={Components}
-							testid={`${testid}-property-${key}`}
+							testid={testid}
+							viewIsOpenAtom={viewIsOpenAtom}
 						/>
 					)
 				})}
 			</div>
 			{disabled ? null : (
-				<>
+				<footer>
 					<Components.Button
 						disabled={disabled}
 						testid={`${testid}-add-property`}
@@ -107,7 +169,7 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 							makePropertyAdder(`new_property`, `string`)()
 						}}
 					>
-						+
+						<Components.AddIcon />
 					</Components.Button>
 					<Components.Button
 						testid={`${testid}-sort-properties`}
@@ -118,7 +180,7 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 					>
 						Sort
 					</Components.Button>
-				</>
+				</footer>
 			)}
 		</Components.ObjectWrapper>
 	)

package/src/react-devtools/json-editor/json-editor-internal.tsx

@@ -1,9 +1,17 @@
+import { actUponStore, arbitrary } from "atom.io/internal"
 import { jsonRefinery } from "atom.io/introspection"
 import type { JsonTypes } from "atom.io/json"
 import { isJson } from "atom.io/json"
-import type { CSSProperties, FC, ReactElement } from "react"
+import {
+	type CSSProperties,
+	type FC,
+	type ReactElement,
+	useContext,
+} from "react"
 
+import { button } from "../Button"
 import { ElasticInput } from "../elastic-input"
+import { DevtoolsContext } from "../store"
 import type { SetterOrUpdater } from "."
 import { SubEditors } from "."
 import type { JsonEditorComponents } from "./default-components"
@@ -23,6 +31,8 @@ export type JsonEditorProps_INTERNAL<T> = {
 	style?: CSSProperties | undefined
 	Header?: FC<{ data: T }> | undefined
 	Components: JsonEditorComponents
+	isOpen?: boolean
+	setIsOpen?: (newValue: boolean) => void
 	testid?: string | undefined
 }
 
@@ -38,10 +48,13 @@ export const JsonEditor_INTERNAL = <T,>({
 	isHidden = () => false,
 	className,
 	style,
-	Header: HeaderDisplay,
 	Components,
+	isOpen,
+	setIsOpen,
 	testid,
 }: JsonEditorProps_INTERNAL<T>): ReactElement | null => {
+	const { openCloseAllTX, store } = useContext(DevtoolsContext)
+
 	const dataIsJson = isJson(data)
 	const refined = jsonRefinery.refine<unknown>(data) ?? {
 		type: `non-json`,
@@ -53,6 +66,9 @@ export const JsonEditor_INTERNAL = <T,>({
 
 	const disabled = isReadonly(path)
 
+	const dataIsTree = refined.type === `array` || refined.type === `object`
+	const dataIsExpandable = dataIsTree && isOpen !== undefined && setIsOpen
+
 	return isHidden(path) ? null : (
 		<Components.ErrorBoundary>
 			<Components.EditorWrapper
@@ -60,64 +76,115 @@ export const JsonEditor_INTERNAL = <T,>({
 				style={style}
 				testid={testid}
 			>
-				{remove ? (
-					<Components.Button
-						disabled={disabled}
-						onClick={() => {
-							remove()
-						}}
-						testid={`${testid}-delete`}
-					>
-						<Components.DeleteIcon />
-					</Components.Button>
-				) : null}
-				{HeaderDisplay && <HeaderDisplay data={data} />}
-				{rename && (
-					<Components.KeyWrapper>
-						<ElasticInput
-							value={name}
-							onChange={
-								disabled
-									? undefined
-									: (e) => {
-											rename(e.target.value)
+				<header>
+					<main>
+						{remove || dataIsExpandable ? (
+							<button.OpenClose
+								isOpen={isOpen ?? false}
+								testid={`${testid}-open-close`}
+								onShiftClick={() => {
+									actUponStore(store, openCloseAllTX, arbitrary())(path, isOpen)
+									return false
+								}}
+								setIsOpen={setIsOpen}
+								disabled={!dataIsExpandable}
+							/>
+						) : null}
+						{rename && (
+							<Components.KeyWrapper>
+								<ElasticInput
+									value={name}
+									onChange={(e) => {
+										rename(e.target.value)
+									}}
+									disabled={disabled}
+									data-testid={`${testid}-rename`}
+								/>
+							</Components.KeyWrapper>
+						)}
+						{dataIsTree ? (
+							<>
+								{isOpen !== undefined && setIsOpen ? (
+									<span className="json_viewer">{JSON.stringify(data)}</span>
+								) : null}
+								{recast ? (
+									<select
+										onChange={(e) => {
+											recast(e.target.value as keyof JsonTypes)
+										}}
+										value={refined.type}
+										disabled={disabled}
+										data-testid={`${testid}-recast`}
+									>
+										{Object.keys(SubEditors).map((type) => (
+											<option key={type} value={type}>
+												{type}
+											</option>
+										))}
+									</select>
+								) : null}
+							</>
+						) : (
+							<>
+								<SubEditor
+									data={refined.data as never}
+									set={set}
+									remove={remove}
+									rename={rename}
+									path={path}
+									isReadonly={isReadonly}
+									isHidden={isHidden}
+									Components={Components}
+									testid={testid}
+								/>
+								{recast && dataIsJson ? (
+									<select
+										onChange={
+											disabled
+												? undefined
+												: (e) => {
+														recast(e.target.value as keyof JsonTypes)
+													}
 										}
-							}
+										value={refined.type}
+										disabled={disabled}
+										data-testid={`${testid}-recast`}
+									>
+										{Object.keys(SubEditors).map((type) => (
+											<option key={type} value={type}>
+												{type}
+											</option>
+										))}
+									</select>
+								) : null}
+							</>
+						)}
+					</main>
+					{remove ? (
+						<Components.Button
 							disabled={disabled}
-							data-testid={`${testid}-rename`}
-						/>
-					</Components.KeyWrapper>
-				)}
-				<SubEditor
-					data={refined.data as never}
-					set={set}
-					remove={remove}
-					rename={rename}
-					path={path}
-					isReadonly={isReadonly}
-					isHidden={isHidden}
-					Components={Components}
-					testid={testid}
-				/>
-				{recast && dataIsJson ? (
-					<select
-						onChange={
-							disabled
-								? undefined
-								: (e) => {
-										recast(e.target.value as keyof JsonTypes)
-									}
-						}
-						value={refined.type}
-						disabled={disabled}
-						data-testid={`${testid}-recast`}
-					>
-						{Object.keys(SubEditors).map((type) => (
-							<option key={type} value={type}>
-								{type}
-							</option>
-						))}
-					</select>
+							onClick={() => {
+								remove()
+							}}
+							testid={`${testid}-delete`}
+						>
+							<Components.DeleteIcon />
+						</Components.Button>
+					) : null}
+				</header>
+
+				{dataIsTree && isOpen !== false ? (
+					<SubEditor
+						data={refined.data as never}
+						set={set}
+						remove={remove}
+						rename={rename}
+						path={path}
+						isReadonly={isReadonly}
+						isHidden={isHidden}
+						Components={Components}
+						testid={testid}
+					/>
 				) : null}
 			</Components.EditorWrapper>
 		</Components.ErrorBoundary>

package/src/react-devtools/store.ts

@@ -1,12 +1,22 @@
-import type { RegularAtomFamilyToken, RegularAtomToken } from "atom.io"
+import type {
+	AtomToken,
+	RegularAtomFamilyToken,
+	RegularAtomToken,
+	SelectorToken,
+	TransactionToken,
+} from "atom.io"
 import {
 	createAtomFamily,
 	createStandaloneAtom,
+	createTransaction,
 	IMPLICIT,
 	type Store,
 } from "atom.io/internal"
-import type { IntrospectionStates } from "atom.io/introspection"
-import { attachIntrospectionStates } from "atom.io/introspection"
+import type {
+	IntrospectionStates,
+	WritableTokenIndex,
+} from "atom.io/introspection"
+import { attachIntrospectionStates, isPlainObject } from "atom.io/introspection"
 import { persistSync } from "atom.io/web"
 import type { Context } from "react"
 import { createContext } from "react"
@@ -17,7 +27,10 @@ export type DevtoolsStates = {
 	devtoolsAreOpenState: RegularAtomToken<boolean>
 	devtoolsViewSelectionState: RegularAtomToken<DevtoolsView>
 	devtoolsViewOptionsState: RegularAtomToken<DevtoolsView[]>
-	viewIsOpenAtoms: RegularAtomFamilyToken<boolean, string>
+	viewIsOpenAtoms: RegularAtomFamilyToken<boolean, readonly (number | string)[]>
+	openCloseAllTX: TransactionToken<
+		(path: readonly (number | string)[], current?: boolean) => void
+	>
 }
 
 export function attachDevtoolsStates(
@@ -52,13 +65,90 @@ export function attachDevtoolsStates(
 				: [persistSync(window.localStorage, JSON, `🔍 Devtools View Options`)],
 	})
 
-	const viewIsOpenAtoms = createAtomFamily<boolean, string>(store, {
+	const viewIsOpenAtoms = createAtomFamily<
+		boolean,
+		readonly (number | string)[]
+	>(store, {
 		key: `🔍 Devtools View Is Open`,
 		default: false,
 		effects: (key) =>
 			typeof window === `undefined`
 				? []
-				: [persistSync(window.localStorage, JSON, key + `:view-is-open`)],
+				: [persistSync(window.localStorage, JSON, `view-is-open:${key.join()}`)],
+	})
+
+	const openCloseAllTX: TransactionToken<
+		(path: readonly (number | string)[], current?: boolean) => void
+	> = createTransaction<
+		(path: readonly (number | string)[], current?: boolean) => void
+	>(store, {
+		key: `openCloseMultiView`,
+		do: ({ get, set }, path, current) => {
+			const currentView = get(devtoolsViewSelectionState)
+			let states:
+				| WritableTokenIndex<AtomToken<unknown>>
+				| WritableTokenIndex<SelectorToken<unknown>>
+			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] as string)
+					let value: unknown
+					let segments: (number | string)[]
+					if (item) {
+						if (`familyMembers` in item) {
+							if (path.length === 2) {
+								for (const [subKey] of item.familyMembers) {
+									set(viewIsOpenAtoms, [path[0], subKey], !current)
+								}
+								return
+							}
+							// biome-ignore lint/style/noNonNullAssertion: fine here
+							const token = item.familyMembers.get(path[1] as string)!
+							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 as keyof typeof value]
+							}
+						}
+						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 {
@@ -67,6 +157,7 @@ export function attachDevtoolsStates(
 		devtoolsViewSelectionState,
 		devtoolsViewOptionsState,
 		viewIsOpenAtoms,
+		openCloseAllTX,
 		store,
 	}
 }