✨ feat: Awareness support user config，remove large dependency & unnecessary components (#157)

* ♻️ refactor: DataPreviewer

* ♻️ refactor: remove unnecessary large dependency

* 📸 chore: update snapshot

* ⚰️ chore: remove datafill

* ✨ feat: Awareness support user config

* 📸 chore: update snapshot

* 🐛 fix: ts error

* 🐛 fix: use state updater

fix

* 🐛 fix: DataPreviewer

* ♻️ refactor: 删除暂时不需要的组件

* ♻️ refactor: 迁移 TipGuide

* ➖ chore: remove prettier to dev dependencies

* 📸 chore: update snapshot

* 📝 docs: 调整文档

* ✏️ fix: ahooks version

Author: rdmclin2

docs/pro-editor/demos/controlledPresence.tsx

@@ -3,7 +3,7 @@
  */
 import { demoAssets } from '@/ComponentAsset/demoAssets';
 import { AwarenessEditor, ComponentAsset, ProBuilder } from '@/index';
-import { JsonViewer } from '@textea/json-viewer';
+import { Highlight } from '@ant-design/pro-editor';
 import { useLocalStorageState } from 'ahooks';
 import { Flexbox } from 'react-layout-kit';
 
@@ -22,7 +22,7 @@ export default () => {
       />
       <Flexbox>
         当前视图状态：
-        <JsonViewer value={presence} />
+        <Highlight>{JSON.stringify(presence, null, 2)}</Highlight>
       </Flexbox>
     </Flexbox>
   );

docs/pro-editor/demos/realtimeCollaboration/SessionForm.tsx

@@ -0,0 +1,54 @@
+import { ColorPicker, Form, Input, Modal } from 'antd';
+import React from 'react';
+
+interface Values {
+  name: string;
+  color: string;
+}
+
+interface SessionFormProps {
+  open: boolean;
+  onCreate: (values: Values) => void;
+  onCancel: () => void;
+}
+
+export const SessionForm: React.FC<SessionFormProps> = ({ open, onCreate, onCancel }) => {
+  const [form] = Form.useForm();
+  return (
+    <Modal
+      open={open}
+      title="Join Session"
+      okText="Join"
+      onCancel={onCancel}
+      onOk={() => {
+        form
+          .validateFields()
+          .then(({ color, name }) => {
+            form.resetFields();
+            const colorHex = typeof color === 'string' ? color : color?.toHexString();
+            onCreate({ color: colorHex, name });
+          })
+          .catch((info) => {
+            console.log('Validate Failed:', info);
+          });
+      }}
+    >
+      <Form form={form} layout="vertical" name="form_in_modal" initialValues={{ color: '#1677FF' }}>
+        <Form.Item
+          name="name"
+          label="Name"
+          rules={[{ required: true, message: 'Please input your name' }]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="color"
+          label="Color"
+          rules={[{ required: true, message: 'Please select your color' }]}
+        >
+          <ColorPicker format="hex" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};

docs/pro-editor/demos/realtimeCollaboration/demo.tsx

@@ -1,9 +1,13 @@
+/**
+ * title: 实时协同
+ * description: 打开多个窗口，点击 "Join" 加入协作
+ */
 import { Awareness } from '@ant-design/pro-editor';
 import { Button, Divider, Input } from 'antd';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { WebrtcProvider } from 'y-webrtc';
-
-import { createStore, doc, Provider, useStore } from './store';
+import { SessionForm } from './SessionForm';
+import { Provider, createStore, doc, useStore } from './store';
 
 const App = memo(() => {
   const store = useStore((state) => ({
@@ -30,11 +34,38 @@ const App = memo(() => {
   );
 });
 
-const Container = () => (
-  <Provider createStore={createStore}>
-    <Awareness provider={new WebrtcProvider('test-room', doc)} />
-    <App />
-  </Provider>
-);
+const Container = () => {
+  const [user, setUser] = useState(null);
+  const [open, setOpen] = useState(false);
+
+  const onCreate = (values) => {
+    setUser(values);
+    setOpen(false);
+  };
+
+  return (
+    <Provider createStore={createStore}>
+      {user ? null : (
+        <Button
+          type="primary"
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
+          Join
+        </Button>
+      )}
+      <SessionForm
+        open={open}
+        onCreate={onCreate}
+        onCancel={() => {
+          setOpen(false);
+        }}
+      />
+      {user ? <Awareness provider={new WebrtcProvider('test-room', doc)} user={user} /> : null}
+      <App />
+    </Provider>
+  );
+};
 
 export default memo(Container);

package.json

@@ -60,19 +60,15 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@antv/dw-random": "^1.1.7",
-    "@babel/runtime": "^7.23.6",
+    "@babel/runtime": "^7.23.8",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^7.6.0",
     "@floating-ui/react": "^0.24.8",
-    "@mui/material": "^5.15.1",
-    "@textea/json-viewer": "^3.2.3",
-    "ahooks": "^3.7.8",
-    "classnames": "^2.3.2",
+    "ahooks": "3.7.8",
+    "classnames": "^2.5.1",
     "color": "^4.2.3",
     "copy-to-clipboard": "^3.3.3",
     "diff": "^5.1.0",
@@ -91,54 +87,50 @@
     "lodash.union": "^4.6.0",
     "lodash.unionby": "^4.8.0",
     "lodash.uniq": "^4.5.0",
-    "mockjs": "^1.1.0",
     "nanoid": "^5.0.4",
     "polished": "^4.2.2",
-    "prettier": "^2.8.8",
     "rc-util": "^5.38.1",
     "re-resizable": "^6.9.11",
-    "react-colorful": "^5.6.1",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-hotkeys-hook": "^4.4.1",
+    "react-hotkeys-hook": "^4.4.4",
     "react-layout-kit": "^1.7.4",
     "react-markdown": "^8.0.7",
     "react-rnd": "^10.4.1",
-    "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.10",
-    "reactflow": "^11.10.1",
+    "reactflow": "^11.10.2",
     "rehype-katex": "^6.0.3",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "rxjs": "^7.8.1",
     "shikiji": "^0.6.13",
     "type-fest": "^3.13.1",
     "use-merge-value": "^1.2.0",
-    "yjs": "^13.6.10",
-    "zustand": "^4.4.7",
+    "yjs": "^13.6.11",
+    "zustand": "^4.5.0",
     "zustand-middleware-yjs": "^1.3.1",
-    "zustand-utils": "^1.3.1"
+    "zustand-utils": "^1.3.2"
   },
   "devDependencies": {
     "@ant-design/leva-panel": "^1.0.0",
     "@emotion/jest": "^11.11.0",
     "@lobehub/i18n-cli": "^1.15.3",
-    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/color": "^3.0.6",
     "@types/json-schema": "^7.0.15",
-    "@types/react": "^18.2.45",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/react-window": "^1.8.8",
-    "@umijs/lint": "^4.0.90",
+    "@umijs/lint": "^4.1.1",
     "@vitest/coverage-v8": "latest",
-    "antd": "^5.12.5",
+    "antd": "~5.12.0",
     "antd-style": "^3.6.1",
     "babel-plugin-antd-style": "^1.0.4",
     "commitlint": "^17.8.1",
     "commitlint-config-gitmoji": "^2.3.1",
     "conventional-changelog-gitmoji-config": "^1.5.2",
-    "dumi": "^2.2.16",
+    "dumi": "^2.2.17",
     "dumi-theme-antd-style": "latest",
     "eslint": "^8.56.0",
     "father": "^4.3.8",
@@ -147,11 +139,12 @@
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "lint-staged": "^13.3.0",
+    "prettier": "^2.8.8",
     "prettier-plugin-organize-imports": "^3.2.4",
-    "prettier-plugin-packagejson": "^2.4.7",
+    "prettier-plugin-packagejson": "^2.4.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rehype-raw": "^6.0.0",
+    "rehype-raw": "^6.1.1",
     "rxjs-spy": "^8.0.2",
     "semantic-release": "^21.1.2",
     "semantic-release-config-gitmoji": "^1.5.3",
@@ -160,8 +153,8 @@
     "vitest": "latest",
     "wait-on": "^6.0.1",
     "y-protocols": "^1.0.6",
-    "y-webrtc": "^10.2.6",
-    "y-websocket": "^1.5.1",
+    "y-webrtc": "^10.3.0",
+    "y-websocket": "^1.5.3",
     "zundo": "beta"
   },
   "peerDependencies": {

src/Awareness/Avatars/index.tsx

@@ -1,7 +1,6 @@
 import { Avatar as A } from 'antd';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
-
 import { useStore } from '../store';
 import Avatar from './Avatar';
 

src/Awareness/Awareness.tsx

@@ -1,10 +1,8 @@
 import { memo } from 'react';
 import type { WebrtcProvider } from 'y-webrtc';
-
 import Avatars from './Avatars';
 import Cursors from './Cursors';
-
-import { createStore, Provider } from './store';
+import { createStore, Provider, User } from './store';
 
 export interface AwarenessProps {
   /**
@@ -19,10 +17,14 @@ export interface AwarenessProps {
    * 是否显示用户游标
    */
   cursors?: boolean;
+  /**
+   * 用户名和颜色设置
+   */
+  user: Pick<User, 'color' | 'name'>;
 }
 
-const Awareness = memo<AwarenessProps>(({ provider, avatars = true, cursors = true }) => (
-  <Provider createStore={() => createStore(provider)}>
+const Awareness = memo<AwarenessProps>(({ provider, avatars = true, cursors = true, user }) => (
+  <Provider createStore={() => createStore(provider, user)}>
     {cursors && <Cursors />}
     {avatars && <Avatars />}
   </Provider>

src/Awareness/Cursors/index.tsx

@@ -8,7 +8,7 @@ import { useStore } from '../store';
 
 const Cursors = memo(() => {
   const awarenessStates = useStore<AwarenessState[]>(
-    (s) => s.awarenessStates?.filter((a) => a.active && a.user.name !== s.currentUser),
+    (s) => s.awarenessStates?.filter((a) => a.active && a.user.id !== s.currentUser.id),
     isEqual,
   );
 

src/Awareness/store.ts

@@ -1,14 +1,13 @@
 // FIXME：这里理论上不应该使用 faker 的，后续需要重构优化掉
-import { faker } from '@faker-js/faker';
 import isEqual from 'fast-deep-equal';
+import { nanoid } from 'nanoid';
 import { useEffect } from 'react';
 import type { Position } from 'react-rnd';
 import type { Awareness } from 'y-protocols/awareness';
 import type { WebrtcProvider } from 'y-webrtc';
 import type { StoreApi } from 'zustand';
 import { createContext } from 'zustand-utils';
 import { createWithEqualityFn } from 'zustand/traditional';
-
 import { useAwarenessEvent } from './event';
 
 export interface User {
@@ -26,19 +25,22 @@ export interface AwarenessState {
 interface ProviderStore {
   provider: WebrtcProvider;
   awareness?: Awareness;
-  currentUser: string;
+  currentUser: User;
   awarenessStates: AwarenessState[];
   followUser?: string;
 
   setFollowUser: (id: string) => void;
 }
 
-export const createStore = (provider: WebrtcProvider) => {
+export const createStore = (provider: WebrtcProvider, user: Pick<User, 'color' | 'name'>) => {
   const useStore = createWithEqualityFn<ProviderStore>((set) => {
     return {
       provider,
       awareness: provider.awareness,
-      currentUser: faker.name.fullName(),
+      currentUser: {
+        id: nanoid(),
+        ...user,
+      },
       awarenessStates: [],
 
       setFollowUser: (followUser) => {
@@ -68,11 +70,7 @@ export const createStore = (provider: WebrtcProvider) => {
     });
 
     // 再初始化一轮用户
-    awareness.setLocalStateField('user', {
-      id: useStore.getState().currentUser,
-      name: useStore.getState().currentUser,
-      color: faker.color.rgb(),
-    });
+    awareness.setLocalStateField('user', useStore.getState().currentUser);
 
     awareness.setLocalStateField('active', true);
     // eslint-disable-next-line react-hooks/exhaustive-deps