feat: run app in closure (#3790)

apps/storybook/.storybook/preview.tsx

@@ -5,14 +5,16 @@ import '@toeverything/components/style.css';
 import { createI18n } from '@affine/i18n';
 import { ThemeProvider, useTheme } from 'next-themes';
 import { useDarkMode } from 'storybook-dark-mode';
-import { setup } from '@affine/core/bootstrap/setup';
 import { AffineContext } from '@affine/component/context';
-import { use } from 'foxact/use';
 import useSWR from 'swr';
 import type { Decorator } from '@storybook/react';
+import { createStore } from 'jotai/vanilla';
+import { setup } from '@affine/core/bootstrap/setup';
+import { _setCurrentStore } from '@toeverything/infra/atom';
+import { bootstrapPluginSystem } from '@affine/core/bootstrap/register-plugins';
+import { setupGlobal } from '@affine/env/global';
 
-const setupPromise = setup();
-
+setupGlobal();
 export const parameters = {
   backgrounds: { disable: true },
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -51,10 +53,23 @@ const ThemeChange = () => {
 };
 
 const withContextDecorator: Decorator = (Story, context) => {
-  use(setupPromise);
+  const { data: store } = useSWR(
+    context.id,
+    async () => {
+      localStorage.clear();
+      const store = createStore();
+      _setCurrentStore(store);
+      await setup(store);
+      await bootstrapPluginSystem(store);
+      return store;
+    },
+    {
+      suspense: true,
+    }
+  );
   return (
     <ThemeProvider>
-      <AffineContext>
+      <AffineContext store={store}>
         <ThemeChange />
         <Story {...context} />
       </AffineContext>

apps/storybook/src/stories/core.stories.tsx

@@ -1,9 +1,7 @@
-import { pluginRegisterPromise } from '@affine/core/bootstrap/register-plugins';
 import { routes } from '@affine/core/router';
 import { assertExists } from '@blocksuite/global/utils';
-import type { Decorator, StoryFn } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
 import { userEvent, waitFor } from '@storybook/testing-library';
-import { use } from 'foxact/use';
 import { Outlet, useLocation } from 'react-router-dom';
 import {
   reactRouterOutlets,
@@ -11,11 +9,6 @@ import {
   withRouter,
 } from 'storybook-addon-react-router-v6';
 
-const withCleanLocalStorage: Decorator = (Story, context) => {
-  localStorage.clear();
-  return <Story {...context} />;
-};
-
 const FakeApp = () => {
   const location = useLocation();
   // fixme: `key` is a hack to force the storybook to re-render the outlet
@@ -30,10 +23,9 @@ export default {
 };
 
 export const Index: StoryFn = () => {
-  use(pluginRegisterPromise);
   return <FakeApp />;
 };
-Index.decorators = [withRouter, withCleanLocalStorage];
+Index.decorators = [withRouter];
 Index.parameters = {
   reactRouter: reactRouterParameters({
     routing: reactRouterOutlets(routes),
@@ -59,7 +51,7 @@ SettingPage.play = async ({ canvasElement }) => {
   ) as Element;
   await userEvent.click(settingModalBtn);
 };
-SettingPage.decorators = [withRouter, withCleanLocalStorage];
+SettingPage.decorators = [withRouter];
 SettingPage.parameters = {
   reactRouter: reactRouterParameters({
     routing: reactRouterOutlets(routes),
@@ -69,7 +61,7 @@ SettingPage.parameters = {
 export const NotFoundPage: StoryFn = () => {
   return <FakeApp />;
 };
-NotFoundPage.decorators = [withRouter, withCleanLocalStorage];
+NotFoundPage.decorators = [withRouter];
 NotFoundPage.parameters = {
   reactRouter: reactRouterParameters({
     routing: reactRouterOutlets(routes),
@@ -99,7 +91,7 @@ WorkspaceList.play = async ({ canvasElement }) => {
   ) as Element;
   await userEvent.click(currentWorkspace);
 };
-WorkspaceList.decorators = [withRouter, withCleanLocalStorage];
+WorkspaceList.decorators = [withRouter];
 WorkspaceList.parameters = {
   reactRouter: reactRouterParameters({
     routing: reactRouterOutlets(routes),