atom.io 0.27.5 → 0.28.1

package/react-devtools/src/AtomIODevtools.tsx

@@ -4,14 +4,14 @@ import { useI, useO } from "atom.io/react"
 import { LayoutGroup, motion, spring } from "framer-motion"
 import { useRef } from "react"
 
+import { StateIndex } from "./StateIndex"
 import {
 	atomIndex,
 	devtoolsAreOpenState,
 	devtoolsViewOptionsState,
 	devtoolsViewSelectionState,
 	selectorIndex,
-} from "."
-import { StateIndex } from "./StateIndex"
+} from "./store"
 import { TimelineIndex } from "./TimelineIndex"
 import { TransactionIndex } from "./TransactionIndex"
 

package/react-devtools/src/StateEditor.tsx

@@ -1,12 +1,19 @@
 import type { ReadonlySelectorToken, WritableToken } from "atom.io"
+import { isJson } from "atom.io/json"
 import { useI, useO } from "atom.io/react"
 import type { FC } from "react"
 
-import { fallback } from "~/packages/anvl/src/function"
-import { isJson } from "~/packages/anvl/src/refinement"
 import { ElasticInput } from "~/packages/hamr/react-elastic-input/src"
 import { JsonEditor } from "~/packages/hamr/react-json-editor/src"
 
+export const fallback = <T,>(fn: () => T, fallbackValue: T): T => {
+	try {
+		return fn()
+	} catch (_) {
+		return fallbackValue
+	}
+}
+
 export const StateEditor: FC<{
 	token: WritableToken<unknown>
 }> = ({ token }) => {
@@ -18,16 +25,17 @@ export const StateEditor: FC<{
 		<div className="json_editor">
 			<ElasticInput
 				value={
-					data !== null &&
-					typeof data === `object` &&
-					`toJson` in data &&
-					typeof data.toJson === `function`
-						? JSON.stringify(data.toJson())
-						: data instanceof Set
-							? `Set { ${JSON.stringify([...data]).slice(1, -1)} }`
-							: Object.getPrototypeOf(data).constructor.name +
-								` ` +
-								fallback(() => JSON.stringify(data), `?`)
+					data === undefined || data === null
+						? ``
+						: typeof data === `object` &&
+								`toJson` in data &&
+								typeof data.toJson === `function`
+							? JSON.stringify(data.toJson())
+							: data instanceof Set
+								? `Set { ${JSON.stringify([...data]).slice(1, -1)} }`
+								: Object.getPrototypeOf(data).constructor.name +
+									` ` +
+									fallback(() => JSON.stringify(data), `?`)
 				}
 				disabled={true}
 			/>

package/react-devtools/src/StateIndex.tsx

@@ -3,35 +3,18 @@ import type {
 	ReadonlySelectorToken,
 	RegularAtomToken,
 } from "atom.io"
-import { getState, selectorFamily } from "atom.io"
+import { getState } from "atom.io"
 import { findState } from "atom.io/ephemeral"
 import type { FamilyNode, WritableTokenIndex } from "atom.io/introspection"
-import type { Canonical } from "atom.io/json"
+import { primitiveRefinery } from "atom.io/introspection"
 import { useI, useO } from "atom.io/react"
 import type { FC } from "react"
 
-import { isJson, refineJsonType } from "~/packages/anvl/src/refinement"
-
-import { findViewIsOpenState, primitiveRefinery } from "."
 import { button } from "./Button"
 import { StoreEditor } from "./StateEditor"
+import { typeSelectors, viewIsOpenAtoms } from "./store"
 
-const findStateTypeState = selectorFamily<string, Canonical>({
-	key: `👁‍🗨 State Type`,
-	get:
-		(token) =>
-		({ get }) => {
-			let state: unknown
-			try {
-				state = get(token as any)
-			} catch (error) {
-				return `error`
-			}
-			if (state === undefined) return `undefined`
-			if (isJson(state)) return refineJsonType(state).type
-			return Object.getPrototypeOf(state).constructor.name
-		},
-})
+/* eslint-disable no-console */
 
 export const StateIndexLeafNode: FC<{
 	node: ReadableToken<unknown>
@@ -83,8 +66,8 @@ export const StateIndexTreeNode: FC<{
 	const setIsOpen = useI(isOpenState)
 	const isOpen = useO(isOpenState)
 	for (const [key, childNode] of node.familyMembers) {
-		findState(findViewIsOpenState, key)
-		findState(findStateTypeState, childNode.key)
+		findState(viewIsOpenAtoms, key)
+		findState(typeSelectors, childNode.key)
 	}
 	return (
 		<>
@@ -104,8 +87,8 @@ export const StateIndexTreeNode: FC<{
 						<StateIndexNode
 							key={key}
 							node={childNode}
-							isOpenState={findState(findViewIsOpenState, childNode.key)}
-							typeState={findState(findStateTypeState, childNode.key)}
+							isOpenState={findState(viewIsOpenAtoms, childNode.key)}
+							typeState={findState(typeSelectors, childNode.key)}
 						/>
 					))
 				: null}
@@ -147,8 +130,8 @@ export const StateIndex: FC<{
 						<StateIndexNode
 							key={key}
 							node={node}
-							isOpenState={findState(findViewIsOpenState, node.key)}
-							typeState={findState(findStateTypeState, node.key)}
+							isOpenState={findState(viewIsOpenAtoms, node.key)}
+							typeState={findState(typeSelectors, node.key)}
 						/>
 					)
 				})}

package/react-devtools/src/TimelineIndex.tsx

@@ -9,8 +9,8 @@ import type { Timeline } from "atom.io/internal"
 import { useI, useO } from "atom.io/react"
 import { type FC, Fragment } from "react"
 
-import { findTimelineState, findViewIsOpenState, timelineIndex } from "."
 import { button } from "./Button"
+import { timelineIndex, timelineSelectors, viewIsOpenAtoms } from "./store"
 import { article } from "./Updates"
 
 export const YouAreHere: FC = () => {
@@ -96,8 +96,8 @@ export const TimelineIndex: FC = () => {
 						<TimelineLog
 							key={token.key}
 							token={token}
-							isOpenState={findState(findViewIsOpenState, token.key)}
-							timelineState={findState(findTimelineState, token.key)}
+							isOpenState={findState(viewIsOpenAtoms, token.key)}
+							timelineState={findState(timelineSelectors, token.key)}
 						/>
 					)
 				})}

package/react-devtools/src/TransactionIndex.tsx

@@ -9,12 +9,12 @@ import type { Func } from "atom.io/internal"
 import { useI, useO } from "atom.io/react"
 import type { FC } from "react"
 
+import { button } from "./Button"
 import {
-	findTransactionLogState,
-	findViewIsOpenState,
 	transactionIndex,
-} from "."
-import { button } from "./Button"
+	transactionLogSelectors,
+	viewIsOpenAtoms,
+} from "./store"
 import { article } from "./Updates"
 
 export const TransactionLog: FC<{
@@ -68,8 +68,8 @@ export const TransactionIndex: FC = () => {
 						<TransactionLog
 							key={token.key}
 							token={token}
-							isOpenState={findState(findViewIsOpenState, token.key)}
-							logState={findState(findTransactionLogState, token.key)}
+							isOpenState={findState(viewIsOpenAtoms, token.key)}
+							logState={findState(transactionLogSelectors, token.key)}
 						/>
 					)
 				})}

package/react-devtools/src/Updates.tsx

@@ -4,11 +4,10 @@ import type {
 	TransactionUpdate,
 } from "atom.io"
 import type { Func } from "atom.io/internal"
+import { discoverType, prettyJson } from "atom.io/introspection"
 import * as React from "react"
 
-import { discoverType } from "~/packages/anvl/src/refinement/refinery"
-
-import { prettyJson } from "."
+/* eslint-disable no-console */
 
 const AtomUpdateFC: React.FC<{
 	serialNumber: number

package/react-devtools/src/index.ts

@@ -1,72 +1 @@
-import { atom, atomFamily } from "atom.io"
-import { attachIntrospectionStates } from "atom.io/introspection"
-
-import { isPlainObject } from "~/packages/anvl/src/object"
-import { Refinery } from "~/packages/anvl/src/refinement"
-import {
-	diffArray,
-	diffBoolean,
-	Differ,
-	diffNumber,
-	diffObject,
-	diffString,
-} from "~/packages/anvl/src/tree/differ"
-import { lazyLocalStorageEffect } from "~/packages/atom.io/__unstable__/web-effects/src"
-
 export * from "./AtomIODevtools"
-
-export const {
-	atomIndex,
-	selectorIndex,
-	transactionIndex,
-	findTransactionLogState,
-	timelineIndex,
-	findTimelineState,
-} = attachIntrospectionStates()
-
-export const devtoolsAreOpenState = atom<boolean>({
-	key: `👁‍🗨 Devtools Are Open`,
-	default: true,
-	effects: [lazyLocalStorageEffect(`👁‍🗨 Devtools Are Open`)],
-})
-
-type DevtoolsView = `atoms` | `selectors` | `timelines` | `transactions`
-
-export const devtoolsViewSelectionState = atom<DevtoolsView>({
-	key: `👁‍🗨 Devtools View Selection`,
-	default: `atoms`,
-	effects: [lazyLocalStorageEffect(`👁‍🗨 Devtools View`)],
-})
-
-export const devtoolsViewOptionsState = atom<DevtoolsView[]>({
-	key: `👁‍🗨 Devtools View Options`,
-	default: [`atoms`, `selectors`, `transactions`, `timelines`],
-	effects: [lazyLocalStorageEffect(`👁‍🗨 Devtools View Options`)],
-})
-
-export const findViewIsOpenState = atomFamily<boolean, string>({
-	key: `👁‍🗨 Devtools View Is Open`,
-	default: false,
-	effects: (key) => [lazyLocalStorageEffect(key + `:view-is-open`)],
-})
-
-export const primitiveRefinery = new Refinery({
-	number: (input: unknown): input is number => typeof input === `number`,
-	string: (input: unknown): input is string => typeof input === `string`,
-	boolean: (input: unknown): input is boolean => typeof input === `boolean`,
-	null: (input: unknown): input is null => input === null,
-})
-
-export const jsonTreeRefinery = new Refinery({
-	object: isPlainObject,
-	array: (input: unknown): input is unknown[] => Array.isArray(input),
-})
-
-export const prettyJson = new Differ(primitiveRefinery, jsonTreeRefinery, {
-	number: diffNumber,
-	string: diffString,
-	boolean: diffBoolean,
-	null: () => ({ summary: `No Change` }),
-	object: diffObject,
-	array: diffArray,
-})

package/react-devtools/src/store.ts

@@ -0,0 +1,51 @@
+import { atom, atomFamily } from "atom.io"
+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`)],
+})
+
+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`)],
+})

package/realtime/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as atom_io from 'atom.io';
-import { AtomFamilyToken, ReadableFamilyToken, ReadableToken, AtomToken, TransactionToken, MutableAtomToken } from 'atom.io';
-import { Canonical, Json } from 'atom.io/json';
+import { AtomFamilyToken, ReadableFamilyToken, ReadableToken, TokenType, AtomToken, TransactionToken, MutableAtomToken } from 'atom.io';
+import { Canonical } from 'atom.io/json';
 import * as atom_io_data from 'atom.io/data';
 import { SetRTX, SetRTXJson } from 'atom.io/transceivers/set-rtx';
 
@@ -8,24 +8,24 @@ declare class InvariantMap<K, V> extends Map<K, V> {
     set(key: K, value: V): this;
     clear(): void;
 }
-type PerspectiveToken<F extends AtomFamilyToken<any>, T extends F extends AtomFamilyToken<infer U, any> ? U : never> = {
+type PerspectiveToken<F extends AtomFamilyToken<any>> = {
     type: `realtime_perspective`;
     resourceAtoms: F;
-    viewAtoms: ReadableFamilyToken<ReadableToken<T>[], string>;
+    viewAtoms: ReadableFamilyToken<ReadableToken<TokenType<F>>[], string>;
 };
 type ContinuityToken = {
     readonly type: `continuity`;
     readonly key: string;
     readonly globals: AtomToken<any>[];
     readonly actions: TransactionToken<any>[];
-    readonly perspectives: PerspectiveToken<AtomFamilyToken<any, Canonical>, Json.Serializable>[];
+    readonly perspectives: PerspectiveToken<AtomFamilyToken<any, Canonical>>[];
 };
 declare class SyncGroup {
     protected readonly key: string;
-    protected type: "continuity";
+    type: "continuity";
     protected globals: AtomToken<any>[];
     protected actions: TransactionToken<any>[];
-    protected perspectives: PerspectiveToken<any, any>[];
+    protected perspectives: PerspectiveToken<any>[];
     protected constructor(key: string);
     static existing: InvariantMap<string, ContinuityToken>;
     static create(key: string, builder: (group: SyncGroup) => SyncGroup): ContinuityToken;

package/realtime/dist/index.js

@@ -1,5 +1,5 @@
 import '../../dist/chunk-XWL6SNVU.js';
-import { getUpdateToken, assignTransactionToContinuity, IMPLICIT, setEpochNumberOfContinuity } from 'atom.io/internal';
+import { assignTransactionToContinuity, IMPLICIT, setEpochNumberOfContinuity } from 'atom.io/internal';
 import { atom, selectorFamily } from 'atom.io';
 import { join, getInternalRelations } from 'atom.io/data';
 import { SetRTX } from 'atom.io/transceivers/set-rtx';
@@ -37,28 +37,24 @@ var SyncGroup = class _SyncGroup {
   }
   add(...args) {
     const zeroth = args[0];
-    if (zeroth.type === `atom` || zeroth.type === `mutable_atom`) {
-      const globals = args;
-      for (const global of globals) {
-        switch (global.type) {
-          case `atom`:
-            this.globals.push(global);
-            break;
-          case `mutable_atom`:
-            this.globals.push(getUpdateToken(global));
-            break;
+    switch (zeroth.type) {
+      case `atom`:
+      case `mutable_atom`:
+        this.globals.push(...args);
+        break;
+      case `transaction`:
+        this.actions.push(...args);
+        break;
+      case `atom_family`:
+        {
+          const [family, index] = args;
+          this.perspectives.push({
+            type: `realtime_perspective`,
+            resourceAtoms: family,
+            viewAtoms: index
+          });
         }
-      }
-    } else if (zeroth.type === `transaction`) {
-      const actions = args;
-      this.actions.push(...actions);
-    } else {
-      const [family, index] = args;
-      this.perspectives.push({
-        type: `realtime_perspective`,
-        resourceAtoms: family,
-        viewAtoms: index
-      });
+        break;
     }
     return this;
   }

package/realtime/src/realtime-continuity.ts

@@ -3,15 +3,17 @@ import type {
 	AtomToken,
 	ReadableFamilyToken,
 	ReadableToken,
+	TokenType,
 	TransactionToken,
 } from "atom.io"
 import {
 	assignTransactionToContinuity,
-	getUpdateToken,
 	IMPLICIT,
 	setEpochNumberOfContinuity,
 } from "atom.io/internal"
-import type { Canonical, Json } from "atom.io/json"
+import type { Canonical } from "atom.io/json"
+
+/* eslint-disable no-console */
 
 export class InvariantMap<K, V> extends Map<K, V> {
 	public set(key: K, value: V): this {
@@ -30,13 +32,10 @@ export class InvariantMap<K, V> extends Map<K, V> {
 	}
 }
 
-export type PerspectiveToken<
-	F extends AtomFamilyToken<any>,
-	T extends F extends AtomFamilyToken<infer U, any> ? U : never,
-> = {
+export type PerspectiveToken<F extends AtomFamilyToken<any>> = {
 	type: `realtime_perspective`
 	resourceAtoms: F
-	viewAtoms: ReadableFamilyToken<ReadableToken<T>[], string>
+	viewAtoms: ReadableFamilyToken<ReadableToken<TokenType<F>>[], string>
 }
 
 export type ContinuityToken = {
@@ -44,18 +43,15 @@ export type ContinuityToken = {
 	readonly key: string
 	readonly globals: AtomToken<any>[]
 	readonly actions: TransactionToken<any>[]
-	readonly perspectives: PerspectiveToken<
-		AtomFamilyToken<any, Canonical>,
-		Json.Serializable
-	>[]
+	readonly perspectives: PerspectiveToken<AtomFamilyToken<any, Canonical>>[]
 }
 
 export class SyncGroup {
-	protected type = `continuity` as const
+	public type = `continuity` as const
 
 	protected globals: AtomToken<any>[] = []
 	protected actions: TransactionToken<any>[] = []
-	protected perspectives: PerspectiveToken<any, any>[] = []
+	protected perspectives: PerspectiveToken<any>[] = []
 
 	protected constructor(protected readonly key: string) {}
 
@@ -88,32 +84,29 @@ export class SyncGroup {
 			| [AtomFamilyToken<any, any>, ReadableFamilyToken<Iterable<any>, string>]
 	): this {
 		const zeroth = args[0]
-		if (zeroth.type === `atom` || zeroth.type === `mutable_atom`) {
-			const globals = args as AtomToken<any>[]
-			for (const global of globals) {
-				switch (global.type) {
-					case `atom`:
-						this.globals.push(global)
-						break
-					case `mutable_atom`:
-						this.globals.push(getUpdateToken(global))
-						break
+		switch (zeroth.type) {
+			case `atom`:
+			case `mutable_atom`:
+				this.globals.push(...(args as AtomToken<any>[]))
+				break
+			case `transaction`:
+				this.actions.push(...(args as TransactionToken<any>[]))
+				break
+			case `atom_family`:
+				{
+					const [family, index] = args as [
+						AtomFamilyToken<any, any>,
+						ReadableFamilyToken<ReadableToken<any>[], string>,
+					]
+					this.perspectives.push({
+						type: `realtime_perspective`,
+						resourceAtoms: family,
+						viewAtoms: index,
+					})
 				}
-			}
-		} else if (zeroth.type === `transaction`) {
-			const actions = args as TransactionToken<any>[]
-			this.actions.push(...actions)
-		} else {
-			const [family, index] = args as [
-				AtomFamilyToken<any, any>,
-				ReadableFamilyToken<ReadableToken<any>[], string>,
-			]
-			this.perspectives.push({
-				type: `realtime_perspective`,
-				resourceAtoms: family,
-				viewAtoms: index,
-			})
+				break
 		}
+
 		return this
 	}
 }

package/realtime-client/dist/index.js

@@ -1,9 +1,9 @@
-import { lazyLocalStorageEffect } from '../../dist/chunk-H6EDLPKH.js';
 import '../../dist/chunk-XWL6SNVU.js';
 import * as Internal from 'atom.io/internal';
-import { setIntoStore, getJsonToken, getUpdateToken, getFromStore, assignTransactionToContinuity, subscribeToTransaction, disposeAtom, setEpochNumberOfContinuity, getEpochNumberOfContinuity, isRootStore, ingestTransactionUpdate, actUponStore } from 'atom.io/internal';
+import { setIntoStore, getJsonToken, getUpdateToken, getFromStore, assignTransactionToContinuity, subscribeToTransaction, disposeAtom, setEpochNumberOfContinuity, getEpochNumberOfContinuity, isRootStore, ingestTransactionUpdate, growMoleculeInStore, initFamilyMemberInStore, actUponStore } from 'atom.io/internal';
 import { parseJson } from 'atom.io/json';
 import * as AtomIO from 'atom.io';
+import { persistSync } from 'atom.io/web';
 import { optimisticUpdateQueue as optimisticUpdateQueue$1, confirmedUpdateQueue as confirmedUpdateQueue$1 } from 'atom.io/realtime-client';
 
 function pullAtom(token, socket, store) {
@@ -164,11 +164,10 @@ var myIdState = AtomIO.selector({
   key: `mySocketId`,
   get: ({ get }) => get(myIdState__INTERNAL)
 });
-var usernameEffects = typeof window === `undefined` ? [] : [lazyLocalStorageEffect(`myUsername`)];
 var myUsernameState = AtomIO.atom({
-  key: `myUsername`,
+  key: `myName`,
   default: null,
-  effects: usernameEffects
+  effects: typeof window === `undefined` ? [] : [persistSync(window.localStorage, JSON, `myUsername`)]
 });
 var optimisticUpdateQueue = AtomIO.atom({
   key: `updateQueue`,
@@ -200,8 +199,8 @@ function syncContinuity(continuity, socket, store) {
   const initializeContinuity = (epoch, payload) => {
     socket.off(`continuity-init:${continuityKey}`, initializeContinuity);
     let i = 0;
-    let k = ``;
-    let v = null;
+    let k;
+    let v;
     for (const x of payload) {
       if (i % 2 === 0) {
         k = x;
@@ -468,14 +467,14 @@ function syncContinuity(continuity, socket, store) {
   });
   socket.on(`reveal:${continuityKey}`, (revealed) => {
     let i = 0;
-    let k = ``;
-    let v = null;
+    let k;
+    let v;
     for (const x of revealed) {
       if (i % 2 === 0) {
         k = x;
       } else {
         v = x;
-        setIntoStore(k, v, store);
+        upsertState(k, v, store);
       }
       i++;
     }
@@ -495,5 +494,20 @@ function syncContinuity(continuity, socket, store) {
     for (const unsubscribe of unsubscribeFunctions) unsubscribe();
   };
 }
+function upsertState(store, token, value) {
+  if (token.family) {
+    const family = store.families.get(token.family.key);
+    if (family) {
+      const molecule = store.molecules.get(token.family.subKey);
+      if (molecule) {
+        growMoleculeInStore(molecule, family, store);
+      } else if (store.config.lifespan === `immortal`) {
+        throw new Error(`No molecule found for key "${token.family.subKey}"`);
+      }
+      initFamilyMemberInStore(store, family, parseJson(token.family.subKey));
+    }
+  }
+  setIntoStore(store, token, value);
+}
 
 export { confirmedUpdateQueue, myIdState, myIdState__INTERNAL, myUsernameState, optimisticUpdateQueue, pullAtom, pullAtomFamilyMember, pullMutableAtom, pullMutableAtomFamilyMember, pullSelector, pullSelectorFamilyMember, pushState, serverAction, syncContinuity };

package/realtime-client/src/pull-atom-family-member.ts

@@ -4,6 +4,8 @@ import type { Json } from "atom.io/json"
 import { parseJson } from "atom.io/json"
 import type { Socket } from "socket.io-client"
 
+/* eslint-disable no-console */
+
 export function pullAtomFamilyMember<J extends Json.Serializable>(
 	token: AtomIO.RegularAtomToken<J>,
 	socket: Socket,

package/realtime-client/src/pull-mutable-atom-family-member.ts

@@ -5,6 +5,8 @@ import type { Json } from "atom.io/json"
 import { parseJson } from "atom.io/json"
 import type { Socket } from "socket.io-client"
 
+/* eslint-disable no-console */
+
 export function pullMutableAtomFamilyMember<
 	T extends Transceiver<any>,
 	J extends Json.Serializable,

package/realtime-client/src/pull-selector-family-member.ts

@@ -5,6 +5,8 @@ import type { Socket } from "socket.io-client"
 import { pullAtomFamilyMember } from "./pull-atom-family-member"
 import { pullMutableAtomFamilyMember } from "./pull-mutable-atom-family-member"
 
+/* eslint-disable no-console */
+
 export function pullSelectorFamilyMember<T>(
 	token: AtomIO.SelectorToken<T>,
 	socket: Socket,

package/realtime-client/src/realtime-client-stores/client-main-store.ts

@@ -1,6 +1,5 @@
 import * as AtomIO from "atom.io"
-
-import { lazyLocalStorageEffect } from "~/packages/atom.io/__unstable__/web-effects/src/storage"
+import { persistSync } from "atom.io/web"
 
 export const myIdState__INTERNAL = AtomIO.atom<string | undefined>({
 	key: `mySocketId__INTERNAL`,
@@ -11,10 +10,11 @@ export const myIdState = AtomIO.selector<string | undefined>({
 	get: ({ get }) => get(myIdState__INTERNAL),
 })
 
-const usernameEffects =
-	typeof window === `undefined` ? [] : [lazyLocalStorageEffect(`myUsername`)]
 export const myUsernameState = AtomIO.atom<string | null>({
-	key: `myUsername`,
+	key: `myName`,
 	default: null,
-	effects: usernameEffects,
+	effects:
+		typeof window === `undefined`
+			? []
+			: [persistSync(window.localStorage, JSON, `myUsername`)],
 })