feat: 新增数据源

runtime/react/dev.vite.config.ts

@@ -31,6 +31,8 @@ export default defineConfig({
       { find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
       { find: /^@tmagic\/core/, replacement: path.join(__dirname, '../../packages/core/src/index.ts') },
       { find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
+      { find: /^@data-source/, replacement: path.join(__dirname, '../../packages/data-source/src') },
+      { find: /^@tmagic\/data-source/, replacement: path.join(__dirname, '../../packages/data-source/src/index.ts') },
     ],
   },
 

runtime/react/package.json

@@ -28,6 +28,7 @@
     "@tmagic/stage": "1.2.15",
     "@tmagic/utils": "1.2.15",
     "axios": "^0.25.0",
+    "lodash-es": "^4.17.21",
     "terser": "^5.14.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
@@ -38,9 +39,10 @@
   },
   "devDependencies": {
     "@babel/preset-env": "^7.21.4",
+    "@types/lodash-es": "^4.17.4",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
-    "@vitejs/plugin-legacy": "^4.0.2",
+    "@vitejs/plugin-legacy": "^4.0.3",
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "recast": "^0.20.4",
     "typescript": "^5.0.4",

runtime/react/page/App.tsx

@@ -16,22 +16,32 @@
  * limitations under the License.
  */
 
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
+import { cloneDeep } from 'lodash-es';
 
 import Core from '@tmagic/core';
-import type { MPage } from '@tmagic/schema';
+import type { MNode } from '@tmagic/schema';
 import { AppContent } from '@tmagic/ui-react';
+import { replaceChildNode } from '@tmagic/utils';
 
 function App() {
   const app = useContext<Core | undefined>(AppContent);
 
-  if (!app?.page?.data) {
-    return null;
-  }
+  if (!app?.page) return null;
+
+  const [config, setConfig] = useState(app.page.data);
+
+  app.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string) => {
+    nodes.forEach((node) => {
+      const newNode = app.compiledNode(node, app.dataSourceManager?.data || {}, sourceId);
+      replaceChildNode(newNode, [config]);
+      setConfig(cloneDeep(config));
+    });
+  });
 
   const MagicUiPage = app.resolveComponent('page');
 
-  return <MagicUiPage config={app?.page?.data as MPage}></MagicUiPage>;
+  return <MagicUiPage config={config}></MagicUiPage>;
 }
 
 export default App;

runtime/react/playground/main.tsx

@@ -18,11 +18,13 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { cloneDeep } from 'lodash-es';
 
 import Core from '@tmagic/core';
 import type { MApp } from '@tmagic/schema';
 import type { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
 import { AppContent } from '@tmagic/ui-react';
+import { replaceChildNode } from '@tmagic/utils';
 
 import components from '../.tmagic/comp-entry';
 import plugins from '../.tmagic/plugin-entry';
@@ -75,12 +77,10 @@ const operations = {
   },
 
   updateRootConfig(root: MApp) {
-    console.log('update root config', root);
     app?.setConfig(root);
   },
 
   updatePageId(id: string) {
-    console.log('update page id', id);
     curPageId = id;
     app?.setPage(curPageId);
     renderDom();
@@ -91,7 +91,6 @@ const operations = {
   },
 
   select(id: string) {
-    console.log('select config', id);
     const el = document.getElementById(id);
     if (el) return el;
     // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
@@ -103,22 +102,19 @@ const operations = {
   },
 
   add({ root }: UpdateData) {
-    console.log('add config', root);
     updateConfig(root);
   },
 
-  update({ root }: UpdateData) {
-    console.log('update config', root);
-    updateConfig(root);
+  update({ config, root }: UpdateData) {
+    replaceChildNode(app.compiledNode(config, app.dataSourceManager?.data || {}), root.items);
+    updateConfig(cloneDeep(root));
   },
 
   sortNode({ root }: SortEventData) {
-    console.log('sort config', root);
     root && updateConfig(root);
   },
 
   remove({ root }: RemoveData) {
-    console.log('remove config', root);
     updateConfig(root);
   },
 };