feat: 将ui-react中的组件独立成包

runtime/react/package.json

@@ -26,14 +26,12 @@
     "@tmagic/stage": "1.4.19",
     "@tmagic/utils": "1.4.19",
     "axios": "^0.25.0",
-    "lodash-es": "^4.17.21",
     "terser": "^5.31.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@tmagic/cli": "workspace:*",
-    "@types/lodash-es": "^4.17.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-legacy": "^5.4.0",

runtime/react/page/App.tsx

@@ -16,46 +16,19 @@
  * limitations under the License.
  */
 
-import React, { useContext, useState } from 'react';
-import { cloneDeep } from 'lodash-es';
+import React, { useContext } from 'react';
 
-import type Core from '@tmagic/core';
-import type { ChangeEvent } from '@tmagic/data-source';
-import type { MNode } from '@tmagic/schema';
-import { AppContent } from '@tmagic/ui-react';
-import { isPage, replaceChildNode } from '@tmagic/utils';
+import type TMagicApp from '@tmagic/core';
+import { AppContent, useDsl } from '@tmagic/react-runtime-help';
 
 function App() {
-  const app = useContext<Core | undefined>(AppContent);
+  const app = useContext<TMagicApp | undefined>(AppContent);
 
-  if (!app?.page) return null;
+  const { pageConfig } = useDsl(app);
 
-  const [config, setConfig] = useState(app.page.data);
+  const MagicUiPage = app?.resolveComponent('page');
 
-  app.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, event: ChangeEvent) => {
-    let pageConfig = config;
-    nodes.forEach((node) => {
-      if (isPage(node)) {
-        pageConfig = node;
-      } else {
-        replaceChildNode(node, [pageConfig]);
-      }
-    });
-
-    setConfig(cloneDeep(pageConfig));
-
-    setTimeout(() => {
-      app.emit('replaced-node', {
-        ...event,
-        nodes,
-        sourceId,
-      });
-    }, 0);
-  });
-
-  const MagicUiPage = app.resolveComponent('page');
-
-  return <MagicUiPage config={config}></MagicUiPage>;
+  return <MagicUiPage config={pageConfig}></MagicUiPage>;
 }
 
 export default App;

runtime/react/page/main.tsx

@@ -20,8 +20,8 @@ import { createRoot } from 'react-dom/client';
 
 import Core from '@tmagic/core';
 import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
+import { AppContent } from '@tmagic/react-runtime-help';
 import type { MApp } from '@tmagic/schema';
-import { AppContent } from '@tmagic/ui-react';
 import { getUrlParam } from '@tmagic/utils';
 
 import components from '../.tmagic/comp-entry';

runtime/react/playground/App.tsx

@@ -19,8 +19,8 @@
 import React, { useContext } from 'react';
 
 import type Core from '@tmagic/core';
+import { AppContent } from '@tmagic/react-runtime-help';
 import type { MPage } from '@tmagic/schema';
-import { AppContent } from '@tmagic/ui-react';
 
 function App() {
   const app = useContext<Core | undefined>(AppContent);

runtime/react/playground/main.tsx

@@ -18,14 +18,10 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { cloneDeep } from 'lodash-es';
 
 import Core from '@tmagic/core';
 import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
-import type { MApp } from '@tmagic/schema';
-import type { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
-import { AppContent } from '@tmagic/ui-react';
-import { getElById, replaceChildNode } from '@tmagic/utils';
+import { AppContent, useEditorDsl } from '@tmagic/react-runtime-help';
 
 import components from '../.tmagic/comp-entry';
 import dataSources from '../.tmagic/datasource-entry';
@@ -58,15 +54,9 @@ if (app.env.isWeb) {
 
 window.appInstance = app;
 
-let curPageId = '';
-
-const updateConfig = (root: MApp) => {
-  app?.setConfig(root, curPageId);
-  renderDom();
-};
+const root = createRoot(document.getElementById('root')!);
 
 const renderDom = () => {
-  const root = createRoot(document.getElementById('root')!);
   root.render(
     <React.StrictMode>
       <AppContent.Provider value={app}>
@@ -81,60 +71,10 @@ const renderDom = () => {
   });
 };
 
-const operations = {
-  getApp() {
-    return app;
-  },
-
-  updateRootConfig(root: MApp) {
-    app?.setConfig(root);
-  },
-
-  updatePageId(id: string) {
-    curPageId = id;
-    app?.setPage(curPageId);
-    renderDom();
-  },
-
-  getSnapElementQuerySelector() {
-    return '[class*=magic-ui][id]';
-  },
-
-  select(id: string) {
-    const el = getElById()(id);
-    if (el) return el;
-    // 未在当前文档下找到目标元素，可能是还未渲染，等待渲染完成后再尝试获取
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(getElById()(document, id));
-      }, 0);
-    });
-  },
-
-  add({ root }: UpdateData) {
-    updateConfig(root);
-  },
-
-  update({ config, root, parentId }: UpdateData) {
-    const newNode = app.dataSourceManager?.compiledNode(config, undefined, true) || config;
-    replaceChildNode(newNode, [root], parentId);
-    updateConfig(cloneDeep(root));
-  },
-
-  sortNode({ root }: SortEventData) {
-    root && updateConfig(root);
-  },
-
-  remove({ root }: RemoveData) {
-    updateConfig(root);
-  },
-};
-
 Object.keys(components).forEach((type: string) => app.registerComponent(type, components[type]));
 
 Object.values(plugins).forEach((plugin: any) => {
   plugin.install({ app });
 });
 
-// @ts-ignore
-window.magic?.onRuntimeReady(operations);
+useEditorDsl(app, renderDom);

runtime/react/tsconfig.json

@@ -1,24 +1,9 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": false,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
+    "baseUrl": "./",
     "jsx": "react",
-    "baseUrl": ".",
-    "paths": {
-      // 内部模块都指向 src/index.ts, 会有更好的代码跳转体验.
-      "@tmagic/*": ["../packages/*"],
-    },
+    "forceConsistentCasingInFileNames": true,
+    "types": ["node"],
   },
-  "include": ["./page", "./playground"]
 }