atom.io 0.33.12 → 0.33.14

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

@@ -1,10 +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"
@@ -46,6 +53,8 @@ export const JsonEditor_INTERNAL = <T,>({
 	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`,
@@ -58,6 +67,7 @@ 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>
@@ -67,6 +77,89 @@ export const JsonEditor_INTERNAL = <T,>({
 				testid={testid}
 			>
 				<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}
@@ -78,82 +171,6 @@ export const JsonEditor_INTERNAL = <T,>({
 							<Components.DeleteIcon />
 						</Components.Button>
 					) : null}
-					{dataIsTree && isOpen !== undefined && setIsOpen ? (
-						<button.OpenClose
-							isOpen={isOpen}
-							testid={`${testid}-open-close`}
-							setIsOpen={setIsOpen}
-						/>
-					) : null}
-					{rename && (
-						<Components.KeyWrapper>
-							<ElasticInput
-								value={name}
-								onChange={(e) => {
-									rename(e.target.value)
-								}}
-								disabled={disabled}
-								data-testid={`${testid}-rename`}
-							/>
-						</Components.KeyWrapper>
-					)}
-					{dataIsTree ? (
-						<>
-							{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}
-							{isOpen !== undefined && setIsOpen ? (
-								<span className="json_viewer">{JSON.stringify(data)}</span>
-							) : 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}
-						</>
-					)}
 				</header>
 
 				{dataIsTree && isOpen !== false ? (

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: `🔍 Open Close All`,
+		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,
 	}
 }