refactor: remove sync storage (#2269)

apps/web/src/atoms/index.ts

@@ -1,5 +1,4 @@
 import { DebugLogger } from '@affine/debug';
-import { atomWithSyncStorage } from '@affine/jotai';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import {
   rootCurrentEditorAtom,
@@ -10,6 +9,7 @@ import {
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import type { Page } from '@blocksuite/store';
 import { atom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
 
 import { WorkspacePlugins } from '../plugins';
 
@@ -87,12 +87,16 @@ type View = { id: string; mode: 'page' | 'edgeless' };
 
 export type WorkspaceRecentViews = Record<string, View[]>;
 
-export const workspaceRecentViewsAtom =
+export const workspaceRecentViewsAtom = atomWithStorage<WorkspaceRecentViews>(
-  atomWithSyncStorage<WorkspaceRecentViews>('recentViews', {});
+  'recentViews',
+  {}
+);
 
 export type PreferredModeRecord = Record<Page['id'], 'page' | 'edgeless'>;
-export const workspacePreferredModeAtom =
+export const workspacePreferredModeAtom = atomWithStorage<PreferredModeRecord>(
-  atomWithSyncStorage<PreferredModeRecord>('preferredMode', {});
+  'preferredMode',
+  {}
+);
 
 export const workspaceRecentViresWriteAtom = atom<null, [string, View], View[]>(
   null,

apps/web/src/hooks/current/use-current-workspace.ts

@@ -1,5 +1,5 @@
-import { atomWithSyncStorage } from '@affine/jotai';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
 import { useCallback } from 'react';
 
 import { currentPageIdAtom, currentWorkspaceIdAtom } from '../../atoms';
@@ -11,7 +11,7 @@ import type { AllWorkspace } from '../../shared';
  */
 export const currentWorkspaceAtom = rootCurrentWorkspaceAtom;
 
-export const lastWorkspaceIdAtom = atomWithSyncStorage<string | null>(
+export const lastWorkspaceIdAtom = atomWithStorage<string | null>(
   'last_workspace_id',
   null
 );

apps/web/src/pages/workspace/[workspaceId]/setting.tsx

@@ -1,5 +1,4 @@
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { atomWithSyncStorage } from '@affine/jotai';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
 import type { SettingPanel } from '@affine/workspace/type';
 import {
@@ -10,6 +9,7 @@ import {
 import { SettingsIcon } from '@blocksuite/icons';
 import { assertExists } from '@blocksuite/store';
 import { useAtom, useAtomValue } from 'jotai';
+import { atomWithStorage } from 'jotai/utils';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import React, { useCallback, useEffect } from 'react';
@@ -26,7 +26,7 @@ import { WorkspacePlugins } from '../../../plugins';
 import type { NextPageWithLayout } from '../../../shared';
 import { toast } from '../../../utils';
 
-const settingPanelAtom = atomWithSyncStorage<SettingPanel>(
+const settingPanelAtom = atomWithStorage<SettingPanel>(
   'workspaceId',
   settingPanel.General
 );

packages/component/package.json

@@ -23,7 +23,7 @@
     "@affine/debug": "workspace:*",
     "@affine/i18n": "workspace:*",
     "@affine/jotai": "workspace:*",
-    "@affine/workspace": "workspace:^",
+    "@affine/workspace": "workspace:*",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@emotion/cache": "^11.11.0",

packages/jotai/src/__tests__/index.spec.ts

@@ -1,36 +0,0 @@
-/**
- * @vitest-environment happy-dom
- */
-import { atomWithSyncStorage } from '@affine/jotai';
-import { createStore } from 'jotai';
-import { afterEach, describe, expect, test } from 'vitest';
-
-afterEach(() => {
-  localStorage.clear();
-});
-
-describe('atomWithSyncStorage', () => {
-  test('basic', () => {
-    const store = createStore();
-    {
-      [0, '0', false, null, undefined, NaN].forEach(value => {
-        const atom = atomWithSyncStorage('test', value);
-        expect(store.get(atom)).toBe(value);
-      });
-    }
-  });
-  test('mutate', () => {
-    {
-      const store = createStore();
-      const atom = atomWithSyncStorage('test', 0);
-      expect(store.get(atom)).toBe(0);
-      store.set(atom, 1);
-      expect(store.get(atom)).toBe(1);
-    }
-    {
-      const store = createStore();
-      const atom = atomWithSyncStorage('test', 0);
-      expect(store.get(atom)).toBe(1);
-    }
-  });
-});

packages/jotai/src/index.ts

@@ -1,50 +1 @@
-import { createJSONStorage, RESET } from 'jotai/utils';
-import { atom } from 'jotai/vanilla';
-
-const storage = createJSONStorage<any>(() =>
-  typeof window !== 'undefined'
-    ? window.localStorage
-    : (undefined as unknown as Storage)
-);
-
-type SetStateActionWithReset<Value> =
-  | Value
-  | typeof RESET
-  | ((prev: Value) => Value | typeof RESET);
-
-// similar to atomWithStorage, but will not trigger twice on init
-// https://github.com/pmndrs/jotai/discussions/1737
-export function atomWithSyncStorage<Value>(key: string, initialValue: Value) {
-  const storedValue = storage.getItem(key, initialValue) as Value;
-  const _value =
-    typeof storedValue === 'symbol'
-      ? initialValue
-      : (storage.getItem(key, initialValue) as Value);
-  const baseAtom = atom(_value);
-
-  baseAtom.onMount = setAtom => {
-    if (storage.subscribe) {
-      return storage.subscribe(key, setAtom, initialValue);
-    }
-  };
-
-  const anAtom = atom(
-    get => get(baseAtom),
-    (get, set, update: SetStateActionWithReset<Value>) => {
-      const nextValue =
-        typeof update === 'function'
-          ? (update as (prev: Value) => Value | typeof RESET)(get(baseAtom))
-          : update;
-      if (nextValue === RESET) {
-        set(baseAtom, initialValue);
-        return storage.removeItem(key);
-      }
-      set(baseAtom, nextValue);
-      return storage.setItem(key, nextValue);
-    }
-  );
-
-  return anAtom;
-}
-
 export * from './resource';

packages/workspace/src/affine/atom.ts

@@ -1,5 +1,7 @@
-import { atomWithSyncStorage } from '@affine/jotai';
 import type { AccessTokenMessage } from '@affine/workspace/affine/login';
+import { atomWithStorage } from 'jotai/utils';
 
-export const currentAffineUserAtom =
+export const currentAffineUserAtom = atomWithStorage<AccessTokenMessage | null>(
-  atomWithSyncStorage<AccessTokenMessage | null>('affine-user-atom', null);
+  'affine-user-atom',
+  null
+);

packages/workspace/src/atom.ts

@@ -1,4 +1,3 @@
-import { atomWithSyncStorage } from '@affine/jotai';
 import type { EditorContainer } from '@blocksuite/editor';
 import { atom, createStore } from 'jotai';
 import { atomWithStorage, createJSONStorage } from 'jotai/utils';
@@ -19,7 +18,7 @@ export type RootWorkspaceMetadata = {
  * this atom stores the metadata of all workspaces,
  * which is `id` and `flavor`, that is enough to load the real workspace data
  */
-export const rootWorkspacesMetadataAtom = atomWithSyncStorage<
+export const rootWorkspacesMetadataAtom = atomWithStorage<
   RootWorkspaceMetadata[]
 >(
   // don't change this key,

yarn.lock

@@ -49,7 +49,7 @@ __metadata:
     "@affine/debug": "workspace:*"
     "@affine/i18n": "workspace:*"
     "@affine/jotai": "workspace:*"
-    "@affine/workspace": "workspace:^"
+    "@affine/workspace": "workspace:*"
     "@blocksuite/blocks": 0.0.0-20230508043859-34d0cc68-nightly
     "@blocksuite/editor": 0.0.0-20230508043859-34d0cc68-nightly
     "@blocksuite/global": 0.0.0-20230508043859-34d0cc68-nightly
@@ -353,7 +353,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@affine/workspace@workspace:*, @affine/workspace@workspace:^, @affine/workspace@workspace:packages/workspace":
+"@affine/workspace@workspace:*, @affine/workspace@workspace:packages/workspace":
   version: 0.0.0-use.local
   resolution: "@affine/workspace@workspace:packages/workspace"
   dependencies: