feat: support enable/disable plugin (#3605)

apps/core/src/components/affine/setting-modal/general-setting/plugins/index.tsx

@@ -1,55 +1,96 @@
+import { Switch } from '@affine/component';
 import { SettingHeader } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import type { CallbackMap } from '@affine/sdk/entry';
 import {
-  registeredPluginAtom,
-  settingItemsAtom,
-} from '@toeverything/infra/atom';
-import { useAtomValue } from 'jotai';
-import type { FC, ReactNode } from 'react';
-import { useRef } from 'react';
+  addCleanup,
+  enabledPluginAtom,
+  pluginPackageJson,
+  pluginSettingAtom,
+} from '@toeverything/infra/__internal__/plugin';
+import { loadedPluginNameAtom } from '@toeverything/infra/atom';
+import type { packageJsonOutputSchema } from '@toeverything/infra/type';
+import { useAtom, useAtomValue } from 'jotai/react';
+import { startTransition, useCallback, useMemo } from 'react';
+import type { z } from 'zod';
 
-import { pluginItem } from './style.css';
+import { pluginItemStyle } from './style.css';
 
-const PluginSettingWrapper: FC<{
-  id: string;
-  title?: ReactNode;
-}> = ({ title, id }) => {
-  const Setting = useAtomValue(settingItemsAtom)[id];
-  const disposeRef = useRef<(() => void) | null>(null);
+type PluginItemProps = {
+  json: z.infer<typeof packageJsonOutputSchema>;
+};
+
+type PluginSettingDetailProps = {
+  pluginName: string;
+  create: CallbackMap['setting'];
+};
+
+const PluginSettingDetail = ({
+  pluginName,
+  create,
+}: PluginSettingDetailProps) => {
   return (
-    <div>
-      {title ? <div className="title">{title}</div> : null}
-      <div
-        ref={ref => {
-          if (ref && Setting) {
-            setTimeout(() => {
-              disposeRef.current = Setting(ref);
-            });
-          } else if (ref === null) {
-            setTimeout(() => {
-              disposeRef.current?.();
-            });
+    <div
+      ref={useCallback(
+        (ref: HTMLDivElement | null) => {
+          if (ref) {
+            const cleanup = create(ref);
+            addCleanup(pluginName, cleanup);
           }
-        }}
-      />
+        },
+        [pluginName, create]
+      )}
+    />
+  );
+};
+
+const PluginItem = ({ json }: PluginItemProps) => {
+  const [plugins, setEnabledPlugins] = useAtom(enabledPluginAtom);
+  const checked = useMemo(
+    () => plugins.includes(json.name),
+    [json.name, plugins]
+  );
+  const create = useAtomValue(pluginSettingAtom)[json.name];
+  return (
+    <div className={pluginItemStyle} key={json.name}>
+      <div>
+        {json.name}
+        <Switch
+          checked={checked}
+          onChange={useCallback(
+            (checked: boolean) => {
+              startTransition(() => {
+                setEnabledPlugins(plugins => {
+                  if (checked) {
+                    return [...plugins, json.name];
+                  } else {
+                    return plugins.filter(plugin => plugin !== json.name);
+                  }
+                });
+              });
+            },
+            [json.name, setEnabledPlugins]
+          )}
+        />
+      </div>
+      <div>{json.description}</div>
+      {create && <PluginSettingDetail pluginName={json.name} create={create} />}
     </div>
   );
 };
 
 export const Plugins = () => {
   const t = useAFFiNEI18N();
-  const allowedPlugins = useAtomValue(registeredPluginAtom);
+  const loadedPlugins = useAtomValue(loadedPluginNameAtom);
   return (
     <>
       <SettingHeader
         title={'Plugins'}
-        subtitle={allowedPlugins.length === 0 && t['None yet']()}
+        subtitle={loadedPlugins.length === 0 && t['None yet']()}
         data-testid="plugins-title"
       />
-      {allowedPlugins.map(plugin => (
-        <div className={pluginItem} key={plugin}>
-          <PluginSettingWrapper key={plugin} id={plugin} title={plugin} />
-        </div>
+      {useAtomValue(pluginPackageJson).map(json => (
+        <PluginItem json={json} key={json.name} />
       ))}
     </>
   );

apps/core/src/components/affine/setting-modal/general-setting/plugins/style.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
-export const settingWrapper = style({
+export const settingWrapperStyle = style({
   flexGrow: 1,
   display: 'flex',
   justifyContent: 'flex-end',
@@ -8,7 +8,7 @@ export const settingWrapper = style({
   maxWidth: '250px',
 });
 
-export const pluginItem = style({
+export const pluginItemStyle = style({
   borderBottom: '1px solid var(--affine-border-color)',
   transition: '0.3s',
   padding: '24px 8px',