atom.io 0.6.7 → 0.6.9

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

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

@@ -1,20 +0,0 @@
-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/json/index.ts

@@ -1 +0,0 @@
-export * from "./select-json"

package/src/json/select-json.ts

@@ -1,18 +0,0 @@
-import * as AtomIO from "atom.io"
-
-import type { Json, JsonInterface } from "~/packages/anvl/src/json"
-
-export const selectJson = <T, J extends Json>(
-	atom: AtomIO.AtomToken<T>,
-	transform: JsonInterface<T, J>,
-	store: AtomIO.Store = AtomIO.__INTERNAL__.IMPLICIT.STORE,
-): AtomIO.SelectorToken<J> =>
-	AtomIO.__INTERNAL__.selector__INTERNAL(
-		{
-			key: `${atom.key}JSON`,
-			get: ({ get }) => transform.toJson(get(atom)),
-			set: ({ set }, newValue) => set(atom, transform.fromJson(newValue)),
-		},
-		undefined,
-		store,
-	)

package/src/react/index.ts

@@ -1,2 +0,0 @@
-export * from "./store-context"
-export * from "./store-hooks"

package/src/react/store-context.tsx

@@ -1,13 +0,0 @@
-import * as AtomIO from "atom.io"
-import * as React from "react"
-
-export const StoreContext = React.createContext<AtomIO.Store>(
-	AtomIO.__INTERNAL__.IMPLICIT.STORE,
-)
-
-export const StoreProvider: React.FC<{
-	children: React.ReactNode
-	store?: AtomIO.Store
-}> = ({ children, store = AtomIO.__INTERNAL__.IMPLICIT.STORE }) => (
-	<StoreContext.Provider value={store}>{children}</StoreContext.Provider>
-)

package/src/react/store-hooks.ts

@@ -1,47 +0,0 @@
-import * as AtomIO from "atom.io"
-import * as React from "react"
-
-import type { Modifier } from "~/packages/anvl/src/function"
-
-import { StoreContext } from "./store-context"
-
-export type StoreHooks = {
-	useI: <T>(token: AtomIO.StateToken<T>) => (next: Modifier<T> | T) => void
-	useO: <T>(token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>) => T
-	useIO: <T>(token: AtomIO.StateToken<T>) => [T, (next: Modifier<T> | T) => void]
-}
-export const storeHooks: StoreHooks = { useI, useO, useIO }
-
-export function useI<T>(
-	token: AtomIO.StateToken<T>,
-): (next: Modifier<T> | T) => void {
-	const store = React.useContext(StoreContext)
-	const update = (next: Modifier<T> | T) => AtomIO.setState(token, next, store)
-	return update
-}
-
-export function useO<T>(
-	token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>,
-): T {
-	const store = React.useContext(StoreContext)
-	return React.useSyncExternalStore<T>(
-		(observe) => AtomIO.subscribe(token, observe, store),
-		() => AtomIO.getState(token, store),
-	)
-}
-
-export function useIO<T>(
-	token: AtomIO.StateToken<T>,
-): [T, (next: Modifier<T> | T) => void] {
-	return [useO(token), useI(token)]
-}
-
-export function useStore<T>(
-	token: AtomIO.StateToken<T>,
-): [T, (next: Modifier<T> | T) => void]
-export function useStore<T>(token: AtomIO.ReadonlySelectorToken<T>): T
-export function useStore<T>(
-	token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>,
-): T | [T, (next: Modifier<T> | T) => void] {
-	return token.type === `readonly_selector` ? useO(token) : useIO(token)
-}

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,70 +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 { 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<{
-	token: StateToken<unknown>
-}> = ({ token }) => {
-	const [data, set] = useIO(token)
-	return isJson(data) ? (
-		<JsonEditor data={data} set={set} schema={true} />
-	) : (
-		<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,153 +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/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>
-	)
-}