atom.io 0.6.4 → 0.6.6

package/src/react-devtools/AtomIODevtools.tsx

@@ -1,107 +1,108 @@
-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: FC = () => {
+	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} />
 }

package/src/react-devtools/StateIndex.tsx

@@ -0,0 +1,153 @@
+import type { AtomToken, ReadonlySelectorToken, SelectorToken } from "atom.io"
+import { getState, selectorFamily } from "atom.io"
+import { useO, useIO } from "atom.io/react"
+import type { FC } from "react"
+
+import { isJson, refineJsonType } from "~/packages/anvl/src/json"
+
+import { findViewIsOpenState, primitiveRefinery } from "."
+import { button } from "./Button"
+import { StoreEditor } from "./StateEditor"
+import type { FamilyNode, StateTokenIndex } from "../introspection"
+
+const findStateTypeState = selectorFamily<string, { key: string }>({
+	key: `👁‍🗨 State Type`,
+	get: (token) => ({ get }) => {
+		let state: unknown
+		try {
+			state = get(token as any)
+		} catch (error) {
+			return `error`
+		}
+		if (state === undefined) return `undefined`
+		if (isJson(state)) return refineJsonType(state).type
+		return Object.getPrototypeOf(state).constructor.name
+	},
+})
+
+export const StateIndexLeafNode: FC<{
+	node:
+		| AtomToken<unknown>
+		| ReadonlySelectorToken<unknown>
+		| SelectorToken<unknown>
+	isOpenState: AtomToken<boolean>
+	typeState: ReadonlySelectorToken<string>
+}> = ({ node, isOpenState, typeState }) => {
+	const [isOpen, setIsOpen] = useIO(isOpenState)
+	const state = useO(node)
+	const stateType = useO(typeState)
+
+	const isPrimitive = Boolean(primitiveRefinery.refine(state))
+
+	return (
+		<>
+			<header>
+				<button.OpenClose
+					isOpen={isOpen && !isPrimitive}
+					setIsOpen={setIsOpen}
+					disabled={isPrimitive}
+				/>
+				<label
+					onClick={() => console.log(node, getState(node))}
+					onKeyUp={() => console.log(node, getState(node))}
+				>
+					<h2>{node.family?.subKey ?? node.key}</h2>
+					<span className="type detail">({stateType})</span>
+				</label>
+				{isPrimitive ? <StoreEditor token={node} /> : null}
+			</header>
+			{isOpen && !isPrimitive ? (
+				<main>
+					<StoreEditor token={node} />
+				</main>
+			) : null}
+		</>
+	)
+}
+export const StateIndexTreeNode: FC<{
+	node: FamilyNode<
+		AtomToken<unknown> | ReadonlySelectorToken<unknown> | SelectorToken<unknown>
+	>
+	isOpenState: AtomToken<boolean>
+}> = ({ node, isOpenState }) => {
+	const [isOpen, setIsOpen] = useIO(isOpenState)
+	Object.entries(node.familyMembers).forEach(([key, childNode]) => {
+		findViewIsOpenState(key)
+		findStateTypeState(childNode)
+	})
+	return (
+		<>
+			<header>
+				<button.OpenClose isOpen={isOpen} setIsOpen={setIsOpen} />
+				<label>
+					<h2>{node.key}</h2>
+					<span className="type detail"> (family)</span>
+				</label>
+			</header>
+			{isOpen
+				? Object.entries(node.familyMembers).map(([key, childNode]) => (
+						<StateIndexNode
+							key={key}
+							node={childNode}
+							isOpenState={findViewIsOpenState(childNode.key)}
+							typeState={findStateTypeState(childNode)}
+						/>
+				  ))
+				: null}
+		</>
+	)
+}
+
+export const StateIndexNode: FC<{
+	node: StateTokenIndex<
+		AtomToken<unknown> | ReadonlySelectorToken<unknown> | SelectorToken<unknown>
+	>[string]
+	isOpenState: AtomToken<boolean>
+	typeState: ReadonlySelectorToken<string>
+}> = ({ node, isOpenState, typeState }) => {
+	if (node.key.startsWith(`👁‍🗨`)) {
+		return null
+	}
+	return (
+		<section className="node state">
+			{`type` in node ? (
+				<StateIndexLeafNode
+					node={node}
+					isOpenState={isOpenState}
+					typeState={typeState}
+				/>
+			) : (
+				<StateIndexTreeNode node={node} isOpenState={isOpenState} />
+			)}
+		</section>
+	)
+}
+
+export const StateIndex: FC<{
+	tokenIndex: ReadonlySelectorToken<
+		StateTokenIndex<
+			| AtomToken<unknown>
+			| ReadonlySelectorToken<unknown>
+			| SelectorToken<unknown>
+		>
+	>
+}> = ({ tokenIndex }) => {
+	const tokenIds = useO(tokenIndex)
+	return (
+		<article className="index state_index">
+			{Object.entries(tokenIds)
+				.filter(([key]) => !key.startsWith(`👁‍🗨`))
+				.sort()
+				.map(([key, node]) => {
+					return (
+						<StateIndexNode
+							key={key}
+							node={node}
+							isOpenState={findViewIsOpenState(node.key)}
+							typeState={findStateTypeState(node)}
+						/>
+					)
+				})}
+		</article>
+	)
+}

package/src/react-devtools/TimelineIndex.tsx

@@ -0,0 +1,92 @@
+import {
+	undo,
+	type AtomToken,
+	type ReadonlySelectorToken,
+	type TimelineToken,
+	redo,
+} from "atom.io"
+import { useIO, useO } from "atom.io/react"
+import { Fragment, type FC } from "react"
+
+import { findTimelineState, findViewIsOpenState, timelineIndex } from "."
+import { button } from "./Button"
+import { article } from "./Updates"
+import type { Timeline } from "../internal"
+
+export const YouAreHere: FC = () => {
+	return <span className="you_are_here">you are here</span>
+}
+
+export const TimelineLog: FC<{
+	token: TimelineToken
+	isOpenState: AtomToken<boolean>
+	timelineState: ReadonlySelectorToken<Timeline>
+}> = ({ token, isOpenState, timelineState }) => {
+	const timeline = useO(timelineState)
+	const [isOpen, setIsOpen] = useIO(isOpenState)
+
+	return (
+		<section className="node timeline_log">
+			<header>
+				<button.OpenClose isOpen={isOpen} setIsOpen={setIsOpen} />
+				<label>
+					<h2>{token.key}</h2>
+					<span className="detail length">
+						({timeline.at}/{timeline.history.length})
+					</span>
+					<span className="gap" />
+					<nav>
+						<button
+							type="button"
+							onClick={() => undo(token)}
+							disabled={timeline.at === 0}
+						>
+							undo
+						</button>
+						<button
+							type="button"
+							onClick={() => redo(token)}
+							disabled={timeline.at === timeline.history.length}
+						>
+							redo
+						</button>
+					</nav>
+				</label>
+			</header>
+			{isOpen ? (
+				<main>
+					{timeline.history.map((update, index) => (
+						<Fragment key={update.key + index + timeline.at}>
+							{index === timeline.at ? <YouAreHere /> : null}
+							<article.TimelineUpdate timelineUpdate={update} />
+							{index === timeline.history.length - 1 &&
+							timeline.at === timeline.history.length ? (
+								<YouAreHere />
+							) : null}
+						</Fragment>
+					))}
+				</main>
+			) : null}
+		</section>
+	)
+}
+
+export const TimelineIndex: FC = () => {
+	const tokenIds = useO(timelineIndex)
+	return (
+		<article className="index timeline_index">
+			{tokenIds
+				.filter((token) => !token.key.startsWith(`👁‍🗨`))
+				.map((token) => {
+					return (
+						<TimelineLog
+							key={token.key}
+							token={token}
+							isOpenState={findViewIsOpenState(token.key)}
+							timelineState={findTimelineState(token.key)}
+						/>
+					)
+				})}
+		</article>
+	)
+}

package/src/react-devtools/TransactionIndex.tsx

@@ -0,0 +1,70 @@
+import type {
+	AtomToken,
+	ReadonlySelectorToken,
+	TransactionToken,
+	TransactionUpdate,
+} from "atom.io"
+import { useIO, useO } from "atom.io/react"
+import type { FC } from "react"
+
+import type { ƒn } from "~/packages/anvl/src/function"
+
+import {
+	findTransactionLogState,
+	findViewIsOpenState,
+	transactionIndex,
+} from "."
+import { button } from "./Button"
+import { article } from "./Updates"
+
+export const TransactionLog: FC<{
+	token: TransactionToken<ƒn>
+	isOpenState: AtomToken<boolean>
+	logState: ReadonlySelectorToken<TransactionUpdate<ƒn>[]>
+}> = ({ token, isOpenState, logState }) => {
+	const log = useO(logState)
+	const [isOpen, setIsOpen] = useIO(isOpenState)
+
+	return (
+		<section className="node transaction_log">
+			<header>
+				<button.OpenClose isOpen={isOpen} setIsOpen={setIsOpen} />
+				<label>
+					<h2>{token.key}</h2>
+					<span className="detail length">({log.length})</span>
+				</label>
+			</header>
+			{isOpen ? (
+				<main>
+					{log.map((update, index) => (
+						<article.TransactionUpdate
+							key={update.key + index}
+							serialNumber={index}
+							transactionUpdate={update}
+						/>
+					))}
+				</main>
+			) : null}
+		</section>
+	)
+}
+
+export const TransactionIndex: FC = () => {
+	const tokenIds = useO(transactionIndex)
+	return (
+		<article className="index transaction_index">
+			{tokenIds
+				.filter((token) => !token.key.startsWith(`👁‍🗨`))
+				.map((token) => {
+					return (
+						<TransactionLog
+							key={token.key}
+							token={token}
+							isOpenState={findViewIsOpenState(token.key)}
+							logState={findTransactionLogState(token.key)}
+						/>
+					)
+				})}
+		</article>
+	)
+}