atom.io 0.6.5 → 0.6.7

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

@@ -0,0 +1,42 @@
+import { __INTERNAL__ } from "atom.io"
+import type {
+	ReadonlySelectorFamily,
+	ReadonlySelectorToken,
+	TimelineToken,
+	TimelineUpdate,
+	TransactionToken,
+	TransactionUpdate,
+} from "atom.io"
+
+import type { ƒn } from "~/packages/anvl/src/function"
+
+import { attachAtomIndex, type AtomTokenIndex } from "./attach-atom-index"
+import {
+	attachSelectorIndex,
+	type SelectorTokenIndex,
+} from "./attach-selector-index"
+import { attachTimelineFamily } from "./attach-timeline-family"
+import { attachTimelineIndex } from "./attach-timeline-index"
+import { attachTransactionIndex } from "./attach-transaction-index"
+import { attachTransactionLogs } from "./attach-transaction-logs"
+import type { Timeline } from "../internal"
+
+export const attachIntrospectionStates = (
+	store: __INTERNAL__.Store = __INTERNAL__.IMPLICIT.STORE,
+): {
+	atomIndex: ReadonlySelectorToken<AtomTokenIndex>
+	selectorIndex: ReadonlySelectorToken<SelectorTokenIndex>
+	transactionIndex: ReadonlySelectorToken<TransactionToken<ƒn>[]>
+	findTransactionLogState: ReadonlySelectorFamily<TransactionUpdate<ƒn>[]>
+	timelineIndex: ReadonlySelectorToken<TimelineToken[]>
+	findTimelineState: ReadonlySelectorFamily<Timeline>
+} => {
+	return {
+		atomIndex: attachAtomIndex(store),
+		selectorIndex: attachSelectorIndex(store),
+		transactionIndex: attachTransactionIndex(store),
+		findTransactionLogState: attachTransactionLogs(store),
+		timelineIndex: attachTimelineIndex(store),
+		findTimelineState: attachTimelineFamily(store),
+	}
+}

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

@@ -0,0 +1,77 @@
+import { __INTERNAL__ } from "atom.io"
+import type { ReadonlySelectorToken, SelectorToken } from "atom.io"
+
+import type { StateTokenIndex } from "."
+
+export type SelectorTokenIndex = StateTokenIndex<
+	ReadonlySelectorToken<unknown> | SelectorToken<unknown>
+>
+
+export const attachSelectorIndex = (
+	store: __INTERNAL__.Store = __INTERNAL__.IMPLICIT.STORE,
+): ReadonlySelectorToken<SelectorTokenIndex> => {
+	const readonlySelectorTokenIndexState__INTERNAL =
+		__INTERNAL__.atom__INTERNAL<SelectorTokenIndex>(
+			{
+				key: `👁‍🗨 Selector Token Index (Internal)`,
+				default: () =>
+					Object.assign(
+						[...store.readonlySelectors]
+							.filter(([key]) => !key.includes(`👁‍🗨`))
+							.reduce<SelectorTokenIndex>((acc, [key]) => {
+								acc[key] = { key, type: `readonly_selector` }
+								return acc
+							}, {}),
+						[...store.selectors].reduce<SelectorTokenIndex>((acc, [key]) => {
+							acc[key] = { key, type: `selector` }
+							return acc
+						}, {}),
+					),
+				effects: [
+					({ setSelf }) => {
+						store.subject.selectorCreation.subscribe((selectorToken) => {
+							if (store.operation.open) {
+								return
+							}
+							if (selectorToken.key.includes(`👁‍🗨`)) {
+								return
+							}
+							setSelf((state) => {
+								const { key, family } = selectorToken
+								if (family) {
+									const { key: familyKey, subKey } = family
+									const current = state[familyKey]
+									if (current === undefined || `familyMembers` in current) {
+										const familyKeyState = current || {
+											key: familyKey,
+											familyMembers: {},
+										}
+										return {
+											...state,
+											[familyKey]: {
+												...familyKeyState,
+												familyMembers: {
+													...familyKeyState.familyMembers,
+													[subKey]: selectorToken,
+												},
+											},
+										}
+									}
+								}
+								return {
+									...state,
+									[key]: selectorToken,
+								}
+							})
+						})
+					},
+				],
+			},
+			undefined,
+			store,
+		)
+	return __INTERNAL__.selector__INTERNAL({
+		key: `👁‍🗨 Selector Token Index`,
+		get: ({ get }) => get(readonlySelectorTokenIndexState__INTERNAL),
+	})
+}

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

@@ -0,0 +1,59 @@
+import type { ReadonlySelectorFamily, Store } from "atom.io"
+import { __INTERNAL__, timeline } from "atom.io"
+
+import { withdraw, type Timeline, Subject } from "../internal"
+
+export const attachTimelineFamily = (
+	store: Store = __INTERNAL__.IMPLICIT.STORE,
+): ReadonlySelectorFamily<Timeline> => {
+	const findTimelineLogState__INTERNAL = __INTERNAL__.atomFamily__INTERNAL<
+		Timeline,
+		string
+	>(
+		{
+			key: `👁‍🗨 Timeline Update Log (Internal)`,
+			default: (key) =>
+				store.timelines.get(key) ?? {
+					key: ``,
+					at: 0,
+					timeTraveling: false,
+					history: [],
+					selectorTime: null,
+					transactionKey: null,
+					install: () => {},
+					subject: new Subject(),
+				},
+			effects: (key) => [
+				({ setSelf }) => {
+					const tl = store.timelines.get(key)
+					tl?.subject.subscribe((_) => {
+						if (store.operation.open === true) {
+							const subscription = store.subject.operationStatus.subscribe(
+								(operationStatus) => {
+									if (operationStatus.open === false) {
+										subscription.unsubscribe()
+										setSelf({ ...tl })
+									}
+								},
+							)
+						} else {
+							setSelf({ ...tl })
+						}
+					})
+				},
+			],
+		},
+		store,
+	)
+	const findTimelineLogState = __INTERNAL__.selectorFamily__INTERNAL<
+		Timeline,
+		string
+	>(
+		{
+			key: `👁‍🗨 Timeline Update Log`,
+			get: (key) => ({ get }) => get(findTimelineLogState__INTERNAL(key)),
+		},
+		store,
+	)
+	return findTimelineLogState
+}

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

@@ -0,0 +1,36 @@
+import type { ReadonlySelectorToken, Store, TimelineToken } from "atom.io"
+import { __INTERNAL__ } from "atom.io"
+
+export const attachTimelineIndex = (
+	store: Store = __INTERNAL__.IMPLICIT.STORE,
+): ReadonlySelectorToken<TimelineToken[]> => {
+	const timelineTokenIndexState__INTERNAL = __INTERNAL__.atom__INTERNAL<
+		TimelineToken[]
+	>(
+		{
+			key: `👁‍🗨 Timeline Token Index (Internal)`,
+			default: () =>
+				[...store.timelines].map(([key]) => {
+					return { key, type: `timeline` }
+				}),
+			effects: [
+				({ setSelf }) => {
+					store.subject.timelineCreation.subscribe((timelineToken) => {
+						setSelf((state) => [...state, timelineToken])
+					})
+				},
+			],
+		},
+		undefined,
+		store,
+	)
+	const timelineTokenIndex = __INTERNAL__.selector__INTERNAL(
+		{
+			key: `👁‍🗨 Timeline Token Index`,
+			get: ({ get }) => get(timelineTokenIndexState__INTERNAL),
+		},
+		undefined,
+		store,
+	)
+	return timelineTokenIndex
+}

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

@@ -0,0 +1,38 @@
+import type { ReadonlySelectorToken, TransactionToken } from "atom.io"
+import { __INTERNAL__ } from "atom.io"
+
+import type { ƒn } from "~/packages/anvl/src/function"
+
+export const attachTransactionIndex = (
+	store: __INTERNAL__.Store = __INTERNAL__.IMPLICIT.STORE,
+): ReadonlySelectorToken<TransactionToken<ƒn>[]> => {
+	const transactionTokenIndexState__INTERNAL = __INTERNAL__.atom__INTERNAL<
+		TransactionToken<ƒn>[]
+	>(
+		{
+			key: `👁‍🗨 Transaction Token Index (Internal)`,
+			default: () =>
+				[...store.transactions].map(([key]) => {
+					return { key, type: `transaction` }
+				}),
+			effects: [
+				({ setSelf }) => {
+					store.subject.transactionCreation.subscribe((transactionToken) => {
+						setSelf((state) => [...state, transactionToken])
+					})
+				},
+			],
+		},
+		undefined,
+		store,
+	)
+	const transactionTokenIndex = __INTERNAL__.selector__INTERNAL(
+		{
+			key: `👁‍🗨 Transaction Token Index`,
+			get: ({ get }) => get(transactionTokenIndexState__INTERNAL),
+		},
+		undefined,
+		store,
+	)
+	return transactionTokenIndex
+}

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

@@ -0,0 +1,40 @@
+import type { ReadonlySelectorFamily, TransactionUpdate } from "atom.io"
+import { __INTERNAL__ } from "atom.io"
+
+import type { ƒn } from "~/packages/anvl/src/function"
+
+export const attachTransactionLogs = (
+	store: __INTERNAL__.Store = __INTERNAL__.IMPLICIT.STORE,
+): ReadonlySelectorFamily<TransactionUpdate<ƒn>[]> => {
+	const findTransactionUpdateLog = __INTERNAL__.atomFamily__INTERNAL<
+		TransactionUpdate<ƒn>[],
+		string
+	>(
+		{
+			key: `👁‍🗨 Transaction Update Log (Internal)`,
+			default: () => [],
+			effects: (key) => [
+				({ setSelf }) => {
+					const tx = store.transactions.get(key)
+					tx?.subject.subscribe((transactionUpdate) => {
+						if (transactionUpdate.key === key) {
+							setSelf((state) => [...state, transactionUpdate])
+						}
+					})
+				},
+			],
+		},
+		store,
+	)
+	const findTransactionUpdateLogState = __INTERNAL__.selectorFamily__INTERNAL<
+		TransactionUpdate<ƒn>[],
+		string
+	>(
+		{
+			key: `👁‍🗨 Transaction Update Log`,
+			get: (key) => ({ get }) => get(findTransactionUpdateLog(key)),
+		},
+		store,
+	)
+	return findTransactionUpdateLogState
+}

package/src/introspection/index.ts

@@ -0,0 +1,20 @@
+import type { AtomToken, ReadonlySelectorToken, SelectorToken } from "atom.io"
+
+export * from "./attach-introspection-states"
+
+export type FamilyNode<
+	Token extends
+		| AtomToken<unknown>
+		| ReadonlySelectorToken<unknown>
+		| SelectorToken<unknown>,
+> = {
+	key: string
+	familyMembers: Record<string, Token>
+}
+
+export type StateTokenIndex<
+	Token extends
+		| AtomToken<unknown>
+		| ReadonlySelectorToken<unknown>
+		| SelectorToken<unknown>,
+> = Record<string, FamilyNode<Token> | Token>

package/src/react-devtools/AtomIODevtools.tsx

@@ -1,107 +1,107 @@
-import { atom, __INTERNAL__ } from "atom.io"
-import type { StoreHooks } from "atom.io/react"
-import { useI, useO, useIO } from "atom.io/react"
+import { useO, useIO } from "atom.io/react"
 import { LayoutGroup, motion, spring } from "framer-motion"
 import { useRef } from "react"
-import type { FC } from "react"
 
-import { TokenList } from "./TokenList"
-import { lazyLocalStorageEffect } from "../web-effects"
+import {
+	atomIndex,
+	devtoolsAreOpenState,
+	devtoolsViewOptionsState,
+	devtoolsViewSelectionState,
+	selectorIndex,
+} from "."
+import { StateIndex } from "./StateIndex"
+import { TimelineIndex } from "./TimelineIndex"
+import { TransactionIndex } from "./TransactionIndex"
 
 import "./devtools.scss"
 
-const { atomTokenIndexState, selectorTokenIndexState } =
-	__INTERNAL__.META.attachMetaState()
+export const AtomIODevtools = (): JSX.Element => {
+	const constraintsRef = useRef(null)
 
-const devtoolsAreOpenState = atom<boolean>({
-	key: `👁‍🗨_devtools_are_open`,
-	default: true,
-	effects: [lazyLocalStorageEffect(`👁‍🗨_devtools_are_open`)],
-})
+	const [devtoolsAreOpen, setDevtoolsAreOpen] = useIO(devtoolsAreOpenState)
+	const [devtoolsView, setDevtoolsView] = useIO(devtoolsViewSelectionState)
+	const devtoolsViewOptions = useO(devtoolsViewOptionsState)
 
-export const composeDevtools = (storeHooks: StoreHooks): FC => {
-	const Devtools: FC = () => {
-		const constraintsRef = useRef(null)
+	const mouseHasMoved = useRef(false)
 
-		const [devtoolsAreOpen, setDevtoolsAreOpen] =
-			storeHooks.useIO(devtoolsAreOpenState)
-
-		const mouseHasMoved = useRef(false)
-
-		return (
-			<>
-				<motion.span
-					ref={constraintsRef}
-					className="atom_io_devtools_zone"
-					style={{
-						position: `fixed`,
-						top: 0,
-						left: 0,
-						right: 0,
-						bottom: 0,
-						pointerEvents: `none`,
-					}}
-				/>
-				<motion.main
-					drag
-					dragConstraints={constraintsRef}
-					className="atom_io_devtools"
-					transition={spring}
-					style={
-						devtoolsAreOpen
-							? {}
-							: {
-									backgroundColor: `#0000`,
-									borderColor: `#0000`,
-									maxHeight: 28,
-									maxWidth: 33,
-							  }
-					}
-				>
-					{devtoolsAreOpen ? (
-						<>
-							<motion.header>
-								<h1>atom.io</h1>
-							</motion.header>
-							<motion.main>
-								<LayoutGroup>
-									<section>
-										<h2>atoms</h2>
-										<TokenList
-											storeHooks={storeHooks}
-											tokenIndex={atomTokenIndexState}
-										/>
-									</section>
-									<section>
-										<h2>selectors</h2>
-										<TokenList
-											storeHooks={storeHooks}
-											tokenIndex={selectorTokenIndexState}
-										/>
-									</section>
-								</LayoutGroup>
-							</motion.main>
-						</>
-					) : null}
-					<footer>
-						<button
-							type="button"
-							onMouseDown={() => (mouseHasMoved.current = false)}
-							onMouseMove={() => (mouseHasMoved.current = true)}
-							onMouseUp={() => {
-								if (!mouseHasMoved.current) {
-									setDevtoolsAreOpen((open) => !open)
-								}
-							}}
-						>
-							👁‍🗨
-						</button>
-					</footer>
-				</motion.main>
-			</>
-		)
-	}
-	return Devtools
+	return (
+		<>
+			<motion.span
+				ref={constraintsRef}
+				className="atom_io_devtools_zone"
+				style={{
+					position: `fixed`,
+					top: 0,
+					left: 0,
+					right: 0,
+					bottom: 0,
+					pointerEvents: `none`,
+				}}
+			/>
+			<motion.main
+				drag
+				dragConstraints={constraintsRef}
+				className="atom_io_devtools"
+				transition={spring}
+				style={
+					devtoolsAreOpen
+						? {}
+						: {
+								backgroundColor: `#0000`,
+								borderColor: `#0000`,
+								maxHeight: 28,
+								maxWidth: 33,
+						  }
+				}
+			>
+				{devtoolsAreOpen ? (
+					<>
+						<motion.header>
+							<h1>atom.io</h1>
+							<nav>
+								{devtoolsViewOptions.map((viewOption) => (
+									<button
+										key={viewOption}
+										type="button"
+										className={viewOption === devtoolsView ? `active` : ``}
+										onClick={() => setDevtoolsView(viewOption)}
+										disabled={viewOption === devtoolsView}
+									>
+										{viewOption}
+									</button>
+								))}
+							</nav>
+						</motion.header>
+						<motion.main>
+							<LayoutGroup>
+								{devtoolsView === `atoms` ? (
+									<StateIndex tokenIndex={atomIndex} />
+								) : devtoolsView === `selectors` ? (
+									<StateIndex tokenIndex={selectorIndex} />
+								) : devtoolsView === `transactions` ? (
+									<TransactionIndex />
+								) : devtoolsView === `timelines` ? (
+									<TimelineIndex />
+								) : null}
+							</LayoutGroup>
+						</motion.main>
+					</>
+				) : null}
+				<footer>
+					<button
+						type="button"
+						onMouseDown={() => (mouseHasMoved.current = false)}
+						onMouseMove={() => (mouseHasMoved.current = true)}
+						onMouseUp={() => {
+							if (!mouseHasMoved.current) {
+								setDevtoolsAreOpen((open) => !open)
+							}
+						}}
+					>
+						👁‍🗨
+					</button>
+				</footer>
+			</motion.main>
+		</>
+	)
 }
-
-export const AtomIODevtools = composeDevtools({ useI, useO, useIO })

package/src/react-devtools/Button.tsx

@@ -0,0 +1,24 @@
+import type { FC } from "react"
+
+import type { Modifier } from "~/packages/anvl/src/function"
+
+export const OpenClose: FC<{
+	isOpen: boolean
+	setIsOpen: (next: Modifier<boolean> | boolean) => void
+	disabled?: boolean
+}> = ({ isOpen, setIsOpen, disabled }) => {
+	return (
+		<button
+			type="button"
+			className={`carat ${isOpen ? `open` : `closed`}`}
+			onClick={() => setIsOpen((isOpen) => !isOpen)}
+			disabled={disabled}
+		>
+			▶
+		</button>
+	)
+}
+
+export const button = {
+	OpenClose,
+}

package/src/react-devtools/StateEditor.tsx

@@ -1,17 +1,17 @@
 import type { ReadonlySelectorToken, StateToken } from "atom.io"
-import type { StoreHooks } from "atom.io/react"
+import { useO, useIO } from "atom.io/react"
 import type { FC } from "react"
 
-import { isPlainJson } from "~/packages/anvl/src/json"
+import { fallback } from "~/packages/anvl/src/function"
+import { isJson } from "~/packages/anvl/src/json"
 import { ElasticInput } from "~/packages/hamr/src/react-elastic-input"
 import { JsonEditor } from "~/packages/hamr/src/react-json-editor"
 
 export const StateEditor: FC<{
-	storeHooks: StoreHooks
 	token: StateToken<unknown>
-}> = ({ storeHooks, token }) => {
-	const [data, set] = storeHooks.useIO(token)
-	return isPlainJson(data) ? (
+}> = ({ token }) => {
+	const [data, set] = useIO(token)
+	return isJson(data) ? (
 		<JsonEditor data={data} set={set} schema={true} />
 	) : (
 		<div className="json_editor">
@@ -23,7 +23,7 @@ export const StateEditor: FC<{
 						? `Map ` + JSON.stringify([...data])
 						: Object.getPrototypeOf(data).constructor.name +
 						  ` ` +
-						  JSON.stringify(data)
+						  fallback(() => JSON.stringify(data), `?`)
 				}
 				disabled={true}
 			/>
@@ -31,12 +31,11 @@ export const StateEditor: FC<{
 	)
 }
 
-export const ReadonlySelectorEditor: FC<{
-	storeHooks: StoreHooks
+export const ReadonlySelectorViewer: FC<{
 	token: ReadonlySelectorToken<unknown>
-}> = ({ storeHooks, token }) => {
-	const data = storeHooks.useO(token)
-	return isPlainJson(data) ? (
+}> = ({ token }) => {
+	const data = useO(token)
+	return isJson(data) ? (
 		<JsonEditor
 			data={data}
 			set={() => null}
@@ -62,11 +61,10 @@ export const ReadonlySelectorEditor: FC<{
 }
 
 export const StoreEditor: FC<{
-	storeHooks: StoreHooks
 	token: ReadonlySelectorToken<unknown> | StateToken<unknown>
-}> = ({ storeHooks, token }) => {
+}> = ({ token }) => {
 	if (token.type === `readonly_selector`) {
-		return <ReadonlySelectorEditor storeHooks={storeHooks} token={token} />
+		return <ReadonlySelectorViewer token={token} />
 	}
-	return <StateEditor storeHooks={storeHooks} token={token} />
+	return <StateEditor token={token} />
 }