@atom.io/spa-devtools 0.0.0-stage → 0.0.1

package/src/Indexes.tsx

@@ -0,0 +1,331 @@
+import type { VNode } from "@atom.io/spa"
+import { useSetter, useTimeline, useValue } from "@atom.io/spa"
+import type {
+	ReadableToken,
+	TimelineToken,
+	TransactionToken,
+	WritableToken,
+} from "atom.io"
+import {
+	disposeFromStore,
+	findInStore,
+	isReservedIntrospectionKey,
+} from "atom.io/internal"
+import type { FamilyNode } from "atom.io/introspection"
+
+import { JsonEditor } from "./JsonEditor.tsx"
+import type { Tools } from "./store.ts"
+import { useExpanded } from "./store.ts"
+import { describe } from "./value.ts"
+
+type Token = ReadableToken<unknown, any, any>
+export function StateIndex(props: {
+	tools: Tools
+	type: `atoms` | `selectors`
+}): VNode {
+	const index = useValue<Map<string, Token | FamilyNode<Token>>>(
+		props.type === `atoms` ? props.tools.atomIndex : props.tools.selectorIndex,
+	)
+	return (
+		<article class="index" data-testid="state-index">
+			{index().size === 0 ? (
+				<p>(no {props.type})</p>
+			) : (
+				[...index().values()].map((node) => (
+					<StateNode key={node.key} tools={props.tools} node={node} />
+				))
+			)}
+		</article>
+	)
+}
+function StateNode(props: {
+	tools: Tools
+	node: Token | FamilyNode<Token>
+}): VNode {
+	const [open, toggle] = useExpanded(props.tools, [props.node.key])
+	return (
+		<section class="node" data-testid={`state-${props.node.key}`}>
+			{`familyMembers` in props.node ? (
+				<>
+					<header>
+						<button
+							type="button"
+							aria-expanded={open()}
+							data-testid={`open-close-state-family-${props.node.key}`}
+							onClick={toggle}
+						>
+							{open() ? `▾` : `▸`}
+						</button>
+						<h2>{props.node.key}</h2>
+						<small>family</small>
+					</header>
+					{open()
+						? [...props.node.familyMembers.values()].map((token) => (
+								<StateLeaf key={token.key} tools={props.tools} token={token} />
+							))
+						: null}
+				</>
+			) : (
+				<StateLeaf tools={props.tools} token={props.node} />
+			)}
+		</section>
+	)
+}
+function StateLeaf(props: { tools: Tools; token: Token }): VNode {
+	const read = useValue(props.token)
+	const writable = !props.token.type.startsWith(`readonly`)
+	const set = writable
+		? useSetter(props.token as WritableToken<unknown, any, any>)
+		: undefined
+	const value = () => {
+		try {
+			return read()
+		} catch (error) {
+			return error
+		}
+	}
+	return (
+		<section class="state-leaf" data-testid={`state-value-${props.token.key}`}>
+			<JsonEditor
+				label={<h3>{props.token.family?.subKey ?? props.token.key}</h3>}
+				actions={
+					props.token.family ? (
+						<button
+							type="button"
+							aria-label={`Dispose ${props.token.key}`}
+							onClick={() => {
+								props.tools.attempt(() => {
+									disposeFromStore(props.tools.store, props.token)
+								})
+							}}
+						>
+							×
+						</button>
+					) : null
+				}
+				tools={props.tools}
+				value={value()}
+				change={
+					set
+						? (update) => {
+								// Validate edits before opening an atom.io write operation.
+								const next = update(read())
+								set(() => next)
+							}
+						: undefined
+				}
+				path={
+					props.token.family
+						? [props.token.family.key, props.token.family.subKey]
+						: [props.token.key]
+				}
+			/>
+		</section>
+	)
+}
+export function TransactionIndex(props: { tools: Tools }): VNode {
+	const index = useValue(props.tools.transactionIndex)
+	const visible = () =>
+		index().filter((token) => !isReservedIntrospectionKey(token.key))
+	return (
+		<article class="index" data-testid="transaction-index">
+			{visible().length === 0 ? (
+				<p>(no transactions)</p>
+			) : (
+				visible().map((token) => (
+					<TransactionLog key={token.key} tools={props.tools} token={token} />
+				))
+			)}
+		</article>
+	)
+}
+function TransactionLog(props: {
+	tools: Tools
+	token: TransactionToken<any>
+}): VNode {
+	const log = useValue(
+		findInStore(
+			props.tools.store,
+			props.tools.transactionLogSelectors,
+			props.token.key,
+		),
+	)
+	const [open, toggle] = useExpanded(props.tools, [props.token.key])
+	return (
+		<section class="node" data-testid={`transaction-${props.token.key}`}>
+			<header>
+				<button
+					type="button"
+					aria-expanded={open()}
+					data-testid={`open-close-transaction-${props.token.key}`}
+					onClick={toggle}
+				>
+					{open() ? `▾` : `▸`}
+				</button>
+				<h2>{props.token.key}</h2>
+				<small>({log().length})</small>
+			</header>
+			{open()
+				? log().map((event, index) => (
+						<EventView
+							key={index}
+							tools={props.tools}
+							event={event}
+							index={index}
+						/>
+					))
+				: null}
+		</section>
+	)
+}
+// Events are recursive discriminated records, including user-defined transaction outputs.
+export function EventView(props: {
+	tools: Tools
+	event: any
+	index: number
+}): VNode {
+	const [open, toggle] = useExpanded(
+		props.tools,
+		[`event`, props.event.token?.key ?? ``, String(props.index)],
+		true,
+	)
+	return (
+		<section
+			class="event"
+			data-testid={`${props.event.type === `transaction_outcome` ? `transaction` : `timeline`}-update-${props.event.token?.key}-${props.index}`}
+		>
+			<header>
+				<button type="button" aria-expanded={open()} onClick={toggle}>
+					{open() ? `▾` : `▸`}
+				</button>
+				<strong>{props.event.token?.key}</strong>
+				<small>{props.event.type}</small>
+			</header>
+			{open() ? (
+				props.event.type === `transaction_outcome` ? (
+					<>
+						<p>
+							params: <code>{describe(props.event.params)}</code>
+						</p>
+						<p>
+							output: <code>{describe(props.event.output)}</code>
+						</p>
+						<section class="impact">
+							{props.event.subEvents.map((event: any, index: number) => (
+								<EventView
+									key={index}
+									tools={props.tools}
+									event={event}
+									index={index}
+								/>
+							))}
+						</section>
+					</>
+				) : props.event.update ? (
+					<p>
+						<del>{describe(props.event.update.oldValue)}</del> →{` `}
+						<ins>{describe(props.event.update.newValue)}</ins>
+					</p>
+				) : (
+					<code>{describe(props.event)}</code>
+				)
+			) : null}
+		</section>
+	)
+}
+export function TimelineIndex(props: { tools: Tools }): VNode {
+	const index = useValue(props.tools.timelineIndex)
+	const groups = () => {
+		const result = new Map<string, TimelineToken<any>[]>()
+		for (const token of index()) {
+			if (isReservedIntrospectionKey(token.key) || token.key.startsWith(`👁‍🗨`))
+				continue
+			const key = token.family?.key ?? ``
+			const members = result.get(key) ?? []
+			members.push(token)
+			result.set(key, members)
+		}
+		return [...result]
+	}
+	return (
+		<article class="index" data-testid="timeline-index">
+			{groups().length === 0 ? (
+				<p>(no timelines)</p>
+			) : (
+				groups().map(([family, members]) => (
+					<section
+						key={family}
+						data-testid={family ? `timeline-family-${family}` : undefined}
+					>
+						{family ? <h2>{family}</h2> : null}
+						{members.map((token) => (
+							<TimelineLog key={token.key} tools={props.tools} token={token} />
+						))}
+					</section>
+				))
+			)}
+		</article>
+	)
+}
+function TimelineLog(props: { tools: Tools; token: TimelineToken<any> }): VNode {
+	const controls = useTimeline(props.token)
+	const log = useValue(
+		findInStore(
+			props.tools.store,
+			props.tools.timelineSelectors,
+			props.token.key,
+		),
+	)
+	const [open, toggle] = useExpanded(props.tools, [props.token.key])
+	return (
+		<section class="node" data-testid={`timeline-${props.token.key}`}>
+			<header>
+				<button
+					type="button"
+					aria-expanded={open()}
+					data-testid={`open-close-timeline-${props.token.key}`}
+					onClick={toggle}
+				>
+					{open() ? `▾` : `▸`}
+				</button>
+				<h2>{props.token.family?.subKey ?? props.token.key}</h2>
+				<small>
+					({controls().at}/{controls().length})
+				</small>
+				<button
+					type="button"
+					disabled={controls().at === 0}
+					onClick={() => {
+						props.tools.attempt(controls().undo)
+					}}
+				>
+					undo
+				</button>
+				<button
+					type="button"
+					disabled={controls().at === controls().length}
+					onClick={() => {
+						props.tools.attempt(controls().redo)
+					}}
+				>
+					redo
+				</button>
+			</header>
+			{open() ? (
+				<section>
+					{log().history.map((event, index) => (
+						<section key={index}>
+							{index === log().at ? (
+								<p class="you-are-here">you are here</p>
+							) : null}
+							<EventView tools={props.tools} event={event} index={index} />
+						</section>
+					))}
+					{log().at === log().history.length ? (
+						<p class="you-are-here">you are here</p>
+					) : null}
+				</section>
+			) : null}
+		</section>
+	)
+}

package/src/JsonEditor.tsx

@@ -0,0 +1,259 @@
+import type { Child, VNode } from "@atom.io/spa"
+
+import type { Path, Tools } from "./store.ts"
+import { useExpanded } from "./store.ts"
+import type { Change, JsonKind } from "./value.ts"
+import { convert, describe, kind } from "./value.ts"
+
+interface EditorProps {
+	tools: Tools
+	value: unknown
+	change?: Change | undefined
+	path: Path
+	ancestors?: readonly unknown[]
+	label?: Child
+	actions?: Child
+}
+const TYPES: JsonKind[] = [
+	`string`,
+	`number`,
+	`boolean`,
+	`null`,
+	`array`,
+	`object`,
+]
+export function JsonEditor(props: EditorProps): VNode {
+	const [expanded, toggle] = useExpanded(props.tools, props.path)
+	const circular = () =>
+		(props.ancestors?.includes(props.value) ?? false) || props.path.length > 50
+	const container = () =>
+		!circular() &&
+		(kind(props.value) === `object` || kind(props.value) === `array`)
+	const entries = () => Object.entries(props.value as Record<string, unknown>)
+	return (
+		<section
+			class="json-editor"
+			data-testid={`${props.path.join(`.`)}-state-editor`}
+		>
+			<header>
+				{container() ? (
+					<button
+						type="button"
+						aria-label={`Expand ${props.path.at(-1)}`}
+						aria-expanded={expanded()}
+						onClick={toggle}
+					>
+						{expanded() ? `▾` : `▸`}
+					</button>
+				) : (
+					<span class="carat-spacer" />
+				)}
+				<span class="field-name">{props.label}</span>
+				{props.change ? (
+					<select
+						aria-label={`Type of ${props.path.at(-1)}`}
+						value={kind(props.value)}
+						onChange={(event) => {
+							const type = event.currentTarget.value as JsonKind
+							props.tools.attempt(() => {
+								props.change?.((previous) => convert(previous, type))
+							})
+						}}
+					>
+						<option value="other" disabled>
+							other
+						</option>
+						{TYPES.map((type) => (
+							<option value={type}>{type}</option>
+						))}
+					</select>
+				) : (
+					<small>{kind(props.value)}</small>
+				)}
+				{container() ? (
+					<code title={describe(props.value)}>{describe(props.value)}</code>
+				) : circular() ? (
+					<code>[Circular]</code>
+				) : (
+					<Primitive
+						value={props.value}
+						change={props.change}
+						tools={props.tools}
+						label={props.path.at(-1) ?? `value`}
+					/>
+				)}
+				{props.actions}
+			</header>
+			{container() && expanded() ? (
+				<section class="properties">
+					{entries().map(([key]) => (
+						<Property key={key} name={key} editor={props} />
+					))}
+					{props.change ? (
+						<footer>
+							<button
+								type="button"
+								onClick={() => {
+									props.tools.attempt(() => {
+										props.change?.((previous) => {
+											if (Array.isArray(previous)) return [...previous, null]
+											const object = previous as Record<string, unknown>
+											let name = `new`
+											while (Object.hasOwn(object, name)) name += `_`
+											return { ...object, [name]: null }
+										})
+									})
+								}}
+							>
+								add {Array.isArray(props.value) ? `item` : `property`}
+							</button>
+							{Array.isArray(props.value) ? (
+								<button
+									type="button"
+									onClick={() => {
+										props.tools.attempt(() => {
+											props.change?.((previous) =>
+												[...(previous as unknown[])].sort((a, b) =>
+													typeof a === `number` && typeof b === `number`
+														? a - b
+														: describe(a).localeCompare(describe(b)),
+												),
+											)
+										})
+									}}
+								>
+									sort
+								</button>
+							) : null}
+						</footer>
+					) : null}
+				</section>
+			) : null}
+		</section>
+	)
+}
+function Primitive(props: {
+	value: unknown
+	change?: Change | undefined
+	tools: Tools
+	label: string
+}): VNode {
+	const set = (value: unknown) => {
+		props.tools.attempt(() => {
+			props.change?.(() => value)
+		})
+	}
+	return (
+		<span class="primitive">
+			{kind(props.value) === `boolean` ? (
+				<input
+					aria-label={props.label}
+					type="checkbox"
+					checked={Boolean(props.value)}
+					disabled={!props.change}
+					onChange={(event) => {
+						set(event.currentTarget.checked)
+					}}
+				/>
+			) : kind(props.value) === `string` || kind(props.value) === `number` ? (
+				<input
+					aria-label={props.label}
+					type="text"
+					inputmode={kind(props.value) === `number` ? `decimal` : `text`}
+					value={String(props.value)}
+					readOnly={!props.change}
+					onInput={(event) => {
+						const text = event.currentTarget.value
+						if (kind(props.value) === `string`) set(text)
+						else if (text.trim() && Number.isFinite(Number(text)))
+							set(Number(text))
+					}}
+					onBlur={(event) => {
+						event.currentTarget.value = String(props.value)
+					}}
+				/>
+			) : (
+				<code>{describe(props.value)}</code>
+			)}
+		</span>
+	)
+}
+function Property(props: { name: string; editor: EditorProps }): VNode {
+	const parent = props.editor
+	const read = () => (parent.value as Record<string, unknown>)[props.name]
+	const change: Change = (update) => {
+		parent.change?.((previous) => {
+			if (Array.isArray(previous))
+				return previous.map((value, index) =>
+					index === Number(props.name) ? update(value) : value,
+				)
+			const object = previous as Record<string, unknown>
+			return { ...object, [props.name]: update(object[props.name]) }
+		})
+	}
+	return (
+		<section class="property">
+			<JsonEditor
+				label={
+					parent.change && !Array.isArray(parent.value) ? (
+						<input
+							aria-label={`Rename ${props.name}`}
+							style={`width:calc(${Math.max(1, props.name.length)}ch + 6px)`}
+							value={props.name}
+							onChange={(event) => {
+								const input = event.currentTarget
+								const name = input.value
+								parent.tools.attempt(() => {
+									parent.change?.((previous) => {
+										const object = previous as Record<string, unknown>
+										if (name !== props.name && Object.hasOwn(object, name))
+											throw new Error(`Property "${name}" already exists`)
+										return Object.fromEntries(
+											Object.entries(object).map(([key, value]) => [
+												key === props.name ? name : key,
+												value,
+											]),
+										)
+									})
+								})
+								input.value = props.name
+							}}
+						/>
+					) : (
+						<strong>{props.name}</strong>
+					)
+				}
+				actions={
+					parent.change ? (
+						<button
+							type="button"
+							aria-label={`Delete ${props.name}`}
+							onClick={() => {
+								parent.tools.attempt(() => {
+									parent.change?.((previous) =>
+										Array.isArray(previous)
+											? previous.filter(
+													(_, index) => index !== Number(props.name),
+												)
+											: Object.fromEntries(
+													Object.entries(previous as object).filter(
+														([key]) => key !== props.name,
+													),
+												),
+									)
+								})
+							}}
+						>
+							×
+						</button>
+					) : null
+				}
+				tools={parent.tools}
+				path={[...parent.path, props.name]}
+				value={read()}
+				change={parent.change ? change : undefined}
+				ancestors={[...(parent.ancestors ?? []), parent.value]}
+			/>
+		</section>
+	)
+}

package/src/css.d.ts

@@ -0,0 +1,2 @@
+// TypeScript entrypoint for the separately imported stylesheet.
+export {}