atom.io 0.28.1 → 0.29.0

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

@@ -0,0 +1,106 @@
+import { become } from "atom.io/internal"
+import type { Json, JsonTypeName } from "atom.io/json"
+import { fromEntries, JSON_DEFAULTS, toEntries } from "atom.io/json"
+import type { MutableRefObject } from "react"
+
+import type { SetterOrUpdater } from "../.."
+import { castToJson } from "./cast-to-json"
+
+export const makePropertySetters = <T extends Json.Tree.Object>(
+	data: T,
+	set: SetterOrUpdater<T>,
+): { [K in keyof T]: SetterOrUpdater<T[K]> } =>
+	fromEntries(
+		toEntries(data).map(([key, value]) => [
+			key,
+			(newValue) => {
+				set({ ...data, [key]: become(newValue)(value) })
+			},
+		]),
+	)
+
+export const makePropertyRenamers = <T extends Json.Tree.Object>(
+	data: T,
+	set: SetterOrUpdater<T>,
+	stableKeyMapRef: MutableRefObject<{ [Key in keyof T]: keyof T }>,
+): { [K in keyof T]: (newKey: string) => void } =>
+	fromEntries(
+		toEntries(data).map(([key, value]) => [
+			key,
+			(newKey: string) => {
+				if (!Object.hasOwn(data, newKey)) {
+					set(() => {
+						const entries = Object.entries(data)
+						const index = entries.findIndex(([k]) => k === key)
+						entries[index] = [newKey, value]
+						const stableKeyMap = stableKeyMapRef.current
+						stableKeyMapRef.current = {
+							...stableKeyMap,
+							[newKey]: stableKeyMap[key],
+						}
+						return Object.fromEntries(entries) as T
+					})
+				}
+			},
+		]),
+	)
+
+export const makePropertyRemovers = <T extends Json.Tree.Object>(
+	data: T,
+	set: SetterOrUpdater<T>,
+): { [K in keyof T]: () => void } =>
+	fromEntries(
+		toEntries(data).map(([key]) => [
+			key,
+			() => {
+				set(() => {
+					const { [key]: _, ...rest } = data
+					return rest as T
+				})
+			},
+		]),
+	)
+
+export const makePropertyRecasters = <T extends Json.Tree.Object>(
+	data: T,
+	set: SetterOrUpdater<T>,
+): { [K in keyof T]: (newType: JsonTypeName) => void } =>
+	fromEntries(
+		toEntries(data).map(([key, value]) => [
+			key,
+			(newType: JsonTypeName) => {
+				set(() => ({
+					...data,
+					[key]: castToJson(value)[newType],
+				}))
+			},
+		]),
+	)
+
+export const makePropertyCreationInterface =
+	<T extends Json.Tree.Object>(
+		data: T,
+		set: SetterOrUpdater<T>,
+	): ((
+		key: string,
+		type: JsonTypeName,
+	) => (value?: Json.Serializable) => void) =>
+	(key, type) =>
+	(value) => {
+		set({ ...data, [key]: value ?? JSON_DEFAULTS[type] })
+	}
+
+export const makePropertySorter =
+	<T extends Json.Tree.Object>(
+		data: T,
+		set: SetterOrUpdater<T>,
+		sortFn?: (a: string, b: string) => number,
+	): (() => void) =>
+	() => {
+		const sortedKeys = Object.keys(data).sort(sortFn)
+		const sortedObj = {} as Record<string, unknown>
+		for (const key of sortedKeys) {
+			sortedObj[key] = data[key]
+		}
+		set(sortedObj as T)
+	}

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

@@ -0,0 +1,32 @@
+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"
+
+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/react-devtools/src/json-editor/json-editor-internal.tsx

@@ -0,0 +1,128 @@
+import { jsonRefinery } from "atom.io/introspection"
+import type { JsonTypes } from "atom.io/json"
+import { isJson } from "atom.io/json"
+import type { CSSProperties, FC, ReactElement } from "react"
+
+import { ElasticInput } from "../elastic-input"
+import type { SetterOrUpdater } from "."
+import { SubEditors } from "."
+import type { JsonEditorComponents } from "./default-components"
+import { NonJsonEditor } from "./editors-by-type/non-json"
+
+export type JsonEditorProps_INTERNAL<T> = {
+	data: T
+	set: SetterOrUpdater<T>
+	name?: string | undefined
+	rename?: ((newKey: string) => void) | undefined
+	remove?: (() => void) | undefined
+	recast?: (newType: keyof JsonTypes) => void
+	path?: ReadonlyArray<number | string>
+	isReadonly?: (path: ReadonlyArray<number | string>) => boolean
+	isHidden?: (path: ReadonlyArray<number | string>) => boolean
+	className?: string | undefined
+	style?: CSSProperties | undefined
+	Header?: FC<{ data: T }> | undefined
+	Components: JsonEditorComponents
+	testid?: string | undefined
+}
+
+export const JsonEditor_INTERNAL = <T,>({
+	data,
+	set,
+	name,
+	rename,
+	remove,
+	recast,
+	path = [],
+	isReadonly = () => false,
+	isHidden = () => false,
+	className,
+	style,
+	Header: HeaderDisplay,
+	Components,
+	testid,
+}: JsonEditorProps_INTERNAL<T>): ReactElement | null => {
+	const dataIsJson = isJson(data)
+	const refined = jsonRefinery.refine<unknown>(data) ?? {
+		type: `non-json`,
+		data,
+	}
+	const SubEditor = dataIsJson ? SubEditors[refined.type] : NonJsonEditor
+
+	const disabled = isReadonly(path)
+
+	return isHidden(path) ? null : (
+		<Components.ErrorBoundary>
+			<Components.EditorWrapper
+				className={className}
+				style={style}
+				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>
+					)
+				) : null}
+				{HeaderDisplay && <HeaderDisplay data={data} />}
+				{rename && (
+					<Components.KeyWrapper>
+						<ElasticInput
+							value={name}
+							onChange={
+								disabled
+									? undefined
+									: (e) => {
+											rename(e.target.value)
+										}
+							}
+							disabled={disabled}
+							data-testid={`${testid}-rename`}
+						/>
+					</Components.KeyWrapper>
+				)}
+				<SubEditor
+					data={refined.data}
+					set={set}
+					remove={remove}
+					rename={rename}
+					path={path}
+					isReadonly={isReadonly}
+					isHidden={isHidden}
+					Components={Components}
+					testid={testid}
+				/>
+				{recast && dataIsJson ? (
+					<select
+						onChange={
+							disabled
+								? undefined
+								: (e) => {
+										recast(e.target.value as keyof JsonTypes)
+									}
+						}
+						value={refined.type}
+						disabled={disabled}
+						data-testid={`${testid}-recast`}
+					>
+						{Object.keys(SubEditors).map((type) => (
+							<option key={type} value={type}>
+								{type}
+							</option>
+						))}
+					</select>
+				) : null}
+			</Components.EditorWrapper>
+		</Components.ErrorBoundary>
+	)
+}

package/react-devtools/src/json-editor/todo.md

@@ -0,0 +1,7 @@
+
+- [x] add an ErrorBoundary to the Components prop
+  - [x] wrap each JsonEditor_INTERNAL in an ErrorBoundary
+- [ ] add display of miscast properties with button to fix
+  - [ ] fixing a miscast generates a template from the schema
+- [ ] sort official properties as listed in schema
+- [ ] add extra line break in JSON before unofficial properties

package/react-devtools/src/store.ts

@@ -1,51 +1,75 @@
-import { atom, atomFamily } from "atom.io"
+import type { RegularAtomFamilyToken, RegularAtomToken } from "atom.io"
+import {
+	createAtomFamily,
+	createStandaloneAtom,
+	IMPLICIT,
+	type Store,
+} from "atom.io/internal"
+import type { IntrospectionStates } from "atom.io/introspection"
 import { attachIntrospectionStates } from "atom.io/introspection"
 import { persistSync } from "atom.io/web"
-
-export const {
-	atomIndex,
-	selectorIndex,
-	transactionIndex,
-	transactionLogSelectors,
-	timelineIndex,
-	timelineSelectors,
-	typeSelectors,
-} = attachIntrospectionStates()
-
-export const devtoolsAreOpenState = atom<boolean>({
-	key: `👁‍🗨 Devtools Are Open`,
-	default: true,
-	effects:
-		typeof window === `undefined`
-			? []
-			: [persistSync(window.localStorage, JSON, `👁‍🗨 Devtools Are Open`)],
-})
+import { createContext } from "react"
 
 type DevtoolsView = `atoms` | `selectors` | `timelines` | `transactions`
 
-export const devtoolsViewSelectionState = atom<DevtoolsView>({
-	key: `👁‍🗨 Devtools View Selection`,
-	default: `atoms`,
-	effects:
-		typeof window === `undefined`
-			? []
-			: [persistSync(window.localStorage, JSON, `👁‍🗨 Devtools View`)],
-})
-
-export const devtoolsViewOptionsState = atom<DevtoolsView[]>({
-	key: `👁‍🗨 Devtools View Options`,
-	default: [`atoms`, `selectors`, `transactions`, `timelines`],
-	effects:
-		typeof window === `undefined`
-			? []
-			: [persistSync(window.localStorage, JSON, `👁‍🗨 Devtools View Options`)],
-})
-
-export const viewIsOpenAtoms = atomFamily<boolean, string>({
-	key: `👁‍🗨 Devtools View Is Open`,
-	default: false,
-	effects: (key) =>
-		typeof window === `undefined`
-			? []
-			: [persistSync(window.localStorage, JSON, key + `:view-is-open`)],
-})
+export type DevtoolsStates = {
+	devtoolsAreOpenState: RegularAtomToken<boolean>
+	devtoolsViewSelectionState: RegularAtomToken<DevtoolsView>
+	devtoolsViewOptionsState: RegularAtomToken<DevtoolsView[]>
+	viewIsOpenAtoms: RegularAtomFamilyToken<boolean, string>
+}
+
+export function attachDevtoolsStates(
+	store: Store,
+): DevtoolsStates & IntrospectionStates & { store: Store } {
+	const introspectionStates = attachIntrospectionStates(store)
+
+	const devtoolsAreOpenState = createStandaloneAtom<boolean>(store, {
+		key: `🔍 Devtools Are Open`,
+		default: true,
+		effects:
+			typeof window === `undefined`
+				? []
+				: [persistSync(window.localStorage, JSON, `🔍 Devtools Are Open`)],
+	})
+
+	const devtoolsViewSelectionState = createStandaloneAtom<DevtoolsView>(store, {
+		key: `🔍 Devtools View Selection`,
+		default: `atoms`,
+		effects:
+			typeof window === `undefined`
+				? []
+				: [persistSync(window.localStorage, JSON, `🔍 Devtools View`)],
+	})
+
+	const devtoolsViewOptionsState = createStandaloneAtom<DevtoolsView[]>(store, {
+		key: `🔍 Devtools View Options`,
+		default: [`atoms`, `selectors`, `transactions`, `timelines`],
+		effects:
+			typeof window === `undefined`
+				? []
+				: [persistSync(window.localStorage, JSON, `🔍 Devtools View Options`)],
+	})
+
+	const viewIsOpenAtoms = createAtomFamily<boolean, string>(store, {
+		key: `🔍 Devtools View Is Open`,
+		default: false,
+		effects: (key) =>
+			typeof window === `undefined`
+				? []
+				: [persistSync(window.localStorage, JSON, key + `:view-is-open`)],
+	})
+
+	return {
+		...introspectionStates,
+		devtoolsAreOpenState,
+		devtoolsViewSelectionState,
+		devtoolsViewOptionsState,
+		viewIsOpenAtoms,
+		store,
+	}
+}
+
+export const DevtoolsContext = createContext<
+	DevtoolsStates & IntrospectionStates & { store: Store }
+>(attachDevtoolsStates(IMPLICIT.STORE))