atom.io 0.3.0 → 0.4.0

package/src/internal/timeline-internal.ts

@@ -1,8 +1,7 @@
 import HAMT from "hamt_plus"
 
 import type { KeyedStateUpdate, TransactionUpdate, Store } from "."
-import { IMPLICIT, withdraw } from "."
-import { setState } from ".."
+import { target, IMPLICIT, withdraw } from "."
 import type { AtomToken, TimelineOptions, TimelineToken, ƒn } from ".."
 
 export type Timeline = {
@@ -12,8 +11,13 @@ export type Timeline = {
   prev: () => void
 }
 
-export type TimelineStateUpdate = KeyedStateUpdate<unknown> & {
-  type: `state_update`
+export type TimelineAtomUpdate = KeyedStateUpdate<unknown> & {
+  type: `atom_update`
+}
+export type TimelineSelectorUpdate = {
+  key: string
+  type: `selector_update`
+  atomUpdates: TimelineAtomUpdate[]
 }
 export type TimelineTransactionUpdate = TransactionUpdate<ƒn> & {
   type: `transaction_update`
@@ -22,23 +26,39 @@ export type TimelineTransactionUpdate = TransactionUpdate<ƒn> & {
 export type TimelineData = {
   at: number
   timeTraveling: boolean
-  history: (TimelineStateUpdate | TimelineTransactionUpdate)[]
+  history: (
+    | TimelineAtomUpdate
+    | TimelineSelectorUpdate
+    | TimelineTransactionUpdate
+  )[]
+  selectorTime: number | null
+  transactionKey: string | null
 }
 
 export function timeline__INTERNAL(
   options: TimelineOptions,
   store: Store = IMPLICIT.STORE
 ): TimelineToken {
-  let incompleteTransactionKey: string | null = null
   const timelineData: TimelineData = {
     at: 0,
     timeTraveling: false,
     history: [],
+    selectorTime: null,
+    transactionKey: null,
   }
 
   const subscribeToAtom = (token: AtomToken<any>) => {
     const state = withdraw(token, store)
     state.subject.subscribe((update) => {
+      const storeCurrentSelectorKey =
+        store.operation.open && store.operation.token.type === `selector`
+          ? store.operation.token.key
+          : null
+      const storeCurrentSelectorTime =
+        store.operation.open && store.operation.token.type === `selector`
+          ? store.operation.time
+          : null
+
       const storeCurrentTransactionKey =
         store.transactionStatus.phase === `applying`
           ? store.transactionStatus.key
@@ -49,8 +69,10 @@ export function timeline__INTERNAL(
         `->`,
         update.newValue,
         storeCurrentTransactionKey
-          ? `) in "${storeCurrentTransactionKey}"`
-          : `) independently`
+          ? `) in transaction "${storeCurrentTransactionKey}"`
+          : storeCurrentSelectorKey
+          ? `) in selector "${storeCurrentSelectorKey}"`
+          : `)`
       )
 
       if (
@@ -61,15 +83,18 @@ export function timeline__INTERNAL(
           { key: storeCurrentTransactionKey, type: `transaction` },
           store
         )
-        if (incompleteTransactionKey !== storeCurrentTransactionKey) {
-          if (incompleteTransactionKey) {
+        if (timelineData.transactionKey !== storeCurrentTransactionKey) {
+          if (timelineData.transactionKey) {
             store.config.logger?.error(
-              `Timeline "${options.key}" was unable to resolve transaction "${incompleteTransactionKey}. This is probably a bug.`
+              `Timeline "${options.key}" was unable to resolve transaction "${timelineData.transactionKey}. This is probably a bug.`
             )
           }
-          incompleteTransactionKey = storeCurrentTransactionKey
+          timelineData.transactionKey = storeCurrentTransactionKey
           const subscription = currentTransaction.subject.subscribe((update) => {
             if (timelineData.timeTraveling === false) {
+              if (timelineData.at !== timelineData.history.length) {
+                timelineData.history.splice(timelineData.at)
+              }
               timelineData.history.push({
                 type: `transaction_update`,
                 ...update,
@@ -80,117 +105,109 @@ export function timeline__INTERNAL(
             }
             timelineData.at = timelineData.history.length
             subscription.unsubscribe()
-            incompleteTransactionKey = null
+            timelineData.transactionKey = null
             store.config.logger?.info(
-              `⌛ timeline "${options.key}" pushed a transaction_update from "${update.key}"`
+              `⌛ timeline "${options.key}" got a transaction_update "${update.key}"`
             )
           })
         }
+      } else if (storeCurrentSelectorKey) {
+        if (timelineData.timeTraveling === false) {
+          if (storeCurrentSelectorTime !== timelineData.selectorTime) {
+            const newSelectorUpdate: TimelineSelectorUpdate = {
+              type: `selector_update`,
+              key: storeCurrentSelectorKey,
+              atomUpdates: [],
+            }
+            newSelectorUpdate.atomUpdates.push({
+              key: token.key,
+              type: `atom_update`,
+              ...update,
+            })
+            if (timelineData.at !== timelineData.history.length) {
+              timelineData.history.splice(timelineData.at)
+            }
+            timelineData.history.push(newSelectorUpdate)
+
+            store.config.logger?.info(
+              `⌛ timeline "${options.key}" got a selector_update "${storeCurrentSelectorKey}" with`,
+              newSelectorUpdate.atomUpdates.map((atomUpdate) => atomUpdate.key)
+            )
+            timelineData.at = timelineData.history.length
+            timelineData.selectorTime = storeCurrentSelectorTime
+          } else {
+            const latestUpdate = timelineData.history.at(-1)
+            if (latestUpdate?.type === `selector_update`) {
+              latestUpdate.atomUpdates.push({
+                key: token.key,
+                type: `atom_update`,
+                ...update,
+              })
+              store.config.logger?.info(
+                `   ⌛ timeline "${options.key}" set selector_update "${storeCurrentSelectorKey}" to`,
+                latestUpdate?.atomUpdates.map((atomUpdate) => atomUpdate.key)
+              )
+            }
+          }
+        }
       } else {
         if (timelineData.timeTraveling === false) {
+          timelineData.selectorTime = null
+          if (timelineData.at !== timelineData.history.length) {
+            timelineData.history.splice(timelineData.at)
+          }
           timelineData.history.push({
-            type: `state_update`,
+            type: `atom_update`,
             key: token.key,
             oldValue: update.oldValue,
             newValue: update.newValue,
           })
           store.config.logger?.info(
-            `⌛ timeline "${options.key}" pushed a state_update to "${token.key}"`
+            `⌛ timeline "${options.key}" got a state_update to "${token.key}"`
           )
           timelineData.at = timelineData.history.length
         }
       }
     })
   }
-
+  const core = target(store)
   for (const tokenOrFamily of options.atoms) {
+    const timelineKey = core.timelineAtoms.getRelatedId(tokenOrFamily.key)
+    if (timelineKey) {
+      store.config.logger?.error(
+        `❌ Failed to add atom "${tokenOrFamily.key}" to timeline "${options.key}" because it belongs to timeline "${timelineKey}"`
+      )
+      continue
+    }
     if (tokenOrFamily.type === `atom_family`) {
       const family = tokenOrFamily
       family.subject.subscribe((token) => subscribeToAtom(token))
     } else {
       const token = tokenOrFamily
+      if (`family` in token && token.family) {
+        const familyTimelineKey = core.timelineAtoms.getRelatedId(
+          token.family.key
+        )
+        if (familyTimelineKey) {
+          store.config.logger?.error(
+            `❌ Failed to add atom "${token.key}" to timeline "${options.key}" because its family "${token.family.key}" belongs to timeline "${familyTimelineKey}"`
+          )
+          continue
+        }
+      }
       subscribeToAtom(token)
     }
+    core.timelineAtoms = core.timelineAtoms.set({
+      atomKey: tokenOrFamily.key,
+      timelineKey: options.key,
+    })
   }
 
   store.timelineStore = HAMT.set(options.key, timelineData, store.timelineStore)
-
-  return {
+  const token: TimelineToken = {
     key: options.key,
     type: `timeline`,
   }
-}
-
-export const redo__INTERNAL = (
-  token: TimelineToken,
-  store: Store = IMPLICIT.STORE
-): void => {
-  const timelineData = store.timelineStore.get(token.key)
-  if (!timelineData) {
-    store.config.logger?.error(
-      `Tried to redo on timeline "${token.key}" has not been initialized.`
-    )
-    return
-  }
-  if (timelineData.at === timelineData.history.length) {
-    store.config.logger?.warn(
-      `Tried to redo on timeline "${token.key}" but there is nothing to redo.`
-    )
-    return
-  }
-  timelineData.timeTraveling = true
-  const update = timelineData.history[timelineData.at]
-  switch (update.type) {
-    case `state_update`: {
-      const { key, newValue } = update
-      setState({ key, type: `atom` }, newValue)
-      break
-    }
-    case `transaction_update`: {
-      for (const atomUpdate of update.atomUpdates) {
-        const { key, newValue } = atomUpdate
-        setState({ key, type: `atom` }, newValue)
-      }
-      break
-    }
-  }
-  ++timelineData.at
-  timelineData.timeTraveling = false
-}
-
-export const undo__INTERNAL = (
-  token: TimelineToken,
-  store: Store = IMPLICIT.STORE
-): void => {
-  const timelineData = store.timelineStore.get(token.key)
-  if (!timelineData) {
-    store.config.logger?.error(
-      `Tried to undo on timeline "${token.key}" has not been initialized.`
-    )
-    return
-  }
-  if (timelineData.at === 0) {
-    store.config.logger?.warn(
-      `Tried to undo on timeline "${token.key}" but there is nothing to undo.`
-    )
-    return
-  }
-  timelineData.timeTraveling = true
-  --timelineData.at
-  const update = timelineData.history[timelineData.at]
-  switch (update.type) {
-    case `state_update`: {
-      const { key, oldValue } = update
-      setState({ key, type: `atom` }, oldValue)
-      break
-    }
-    case `transaction_update`: {
-      for (const atomUpdate of update.atomUpdates) {
-        const { key, oldValue } = atomUpdate
-        setState({ key, type: `atom` }, oldValue)
-      }
-      break
-    }
-  }
-  timelineData.timeTraveling = false
+  store.subject.timelineCreation.next(token)
+  return token
 }

package/src/internal/transaction-internal.ts

@@ -2,7 +2,7 @@ import HAMT from "hamt_plus"
 import * as Rx from "rxjs"
 
 import type { Store, StoreCore } from "."
-import { deposit, withdraw, IMPLICIT } from "."
+import { cacheValue, deposit, withdraw, IMPLICIT } from "."
 import { getState, setState } from ".."
 import type {
   AtomToken,
@@ -75,14 +75,22 @@ export const applyTransaction = <ƒ extends ƒn>(
     return
   }
   store.config.logger?.info(
-    ` ▶️ apply transaction "${store.transactionStatus.key}" (init)`
+    `🛃 apply transaction "${store.transactionStatus.key}"`
   )
   store.transactionStatus.phase = `applying`
   store.transactionStatus.output = output
   const { atomUpdates } = store.transactionStatus
-  for (const { key, oldValue, newValue } of atomUpdates) {
+
+  for (const { key, newValue } of atomUpdates) {
     const token: AtomToken<unknown> = { key, type: `atom` }
+    if (!HAMT.has(token.key, store.valueMap)) {
+      const atom = HAMT.get(token.key, store.transactionStatus.core.atoms)
+      store.atoms = HAMT.set(atom.key, atom, store.atoms)
+      store.valueMap = HAMT.set(atom.key, atom.default, store.valueMap)
+      store.config.logger?.info(`🔧`, `add atom "${atom.key}"`)
+    }
     const state = withdraw(token, store)
+
     setState(state, newValue, store)
   }
   const myTransaction = withdraw<ƒ>(
@@ -103,7 +111,7 @@ export const undoTransactionUpdate = <ƒ extends ƒn>(
   store: Store
 ): void => {
   store.config.logger?.info(` ⏮ undo transaction "${update.key}" (undo)`)
-  for (const { key, oldValue, newValue } of update.atomUpdates) {
+  for (const { key, oldValue } of update.atomUpdates) {
     const token: AtomToken<unknown> = { key, type: `atom` }
     const state = withdraw(token, store)
     setState(state, oldValue, store)
@@ -114,7 +122,7 @@ export const redoTransactionUpdate = <ƒ extends ƒn>(
   store: Store
 ): void => {
   store.config.logger?.info(` ⏭ redo transaction "${update.key}" (redo)`)
-  for (const { key, oldValue, newValue } of update.atomUpdates) {
+  for (const { key, newValue } of update.atomUpdates) {
     const token: AtomToken<unknown> = { key, type: `atom` }
     const state = withdraw(token, store)
     setState(state, newValue, store)
@@ -166,6 +174,7 @@ export function transaction__INTERNAL<ƒ extends ƒn>(
     core.transactions
   )
   const token = deposit(newTransaction)
+  store.subject.transactionCreation.next(token)
   return token
 }
 

package/src/{internal/logger.ts → logger.ts}

@@ -1,7 +1,7 @@
 import { doNothing } from "~/packages/anvl/src/function"
 
-import type { Store } from "./store"
-import { IMPLICIT } from "./store"
+import type { Store } from "./internal/store"
+import { IMPLICIT } from "./internal/store"
 
 export type Logger = Pick<Console, `error` | `info` | `warn`>
 export const LOG_LEVELS: ReadonlyArray<keyof Logger> = [

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,49 @@
+import type { FC } from "react"
+import { Fragment } from "react"
+
+import type {
+  AtomToken,
+  ReadonlySelectorToken,
+  SelectorToken,
+  __INTERNAL__,
+} 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">
+              {key}:
+              {`type` in token ? (
+                <StoreEditor storeHooks={storeHooks} token={token} />
+              ) : (
+                recordToEntries(token.familyMembers).map(([key, token]) => (
+                  <div key={key} className="node">
+                    {key}:<StoreEditor storeHooks={storeHooks} token={token} />
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </Fragment>
+      ))}
+    </>
+  )
+}