atom.io 0.6.2 → 0.6.4

package/src/logger.ts

@@ -5,42 +5,42 @@ import { IMPLICIT } from "./internal/store"
 
 export type Logger = Pick<Console, `error` | `info` | `warn`>
 export const LOG_LEVELS: ReadonlyArray<keyof Logger> = [
-  `info`,
-  `warn`,
-  `error`,
+	`info`,
+	`warn`,
+	`error`,
 ] as const
 
 export const setLogLevel = (
-  preferredLevel: `error` | `info` | `warn` | null,
-  store: Store = IMPLICIT.STORE
+	preferredLevel: `error` | `info` | `warn` | null,
+	store: Store = IMPLICIT.STORE,
 ): void => {
-  const { logger__INTERNAL } = store.config
-  if (preferredLevel === null) {
-    store.config.logger = null
-  } else {
-    store.config.logger = { ...console }
-    LOG_LEVELS.forEach((logLevel) => {
-      if (LOG_LEVELS.indexOf(logLevel) < LOG_LEVELS.indexOf(preferredLevel)) {
-        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        store.config.logger![logLevel] = doNothing
-      } else {
-        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        store.config.logger![logLevel] = logger__INTERNAL[logLevel]
-      }
-    })
-  }
+	const { logger__INTERNAL } = store.config
+	if (preferredLevel === null) {
+		store.config.logger = null
+	} else {
+		store.config.logger = { ...console }
+		LOG_LEVELS.forEach((logLevel) => {
+			if (LOG_LEVELS.indexOf(logLevel) < LOG_LEVELS.indexOf(preferredLevel)) {
+				// rome-ignore lint/style/noNonNullAssertion: we just set it
+				store.config.logger![logLevel] = doNothing
+			} else {
+				// rome-ignore lint/style/noNonNullAssertion: we just set it
+				store.config.logger![logLevel] = logger__INTERNAL[logLevel]
+			}
+		})
+	}
 }
 
 export const useLogger = (
-  logger: Logger,
-  store: Store = IMPLICIT.STORE
+	logger: Logger,
+	store: Store = IMPLICIT.STORE,
 ): void => {
-  const currentLogLevel =
-    store.config.logger === null
-      ? null
-      : LOG_LEVELS.find(
-          (logLevel) => store.config.logger?.[logLevel] !== doNothing
-        ) ?? null
-  store.config.logger__INTERNAL = { ...logger }
-  setLogLevel(currentLogLevel, store)
+	const currentLogLevel =
+		store.config.logger === null
+			? null
+			: LOG_LEVELS.find(
+					(logLevel) => store.config.logger?.[logLevel] !== doNothing,
+			  ) ?? null
+	store.config.logger__INTERNAL = { ...logger }
+	setLogLevel(currentLogLevel, store)
 }

package/src/react/store-context.tsx

@@ -1,14 +1,13 @@
-import * as React from "react"
-
 import * as AtomIO from "atom.io"
+import * as React from "react"
 
 export const StoreContext = React.createContext<AtomIO.Store>(
-  AtomIO.__INTERNAL__.IMPLICIT.STORE
+	AtomIO.__INTERNAL__.IMPLICIT.STORE,
 )
 
 export const StoreProvider: React.FC<{
-  children: React.ReactNode
-  store?: AtomIO.Store
+	children: React.ReactNode
+	store?: AtomIO.Store
 }> = ({ children, store = AtomIO.__INTERNAL__.IMPLICIT.STORE }) => (
-  <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
+	<StoreContext.Provider value={store}>{children}</StoreContext.Provider>
 )

package/src/react/store-hooks.ts

@@ -1,48 +1,47 @@
-import * as React from "react"
-
 import * as AtomIO from "atom.io"
+import * as React from "react"
 
 import type { Modifier } from "~/packages/anvl/src/function"
 
 import { StoreContext } from "./store-context"
 
 export type StoreHooks = {
-  useI: <T>(token: AtomIO.StateToken<T>) => (next: Modifier<T> | T) => void
-  useO: <T>(token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>) => T
-  useIO: <T>(token: AtomIO.StateToken<T>) => [T, (next: Modifier<T> | T) => void]
+	useI: <T>(token: AtomIO.StateToken<T>) => (next: Modifier<T> | T) => void
+	useO: <T>(token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>) => T
+	useIO: <T>(token: AtomIO.StateToken<T>) => [T, (next: Modifier<T> | T) => void]
 }
 export const storeHooks: StoreHooks = { useI, useO, useIO }
 
 export function useI<T>(
-  token: AtomIO.StateToken<T>
+	token: AtomIO.StateToken<T>,
 ): (next: Modifier<T> | T) => void {
-  const store = React.useContext(StoreContext)
-  const update = (next: Modifier<T> | T) => AtomIO.setState(token, next, store)
-  return update
+	const store = React.useContext(StoreContext)
+	const update = (next: Modifier<T> | T) => AtomIO.setState(token, next, store)
+	return update
 }
 
 export function useO<T>(
-  token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>
+	token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>,
 ): T {
-  const store = React.useContext(StoreContext)
-  return React.useSyncExternalStore<T>(
-    (observe) => AtomIO.subscribe(token, observe, store),
-    () => AtomIO.getState(token, store)
-  )
+	const store = React.useContext(StoreContext)
+	return React.useSyncExternalStore<T>(
+		(observe) => AtomIO.subscribe(token, observe, store),
+		() => AtomIO.getState(token, store),
+	)
 }
 
 export function useIO<T>(
-  token: AtomIO.StateToken<T>
+	token: AtomIO.StateToken<T>,
 ): [T, (next: Modifier<T> | T) => void] {
-  return [useO(token), useI(token)]
+	return [useO(token), useI(token)]
 }
 
 export function useStore<T>(
-  token: AtomIO.StateToken<T>
+	token: AtomIO.StateToken<T>,
 ): [T, (next: Modifier<T> | T) => void]
 export function useStore<T>(token: AtomIO.ReadonlySelectorToken<T>): T
 export function useStore<T>(
-  token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>
+	token: AtomIO.ReadonlySelectorToken<T> | AtomIO.StateToken<T>,
 ): T | [T, (next: Modifier<T> | T) => void] {
-  return token.type === `readonly_selector` ? useO(token) : useIO(token)
+	return token.type === `readonly_selector` ? useO(token) : useIO(token)
 }

package/src/react-devtools/AtomIODevtools.tsx

@@ -1,10 +1,9 @@
-import type { FC } from "react"
-import { useRef } from "react"
-
 import { atom, __INTERNAL__ } from "atom.io"
 import type { StoreHooks } from "atom.io/react"
 import { useI, useO, useIO } from "atom.io/react"
 import { LayoutGroup, motion, spring } from "framer-motion"
+import { useRef } from "react"
+import type { FC } from "react"
 
 import { TokenList } from "./TokenList"
 import { lazyLocalStorageEffect } from "../web-effects"
@@ -12,96 +11,97 @@ import { lazyLocalStorageEffect } from "../web-effects"
 import "./devtools.scss"
 
 const { atomTokenIndexState, selectorTokenIndexState } =
-  __INTERNAL__.META.attachMetaState()
+	__INTERNAL__.META.attachMetaState()
 
 const devtoolsAreOpenState = atom<boolean>({
-  key: `👁‍🗨_devtools_are_open`,
-  default: true,
-  effects: [lazyLocalStorageEffect(`👁‍🗨_devtools_are_open`)],
+	key: `👁‍🗨_devtools_are_open`,
+	default: true,
+	effects: [lazyLocalStorageEffect(`👁‍🗨_devtools_are_open`)],
 })
 
 export const composeDevtools = (storeHooks: StoreHooks): FC => {
-  const Devtools: FC = () => {
-    const constraintsRef = useRef(null)
+	const Devtools: FC = () => {
+		const constraintsRef = useRef(null)
 
-    const [devtoolsAreOpen, setDevtoolsAreOpen] =
-      storeHooks.useIO(devtoolsAreOpenState)
+		const [devtoolsAreOpen, setDevtoolsAreOpen] =
+			storeHooks.useIO(devtoolsAreOpenState)
 
-    const mouseHasMoved = useRef(false)
+		const mouseHasMoved = useRef(false)
 
-    return (
-      <>
-        <motion.span
-          ref={constraintsRef}
-          className="atom_io_devtools_zone"
-          style={{
-            position: `fixed`,
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            pointerEvents: `none`,
-          }}
-        />
-        <motion.main
-          drag
-          dragConstraints={constraintsRef}
-          className="atom_io_devtools"
-          transition={spring}
-          style={
-            devtoolsAreOpen
-              ? {}
-              : {
-                  backgroundColor: `#0000`,
-                  borderColor: `#0000`,
-                  maxHeight: 28,
-                  maxWidth: 33,
-                }
-          }
-        >
-          {devtoolsAreOpen ? (
-            <>
-              <motion.header>
-                <h1>atom.io</h1>
-              </motion.header>
-              <motion.main>
-                <LayoutGroup>
-                  <section>
-                    <h2>atoms</h2>
-                    <TokenList
-                      storeHooks={storeHooks}
-                      tokenIndex={atomTokenIndexState}
-                    />
-                  </section>
-                  <section>
-                    <h2>selectors</h2>
-                    <TokenList
-                      storeHooks={storeHooks}
-                      tokenIndex={selectorTokenIndexState}
-                    />
-                  </section>
-                </LayoutGroup>
-              </motion.main>
-            </>
-          ) : null}
-          <footer>
-            <button
-              onMouseDown={() => (mouseHasMoved.current = false)}
-              onMouseMove={() => (mouseHasMoved.current = true)}
-              onMouseUp={() => {
-                if (!mouseHasMoved.current) {
-                  setDevtoolsAreOpen((open) => !open)
-                }
-              }}
-            >
-              👁‍🗨
-            </button>
-          </footer>
-        </motion.main>
-      </>
-    )
-  }
-  return Devtools
+		return (
+			<>
+				<motion.span
+					ref={constraintsRef}
+					className="atom_io_devtools_zone"
+					style={{
+						position: `fixed`,
+						top: 0,
+						left: 0,
+						right: 0,
+						bottom: 0,
+						pointerEvents: `none`,
+					}}
+				/>
+				<motion.main
+					drag
+					dragConstraints={constraintsRef}
+					className="atom_io_devtools"
+					transition={spring}
+					style={
+						devtoolsAreOpen
+							? {}
+							: {
+									backgroundColor: `#0000`,
+									borderColor: `#0000`,
+									maxHeight: 28,
+									maxWidth: 33,
+							  }
+					}
+				>
+					{devtoolsAreOpen ? (
+						<>
+							<motion.header>
+								<h1>atom.io</h1>
+							</motion.header>
+							<motion.main>
+								<LayoutGroup>
+									<section>
+										<h2>atoms</h2>
+										<TokenList
+											storeHooks={storeHooks}
+											tokenIndex={atomTokenIndexState}
+										/>
+									</section>
+									<section>
+										<h2>selectors</h2>
+										<TokenList
+											storeHooks={storeHooks}
+											tokenIndex={selectorTokenIndexState}
+										/>
+									</section>
+								</LayoutGroup>
+							</motion.main>
+						</>
+					) : null}
+					<footer>
+						<button
+							type="button"
+							onMouseDown={() => (mouseHasMoved.current = false)}
+							onMouseMove={() => (mouseHasMoved.current = true)}
+							onMouseUp={() => {
+								if (!mouseHasMoved.current) {
+									setDevtoolsAreOpen((open) => !open)
+								}
+							}}
+						>
+							👁‍🗨
+						</button>
+					</footer>
+				</motion.main>
+			</>
+		)
+	}
+	return Devtools
 }
 
 export const AtomIODevtools = composeDevtools({ useI, useO, useIO })

package/src/react-devtools/StateEditor.tsx

@@ -1,73 +1,72 @@
-import type { FC } from "react"
-
 import type { ReadonlySelectorToken, StateToken } from "atom.io"
 import type { StoreHooks } from "atom.io/react"
+import type { FC } from "react"
 
 import { isPlainJson } from "~/packages/anvl/src/json"
 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

@@ -1,57 +1,61 @@
-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"
+import { Fragment } from "react"
+import type { FC } from "react"
 
 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>
+				)
+			})}
+		</>
+	)
 }