atom.io 0.6.8 → 0.6.9

package/src/react-devtools/AtomIODevtools.tsx

@@ -1,107 +0,0 @@
-import { useO, useIO } 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 [devtoolsAreOpen, setDevtoolsAreOpen] = useIO(devtoolsAreOpenState)
-	const [devtoolsView, setDevtoolsView] = useIO(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/src/react-devtools/Button.tsx

@@ -1,24 +0,0 @@
-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,74 +0,0 @@
-import type { ReadonlySelectorToken, StateToken } from "atom.io"
-import { useO, useIO } 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 [data, set] = useIO(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/src/react-devtools/StateIndex.tsx

@@ -1,156 +0,0 @@
-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/refinement/refine-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

@@ -1,92 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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>
-	)
-}

package/src/react-devtools/Updates.tsx

@@ -1,145 +0,0 @@
-import type { ƒn } from "~/packages/anvl/src/function"
-import { discoverType } from "~/packages/anvl/src/refinement/refinery"
-
-import { prettyJson } from "."
-import type { KeyedStateUpdate } from "../subscribe"
-import type { TimelineUpdate } from "../timeline"
-import type { TransactionUpdate } from "../transaction"
-
-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` &&
-									`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,
-}