atom.io 0.33.12 → 0.33.14

package/src/react-devtools/StateIndex.tsx

@@ -1,17 +1,24 @@
 import type {
+	AtomToken,
 	Loadable,
 	ReadableToken,
 	ReadonlyPureSelectorToken,
 	RegularAtomToken,
 } from "atom.io"
-import { getState } from "atom.io"
-import { findInStore } from "atom.io/internal"
+import {
+	actUponStore,
+	arbitrary,
+	disposeFromStore,
+	findInStore,
+	getFromStore,
+} from "atom.io/internal"
 import type { FamilyNode, WritableTokenIndex } from "atom.io/introspection"
 import { primitiveRefinery } from "atom.io/introspection"
 import { useI, useO } from "atom.io/react"
 import { type FC, useContext } from "react"
 
 import { button } from "./Button"
+import { DEFAULT_JSON_EDITOR_COMPONENTS } from "./json-editor"
 import { StoreEditor } from "./StateEditor"
 import { DevtoolsContext } from "./store"
 
@@ -21,7 +28,10 @@ export const StateIndexLeafNode: FC<{
 	node: ReadableToken<unknown>
 	isOpenState: RegularAtomToken<boolean>
 	typeState: ReadonlyPureSelectorToken<Loadable<string>>
-}> = ({ node, isOpenState, typeState }) => {
+	dispose?: (() => void) | undefined
+}> = ({ node, isOpenState, typeState, dispose }) => {
+	const { openCloseAllTX, store } = useContext(DevtoolsContext)
+
 	const setIsOpen = useI(isOpenState)
 	const isOpen = useO(isOpenState)
 
@@ -32,31 +42,49 @@ export const StateIndexLeafNode: FC<{
 
 	const isPrimitive = Boolean(primitiveRefinery.refine(state))
 
+	const path = node.family ? [node.family.key, node.family.subKey] : [node.key]
+
 	return (
 		<>
 			<header>
-				<button.OpenClose
-					isOpen={isOpen && !isPrimitive}
-					testid={`open-close-state-${node.key}`}
-					setIsOpen={setIsOpen}
-					disabled={isPrimitive}
-				/>
 				<main
 					onClick={() => {
-						console.log(node, getState(node))
+						console.log(node, getFromStore(store, node))
 					}}
 					onKeyUp={() => {
-						console.log(node, getState(node))
+						console.log(node, getFromStore(store, node))
 					}}
 				>
+					<button.OpenClose
+						isOpen={isOpen && !isPrimitive}
+						testid={`open-close-state-${node.key}`}
+						onShiftClick={() => {
+							actUponStore(store, openCloseAllTX, arbitrary())(path, isOpen)
+							return false
+						}}
+						setIsOpen={setIsOpen}
+						disabled={isPrimitive}
+					/>
 					<h2>{node.family?.subKey ?? node.key}</h2>
 					<span className="type detail">({stateType})</span>
 				</main>
-				{isPrimitive ? (
-					<StoreEditor token={node} />
-				) : (
-					<div className="json_viewer">{JSON.stringify(state)}</div>
-				)}
+				<footer>
+					{isPrimitive ? (
+						<StoreEditor token={node} />
+					) : (
+						<div className="json_viewer">{JSON.stringify(state)}</div>
+					)}
+					{dispose ? (
+						<DEFAULT_JSON_EDITOR_COMPONENTS.Button
+							onClick={() => {
+								dispose?.()
+							}}
+							testid={`${node.key}-dispose`}
+						>
+							<DEFAULT_JSON_EDITOR_COMPONENTS.DeleteIcon />
+						</DEFAULT_JSON_EDITOR_COMPONENTS.Button>
+					) : null}
+				</footer>
 			</header>
 			{isOpen && !isPrimitive ? (
 				<main>
@@ -73,21 +101,30 @@ export const StateIndexTreeNode: FC<{
 	const setIsOpen = useI(isOpenState)
 	const isOpen = useO(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 (
 		<>
 			<header>
-				<button.OpenClose
-					isOpen={isOpen}
-					testid={`open-close-state-family-${node.key}`}
-					setIsOpen={setIsOpen}
-				/>
 				<main>
+					<button.OpenClose
+						isOpen={isOpen}
+						testid={`open-close-state-family-${node.key}`}
+						onShiftClick={() => {
+							actUponStore(
+								store,
+								openCloseAllTX,
+								arbitrary(),
+							)([node.key], isOpen)
+							return false
+						}}
+						setIsOpen={setIsOpen}
+					/>
 					<h2>{node.key}</h2>
 					<span className="type detail"> (family)</span>
 				</main>
@@ -97,8 +134,11 @@ export const StateIndexTreeNode: FC<{
 						<StateIndexNode
 							key={key}
 							node={childNode}
-							isOpenState={findInStore(store, viewIsOpenAtoms, childNode.key)}
+							isOpenState={findInStore(store, viewIsOpenAtoms, [node.key, key])}
 							typeState={findInStore(store, typeSelectors, childNode.key)}
+							dispose={() => {
+								disposeFromStore(store, childNode)
+							}}
 						/>
 					))
 				: null}
@@ -110,7 +150,8 @@ export const StateIndexNode: FC<{
 	node: FamilyNode<ReadableToken<unknown>> | ReadableToken<unknown>
 	isOpenState: RegularAtomToken<boolean>
 	typeState: ReadonlyPureSelectorToken<Loadable<string>>
-}> = ({ node, isOpenState, typeState }) => {
+	dispose?: () => void
+}> = ({ node, isOpenState, typeState, dispose }) => {
 	return (
 		<section className="node state" data-testid={`state-${node.key}`}>
 			{`type` in node ? (
@@ -118,6 +159,7 @@ export const StateIndexNode: FC<{
 					node={node}
 					isOpenState={isOpenState}
 					typeState={typeState}
+					dispose={dispose}
 				/>
 			) : (
 				<StateIndexTreeNode node={node} isOpenState={isOpenState} />
@@ -127,27 +169,29 @@ export const StateIndexNode: FC<{
 }
 
 export const StateIndex: FC<{
-	tokenIndex: ReadonlyPureSelectorToken<
-		WritableTokenIndex<ReadableToken<unknown>>
-	>
+	tokenIndex: AtomToken<WritableTokenIndex<ReadableToken<unknown>>>
 }> = ({ tokenIndex }) => {
 	const tokenIds = useO(tokenIndex)
 
 	const { typeSelectors, viewIsOpenAtoms, store } = useContext(DevtoolsContext)
+	const statesName = tokenIndex.key.includes(`Atom`) ? `atoms` : `selectors`
 
-	console.log(tokenIds)
 	return (
 		<article className="index state_index" data-testid="state-index">
-			{[...tokenIds.entries()].map(([key, node]) => {
-				return (
-					<StateIndexNode
-						key={key}
-						node={node}
-						isOpenState={findInStore(store, viewIsOpenAtoms, node.key)}
-						typeState={findInStore(store, typeSelectors, node.key)}
-					/>
-				)
-			})}
+			{tokenIds.size === 0 ? (
+				<p className="index-empty-state">(no {statesName})</p>
+			) : (
+				[...tokenIds.entries()].map(([key, node]) => {
+					return (
+						<StateIndexNode
+							key={key}
+							node={node}
+							isOpenState={findInStore(store, viewIsOpenAtoms, [node.key])}
+							typeState={findInStore(store, typeSelectors, node.key)}
+						/>
+					)
+				})
+			)}
 		</article>
 	)
 }

package/src/react-devtools/TimelineIndex.tsx

@@ -95,18 +95,22 @@ export const TimelineIndex: FC = () => {
 
 	return (
 		<article className="index timeline_index" data-testid="timeline-index">
-			{tokenIds
-				.filter((token) => !token.key.startsWith(`👁‍🗨`))
-				.map((token) => {
-					return (
-						<TimelineLog
-							key={token.key}
-							token={token}
-							isOpenState={findInStore(store, viewIsOpenAtoms, token.key)}
-							timelineState={findInStore(store, timelineSelectors, token.key)}
-						/>
-					)
-				})}
+			{tokenIds.length === 0 ? (
+				<p className="index-empty-state">(no timelines)</p>
+			) : (
+				tokenIds
+					.filter((token) => !token.key.startsWith(`👁‍🗨`))
+					.map((token) => {
+						return (
+							<TimelineLog
+								key={token.key}
+								token={token}
+								isOpenState={findInStore(store, viewIsOpenAtoms, [token.key])}
+								timelineState={findInStore(store, timelineSelectors, token.key)}
+							/>
+						)
+					})
+			)}
 		</article>
 	)
 }

package/src/react-devtools/TransactionIndex.tsx

@@ -27,15 +27,15 @@ export const TransactionLog: FC<{
 			data-testid={`transaction-${token.key}`}
 		>
 			<header>
-				<button.OpenClose
-					isOpen={isOpen}
-					testid={`open-close-transaction-${token.key}`}
-					setIsOpen={setIsOpen}
-				/>
 				<main>
+					<button.OpenClose
+						isOpen={isOpen}
+						testid={`open-close-transaction-${token.key}`}
+						setIsOpen={setIsOpen}
+					/>
 					<h2>{token.key}</h2>
-					<span className="detail length">({log.length})</span>
 				</main>
+				<span className="detail length">({log.length})</span>
 			</header>
 			{isOpen ? (
 				<main>
@@ -59,18 +59,22 @@ export const TransactionIndex: FC = () => {
 	const tokenIds = useO(transactionIndex)
 	return (
 		<article className="index transaction_index" data-testid="transaction-index">
-			{tokenIds
-				.filter((token) => !token.key.startsWith(`🔍`))
-				.map((token) => {
-					return (
-						<TransactionLog
-							key={token.key}
-							token={token}
-							isOpenState={findInStore(store, viewIsOpenAtoms, token.key)}
-							logState={findInStore(store, transactionLogSelectors, token.key)}
-						/>
-					)
-				})}
+			{tokenIds.length === 0 ? (
+				<p className="index-empty-state">(no transactions)</p>
+			) : (
+				tokenIds
+					.filter((token) => !token.key.startsWith(`🔍`))
+					.map((token) => {
+						return (
+							<TransactionLog
+								key={token.key}
+								token={token}
+								isOpenState={findInStore(store, viewIsOpenAtoms, [token.key])}
+								logState={findInStore(store, transactionLogSelectors, token.key)}
+							/>
+						)
+					})
+			)}
 		</article>
 	)
 }