atom.io 0.6.2 → 0.6.3

package/src/react-devtools/StateEditor.tsx

@@ -8,66 +8,66 @@ import { ElasticInput } from "~/packages/hamr/src/react-elastic-input"
 import { JsonEditor } from "~/packages/hamr/src/react-json-editor"
 
 export const StateEditor: FC<{
-  storeHooks: StoreHooks
-  token: StateToken<unknown>
+	storeHooks: StoreHooks
+	token: StateToken<unknown>
 }> = ({ storeHooks, token }) => {
-  const [data, set] = storeHooks.useIO(token)
-  return isPlainJson(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 +
-              ` ` +
-              JSON.stringify(data)
-        }
-        disabled={true}
-      />
-    </div>
-  )
+	const [data, set] = storeHooks.useIO(token)
+	return isPlainJson(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 +
+						  ` ` +
+						  JSON.stringify(data)
+				}
+				disabled={true}
+			/>
+		</div>
+	)
 }
 
 export const ReadonlySelectorEditor: FC<{
-  storeHooks: StoreHooks
-  token: ReadonlySelectorToken<unknown>
+	storeHooks: StoreHooks
+	token: ReadonlySelectorToken<unknown>
 }> = ({ storeHooks, token }) => {
-  const data = storeHooks.useO(token)
-  return isPlainJson(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>
-  )
+	const data = storeHooks.useO(token)
+	return isPlainJson(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<{
-  storeHooks: StoreHooks
-  token: ReadonlySelectorToken<unknown> | StateToken<unknown>
+	storeHooks: StoreHooks
+	token: ReadonlySelectorToken<unknown> | StateToken<unknown>
 }> = ({ storeHooks, token }) => {
-  if (token.type === `readonly_selector`) {
-    return <ReadonlySelectorEditor storeHooks={storeHooks} token={token} />
-  }
-  return <StateEditor storeHooks={storeHooks} token={token} />
+	if (token.type === `readonly_selector`) {
+		return <ReadonlySelectorEditor storeHooks={storeHooks} token={token} />
+	}
+	return <StateEditor storeHooks={storeHooks} token={token} />
 }

package/src/react-devtools/TokenList.tsx

@@ -2,10 +2,10 @@ import type { FC } from "react"
 import { Fragment } from "react"
 
 import type {
-  AtomToken,
-  ReadonlySelectorToken,
-  SelectorToken,
-  __INTERNAL__,
+	AtomToken,
+	ReadonlySelectorToken,
+	SelectorToken,
+	__INTERNAL__,
 } from "atom.io"
 import { getState } from "atom.io"
 import type { StoreHooks } from "atom.io/react"
@@ -15,43 +15,48 @@ import { recordToEntries } from "~/packages/anvl/src/object"
 import { StoreEditor } from "./StateEditor"
 
 export const TokenList: FC<{
-  storeHooks: StoreHooks
-  tokenIndex: ReadonlySelectorToken<
-    __INTERNAL__.META.StateTokenIndex<
-      | AtomToken<unknown>
-      | ReadonlySelectorToken<unknown>
-      | SelectorToken<unknown>
-    >
-  >
+	storeHooks: StoreHooks
+	tokenIndex: ReadonlySelectorToken<
+		__INTERNAL__.META.StateTokenIndex<
+			| AtomToken<unknown>
+			| ReadonlySelectorToken<unknown>
+			| SelectorToken<unknown>
+		>
+	>
 }> = ({ storeHooks, tokenIndex }) => {
-  const tokenIds = storeHooks.useO(tokenIndex)
-  return (
-    <>
-      {Object.entries(tokenIds).map(([key, token]) => (
-        <Fragment key={key}>
-          {key.startsWith(`👁‍🗨_`) ? null : (
-            <div className="node">
-              {`type` in token ? (
-                <>
-                  <label onClick={() => console.log(token, getState(token))}>
-                    {key}
-                  </label>
-                  <StoreEditor storeHooks={storeHooks} token={token} />
-                </>
-              ) : (
-                recordToEntries(token.familyMembers).map(([key, token]) => (
-                  <>
-                    <label>{key}</label>
-                    <div key={key} className="node">
-                      {key}:<StoreEditor storeHooks={storeHooks} token={token} />
-                    </div>
-                  </>
-                ))
-              )}
-            </div>
-          )}
-        </Fragment>
-      ))}
-    </>
-  )
+	const tokenIds = storeHooks.useO(tokenIndex)
+	return (
+		<>
+			{Object.entries(tokenIds).map(([key, token]) => {
+				let logState: () => void
+				return (
+					<Fragment key={key}>
+						{key.startsWith(`👁‍🗨_`) ? null : (
+							<div className="node">
+								{`type` in token
+									? ((logState = () => console.log(token, getState(token))),
+									  (
+											<>
+												<label onClick={logState} onKeyUp={logState}>
+													{key}
+												</label>
+												<StoreEditor storeHooks={storeHooks} token={token} />
+											</>
+									  ))
+									: recordToEntries(token.familyMembers).map(([key, token]) => (
+											<>
+												<label>{key}</label>
+												<div key={key} className="node">
+													{key}:
+													<StoreEditor storeHooks={storeHooks} token={token} />
+												</div>
+											</>
+									  ))}
+							</div>
+						)}
+					</Fragment>
+				)
+			})}
+		</>
+	)
 }

package/src/react-explorer/AtomIOExplorer.tsx

@@ -12,197 +12,209 @@ import { setState } from ".."
 import { runTransaction } from "../transaction"
 
 export type ExplorerOptions = {
-  key: string
-  Components?: {
-    SpaceWrapper: WC
-    CloseSpaceButton: FC<{ onClick: () => void }>
-  }
-  storeHooks: StoreHooks
+	key: string
+	Components?: {
+		SpaceWrapper: WC
+		CloseSpaceButton: FC<{ onClick: () => void }>
+	}
+	storeHooks: StoreHooks
 }
 
 const DEFAULT_COMPONENTS: ExplorerOptions[`Components`] = {
-  SpaceWrapper: ({ children }) => <div>{children}</div>,
-  CloseSpaceButton: ({ onClick }) => <button onClick={onClick}>X</button>,
+	SpaceWrapper: ({ children }) => <div>{children}</div>,
+	CloseSpaceButton: ({ onClick }) => (
+		<button type="button" onClick={onClick}>
+			X
+		</button>
+	),
 }
 
 export const composeExplorer = ({
-  key,
-  Components,
-  storeHooks: { useO, useIO },
+	key,
+	Components,
+	storeHooks: { useO, useIO },
 }: ExplorerOptions): ReturnType<typeof attachExplorerState> & {
-  Explorer: FC<{ children: ReactNode }>
-  useSetTitle: (viewId: string) => void
+	Explorer: FC<{ children: ReactNode }>
+	useSetTitle: (viewId: string) => void
 } => {
-  const { SpaceWrapper, CloseSpaceButton } = {
-    ...DEFAULT_COMPONENTS,
-    ...Components,
-  }
-
-  const state = attachExplorerState(key)
-
-  const {
-    addSpace,
-    addView,
-    allViewsState,
-    findSpaceFocusedViewState,
-    findSpaceLayoutNode,
-    findSpaceViewsState,
-    findViewFocusedState,
-    findViewState,
-    removeSpace,
-    removeView,
-    spaceLayoutState,
-    viewIndexState,
-  } = state
-
-  const View: FC<{
-    children: ReactNode
-    viewId: string
-  }> = ({ children, viewId }) => {
-    const location = useLocation()
-    const viewState = findViewState(viewId)
-    const [view, setView] = useIO(viewState)
-    useEffect(() => {
-      setView((view) => ({ ...view, location }))
-    }, [location.key])
-    return (
-      <div className="view">
-        <header>
-          <h1>{view.title}</h1>
-          <CloseSpaceButton onClick={() => runTransaction(removeView)(viewId)} />
-        </header>
-        <main>{children}</main>
-        <footer>
-          <nav>
-            {location.pathname.split(`/`).map((pathPiece, idx, array) =>
-              pathPiece === `` && idx === 1 ? null : (
-                <Link
-                  to={array.slice(0, idx + 1).join(`/`)}
-                  key={`${pathPiece}_${viewId}`}
-                >
-                  {idx === 0 ? `home` : pathPiece}/
-                </Link>
-              )
-            )}
-          </nav>
-        </footer>
-      </div>
-    )
-  }
-
-  const Tab: FC<{ viewId: string; spaceId: string }> = ({ viewId, spaceId }) => {
-    const view = useO(findViewState(viewId))
-    const [spaceFocusedView, setSpaceFocusedView] = useIO(
-      findSpaceFocusedViewState(spaceId)
-    )
-    return (
-      <div
-        className={`tab ${spaceFocusedView === viewId ? `focused` : ``}`}
-        onClick={() => setSpaceFocusedView(viewId)}
-      >
-        {view.title}
-      </div>
-    )
-  }
-
-  const TabBar: FC<{
-    spaceId: string
-    viewIds: string[]
-  }> = ({ spaceId, viewIds }) => {
-    return (
-      <nav className="tab-bar">
-        {viewIds.map((viewId) => (
-          <Tab key={viewId} viewId={viewId} spaceId={spaceId} />
-        ))}
-      </nav>
-    )
-  }
-
-  const Space: FC<{
-    children: ReactNode
-    focusedViewId: string
-    spaceId: string
-    viewIds: string[]
-  }> = ({ children, focusedViewId, spaceId, viewIds }) => {
-    const view = useO(findViewState(focusedViewId))
-    return (
-      <div className="space">
-        <ErrorBoundary>
-          <MemoryRouter
-            initialEntries={view.location ? [view.location.pathname] : []}
-          >
-            <TabBar spaceId={spaceId} viewIds={viewIds} />
-            <View viewId={focusedViewId}>{children}</View>
-          </MemoryRouter>
-        </ErrorBoundary>
-      </div>
-    )
-  }
-
-  const Spaces: FC<{ children: ReactNode; spaceId?: string }> = ({
-    children,
-    spaceId = `root`,
-  }) => {
-    const spaceLayout = useO(findSpaceLayoutNode(spaceId))
-    const viewIds = useO(findSpaceViewsState(spaceId))
-    const focusedViewId = useO(findSpaceFocusedViewState(spaceId))
-    console.log({ spaceLayout, viewIds, focusedViewId })
-    return (
-      <div className="spaces">
-        {spaceLayout.childSpaceIds.length === 0 ? (
-          focusedViewId ? (
-            <Space
-              focusedViewId={focusedViewId}
-              spaceId={spaceId}
-              viewIds={viewIds}
-            >
-              {children}
-            </Space>
-          ) : (
-            `no view`
-          )
-        ) : (
-          spaceLayout.childSpaceIds.map((childSpaceId) => (
-            <Spaces key={childSpaceId} spaceId={childSpaceId}>
-              {children}
-            </Spaces>
-          ))
-        )}
-        <button onClick={() => runTransaction(addView)({ spaceId })}>
-          + View
-        </button>
-        <button onClick={() => runTransaction(addSpace)({ parentId: spaceId })}>
-          + Space
-        </button>
-      </div>
-    )
-  }
-
-  const Explorer: FC<{ children: ReactNode }> = ({ children }) => {
-    return <Spaces>{children}</Spaces>
-  }
-
-  const useSetTitle = (title: string): void => {
-    let location: ReturnType<typeof useLocation>
-    try {
-      location = useLocation()
-    } catch (thrown) {
-      console.warn(
-        `Failed to set title to "${title}"; useSetTitle must be called within the children of Explorer`
-      )
-      return
-    }
-    const views = useO(allViewsState)
-    const locationView = views.find(
-      ([, view]) => view.location.key === location.key
-    )
-    const viewId = locationView?.[0] ?? null
-    useEffect(() => {
-      if (viewId) {
-        setState(findViewState(viewId), (v) => ({ ...v, title }))
-      }
-    }, [viewId])
-  }
-
-  return { Explorer, useSetTitle, ...state }
+	const { SpaceWrapper, CloseSpaceButton } = {
+		...DEFAULT_COMPONENTS,
+		...Components,
+	}
+
+	const state = attachExplorerState(key)
+
+	const {
+		addSpace,
+		addView,
+		allViewsState,
+		findSpaceFocusedViewState,
+		findSpaceLayoutNode,
+		findSpaceViewsState,
+		findViewFocusedState,
+		findViewState,
+		removeSpace,
+		removeView,
+		spaceLayoutState,
+		viewIndexState,
+	} = state
+
+	const View: FC<{
+		children: ReactNode
+		viewId: string
+	}> = ({ children, viewId }) => {
+		const location = useLocation()
+		const viewState = findViewState(viewId)
+		const [view, setView] = useIO(viewState)
+		useEffect(() => {
+			setView((view) => ({ ...view, location }))
+		}, [location.key])
+		return (
+			<div className="view">
+				<header>
+					<h1>{view.title}</h1>
+					<CloseSpaceButton onClick={() => runTransaction(removeView)(viewId)} />
+				</header>
+				<main>{children}</main>
+				<footer>
+					<nav>
+						{location.pathname.split(`/`).map((pathPiece, idx, array) =>
+							pathPiece === `` && idx === 1 ? null : (
+								<Link
+									to={array.slice(0, idx + 1).join(`/`)}
+									key={`${pathPiece}_${viewId}`}
+								>
+									{idx === 0 ? `home` : pathPiece}/
+								</Link>
+							),
+						)}
+					</nav>
+				</footer>
+			</div>
+		)
+	}
+
+	const Tab: FC<{ viewId: string; spaceId: string }> = ({ viewId, spaceId }) => {
+		const view = useO(findViewState(viewId))
+		const [spaceFocusedView, setSpaceFocusedView] = useIO(
+			findSpaceFocusedViewState(spaceId),
+		)
+		const handleClick = () => setSpaceFocusedView(viewId)
+		return (
+			<div
+				className={`tab ${spaceFocusedView === viewId ? `focused` : ``}`}
+				onClick={handleClick}
+				onKeyUp={handleClick}
+			>
+				{view.title}
+			</div>
+		)
+	}
+
+	const TabBar: FC<{
+		spaceId: string
+		viewIds: string[]
+	}> = ({ spaceId, viewIds }) => {
+		return (
+			<nav className="tab-bar">
+				{viewIds.map((viewId) => (
+					<Tab key={viewId} viewId={viewId} spaceId={spaceId} />
+				))}
+			</nav>
+		)
+	}
+
+	const Space: FC<{
+		children: ReactNode
+		focusedViewId: string
+		spaceId: string
+		viewIds: string[]
+	}> = ({ children, focusedViewId, spaceId, viewIds }) => {
+		const view = useO(findViewState(focusedViewId))
+		return (
+			<div className="space">
+				<ErrorBoundary>
+					<MemoryRouter
+						initialEntries={view.location ? [view.location.pathname] : []}
+					>
+						<TabBar spaceId={spaceId} viewIds={viewIds} />
+						<View viewId={focusedViewId}>{children}</View>
+					</MemoryRouter>
+				</ErrorBoundary>
+			</div>
+		)
+	}
+
+	const Spaces: FC<{ children: ReactNode; spaceId?: string }> = ({
+		children,
+		spaceId = `root`,
+	}) => {
+		const spaceLayout = useO(findSpaceLayoutNode(spaceId))
+		const viewIds = useO(findSpaceViewsState(spaceId))
+		const focusedViewId = useO(findSpaceFocusedViewState(spaceId))
+		console.log({ spaceLayout, viewIds, focusedViewId })
+		return (
+			<div className="spaces">
+				{spaceLayout.childSpaceIds.length === 0 ? (
+					focusedViewId ? (
+						<Space
+							focusedViewId={focusedViewId}
+							spaceId={spaceId}
+							viewIds={viewIds}
+						>
+							{children}
+						</Space>
+					) : (
+						`no view`
+					)
+				) : (
+					spaceLayout.childSpaceIds.map((childSpaceId) => (
+						<Spaces key={childSpaceId} spaceId={childSpaceId}>
+							{children}
+						</Spaces>
+					))
+				)}
+				<button
+					type="button"
+					onClick={() => runTransaction(addView)({ spaceId })}
+				>
+					+ View
+				</button>
+				<button
+					type="button"
+					onClick={() => runTransaction(addSpace)({ parentId: spaceId })}
+				>
+					+ Space
+				</button>
+			</div>
+		)
+	}
+
+	const Explorer: FC<{ children: ReactNode }> = ({ children }) => {
+		return <Spaces>{children}</Spaces>
+	}
+
+	const useSetTitle = (title: string): void => {
+		let location: ReturnType<typeof useLocation>
+		try {
+			location = useLocation()
+		} catch (thrown) {
+			console.warn(
+				`Failed to set title to "${title}"; useSetTitle must be called within the children of Explorer`,
+			)
+			return
+		}
+		const views = useO(allViewsState)
+		const locationView = views.find(
+			([, view]) => view.location.key === location.key,
+		)
+		const viewId = locationView?.[0] ?? null
+		useEffect(() => {
+			if (viewId) {
+				setState(findViewState(viewId), (v) => ({ ...v, title }))
+			}
+		}, [viewId])
+	}
+
+	return { Explorer, useSetTitle, ...state }
 }

package/src/react-explorer/explorer-effects.ts

@@ -6,15 +6,15 @@ import { parseJson, stringifyJson } from "~/packages/anvl/src/json"
 import { persistAtom } from "../web-effects"
 
 export const persistStringSetAtom = persistAtom<Set<string>>(localStorage)({
-  stringify: (set) => stringifyJson([...set]),
-  parse: (string) => {
-    try {
-      const json = parseJson(string)
-      const array = isArray(isString)(json) ? json : []
-      return new Set(array)
-    } catch (thrown) {
-      console.error(`Error parsing spaceIndexState from localStorage`)
-      return new Set()
-    }
-  },
+	stringify: (set) => stringifyJson([...set]),
+	parse: (string) => {
+		try {
+			const json = parseJson(string)
+			const array = isArray(isString)(json) ? json : []
+			return new Set(array)
+		} catch (thrown) {
+			console.error(`Error parsing spaceIndexState from localStorage`)
+			return new Set()
+		}
+	},
 })