atom.io 0.6.9 → 0.7.0

package/react-devtools/src/AtomIODevtools.tsx

@@ -0,0 +1,109 @@
+import { useI, useO } from "atom.io/react"
+import { LayoutGroup, motion, spring } from "framer-motion"
+import { useRef } from "react"
+
+import {
+	atomIndex,
+	devtoolsAreOpenState,
+	devtoolsViewOptionsState,
+	devtoolsViewSelectionState,
+	selectorIndex,
+} from "."
+import { StateIndex } from "./StateIndex"
+import { TimelineIndex } from "./TimelineIndex"
+import { TransactionIndex } from "./TransactionIndex"
+
+import "./devtools.scss"
+
+export const AtomIODevtools = (): JSX.Element => {
+	const constraintsRef = useRef(null)
+
+	const setDevtoolsAreOpen = useI(devtoolsAreOpenState)
+	const devtoolsAreOpen = useO(devtoolsAreOpenState)
+	const setDevtoolsView = useI(devtoolsViewSelectionState)
+	const devtoolsView = useO(devtoolsViewSelectionState)
+	const devtoolsViewOptions = useO(devtoolsViewOptionsState)
+
+	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>
+							<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>
+		</>
+	)
+}

package/react-devtools/src/Button.tsx

@@ -0,0 +1,23 @@
+import type { Modify } from "atom.io/internal"
+import type { FC } from "react"
+
+export const OpenClose: FC<{
+	isOpen: boolean
+	setIsOpen: (next: Modify<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/react-devtools/src/StateEditor.tsx

@@ -0,0 +1,75 @@
+import type { ReadonlySelectorToken, StateToken } from "atom.io"
+import { useI, useO } from "atom.io/react"
+import type { FC } from "react"
+
+import { fallback } from "~/packages/anvl/src/function"
+import { Join } from "~/packages/anvl/src/join"
+import { isJson } from "~/packages/anvl/src/refinement/refine-json"
+import { RelationEditor } from "~/packages/hamr/src/react-data-designer"
+import { ElasticInput } from "~/packages/hamr/src/react-elastic-input"
+import { JsonEditor } from "~/packages/hamr/src/react-json-editor"
+
+export const StateEditor: FC<{
+	token: StateToken<unknown>
+}> = ({ token }) => {
+	const set = useI(token)
+	const data = useO(token)
+	return isJson(data) ? (
+		<JsonEditor data={data} set={set} schema={true} />
+	) : data instanceof Join ? (
+		<RelationEditor data={data} set={set} />
+	) : (
+		<div className="json_editor">
+			<ElasticInput
+				value={
+					data instanceof Set
+						? `Set { ${JSON.stringify([...data]).slice(1, -1)} }`
+						: data instanceof Map
+						? `Map ` + JSON.stringify([...data])
+						: Object.getPrototypeOf(data).constructor.name +
+						  ` ` +
+						  fallback(() => JSON.stringify(data), `?`)
+				}
+				disabled={true}
+			/>
+		</div>
+	)
+}
+
+export const ReadonlySelectorViewer: FC<{
+	token: ReadonlySelectorToken<unknown>
+}> = ({ token }) => {
+	const data = useO(token)
+	return isJson(data) ? (
+		<JsonEditor
+			data={data}
+			set={() => null}
+			schema={true}
+			isReadonly={() => true}
+		/>
+	) : (
+		<div className="json_editor">
+			<ElasticInput
+				value={
+					data instanceof Set
+						? `Set ` + JSON.stringify([...data])
+						: data instanceof Map
+						? `Map ` + JSON.stringify([...data])
+						: Object.getPrototypeOf(data).constructor.name +
+						  ` ` +
+						  JSON.stringify(data)
+				}
+				disabled={true}
+			/>
+		</div>
+	)
+}
+
+export const StoreEditor: FC<{
+	token: ReadonlySelectorToken<unknown> | StateToken<unknown>
+}> = ({ token }) => {
+	if (token.type === `readonly_selector`) {
+		return <ReadonlySelectorViewer token={token} />
+	}
+	return <StateEditor token={token} />
+}

package/react-devtools/src/StateIndex.tsx

@@ -0,0 +1,159 @@
+import type { AtomToken, ReadonlySelectorToken, SelectorToken } from "atom.io"
+import { getState, selectorFamily } from "atom.io"
+import type { FamilyNode, StateTokenIndex } from "atom.io/introspection"
+import { useI, useO } from "atom.io/react"
+import type { FC } from "react"
+
+import {
+	isJson,
+	refineJsonType,
+} from "~/packages/anvl/src/refinement/refine-json"
+
+import { findViewIsOpenState, primitiveRefinery } from "."
+import { button } from "./Button"
+import { StoreEditor } from "./StateEditor"
+
+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 setIsOpen = useI(isOpenState)
+	const isOpen = useO(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 setIsOpen = useI(isOpenState)
+	const isOpen = useO(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/react-devtools/src/TimelineIndex.tsx

@@ -0,0 +1,88 @@
+import type { AtomToken, ReadonlySelectorToken, TimelineToken } from "atom.io"
+import { redo, undo } from "atom.io"
+import type { Timeline } from "atom.io/internal"
+import { useI, useO } from "atom.io/react"
+import { type FC, Fragment } from "react"
+
+import { findTimelineState, findViewIsOpenState, timelineIndex } from "."
+import { button } from "./Button"
+import { article } from "./Updates"
+
+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 = useO(isOpenState)
+	const setIsOpen = useI(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/react-devtools/src/TransactionIndex.tsx

@@ -0,0 +1,70 @@
+import type {
+	AtomToken,
+	ReadonlySelectorToken,
+	TransactionToken,
+	TransactionUpdate,
+	ƒn,
+} from "atom.io"
+import { useI, useO } from "atom.io/react"
+import type { FC } from "react"
+
+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 = useO(isOpenState)
+	const setIsOpen = useI(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>
+	)
+}

package/react-devtools/src/Updates.tsx

@@ -0,0 +1,150 @@
+import type {
+	KeyedStateUpdate,
+	TimelineUpdate,
+	TransactionUpdate,
+	ƒn,
+} from "atom.io"
+import * as React from "react"
+
+import { discoverType } from "~/packages/anvl/src/refinement/refinery"
+
+import { prettyJson } from "."
+
+const AtomUpdateFC: React.FC<{
+	serialNumber: number
+	atomUpdate: KeyedStateUpdate<unknown>
+}> = ({ atomUpdate }) => {
+	return (
+		<article
+			key={atomUpdate.key}
+			className="node atom_update"
+			onClick={() => console.log(atomUpdate)}
+			onKeyUp={() => console.log(atomUpdate)}
+		>
+			<span className="detail">{atomUpdate.key}: </span>
+			<span>
+				<span className="summary">
+					{prettyJson.diff(atomUpdate.oldValue, atomUpdate.newValue).summary}
+				</span>
+			</span>
+		</article>
+	)
+}
+
+const TransactionUpdateFC: React.FC<{
+	serialNumber: number
+	transactionUpdate: TransactionUpdate<ƒn>
+}> = ({ serialNumber, transactionUpdate }) => {
+	return (
+		<article className="node transaction_update">
+			<header>
+				<h4>{serialNumber}</h4>
+			</header>
+			<main>
+				<section className="transaction_params">
+					<span className="detail">params: </span>
+					{transactionUpdate.params.map((param, index) => {
+						return (
+							<article
+								key={`param` + index}
+								className="node transaction_param"
+								onClick={() => console.log(transactionUpdate)}
+								onKeyUp={() => console.log(transactionUpdate)}
+							>
+								<span className="detail">{discoverType(param)}: </span>
+								<span className="summary">
+									{typeof param === `object` &&
+									param !== null &&
+									`type` in param &&
+									`target` in param ? (
+										<>{JSON.stringify(param.type)}</>
+									) : (
+										<>{JSON.stringify(param)}</>
+									)}
+								</span>
+							</article>
+						)
+					})}
+				</section>
+				<section className="node transaction_output">
+					<span className="detail">output: </span>
+					<span className="detail">
+						{discoverType(transactionUpdate.output)}
+					</span>
+					{transactionUpdate.output ? (
+						<span className="summary">
+							: {JSON.stringify(transactionUpdate.output)}
+						</span>
+					) : null}
+				</section>
+				<section className="transaction_impact">
+					<span className="detail">impact: </span>
+					{transactionUpdate.atomUpdates
+						.filter((token) => !token.key.startsWith(`👁‍🗨`))
+						.map((atomUpdate, index) => {
+							return (
+								<article.AtomUpdate
+									key={`${transactionUpdate.key}:${index}:${atomUpdate.key}`}
+									serialNumber={index}
+									atomUpdate={atomUpdate}
+								/>
+							)
+						})}
+				</section>
+			</main>
+		</article>
+	)
+}
+
+export const TimelineUpdateFC: React.FC<{
+	timelineUpdate: TimelineUpdate
+}> = ({ timelineUpdate }) => {
+	return (
+		<article className="node timeline_update">
+			<header>
+				<h4>
+					{timelineUpdate.timestamp}: {timelineUpdate.type} ({timelineUpdate.key}
+					)
+				</h4>
+			</header>
+			<main>
+				{timelineUpdate.type === `transaction_update` ? (
+					timelineUpdate.atomUpdates
+						.filter((token) => !token.key.startsWith(`👁‍🗨`))
+						.map((atomUpdate, index) => {
+							return (
+								<article.AtomUpdate
+									key={`${timelineUpdate.key}:${index}:${atomUpdate.key}`}
+									serialNumber={index}
+									atomUpdate={atomUpdate}
+								/>
+							)
+						})
+				) : timelineUpdate.type === `selector_update` ? (
+					timelineUpdate.atomUpdates
+						.filter((token) => !token.key.startsWith(`👁‍🗨`))
+						.map((atomUpdate, index) => {
+							return (
+								<article.AtomUpdate
+									key={`${timelineUpdate.key}:${index}:${atomUpdate.key}`}
+									serialNumber={index}
+									atomUpdate={atomUpdate}
+								/>
+							)
+						})
+				) : timelineUpdate.type === `atom_update` ? (
+					<article.AtomUpdate
+						serialNumber={timelineUpdate.timestamp}
+						atomUpdate={timelineUpdate}
+					/>
+				) : null}
+			</main>
+		</article>
+	)
+}
+
+export const article = {
+	AtomUpdate: AtomUpdateFC,
+	TransactionUpdate: TransactionUpdateFC,
+	TimelineUpdate: TimelineUpdateFC,
+}