atom.io 0.33.13 → 0.33.14

package/src/introspection/attach-atom-index.ts

@@ -1,8 +1,7 @@
-import type { AtomToken, ReadonlyPureSelectorToken } from "atom.io"
+import type { AtomToken } from "atom.io"
 import type { Store } from "atom.io/internal"
 import {
 	createRegularAtom,
-	createStandaloneSelector,
 	deposit,
 	isReservedIntrospectionKey,
 } from "atom.io/internal"
@@ -11,13 +10,11 @@ import type { WritableTokenIndex } from "."
 
 export type AtomTokenIndex = WritableTokenIndex<AtomToken<unknown>>
 
-export const attachAtomIndex = (
-	store: Store,
-): ReadonlyPureSelectorToken<AtomTokenIndex> => {
-	const atomTokenIndexState__INTERNAL = createRegularAtom<AtomTokenIndex>(
+export const attachAtomIndex = (store: Store): AtomToken<AtomTokenIndex> => {
+	return createRegularAtom<AtomTokenIndex>(
 		store,
 		{
-			key: `🔍 Atom Token Index (Internal)`,
+			key: `🔍 Atom Token Index`,
 			default: () => {
 				const base: AtomTokenIndex = new Map()
 				for (const [key, val] of store.atoms) {
@@ -66,7 +63,7 @@ export const attachAtomIndex = (
 							} else {
 								self.set(atomToken.key, atomToken)
 							}
-							return self
+							return new Map(self)
 						})
 					})
 					store.on.atomDisposal.subscribe(`introspection`, (atomToken) => {
@@ -80,10 +77,8 @@ export const attachAtomIndex = (
 										self.delete(familyKey)
 									}
 								}
-							} else {
-								self.delete(atomToken.key)
 							}
-							return self
+							return new Map(self)
 						})
 					})
 				},
@@ -91,8 +86,4 @@ export const attachAtomIndex = (
 		},
 		undefined,
 	)
-	return createStandaloneSelector(store, {
-		key: `🔍 Atom Token Index`,
-		get: ({ get }) => get(atomTokenIndexState__INTERNAL),
-	})
 }

package/src/introspection/attach-introspection-states.ts

@@ -1,7 +1,7 @@
 import type {
+	AtomToken,
 	Loadable,
 	ReadonlyPureSelectorFamilyToken,
-	ReadonlyPureSelectorToken,
 	TimelineToken,
 	TransactionToken,
 	TransactionUpdate,
@@ -18,14 +18,14 @@ import { attachTransactionLogs } from "./attach-transaction-logs"
 import { attachTypeSelectors } from "./attach-type-selectors"
 
 export type IntrospectionStates = {
-	atomIndex: ReadonlyPureSelectorToken<AtomTokenIndex>
-	selectorIndex: ReadonlyPureSelectorToken<SelectorTokenIndex>
-	transactionIndex: ReadonlyPureSelectorToken<TransactionToken<Func>[]>
+	atomIndex: AtomToken<AtomTokenIndex>
+	selectorIndex: AtomToken<SelectorTokenIndex>
+	transactionIndex: AtomToken<TransactionToken<Func>[]>
 	transactionLogSelectors: ReadonlyPureSelectorFamilyToken<
 		TransactionUpdate<Func>[],
 		string
 	>
-	timelineIndex: ReadonlyPureSelectorToken<TimelineToken<any>[]>
+	timelineIndex: AtomToken<TimelineToken<any>[]>
 	timelineSelectors: ReadonlyPureSelectorFamilyToken<Timeline<any>, string>
 	typeSelectors: ReadonlyPureSelectorFamilyToken<Loadable<string>, string>
 }

package/src/introspection/attach-selector-index.ts

@@ -1,8 +1,7 @@
-import type { ReadonlyPureSelectorToken, SelectorToken } from "atom.io"
+import type { AtomToken, SelectorToken } from "atom.io"
 import type { Store } from "atom.io/internal"
 import {
 	createRegularAtom,
-	createStandaloneSelector,
 	deposit,
 	isReservedIntrospectionKey,
 } from "atom.io/internal"
@@ -13,97 +12,91 @@ export type SelectorTokenIndex = WritableTokenIndex<SelectorToken<unknown>>
 
 export const attachSelectorIndex = (
 	store: Store,
-): ReadonlyPureSelectorToken<SelectorTokenIndex> => {
-	const readonlySelectorTokenIndexState__INTERNAL =
-		createRegularAtom<SelectorTokenIndex>(
-			store,
-
-			{
-				key: `🔍 Selector Token Index (Internal)`,
-				default: () => {
-					const base: SelectorTokenIndex = new Map()
-					for (const map of [store.readonlySelectors, store.writableSelectors]) {
-						for (const [key, val] of map) {
-							if (isReservedIntrospectionKey(key)) {
-								continue
-							}
-							const token = deposit(val)
-							if (val.family) {
-								let familyNode = base.get(val.family.key)
-								if (!familyNode || !(`familyMembers` in familyNode)) {
-									familyNode = {
-										key: val.family.key,
-										familyMembers: new Map(),
-									}
-									base.set(val.family.key, familyNode)
+): AtomToken<SelectorTokenIndex> => {
+	return createRegularAtom<SelectorTokenIndex>(
+		store,
+		{
+			key: `🔍 Selector Token Index`,
+			default: () => {
+				const base: SelectorTokenIndex = new Map()
+				for (const map of [store.readonlySelectors, store.writableSelectors]) {
+					for (const [key, val] of map) {
+						if (isReservedIntrospectionKey(key)) {
+							continue
+						}
+						const token = deposit(val)
+						if (val.family) {
+							let familyNode = base.get(val.family.key)
+							if (!familyNode || !(`familyMembers` in familyNode)) {
+								familyNode = {
+									key: val.family.key,
+									familyMembers: new Map(),
 								}
-								familyNode.familyMembers.set(val.family.subKey, token)
-							} else {
-								base.set(key, token)
+								base.set(val.family.key, familyNode)
 							}
+							familyNode.familyMembers.set(val.family.subKey, token)
+						} else {
+							base.set(key, token)
 						}
 					}
-					return base
-				},
-				effects: [
-					({ setSelf }) => {
-						store.on.selectorCreation.subscribe(
-							`introspection`,
-							(selectorToken) => {
-								if (isReservedIntrospectionKey(selectorToken.key)) {
-									return
-								}
+				}
+				return base
+			},
+			effects: [
+				({ setSelf }) => {
+					store.on.selectorCreation.subscribe(
+						`introspection`,
+						(selectorToken) => {
+							if (isReservedIntrospectionKey(selectorToken.key)) {
+								return
+							}
 
-								setSelf((self) => {
-									if (selectorToken.family) {
-										const { key: familyKey, subKey } = selectorToken.family
-										let familyNode = self.get(familyKey)
-										if (
-											familyNode === undefined ||
-											!(`familyMembers` in familyNode)
-										) {
-											familyNode = {
-												key: familyKey,
-												familyMembers: new Map(),
-											}
-											self.set(familyKey, familyNode)
+							setSelf((self) => {
+								if (selectorToken.family) {
+									const { key: familyKey, subKey } = selectorToken.family
+									let familyNode = self.get(familyKey)
+									if (
+										familyNode === undefined ||
+										!(`familyMembers` in familyNode)
+									) {
+										familyNode = {
+											key: familyKey,
+											familyMembers: new Map(),
 										}
-										familyNode.familyMembers.set(subKey, selectorToken)
-									} else {
-										self.set(selectorToken.key, selectorToken)
+										self.set(familyKey, familyNode)
 									}
-									return self
-								})
-							},
-						)
+									familyNode.familyMembers.set(subKey, selectorToken)
+								} else {
+									self.set(selectorToken.key, selectorToken)
+								}
+								return new Map(self)
+							})
+						},
+					)
 
-						store.on.selectorDisposal.subscribe(
-							`introspection`,
-							(selectorToken) => {
-								setSelf((self) => {
-									if (selectorToken.family) {
-										const { key: familyKey, subKey } = selectorToken.family
-										const familyNode = self.get(familyKey)
-										if (familyNode && `familyMembers` in familyNode) {
-											familyNode.familyMembers.delete(subKey)
-											if (familyNode.familyMembers.size === 0) {
-												self.delete(familyKey)
-											}
+					store.on.selectorDisposal.subscribe(
+						`introspection`,
+						(selectorToken) => {
+							setSelf((self) => {
+								if (selectorToken.family) {
+									const { key: familyKey, subKey } = selectorToken.family
+									const familyNode = self.get(familyKey)
+									if (familyNode && `familyMembers` in familyNode) {
+										familyNode.familyMembers.delete(subKey)
+										if (familyNode.familyMembers.size === 0) {
+											self.delete(familyKey)
 										}
-									} else {
-										self.delete(selectorToken.key)
 									}
-									return self
-								})
-							},
-						)
-					},
-				],
-			},
-			undefined,
-		)
-	return createStandaloneSelector(store, {
-		key: `🔍 Selector Token Index`,
-		get: ({ get }) => get(readonlySelectorTokenIndexState__INTERNAL),
-	})
+								} else {
+									self.delete(selectorToken.key)
+								}
+								return new Map(self)
+							})
+						},
+					)
+				},
+			],
+		},
+		undefined,
+	)
 }

package/src/introspection/attach-timeline-index.ts

@@ -1,16 +1,14 @@
-import type { ReadonlyPureSelectorToken, TimelineToken } from "atom.io"
+import type { AtomToken, TimelineToken } from "atom.io"
 import type { Store } from "atom.io/internal"
-import { createRegularAtom, createStandaloneSelector } from "atom.io/internal"
+import { createRegularAtom } from "atom.io/internal"
 
 export const attachTimelineIndex = (
 	store: Store,
-): ReadonlyPureSelectorToken<TimelineToken<any>[]> => {
-	const timelineTokenIndexState__INTERNAL = createRegularAtom<
-		TimelineToken<any>[]
-	>(
+): AtomToken<TimelineToken<any>[]> => {
+	return createRegularAtom<TimelineToken<any>[]>(
 		store,
 		{
-			key: `🔍 Timeline Token Index (Internal)`,
+			key: `🔍 Timeline Token Index`,
 			default: () =>
 				[...store.timelines].map(([key]): TimelineToken<any> => {
 					return { key, type: `timeline` }
@@ -28,9 +26,4 @@ export const attachTimelineIndex = (
 		},
 		undefined,
 	)
-	const timelineTokenIndex = createStandaloneSelector(store, {
-		key: `🔍 Timeline Token Index`,
-		get: ({ get }) => get(timelineTokenIndexState__INTERNAL),
-	})
-	return timelineTokenIndex
 }

package/src/introspection/attach-transaction-index.ts

@@ -1,25 +1,32 @@
-import type { ReadonlyPureSelectorToken, TransactionToken } from "atom.io"
+import type { AtomToken, TransactionToken } from "atom.io"
 import type { Func, Store } from "atom.io/internal"
-import { createRegularAtom, createStandaloneSelector } from "atom.io/internal"
+import { createRegularAtom, isReservedIntrospectionKey } from "atom.io/internal"
 
 export const attachTransactionIndex = (
 	store: Store,
-): ReadonlyPureSelectorToken<TransactionToken<Func>[]> => {
-	const transactionTokenIndexState__INTERNAL = createRegularAtom<
-		TransactionToken<Func>[]
-	>(
+): AtomToken<TransactionToken<Func>[]> => {
+	return createRegularAtom<TransactionToken<Func>[]>(
 		store,
 		{
-			key: `🔍 Transaction Token Index (Internal)`,
-			default: () =>
-				[...store.transactions].map(([key]): TransactionToken<Func> => {
-					return { key, type: `transaction` }
-				}),
+			key: `🔍 Transaction Token Index`,
+			default: () => {
+				const tokens: TransactionToken<Func>[] = []
+				for (const [key] of store.transactions) {
+					if (isReservedIntrospectionKey(key)) {
+						continue
+					}
+					tokens.push({ key, type: `transaction` })
+				}
+				return tokens
+			},
 			effects: [
 				({ setSelf }) => {
 					store.on.transactionCreation.subscribe(
 						`introspection`,
 						(transactionToken) => {
+							if (isReservedIntrospectionKey(transactionToken.key)) {
+								return
+							}
 							setSelf((state) => [...state, transactionToken])
 						},
 					)
@@ -28,9 +35,4 @@ export const attachTransactionIndex = (
 		},
 		undefined,
 	)
-	const transactionTokenIndex = createStandaloneSelector(store, {
-		key: `🔍 Transaction Token Index`,
-		get: ({ get }) => get(transactionTokenIndexState__INTERNAL),
-	})
-	return transactionTokenIndex
 }

package/src/introspection/auditor.ts

@@ -2,7 +2,6 @@ import {
 	type AtomToken,
 	getState,
 	type ReadableToken,
-	type ReadonlyPureSelectorToken,
 	type SelectorToken,
 } from "atom.io"
 import * as Internal from "atom.io/internal"
@@ -26,8 +25,8 @@ export class Auditor {
 	public readonly store: Internal.Store
 	public auditorCreatedAt: number = performance.now()
 	public statesCreatedAt: Map<string, number> = new Map()
-	public readonly atomIndex: ReadonlyPureSelectorToken<AtomTokenIndex>
-	public readonly selectorIndex: ReadonlyPureSelectorToken<SelectorTokenIndex>
+	public readonly atomIndex: AtomToken<AtomTokenIndex>
+	public readonly selectorIndex: AtomToken<SelectorTokenIndex>
 	public disposed = false
 
 	private readonly unsubscribeFromAtomCreation: () => void

package/src/react-devtools/StateIndex.tsx

@@ -1,4 +1,5 @@
 import type {
+	AtomToken,
 	Loadable,
 	ReadableToken,
 	ReadonlyPureSelectorToken,
@@ -7,6 +8,7 @@ import type {
 import {
 	actUponStore,
 	arbitrary,
+	disposeFromStore,
 	findInStore,
 	getFromStore,
 } from "atom.io/internal"
@@ -16,6 +18,7 @@ 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"
 
@@ -25,7 +28,8 @@ 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)
@@ -64,11 +68,23 @@ export const StateIndexLeafNode: FC<{
 					<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>
@@ -120,6 +136,9 @@ export const StateIndexTreeNode: FC<{
 							node={childNode}
 							isOpenState={findInStore(store, viewIsOpenAtoms, [node.key, key])}
 							typeState={findInStore(store, typeSelectors, childNode.key)}
+							dispose={() => {
+								disposeFromStore(store, childNode)
+							}}
 						/>
 					))
 				: null}
@@ -131,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 ? (
@@ -139,6 +159,7 @@ export const StateIndexNode: FC<{
 					node={node}
 					isOpenState={isOpenState}
 					typeState={typeState}
+					dispose={dispose}
 				/>
 			) : (
 				<StateIndexTreeNode node={node} isOpenState={isOpenState} />
@@ -148,26 +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`
 
 	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>
 	)
 }