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

package/src/devtools.css

@@ -0,0 +1,289 @@
+main[data-css="spa-devtools"] {
+	--fg-color: #ccc;
+	--fg-light: #aaa;
+	--fg-soft: #888;
+	--fg-hint: #4a4a4a;
+	--fg-max: #fff;
+	--bg-color: #111;
+	--bg-accent: #00f;
+	--bg-max: #000;
+	--bg-tint1: #222;
+	--bg-tint2: #333;
+	color-scheme: dark;
+	@media (prefers-color-scheme: light) {
+		--fg-color: #444;
+		--fg-light: #777;
+		--fg-soft: #888;
+		--fg-hint: #ccc;
+		--fg-max: #000;
+		--bg-color: #ddd;
+		--bg-accent: #0ff;
+		--bg-max: #fff;
+		--bg-tint1: #e3e3e3;
+		--bg-tint2: #f3f3f3;
+		color-scheme: light;
+	}
+	position: fixed;
+	z-index: 10000;
+	right: 0;
+	bottom: 0;
+	width: min(500px, 100vw);
+	height: min(800px, 100dvh);
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	border: 2px solid var(--fg-color);
+	background: var(--bg-color);
+	color: var(--fg-color);
+	font: 14px/1 Theia, monospace;
+	text-align: left;
+	&, * {
+		box-sizing: border-box;
+	}
+	* {
+		color: inherit;
+		font: inherit;
+		margin: 0;
+		padding: 0;
+	}
+	&[hidden] {
+		display: none;
+	}
+	&[data-open="false"] {
+		width: 33px;
+		height: 28px;
+		border-color: transparent;
+		background: transparent;
+		.toolbar > :not([data-testid="open-close-devtools"]) {
+			display: none;
+		}
+	}
+	button, input, select {
+		border-radius: 0;
+		background: none;
+		min-width: 0;
+	}
+	button {
+		height: 21px;
+		min-width: 21px;
+		border: 0;
+		padding: 0 3px;
+		cursor: pointer;
+	}
+	button:hover {
+		background: var(--fg-hint);
+	}
+	button:disabled {
+		cursor: default;
+		color: var(--fg-soft);
+	}
+	button:focus-visible, input:focus-visible, select:focus-visible {
+		outline: 2px solid var(--fg-max);
+		outline-offset: -2px;
+		background: var(--bg-max);
+		color: var(--fg-max);
+	}
+	input {
+		height: 18px;
+		padding: 0 2px;
+		border: 1px solid var(--fg-hint);
+	}
+	input[readonly] {
+		border-color: transparent;
+	}
+	input::selection {
+		background: var(--bg-accent);
+	}
+	input[type="checkbox"] {
+		width: 13px;
+		height: 13px;
+		margin: 0 3px;
+	}
+	select {
+		height: 20px;
+		border: 0;
+		color: var(--fg-soft);
+		flex: 0 0 auto;
+		max-width: 76px;
+	}
+	header, nav, footer {
+		display: flex;
+		align-items: center;
+		gap: 0;
+	}
+	.toolbar {
+		flex: 0 0 28px;
+		min-width: 0;
+	}
+	.toolbar h1 {
+		font: 24px/1 Charter, serif;
+		margin: 0 4px;
+		white-space: nowrap;
+	}
+	.toolbar nav {
+		margin-left: auto;
+		align-self: end;
+		overflow-x: auto;
+	}
+	.toolbar nav button {
+		height: 24px;
+		padding: 0 5px;
+	}
+	.toolbar nav button[aria-pressed="true"] {
+		background: var(--fg-color);
+		color: var(--bg-color);
+	}
+	.drag-handle {
+		touch-action: none;
+		cursor: move;
+		min-width: 16px;
+		color: var(--fg-soft);
+	}
+	.index {
+		flex: 1;
+		min-height: 0;
+		overflow: auto;
+		border-top: 1px solid var(--fg-color);
+		background: var(--bg-tint1);
+		padding-bottom: 24px;
+	}
+	.index > p {
+		padding: 5px;
+		font-style: italic;
+		color: var(--fg-soft);
+	}
+	.node {
+		border-bottom: 1px solid var(--fg-soft);
+	}
+	.node > header, .event > header {
+		height: 22px;
+		background: var(--bg-tint2);
+		white-space: nowrap;
+		overflow: hidden;
+	}
+	.node > header h2 {
+		padding: 0 3px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.node > header small {
+		margin-right: auto;
+	}
+	small {
+		color: var(--fg-soft);
+	}
+	.node > .state-leaf ~ .state-leaf {
+		border-top: 1px solid var(--fg-hint);
+	}
+	.node:has(> header) > .state-leaf {
+		margin-left: 9px;
+		border-left: 1px solid var(--fg-soft);
+	}
+	.json-editor {
+		min-width: 0;
+	}
+	.json-editor > header {
+		height: 21px;
+		min-width: 0;
+		background: var(--bg-tint2);
+		white-space: nowrap;
+	}
+	.state-leaf > .json-editor > header {
+		height: 22px;
+	}
+	.carat-spacer {
+		width: 21px;
+		flex-shrink: 0;
+	}
+	.field-name {
+		padding-right: 4px;
+		flex: 0 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.field-name h3 {
+		font-weight: inherit;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.field-name:empty {
+		display: none;
+	}
+	.field-name input {
+		max-width: 100%;
+	}
+	.json-editor > header > code {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: var(--fg-light);
+		padding: 0 3px;
+	}
+	.primitive {
+		flex: 1;
+		min-width: 0;
+		padding: 0 2px;
+		overflow: hidden;
+	}
+	.primitive input[type="text"] {
+		width: 100%;
+	}
+	.primitive code {
+		white-space: nowrap;
+	}
+	.properties, .impact {
+		margin-left: 9px;
+		border-left: 1px solid var(--fg-soft);
+	}
+	.properties > .property {
+		border-top: 1px solid var(--fg-hint);
+	}
+	.property .field-name::after {
+		content: ":";
+		color: var(--fg-soft);
+		padding-right: 3px;
+	}
+	.properties > footer {
+		height: 21px;
+		border-top: 1px solid var(--fg-hint);
+	}
+	.properties > footer button {
+		color: var(--fg-soft);
+	}
+	.event {
+		border-top: 1px solid var(--fg-hint);
+	}
+	.event > header strong {
+		padding-right: 5px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.event p, .event > code {
+		display: block;
+		padding: 3px 6px;
+		line-height: 18px;
+		overflow-wrap: anywhere;
+	}
+	ins {
+		color: var(--fg-color);
+		text-decoration: none;
+		background: #0a02;
+	}
+	del {
+		color: var(--fg-soft);
+		background: #a002;
+	}
+	.you-are-here {
+		background: var(--fg-color);
+		color: var(--bg-color);
+		text-align: center;
+		line-height: 21px;
+	}
+	[role="alert"] {
+		padding: 5px;
+		line-height: 18px;
+		border-top: 1px solid var(--fg-soft);
+	}
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export type { AtomIODevtoolsProps } from "./AtomIODevtools.tsx"
+export { AtomIODevtools } from "./AtomIODevtools.tsx"

package/src/store.ts

@@ -0,0 +1,148 @@
+import type { Accessor } from "@atom.io/spa"
+import { onCleanup, useId, useSetter, useValue } from "@atom.io/spa"
+import type { RegularAtomFamilyToken, RegularAtomToken, Setter } from "atom.io"
+import type { RootStore } from "atom.io/internal"
+import {
+	createRegularAtomFamily,
+	disposeFromStore,
+	findInStore,
+	setIntoStore,
+} from "atom.io/internal"
+import type { IntrospectionStates } from "atom.io/introspection"
+import { attachIntrospectionStates } from "atom.io/introspection"
+
+const locals = new WeakMap<RootStore, RegularAtomFamilyToken<unknown, string>>()
+const introspection = new WeakMap<RootStore, IntrospectionStates>()
+export type Path = readonly string[]
+export interface Tools extends IntrospectionStates {
+	store: RootStore
+	expanded: RegularAtomToken<Record<string, boolean>>
+	error: RegularAtomToken<string>
+	attempt(run: () => void): void
+}
+
+export function ownedAtom<T>(store: RootStore, initial: T): RegularAtomToken<T> {
+	let family = locals.get(store)
+	if (!family) {
+		family = createRegularAtomFamily<unknown, string, never>(store, {
+			key: `🔍 spa devtools`,
+			default: undefined,
+		})
+		locals.set(store, family)
+	}
+	const token = findInStore(store, family, useId()) as RegularAtomToken<T>
+	setIntoStore(store, token, initial)
+	onCleanup(() => {
+		disposeFromStore(store, token)
+	})
+	return token
+}
+export function useLocal<T>(
+	store: RootStore,
+	initial: T,
+): [Accessor<T>, (next: T | Setter<T>) => void] {
+	const token = ownedAtom(store, initial)
+	return [useValue(token) as Accessor<T>, useSetter(token)]
+}
+export function useSaved<T>(
+	store: RootStore,
+	key: string,
+	fallback: T,
+): [Accessor<T>, (next: T | Setter<T>) => void] {
+	let initial = fallback
+	try {
+		const saved: unknown = JSON.parse(localStorage.getItem(key) ?? `null`)
+		if (saved !== null && typeof saved === typeof fallback) initial = saved as T
+	} catch {
+		/* Storage may be unavailable. */
+	}
+	const [value, set] = useLocal(store, initial)
+	return [
+		value,
+		(next) => {
+			set(next)
+			try {
+				localStorage.setItem(key, JSON.stringify(value()))
+			} catch {
+				/* Keep in-memory state when storage is unavailable. */
+			}
+		},
+	]
+}
+export function useTools(store: RootStore): Tools {
+	let states = introspection.get(store)
+	if (!states) {
+		states = attachIntrospectionStates(store)
+		introspection.set(store, states)
+	}
+	let expanded: Record<string, boolean> = {}
+	try {
+		const saved: unknown = JSON.parse(
+			localStorage.getItem(`🔍 spa expanded`) ?? `{}`,
+		)
+		if (
+			saved &&
+			typeof saved === `object` &&
+			!Array.isArray(saved) &&
+			Object.values(saved).every((value) => typeof value === `boolean`)
+		)
+			expanded = saved as Record<string, boolean>
+	} catch {
+		/* Ignore corrupt or unavailable storage. */
+	}
+	const error = ownedAtom(store, ``)
+	const setError = useSetter(error)
+	return {
+		...states,
+		store,
+		error,
+		expanded: ownedAtom(store, expanded),
+		attempt(run) {
+			try {
+				run()
+				setError(``)
+			} catch (caught) {
+				setError(caught instanceof Error ? caught.message : String(caught))
+			}
+		},
+	}
+}
+export function useExpanded(
+	tools: Tools,
+	path: Path,
+	initial = false,
+): [Accessor<boolean>, (event: MouseEvent) => void] {
+	const value = useValue(tools.expanded)
+	const set = useSetter(tools.expanded)
+	const key = JSON.stringify(path)
+	const group = `all:${JSON.stringify(path.slice(0, -1))}`
+	const read = () => value()[key] ?? value()[group] ?? initial
+	return [
+		read,
+		(event) => {
+			const next = !read()
+			set((previous) => {
+				const result = { ...previous }
+				if (event.shiftKey) {
+					const parent = JSON.stringify(path.slice(0, -1))
+					for (const item of Object.keys(result)) {
+						if (item.startsWith(`[`)) {
+							const candidate = JSON.parse(item) as string[]
+							if (JSON.stringify(candidate.slice(0, -1)) === parent)
+								Reflect.deleteProperty(result, item)
+						}
+					}
+					result[group] = next
+				} else {
+					result[key] = next
+				}
+				try {
+					localStorage.setItem(`🔍 spa expanded`, JSON.stringify(result))
+				} catch {
+					/* Keep in-memory expansion state. */
+				}
+				return result
+			})
+		},
+	]
+}

package/src/value.ts

@@ -0,0 +1,79 @@
+export type Change = (update: (previous: unknown) => unknown) => void
+export type JsonKind =
+	| `string`
+	| `number`
+	| `boolean`
+	| `null`
+	| `array`
+	| `object`
+export function kind(value: unknown): JsonKind | `other` {
+	if (value === null) return `null`
+	if (Array.isArray(value)) return `array`
+	if (
+		typeof value === `object` &&
+		(Object.getPrototypeOf(value) === Object.prototype ||
+			Object.getPrototypeOf(value) === null)
+	)
+		return `object`
+	if (
+		typeof value === `string` ||
+		typeof value === `number` ||
+		typeof value === `boolean`
+	)
+		return typeof value as JsonKind
+	return `other`
+}
+export function describe(value: unknown): string {
+	try {
+		const seen = new WeakSet<object>()
+		return (
+			JSON.stringify(value, (_, item: unknown) => {
+				if (typeof item === `bigint`) return `${item}n`
+				if (item instanceof Error) return `${item.name}: ${item.message}`
+				if (item instanceof Map) return { Map: [...item] }
+				if (item instanceof Set) return { Set: [...item] }
+				if (typeof item === `object` && item !== null) {
+					if (seen.has(item)) return `[Circular]`
+					seen.add(item)
+				}
+				return item
+			}) ?? String(value)
+		)
+	} catch {
+		return Object.prototype.toString.call(value)
+	}
+}
+export function convert(value: unknown, type: JsonKind): unknown {
+	switch (type) {
+		case `null`:
+			return null
+		case `string`:
+			return value == null
+				? ``
+				: typeof value === `string`
+					? value
+					: describe(value)
+		case `number`: {
+			const next = Array.isArray(value) ? value.length : Number(value)
+			return Number.isFinite(next) ? next : 0
+		}
+		case `boolean`:
+			return typeof value === `string` ? value === `true` : Boolean(value)
+		case `array`:
+			return Array.isArray(value)
+				? value
+				: value == null
+					? []
+					: typeof value === `object`
+						? Object.entries(value)
+						: [value]
+		case `object`:
+			return kind(value) === `object`
+				? value
+				: Array.isArray(value)
+					? Object.fromEntries(value.map((item, index) => [index, item]))
+					: value == null
+						? {}
+						: { value }
+	}
+}