atom.io 0.33.9 → 0.33.11

package/src/internal/operation.ts

@@ -1,4 +1,4 @@
-import type { WritableToken } from "atom.io"
+import type { ReadableToken } from "atom.io"
 
 import type { Store } from "./store"
 import { isChildStore } from "./transaction/is-root-store"
@@ -12,12 +12,12 @@ export type OperationProgress =
 			done: Set<string>
 			prev: Map<string, any>
 			time: number
-			token: WritableToken<any>
+			token: ReadableToken<any>
 	  }
 
 export const openOperation = (
 	store: Store,
-	token: WritableToken<any>,
+	token: ReadableToken<any>,
 ): number | undefined => {
 	if (store.operation.open) {
 		const rejectionTime = performance.now()

package/src/internal/set-state/evict-downstream.ts

@@ -1,10 +1,10 @@
-import type { Atom } from ".."
+import type { Atom, Selector } from ".."
 import { evictCachedValue } from "../caching"
 import { newest } from "../lineage"
 import { isDone, markDone } from "../operation"
 import type { Store } from "../store"
 
-export const evictDownStream = <T>(store: Store, atom: Atom<T>): void => {
+export function evictDownStream(store: Store, atom: Atom<any>): void {
 	const target = newest(store)
 	const downstreamKeys = target.selectorAtoms.getRelatedKeys(atom.key)
 	target.logger.info(
@@ -34,3 +34,22 @@ export const evictDownStream = <T>(store: Store, atom: Atom<T>): void => {
 		}
 	}
 }
+
+export function evictDownStreamFromSelector(
+	store: Store,
+	selector: Selector<any>,
+): void {
+	const target = newest(store)
+	const relationEntries = target.selectorGraph
+		.getRelationEntries({
+			upstreamSelectorKey: selector.key,
+		})
+		.filter(([_, { source }]) => source === selector.key)
+	for (const [downstreamSelectorKey] of relationEntries) {
+		if (isDone(target, downstreamSelectorKey)) {
+			continue
+		}
+		evictCachedValue(downstreamSelectorKey, target)
+		markDone(target, downstreamSelectorKey)
+	}
+}

package/src/react-devtools/devtools.css

@@ -1,18 +1,29 @@
 main[data-css="atom_io_devtools"] {
 	--fg-color: #ccc;
 	--fg-light: #aaa;
+	--fg-soft: #777;
 	--fg-faint: #555;
+	--fg-hint: #333;
+	--fg-max: #fff;
 	--bg-color: #111;
 	--bg-accent: #00f;
+	--bg-max: #000;
 	--bg-tint1: #222;
+	--bg-tint2: #333;
 	--fg-border: 1px solid var(--fg-color);
+	--fg-border-soft: 1px solid var(--fg-soft);
 	@media (prefers-color-scheme: light) {
 		--fg-color: #444;
 		--fg-light: #777;
+		--fg-soft: #888;
 		--fg-faint: #999;
+		--fg-hint: #ccc;
+		--fg-max: #000;
 		--bg-color: #ddd;
 		--bg-accent: #0ff;
+		--bg-max: #fff;
 		--bg-tint1: #e3e3e3;
+		--bg-tint2: #f3f3f3;
 	}
 	& {
 		pointer-events: all;
@@ -42,14 +53,20 @@ main[data-css="atom_io_devtools"] {
 		display: flex;
 		justify-content: space-between;
 		h1 {
-			margin: 0;
+			margin: 2px 4px;
 			font-size: 24px;
 			font-family: charter, serif;
 		}
 		nav {
+			position: relative;
 			display: flex;
 			flex-flow: row nowrap;
+			margin-top: 4px;
+			overflow-x: scroll;
+			overflow-y: visible;
+			height: 24px;
 			button {
+				height: 24px;
 				cursor: pointer;
 				background: none;
 				border: none;
@@ -58,10 +75,9 @@ main[data-css="atom_io_devtools"] {
 				z-index: 1000;
 				&:disabled {
 					cursor: default;
-					background-color: var(--bg-tint1);
-					color: var(--fg-color);
+					background-color: var(--fg-color);
+					color: var(--bg-color);
 					border: var(--fg-border);
-					border-bottom: none;
 				}
 			}
 		}
@@ -69,6 +85,10 @@ main[data-css="atom_io_devtools"] {
 	> main {
 		background: var(--bg-tint1);
 	}
+	> main::before {
+		background-color: black;
+		height: 10px;
+	}
 	main {
 		overflow-y: scroll;
 		flex-grow: 1;
@@ -86,7 +106,7 @@ main[data-css="atom_io_devtools"] {
 			}
 			.node > .node {
 				margin: 0px 2px 2px 18px;
-				border-left: var(--fg-border);
+				border-left: var(--fg-border-soft);
 				&:last-of-type {
 					margin-bottom: 6px;
 				}
@@ -107,6 +127,8 @@ main[data-css="atom_io_devtools"] {
 					z-index: 999;
 					top: 0;
 					height: 22px;
+					background: var(--bg-tint2);
+					border-bottom: var(--fg-border-soft);
 					button.carat {
 						cursor: pointer;
 						background: none;
@@ -118,7 +140,10 @@ main[data-css="atom_io_devtools"] {
 						}
 						&:disabled {
 							cursor: default;
-							color: var(--fg-faint);
+						}
+						&:focus-within {
+							outline: 2px solid var(--fg-max);
+							background: var(--bg-max);
 						}
 					}
 					> main {
@@ -126,6 +151,7 @@ main[data-css="atom_io_devtools"] {
 						flex-flow: row;
 						cursor: help;
 						align-items: center;
+						flex-shrink: 0;
 						* {
 							height: 100%;
 							display: flex;
@@ -150,21 +176,24 @@ main[data-css="atom_io_devtools"] {
 					> .json_editor,
 					> .json_viewer {
 						display: flex;
+						flex-shrink: 1;
+						z-index: -1;
+						overflow-x: scroll;
 						align-items: center;
-						border-left: 1px solid var(--fg-light);
-						background-color: var(--bg-tint1);
-						* {
+						border-left: var(--fg-border-soft);
+						white-space: pre;
+						background: var(--bg-tint2);
+						&:focus-within {
+							background-color: var(--bg-max);
+							outline: 2px solid var(--fg-max);
+						}
+						&.nu * {
 							display: flex;
 							height: 100%;
 						}
 						> span {
 							padding: 0px 5px;
-							border-left: var(--fg-color);
 							z-index: 0;
-							&:focus-within {
-								outline: 4px solid var(--fg-color);
-								background: var(--bg-accent);
-							}
 						}
 						input {
 							outline: none;
@@ -288,12 +317,34 @@ main[data-css="atom_io_devtools"] {
 				border: none;
 			}
 		}
+		input,
+		button,
+		select {
+			&:focus-within {
+				outline: 2px solid var(--fg-max);
+				background: var(--bg-max);
+			}
+		}
+		button:disabled {
+			cursor: default;
+			> span.json_editor_icon {
+				color: var(--fg-hint);
+			}
+			&:hover {
+				background: none;
+			}
+		}
+		input::selection {
+			background: var(--bg-accent);
+		}
+
 		button {
 			background: none;
 			color: #777;
 			border: none;
 			font-family: theia, monospace;
 			font-size: 14px;
+			height: 21px;
 			margin: none;
 			padding: 4px;
 			padding-bottom: 6px;
@@ -323,7 +374,10 @@ main[data-css="atom_io_devtools"] {
 			background-color: #f055;
 		}
 		.json_editor_key {
-			padding-right: 10px;
+			padding-right: 0px;
+			&::after {
+				content: ":";
+			}
 			input {
 				color: #999;
 				@media (prefers-color-scheme: light) {
@@ -331,16 +385,37 @@ main[data-css="atom_io_devtools"] {
 				}
 			}
 		}
-		.json_editor_object {
-			border-left: 2px solid #333;
-			padding-left: 20px;
-			@media (prefers-color-scheme: light) {
-				border-color: #ccc;
-			}
-			.json_editor_properties {
-				> * {
-					border-bottom: var(--fg-border);
+		.json_editor_object,
+		.json_editor_array {
+			border-left: var(--fg-border-soft);
+			padding-left: 12px;
+			margin-left: 8px;
+			.json_editor_properties,
+			.json_editor_elements {
+				.json_editor_property,
+				.json_editor_element {
+					border-bottom: var(--fg-border-soft);
 					margin-bottom: 2px;
+					min-height: 23px;
+					> span {
+						input {
+							min-width: 10px;
+						}
+						> * {
+							border: var(--fg-border-soft);
+						}
+					}
+				}
+				&.readonly {
+					.json_editor_property,
+					.json_editor_element {
+						&:last-of-type {
+							border-bottom: none;
+						}
+						> span > * {
+							border: 1px solid transparent;
+						}
+					}
 				}
 			}
 		}

package/src/react-devtools/json-editor/editors-by-type/array-editor.tsx

@@ -1,9 +1,13 @@
-import type { Json } from "atom.io/json"
+import { type Json, JSON_DEFAULTS } from "atom.io/json"
 import type { ReactElement } from "react"
 
 import type { JsonEditorProps_INTERNAL } from "../json-editor-internal"
 import { JsonEditor_INTERNAL } from "../json-editor-internal"
 import { makeElementSetters } from "./utilities/array-elements"
+import {
+	makePropertyRecasters,
+	makePropertyRemovers,
+} from "./utilities/object-properties"
 
 export const ArrayEditor = ({
 	path = [],
@@ -14,25 +18,49 @@ export const ArrayEditor = ({
 	Components,
 	testid,
 }: JsonEditorProps_INTERNAL<Json.Tree.Array>): ReactElement => {
+	const disabled = isReadonly(path)
+
 	const setElement = makeElementSetters(data, set)
+	const removeElement = makePropertyRemovers(data, set)
+	const recastElement = makePropertyRecasters(data, set)
+
 	return (
-		<>
-			{data.map((element, index) => {
-				const newPath = [...path, index]
-				return (
-					<JsonEditor_INTERNAL
-						key={newPath.join(``)}
-						path={newPath}
-						isReadonly={isReadonly}
-						isHidden={isHidden}
-						data={element}
-						set={setElement[index]}
-						Components={Components}
-						className="json_editor_element"
-						testid={`${testid}-element-${index}`}
-					/>
-				)
-			})}
-		</>
+		<Components.ArrayWrapper>
+			<div className={`json_editor_elements${disabled ? ` readonly` : ``}`}>
+				{data.map((element, index) => {
+					const newPath = [...path, index]
+					return (
+						<JsonEditor_INTERNAL
+							key={newPath.join(``)}
+							path={newPath}
+							name={`${index}`}
+							isReadonly={isReadonly}
+							isHidden={isHidden}
+							data={element}
+							set={setElement[index]}
+							remove={removeElement[index]}
+							recast={recastElement[index]}
+							className="json_editor_element"
+							Components={Components}
+							testid={`${testid}-element-${index}`}
+						/>
+					)
+				})}
+			</div>
+			{disabled ? null : (
+				<Components.Button
+					testid={`${testid}-add-element`}
+					disabled={disabled}
+					onClick={() => {
+						set((current) => {
+							const newData = [...current, JSON_DEFAULTS.string]
+							return newData
+						})
+					}}
+				>
+					+
+				</Components.Button>
+			)}
+		</Components.ArrayWrapper>
 	)
 }

package/src/react-devtools/json-editor/editors-by-type/object-editor.tsx

@@ -72,48 +72,36 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 	const makePropertyAdder = makePropertyCreationInterface(data, set)
 
 	return (
-		<>
-			<Components.Button
-				testid={`${testid}-sort-properties`}
-				onClick={() => {
-					sortProperties()
-				}}
-				disabled={disabled}
-			>
-				Sort
-			</Components.Button>
-			<Components.ObjectWrapper>
-				<div className="json_editor_properties">
-					{Object.keys(data).map((key) => {
-						const originalKey = stableKeyMap.current[key]
-						const newPath = [...path, key]
-						const originalPath = [...path, originalKey]
+		<Components.ObjectWrapper>
+			<div className={`json_editor_properties${disabled ? ` readonly` : ``}`}>
+				{Object.keys(data).map((key) => {
+					const originalKey = stableKeyMap.current[key]
+					const newPath = [...path, key]
+					const originalPath = [...path, originalKey]
 
-						return (
-							<JsonEditor_INTERNAL
-								key={originalPath.join(`.`)}
-								path={newPath}
-								name={key}
-								isReadonly={isReadonly}
-								isHidden={isHidden}
-								data={data[key as keyof T]}
-								set={setProperty[key as keyof T]}
-								rename={renameProperty[key as keyof T]}
-								remove={removeProperty[key as keyof T]}
-								recast={recastProperty[key as keyof T]}
-								className="json_editor_property"
-								Components={Components}
-								testid={`${testid}-property-${key}`}
-							/>
-						)
-					})}
-				</div>
-				{disabled ? (
-					<Components.Button disabled testid={`${testid}-add-property`}>
-						+
-					</Components.Button>
-				) : (
+					return (
+						<JsonEditor_INTERNAL
+							key={originalPath.join(`.`)}
+							path={newPath}
+							name={key}
+							isReadonly={isReadonly}
+							isHidden={isHidden}
+							data={data[key as keyof T]}
+							set={setProperty[key as keyof T]}
+							rename={renameProperty[key as keyof T]}
+							remove={removeProperty[key as keyof T]}
+							recast={recastProperty[key as keyof T]}
+							className="json_editor_property"
+							Components={Components}
+							testid={`${testid}-property-${key}`}
+						/>
+					)
+				})}
+			</div>
+			{disabled ? null : (
+				<>
 					<Components.Button
+						disabled={disabled}
 						testid={`${testid}-add-property`}
 						onClick={() => {
 							makePropertyAdder(`new_property`, `string`)()
@@ -121,8 +109,17 @@ export const ObjectEditor = <T extends Json.Tree.Object>({
 					>
 						+
 					</Components.Button>
-				)}
-			</Components.ObjectWrapper>
-		</>
+					<Components.Button
+						testid={`${testid}-sort-properties`}
+						onClick={() => {
+							sortProperties()
+						}}
+						disabled={disabled}
+					>
+						Sort
+					</Components.Button>
+				</>
+			)}
+		</Components.ObjectWrapper>
 	)
 }

package/src/react-devtools/json-editor/editors-by-type/primitive-editors.tsx

@@ -4,6 +4,8 @@ import { NumberInput, TextInput } from "../../elastic-input"
 import type { JsonEditorProps_INTERNAL } from "../json-editor-internal"
 
 export const BooleanEditor = ({
+	path = [],
+	isReadonly = () => false,
 	data,
 	set,
 	Components,
@@ -11,6 +13,7 @@ export const BooleanEditor = ({
 }: JsonEditorProps_INTERNAL<boolean>): ReactElement => (
 	<Components.BooleanWrapper>
 		<input
+			disabled={isReadonly(path)}
 			data-testid={`${testid}-boolean-input`}
 			type="checkbox"
 			checked={data}
@@ -38,6 +41,7 @@ export const NumberEditor = ({
 }: JsonEditorProps_INTERNAL<number>): ReactElement => (
 	<Components.NumberWrapper>
 		<NumberInput
+			disabled={isReadonly(path)}
 			testid={`${testid}-number-input`}
 			value={data}
 			set={
@@ -63,6 +67,7 @@ export const StringEditor = ({
 	return (
 		<Components.StringWrapper>
 			<TextInput
+				readOnly={isReadonly(path)}
 				testid={`${testid}-string-input`}
 				value={data}
 				set={isReadonly(path) ? undefined : set}

package/src/react-devtools/json-editor/editors-by-type/utilities/object-properties.ts

@@ -45,7 +45,9 @@ export const makePropertyRenamers = <T extends Json.Tree.Object>(
 		]),
 	)
 
-export const makePropertyRemovers = <T extends Json.Tree.Object>(
+export const makePropertyRemovers = <
+	T extends Json.Tree.Array | Json.Tree.Object,
+>(
 	data: T,
 	set: SetterOrUpdater<T>,
 ): { [K in keyof T]: () => void } =>
@@ -54,14 +56,24 @@ export const makePropertyRemovers = <T extends Json.Tree.Object>(
 			key,
 			() => {
 				set(() => {
-					const { [key]: _, ...rest } = data
-					return rest as T
+					let next: T
+					if (Array.isArray(data)) {
+						const copy = [...data]
+						copy.splice(key as number, 1)
+						next = copy as unknown as T
+					} else {
+						const { [key]: _, ...rest } = data
+						next = rest as T
+					}
+					return next
 				})
 			},
 		]),
 	)
 
-export const makePropertyRecasters = <T extends Json.Tree.Object>(
+export const makePropertyRecasters = <
+	T extends Json.Tree.Array | Json.Tree.Object,
+>(
 	data: T,
 	set: SetterOrUpdater<T>,
 ): { [K in keyof T]: (newType: JsonTypeName) => void } =>
@@ -69,10 +81,20 @@ export const makePropertyRecasters = <T extends Json.Tree.Object>(
 		toEntries(data).map(([key, value]) => [
 			key,
 			(newType: JsonTypeName) => {
-				set(() => ({
-					...data,
-					[key]: castToJson(value)[newType],
-				}))
+				set(() => {
+					let next: T
+					if (Array.isArray(data)) {
+						const copy = [...data]
+						copy[key as number] = castToJson(value)[newType]
+						next = copy as unknown as T
+					} else {
+						next = {
+							...data,
+							[key]: castToJson(value)[newType],
+						}
+					}
+					return next
+				})
 			},
 		]),
 	)

package/src/react-devtools/json-editor/index.ts

@@ -1,16 +1,3 @@
-import type { JsonTypes } from "atom.io/json"
-import type { FC } from "react"
-
-import { ArrayEditor } from "./editors-by-type/array-editor"
-import { ObjectEditor } from "./editors-by-type/object-editor"
-import {
-	BooleanEditor,
-	NullEditor,
-	NumberEditor,
-	StringEditor,
-} from "./editors-by-type/primitive-editors"
-import type { JsonEditorProps_INTERNAL } from "./json-editor-internal"
-
 export * from "./default-components"
 export * from "./developer-interface"
 export * from "./editors-by-type/utilities/cast-to-json"
@@ -18,15 +5,3 @@ export * from "./editors-by-type/utilities/cast-to-json"
 export type SetterOrUpdater<T> = <New extends T>(
 	next: New | ((old: T) => New),
 ) => void
-
-export const SubEditors: Record<
-	keyof JsonTypes,
-	FC<JsonEditorProps_INTERNAL<any>>
-> = {
-	array: ArrayEditor,
-	boolean: BooleanEditor,
-	null: NullEditor,
-	number: NumberEditor,
-	object: ObjectEditor,
-	string: StringEditor,
-}

package/src/react-devtools/json-editor/json-editor-internal.tsx

@@ -61,20 +61,15 @@ export const JsonEditor_INTERNAL = <T,>({
 				testid={testid}
 			>
 				{remove ? (
-					disabled ? (
-						<Components.Button disabled testid={`${testid}-delete`}>
-							<Components.DeleteIcon />
-						</Components.Button>
-					) : (
-						<Components.Button
-							testid={`${testid}-delete`}
-							onClick={() => {
-								remove()
-							}}
-						>
-							<Components.DeleteIcon />
-						</Components.Button>
-					)
+					<Components.Button
+						disabled={disabled}
+						onClick={() => {
+							remove()
+						}}
+						testid={`${testid}-delete`}
+					>
+						<Components.DeleteIcon />
+					</Components.Button>
 				) : null}
 				{HeaderDisplay && <HeaderDisplay data={data} />}
 				{rename && (