atom.io 0.3.1 → 0.4.1

package/src/react/index.ts

@@ -1,64 +1,46 @@
-import type Preact from "preact/hooks"
+import { useSyncExternalStore } from "react"
 
-import type React from "react"
-
-import { subscribe, setState, __INTERNAL__ } from "atom.io"
-import type { ReadonlyValueToken, StateToken } from "atom.io"
+import { subscribe, setState, __INTERNAL__, getState } from "atom.io"
+import type { ReadonlySelectorToken, StateToken } from "atom.io"
 
 import type { Modifier } from "~/packages/anvl/src/function"
 
-export type AtomStoreReactConfig = {
-  useState: typeof Preact.useState | typeof React.useState
-  useEffect: typeof Preact.useEffect | typeof React.useEffect
-  store?: __INTERNAL__.Store
+export type StoreHooks = {
+  useI: <T>(token: StateToken<T>) => (next: Modifier<T> | T) => void
+  useO: <T>(token: ReadonlySelectorToken<T> | StateToken<T>) => T
+  useIO: <T>(token: StateToken<T>) => [T, (next: Modifier<T> | T) => void]
 }
 
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-export const composeStoreHooks = ({
-  useState,
-  useEffect,
-  store = __INTERNAL__.IMPLICIT.STORE,
-}: AtomStoreReactConfig) => {
+export const composeStoreHooks = (
+  store: __INTERNAL__.Store = __INTERNAL__.IMPLICIT.STORE
+): StoreHooks => {
   function useI<T>(token: StateToken<T>): (next: Modifier<T> | T) => void {
     const updateState = (next: Modifier<T> | T) => setState(token, next, store)
     return updateState
   }
 
-  function useO<T>(token: ReadonlyValueToken<T> | StateToken<T>): T {
-    const state = __INTERNAL__.withdraw(token, store)
-    const initialValue = __INTERNAL__.getState__INTERNAL(state, store)
-    const [current, dispatch] = useState(initialValue)
-    useEffect(() => {
-      const unsubscribe = subscribe(
-        token,
-        ({ newValue, oldValue }) => {
-          if (oldValue !== newValue) {
-            dispatch(newValue)
-          }
-        },
-        store
-      )
-      return unsubscribe
-    }, [])
-
-    return current
+  function useO<T>(token: ReadonlySelectorToken<T> | StateToken<T>): T {
+    return useSyncExternalStore<T>(
+      (observe) => subscribe(token, observe, store),
+      () => getState(token, store)
+    )
   }
 
   function useIO<T>(token: StateToken<T>): [T, (next: Modifier<T> | T) => void] {
     return [useO(token), useI(token)]
   }
 
-  function useStore<T>(
-    token: StateToken<T>
-  ): [T, (next: Modifier<T> | T) => void]
-  function useStore<T>(token: ReadonlyValueToken<T>): T
-  function useStore<T>(
-    token: ReadonlyValueToken<T> | StateToken<T>
-  ): T | [T, (next: Modifier<T> | T) => void] {
-    if (token.type === `readonly_selector`) {
-      return useO(token)
-    }
-    return useIO(token)
-  }
-  return { useI, useO, useIO, useStore }
+  return { useI, useO, useIO }
+}
+
+export const { useI, useO, useIO } = composeStoreHooks()
+
+export function useStore<T>(
+  token: StateToken<T>
+): [T, (next: Modifier<T> | T) => void]
+export function useStore<T>(token: ReadonlySelectorToken<T>): T
+export function useStore<T>(
+  token: ReadonlySelectorToken<T> | StateToken<T>
+): T | [T, (next: Modifier<T> | T) => void] {
+  return token.type === `readonly_selector` ? useO(token) : useIO(token)
 }

package/src/react-devtools/AtomIODevtools.tsx

@@ -0,0 +1,107 @@
+import type { FC } from "react"
+import { useRef } from "react"
+
+import { atom, __INTERNAL__ } from "atom.io"
+import { useI, useO, useIO } from "atom.io/react"
+import type { StoreHooks } from "atom.io/react"
+import { LayoutGroup, motion, spring } from "framer-motion"
+
+import { TokenList } from "./TokenList"
+import { lazyLocalStorageEffect } from "../web-effects"
+
+import "./devtools.scss"
+
+const { atomTokenIndexState, selectorTokenIndexState } =
+  __INTERNAL__.META.attachMetaState()
+
+const devtoolsAreOpenState = atom<boolean>({
+  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 [devtoolsAreOpen, setDevtoolsAreOpen] =
+      storeHooks.useIO(devtoolsAreOpenState)
+
+    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
+}
+
+export const AtomIODevtools = composeDevtools({ useI, useO, useIO })

package/src/react-devtools/StateEditor.tsx

@@ -0,0 +1,73 @@
+import type { FC } from "react"
+
+import type { ReadonlySelectorToken, StateToken } from "atom.io"
+import type { StoreHooks } from "atom.io/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, 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>
+  )
+}
+
+export const ReadonlySelectorEditor: FC<{
+  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>
+  )
+}
+
+export const StoreEditor: FC<{
+  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} />
+}

package/src/react-devtools/TokenList.tsx

@@ -0,0 +1,57 @@
+import type { FC } from "react"
+import { Fragment } from "react"
+
+import type {
+  AtomToken,
+  ReadonlySelectorToken,
+  SelectorToken,
+  __INTERNAL__,
+} from "atom.io"
+import { getState } from "atom.io"
+import type { StoreHooks } from "atom.io/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, 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>
+      ))}
+    </>
+  )
+}

package/src/react-devtools/devtools.scss

@@ -0,0 +1,130 @@
+main.atom_io_devtools {
+  --fg-color: #eee;
+  --bg-color: #111;
+  @media (prefers-color-scheme: light) {
+    --fg-color: #222;
+    --bg-color: #ccc;
+  }
+  box-sizing: border-box;
+  color: var(--fg-color);
+  background-color: var(--bg-color);
+  border: 2px solid var(--fg-color);
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  max-height: 800px;
+  width: 100%;
+  max-width: 460px;
+  overflow-y: scroll;
+  padding: 5px;
+  header {
+    display: flex;
+    justify-content: space-between;
+    h1 {
+      font-size: inherit;
+      margin: 0;
+    }
+  }
+  main {
+    overflow-y: scroll;
+    flex-grow: 1;
+    section {
+      margin-top: 30px;
+      h2 {
+        font-size: inherit;
+        margin: 0;
+      }
+      .node {
+        border: 1px solid var(--fg-color);
+        padding: 5px;
+        margin: 5px;
+        overflow-x: scroll;
+      }
+    }
+  }
+  footer {
+    display: flex;
+    justify-content: flex-end;
+    button {
+      cursor: pointer;
+      background: none;
+      border: none;
+      padding: none;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  .json_editor {
+    input {
+      font-size: 20px;
+      font-family: theia;
+      border: none;
+      border-bottom: 1px solid;
+      background: none;
+      &:disabled {
+        border: none;
+      }
+    }
+    button {
+      background: none;
+      margin-left: auto;
+      color: #777;
+      border: none;
+      font-family: theia;
+      font-size: 14px;
+      margin: none;
+      padding: 4px;
+      padding-bottom: 6px;
+      cursor: pointer;
+      &:hover {
+        color: #333;
+        background-color: #aaa;
+      }
+    }
+    select {
+      font-family: theia;
+      font-size: 14px;
+      background: none;
+      border: none;
+      color: #777;
+      @media (prefers-color-scheme: light) {
+        color: #999;
+      }
+    }
+    .json_editor_unofficial {
+      background-color: #777;
+      button {
+        color: #333;
+      }
+    }
+    .json_editor_missing {
+      background-color: #f055;
+    }
+    .json_editor_key {
+      input {
+        color: #999;
+        @media (prefers-color-scheme: light) {
+          color: #777;
+        }
+      }
+    }
+    .json_editor_object {
+      border-left: 2px solid #333;
+      padding-left: 20px;
+      @media (prefers-color-scheme: light) {
+        border-color: #ccc;
+      }
+      .json_editor_properties {
+        > * {
+          border-bottom: 2px solid #333;
+          margin-bottom: 2px;
+        }
+      }
+    }
+  }
+}

package/src/react-devtools/index.ts

@@ -0,0 +1 @@
+export * from "./AtomIODevtools"

package/src/react-explorer/AtomIOExplorer.tsx

@@ -0,0 +1,208 @@
+import type { FC, ReactNode } from "react"
+import { useEffect } from "react"
+
+import { Link, MemoryRouter, useLocation } from "react-router-dom"
+
+import type { composeStoreHooks } from "~/packages/atom.io/src/react"
+import { ErrorBoundary } from "~/packages/hamr/src/react-error-boundary"
+import type { WC } from "~/packages/hamr/src/react-json-editor"
+
+import { attachExplorerState } from "./explorer-states"
+import { setState } from ".."
+import { runTransaction } from "../transaction"
+
+export type ExplorerOptions = {
+  key: string
+  Components?: {
+    SpaceWrapper: WC
+    CloseSpaceButton: FC<{ onClick: () => void }>
+  }
+  storeHooks: ReturnType<typeof composeStoreHooks>
+}
+
+const DEFAULT_COMPONENTS: ExplorerOptions[`Components`] = {
+  SpaceWrapper: ({ children }) => <div>{children}</div>,
+  CloseSpaceButton: ({ onClick }) => <button onClick={onClick}>X</button>,
+}
+
+export const composeExplorer = ({
+  key,
+  Components,
+  storeHooks: { useO, useIO },
+}: ExplorerOptions): ReturnType<typeof attachExplorerState> & {
+  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 }
+}

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

@@ -0,0 +1,20 @@
+import { isString } from "fp-ts/lib/string"
+
+import { isArray } from "~/packages/anvl/src/array"
+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()
+    }
+  },
+})