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

.eslintrc.cjs

@@ -33,6 +33,7 @@ module.exports = {
     'vue/no-mutating-props': 'off',
     'vue/multi-word-component-names': 'off',
     'no-param-reassign': 'off',
+    '@typescript-eslint/naming-convention': 'off',
     '@typescript-eslint/no-require-imports': 'off',
     "@typescript-eslint/no-misused-promises": [
       "error",

packages/ui-react/README.md

@@ -0,0 +1 @@
+# [文档](https://tencent.github.io/tmagic-editor/docs/)

packages/ui-react/package.json

@@ -2,7 +2,8 @@
   "name": "@tmagic/ui-react",
   "version": "1.4.19",
   "type": "module",
-  "main": "src/index.ts",
+  "main": "dist/tmagic-ui-react.js",
+  "types": "types/index.d.ts",
   "files": [
     "src"
   ],
@@ -14,26 +15,30 @@
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
   "scripts": {
-    "react:build": "tsc && vite build"
+    "build": "vite build"
   },
   "dependencies": {
-    "qrcode": "^1.5.0"
+    "@tmagic/react-button": "workspace:*",
-  },
+    "@tmagic/react-container": "workspace:*",
-  "devDependencies": {
+    "@tmagic/react-img": "workspace:*",
-    "@types/react": "^18.3.3",
+    "@tmagic/react-iterator-container": "workspace:*",
-    "@types/react-dom": "^18.3.0"
+    "@tmagic/react-overlay": "workspace:*",
+    "@tmagic/react-page": "workspace:*",
+    "@tmagic/react-page-fragment": "workspace:*",
+    "@tmagic/react-page-fragment-container": "workspace:*",
+    "@tmagic/react-qrcode": "workspace:*",
+    "@tmagic/react-text": "workspace:*"
   },
   "peerDependencies": {
-    "@tmagic/core": "workspace:*",
-    "@tmagic/schema": "workspace:*",
-    "@tmagic/utils": "workspace:*",
-    "react": ">=18.3.1",
-    "react-dom": ">=18.3.1",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
     }
+  },
+  "devDependencies": {
+    "rimraf": "^3.0.2",
+    "vite": "^5.3.5"
   }
 }

packages/ui-react/src/container/Container.tsx

@@ -1,67 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-import type { MComponent, MContainer } from '@tmagic/schema';
-
-import useApp from '../useApp';
-
-interface ContainerProps {
-  config: MContainer;
-  className: string;
-  style: Record<string, any>;
-  id: string;
-}
-
-const Container: React.FC<ContainerProps> = ({ config, id }) => {
-  const { app } = useApp({ config });
-
-  if (!app) return null;
-
-  return (
-    <div
-      data-tmagic-id={`${id || config.id || ''}`}
-      className={`magic-ui-container magic-layout-${config.layout}${config.className ? ` ${config.className}` : ''}`}
-      style={app.transformStyle(config.style || {})}
-    >
-      {config.items?.map((item: MComponent | MContainer) => {
-        const MagicUiComp = app.resolveComponent(item.type || 'container');
-
-        if (!MagicUiComp) return null;
-
-        if (item.visible === false) return null;
-        if (item.condResult === false) return null;
-
-        return (
-          <MagicUiComp
-            data-tmagic-id={`${item.id || ''}`}
-            key={item.id}
-            config={item}
-            className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
-            style={app.transformStyle(item.style || {})}
-          ></MagicUiComp>
-        );
-      })}
-    </div>
-  );
-};
-
-Container.displayName = 'magic-ui-container';
-
-export default Container;

packages/ui-react/src/index.ts

@@ -16,31 +16,38 @@
  * limitations under the License.
  */
 
-import Button from './button';
+import Button from '@tmagic/react-button';
-import Container from './container';
+import Container from '@tmagic/react-container';
-import Img from './img';
+import Img from '@tmagic/react-img';
-import IteratorContainer from './iterator-container';
+import IteratorContainer from '@tmagic/react-iterator-container';
-import Overlay from './overlay';
+import Overlay from '@tmagic/react-overlay';
-import Page from './page';
+import Page from '@tmagic/react-page';
-import pageFragment from './page-fragment';
+import PageFragment from '@tmagic/react-page-fragment';
-import pageFragmentContainer from './page-fragment-container';
+import PageFragmentContainer from '@tmagic/react-page-fragment-container';
-import Qrcode from './qrcode';
+import QRcode from '@tmagic/react-qrcode';
-import Text from './text';
+import Text from '@tmagic/react-text';
-export { default as AppContent } from './AppContent';
-export { default as useApp } from './useApp';
 
-export const MagicUiPage = Page;
+export { default as TMagicUiButton } from '@tmagic/react-button';
+export { default as TMagicUiContainer } from '@tmagic/react-container';
+export { default as TMagicUiImg } from '@tmagic/react-img';
+export { default as TMagicUiIteratorContainer } from '@tmagic/react-iterator-container';
+export { default as TMagicUiOverlay } from '@tmagic/react-overlay';
+export { default as TMagicUiPage } from '@tmagic/react-page';
+export { default as TMagicUiPageFragment } from '@tmagic/react-page-fragment';
+export { default as TMagicUiPageFragmentContainer } from '@tmagic/react-page-fragment-container';
+export { default as TMagicUiQRcode } from '@tmagic/react-qrcode';
+export { default as TMagicUiText } from '@tmagic/react-text';
 
 const ui: Record<string, any> = {
   page: Page,
   container: Container,
   button: Button,
-  img: Img,
   text: Text,
-  qrcode: Qrcode,
+  img: Img,
+  qrcode: QRcode,
   overlay: Overlay,
-  'page-fragment': pageFragment,
+  'page-fragment-container': PageFragmentContainer,
-  'page-fragment-container': pageFragmentContainer,
+  'page-fragment': PageFragment,
   'iterator-container': IteratorContainer,
 };
 

packages/ui-react/src/iterator-container/index.ts

@@ -1,24 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import IteratorContainer from './src/IteratorContainer';
-
-export { default as config } from './src/formConfig';
-export { default as value } from './src/initValue';
-
-export default IteratorContainer;

packages/ui-react/src/iterator-container/src/IteratorContainer.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-
-import type { MContainer } from '@tmagic/schema';
-
-import useApp from '../../useApp';
-
-interface IteratorContainerProps extends MContainer {
-  config: MContainer & {
-    type: 'iterator-container';
-    iteratorData: any[];
-    dsField: string[];
-    itemConfig: {
-      layout: string;
-      style: Record<string, string | number>;
-    };
-  };
-  className: string;
-  style: Record<string, any>;
-  id: string;
-}
-
-const IteratorContainer: React.FC<IteratorContainerProps> = ({ config, id }) => {
-  const { app } = useApp({ config });
-
-  let { iteratorData = [] } = config;
-
-  if (!Array.isArray(iteratorData)) {
-    iteratorData = [];
-  }
-
-  if (app?.platform === 'editor' && !iteratorData.length) {
-    iteratorData.push({});
-  }
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const MagicUiComp = app?.resolveComponent('container');
-  return (
-    <div
-      data-tmagic-id={`${id || config.id || ''}`}
-      className="magic-ui-iterator-container"
-      style={app?.transformStyle(config.style || {})}
-    >
-      {iteratorData.map((itemData, index) => {
-        const itemConfig = {
-          items: app?.dataSourceManager?.compliedIteratorItems(itemData, config.items, config.dsField) ?? config.items,
-          id: '',
-          style: {
-            ...config.itemConfig.style,
-            position: 'relative',
-            left: 0,
-            top: 0,
-          },
-        };
-        return <MagicUiComp config={itemConfig} key={index}></MagicUiComp>;
-      })}
-    </div>
-  );
-};
-
-IteratorContainer.displayName = 'magic-ui-iterator-container';
-
-export default IteratorContainer;

packages/ui-react/src/overlay/Overlay.tsx

@@ -1,84 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { useContext, useState } from 'react';
-
-import Core from '@tmagic/core';
-import type { MComponent, MNode } from '@tmagic/schema';
-
-import AppContent from '../AppContent';
-import useApp from '../useApp';
-
-interface OverlayProps {
-  config: MComponent;
-}
-
-const Overlay: React.FC<OverlayProps> = ({ config }) => {
-  const [visible, setVisible] = useState(false);
-
-  const app: Core | undefined = useContext(AppContent);
-  const node = app?.page?.getNode(config.id);
-
-  if (!app) return null;
-
-  const openOverlay = () => {
-    setVisible(true);
-    if (app) {
-      app.emit('overlay:open', node);
-    }
-  };
-
-  const closeOverlay = () => {
-    setVisible(false);
-    if (app) {
-      app.emit('overlay:close', node);
-    }
-  };
-
-  useApp({
-    config,
-    methods: {
-      openOverlay,
-      closeOverlay,
-    },
-  });
-
-  app?.page?.on('editor:select', (info: any, path: MNode[]) => {
-    if (path.find((node: MNode) => node.id === config.id)) {
-      openOverlay();
-    } else {
-      closeOverlay();
-    }
-  });
-
-  if (!visible) return null;
-
-  const MagicUiComp = app.resolveComponent('container');
-
-  return (
-    <MagicUiComp
-      data-tmagic-id={config.id}
-      className="magic-ui-overlay"
-      config={{ style: config.style, items: config.items }}
-    ></MagicUiComp>
-  );
-};
-
-Overlay.displayName = 'magic-ui-overlay';
-
-export default Overlay;

packages/ui-react/src/page-fragment-container/index.ts

@@ -1,24 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import PageFragmentContainer from './src/PageFragmentContainer';
-
-export { default as config } from './src/formConfig';
-export { default as value } from './src/initValue';
-
-export default PageFragmentContainer;

packages/ui-react/src/page-fragment/index.ts

@@ -1,24 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import PageFragment from './src/PageFragment';
-
-export { default as config } from './src/formConfig';
-export { default as value } from './src/initValue';
-
-export default PageFragment;

packages/ui-react/src/page-fragment/src/PageFragment.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-
-import type { MComponent, MContainer, MPageFragment } from '@tmagic/schema';
-
-import useApp from '../../useApp';
-interface PageFragmentProps {
-  config: MPageFragment;
-}
-
-const PageFragment: React.FC<PageFragmentProps> = ({ config }) => {
-  const { app } = useApp({
-    config,
-    methods: {},
-  });
-
-  if (!app) return null;
-
-  return (
-    <div
-      data-tmagic-id={`${config.id || ''}`}
-      className={`magic-ui-page-fragment magic-ui-container magic-layout-${config.layout}${
-        config.className ? ` ${config.className}` : ''
-      }`}
-      style={app.transformStyle(config.style || {})}
-    >
-      {config.items?.map((item: MComponent | MContainer) => {
-        const MagicUiComp = app.resolveComponent(item.type || 'container');
-
-        if (!MagicUiComp) return null;
-
-        if (item.visible === false) return null;
-        if (item.condResult === false) return null;
-
-        return (
-          <MagicUiComp
-            data-tmagic-id={`${item.id || ''}`}
-            key={item.id}
-            config={item}
-            className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
-            style={app.transformStyle(item.style || {})}
-          ></MagicUiComp>
-        );
-      })}
-    </div>
-  );
-};
-
-PageFragment.displayName = 'magic-ui-page-fragment';
-
-export default PageFragment;

packages/ui-react/src/page/Page.tsx

@@ -1,71 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-import type { MComponent, MContainer, MPage } from '@tmagic/schema';
-
-import useApp from '../useApp';
-
-interface PageProps {
-  config: MPage;
-}
-
-const Page: React.FC<PageProps> = ({ config }) => {
-  const { app } = useApp({
-    config,
-    methods: {
-      refresh: () => window.location.reload(),
-    },
-  });
-
-  if (!app) return null;
-
-  return (
-    <div
-      id={`${config.id || ''}`}
-      className={`magic-ui-page magic-ui-container magic-layout-${config.layout}${
-        config.className ? ` ${config.className}` : ''
-      }`}
-      style={app.transformStyle(config.style || {})}
-    >
-      {config.items?.map((item: MComponent | MContainer) => {
-        const MagicUiComp = app.resolveComponent(item.type || 'container');
-
-        if (!MagicUiComp) return null;
-
-        if (item.visible === false) return null;
-        if (item.condResult === false) return null;
-
-        return (
-          <MagicUiComp
-            data-tmagic-id={`${item.id || ''}`}
-            key={item.id}
-            config={item}
-            className={`magic-ui-component${config.className ? ` ${config.className}` : ''}`}
-            style={app.transformStyle(item.style || {})}
-          ></MagicUiComp>
-        );
-      })}
-    </div>
-  );
-};
-
-Page.displayName = 'magic-ui-page';
-
-export default Page;

packages/ui-react/src/useApp.ts

@@ -1,58 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { useContext, useEffect, useState } from 'react';
-
-import Core from '@tmagic/core';
-import type { MComponent } from '@tmagic/schema';
-
-import AppContent from './AppContent';
-
-interface UseAppOptions {
-  config: MComponent;
-  methods?: {
-    [key: string]: Function;
-  };
-}
-
-export default ({ config, methods }: UseAppOptions) => {
-  const app: Core | undefined = useContext(AppContent);
-  const node = app?.page?.getNode(config.id);
-  const [created, setCreated] = useState(false);
-
-  const emitData = {
-    config,
-    ...methods,
-  };
-
-  if (!created) {
-    // 只需要触发一次 created
-    setCreated(true);
-    node?.emit('created', emitData);
-  }
-
-  useEffect(() => {
-    node?.emit('mounted', emitData);
-
-    return () => {
-      node?.emit('destroy', emitData);
-    };
-  }, []);
-
-  return { app };
-};

packages/ui-react/vite.config.ts

@@ -16,11 +16,31 @@
  * limitations under the License.
  */
 
-export default (ref: any) => ({
+import { defineConfig } from 'vite';
-  show: () => {
+
-    ref.style.display = 'initial';
+import pkg from './package.json';
-  },
+
-  hide: () => {
+export default defineConfig({
-    ref.style.display = 'none';
+  build: {
+    cssCodeSplit: false,
+    sourcemap: false,
+    minify: false,
+    target: 'esnext',
+
+    lib: {
+      entry: 'src/index.ts',
+      name: 'TMagicUiReact',
+      fileName: 'tmagic-ui-react',
+    },
+
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      external(id: string) {
+        return Object.keys({
+          ...pkg.dependencies,
+          ...pkg.peerDependencies,
+        }).some((k) => new RegExp(`^${k}`).test(id));
+      },
+    },
   },
 });

pnpm-lock.yaml

@@ -678,34 +678,46 @@ importers:
 
   packages/ui-react:
     dependencies:
-      '@tmagic/core':
+      '@tmagic/react-button':
         specifier: workspace:*
-        version: link:../core
+        version: link:../../react-components/button
-      '@tmagic/schema':
+      '@tmagic/react-container':
         specifier: workspace:*
-        version: link:../schema
+        version: link:../../react-components/container
-      '@tmagic/utils':
+      '@tmagic/react-img':
         specifier: workspace:*
-        version: link:../utils
+        version: link:../../react-components/img
-      qrcode:
+      '@tmagic/react-iterator-container':
-        specifier: ^1.5.0
+        specifier: workspace:*
-        version: 1.5.3
+        version: link:../../react-components/iterator-container
-      react:
+      '@tmagic/react-overlay':
-        specifier: '>=18.3.1'
+        specifier: workspace:*
-        version: 18.3.1
+        version: link:../../react-components/overlay
-      react-dom:
+      '@tmagic/react-page':
-        specifier: '>=18.3.1'
+        specifier: workspace:*
-        version: 18.3.1(react@18.3.1)
+        version: link:../../react-components/page
+      '@tmagic/react-page-fragment':
+        specifier: workspace:*
+        version: link:../../react-components/page-fragment
+      '@tmagic/react-page-fragment-container':
+        specifier: workspace:*
+        version: link:../../react-components/page-fragment-container
+      '@tmagic/react-qrcode':
+        specifier: workspace:*
+        version: link:../../react-components/qrcode
+      '@tmagic/react-text':
+        specifier: workspace:*
+        version: link:../../react-components/text
       typescript:
         specifier: '*'
         version: 5.5.4
     devDependencies:
-      '@types/react':
+      rimraf:
-        specifier: ^18.3.3
+        specifier: ^3.0.2
-        version: 18.3.3
+        version: 3.0.2
-      '@types/react-dom':
+      vite:
-        specifier: ^18.3.0
+        specifier: ^5.3.5
-        version: 18.3.0
+        version: 5.3.5(@types/node@18.19.42)(sass@1.77.8)(terser@5.31.3)
 
   packages/utils:
     dependencies:
@@ -826,6 +838,274 @@ importers:
         specifier: ^5.3.5
         version: 5.3.5(@types/node@18.19.42)(sass@1.77.8)(terser@5.31.3)
 
+  react-components/button:
+    dependencies:
+      '@tmagic/react-runtime-help':
+        specifier: workspace:*
+        version: link:../../runtime/react-runtime-help
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      react:
+        specifier: '>=18.3.1'
+        version: 18.3.1
+      react-dom:
+        specifier: '>=18.3.1'
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: '*'
+        version: 5.5.4
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+
+  react-components/container:
+    dependencies:
+      '@tmagic/react-runtime-help':
+        specifier: workspace:*
+        version: link:../../runtime/react-runtime-help
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      '@tmagic/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      react:
+        specifier: '>=18.3.1'
+        version: 18.3.1
+      react-dom:
+        specifier: '>=18.3.1'
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: '*'
+        version: 5.5.4
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+
+  react-components/img:
+    dependencies:
+      '@tmagic/react-runtime-help':
+        specifier: workspace:*
+        version: link:../../runtime/react-runtime-help
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      react:
+        specifier: '>=18.3.1'
+        version: 18.3.1
+      react-dom:
+        specifier: '>=18.3.1'
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: '*'
+        version: 5.5.4
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+
+  react-components/iterator-container:
+    dependencies:
+      '@tmagic/react-runtime-help':
+        specifier: workspace:*
+        version: link:../../runtime/react-runtime-help
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      '@tmagic/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      react:
+        specifier: '>=18.3.1'
+        version: 18.3.1
+      react-dom:
+        specifier: '>=18.3.1'
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: '*'
+        version: 5.5.4
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+
+  react-components/overlay:
+    dependencies:
+      '@tmagic/react-runtime-help':
+        specifier: workspace:*
+        version: link:../../runtime/react-runtime-help
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      react:
+        specifier: '>=18.3.1'
+        version: 18.3.1
+      react-dom:
+        specifier: '>=18.3.1'
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: '*'
+        version: 5.5.4
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+
+  react-components/page:
+    dependencies:
+      '@tmagic/react-runtime-help':
+        specifier: workspace:*
+        version: link:../../runtime/react-runtime-help
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      '@tmagic/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      react:
+        specifier: '>=18.3.1'
+        version: 18.3.1
+      react-dom:
+        specifier: '>=18.3.1'
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: '*'
+        version: 5.5.4
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+
+  react-components/page-fragment:
+    dependencies:
+      '@tmagic/react-runtime-help':
+        specifier: workspace:*
+        version: link:../../runtime/react-runtime-help
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      '@tmagic/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      react:
+        specifier: '>=18.3.1'
+        version: 18.3.1
+      react-dom:
+        specifier: '>=18.3.1'
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: '*'
+        version: 5.5.4
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+
+  react-components/page-fragment-container:
+    dependencies:
+      '@tmagic/react-runtime-help':
+        specifier: workspace:*
+        version: link:../../runtime/react-runtime-help
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      react:
+        specifier: '>=18.3.1'
+        version: 18.3.1
+      react-dom:
+        specifier: '>=18.3.1'
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: '*'
+        version: 5.5.4
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+
+  react-components/qrcode:
+    dependencies:
+      '@tmagic/react-runtime-help':
+        specifier: workspace:*
+        version: link:../../runtime/react-runtime-help
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      qrcode:
+        specifier: ^1.5.0
+        version: 1.5.3
+      react:
+        specifier: '>=18.3.1'
+        version: 18.3.1
+      react-dom:
+        specifier: '>=18.3.1'
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: '*'
+        version: 5.5.4
+    devDependencies:
+      '@types/qrcode':
+        specifier: ^1.4.2
+        version: 1.5.5
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+
+  react-components/text:
+    dependencies:
+      '@tmagic/react-runtime-help':
+        specifier: workspace:*
+        version: link:../../runtime/react-runtime-help
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      react:
+        specifier: '>=18.3.1'
+        version: 18.3.1
+      react-dom:
+        specifier: '>=18.3.1'
+        version: 18.3.1(react@18.3.1)
+      typescript:
+        specifier: '*'
+        version: 5.5.4
+    devDependencies:
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: ^18.3.0
+        version: 18.3.0
+
   runtime/react:
     dependencies:
       '@tmagic/core':
@@ -849,9 +1129,6 @@ importers:
       axios:
         specifier: ^0.25.0
         version: 0.25.0
-      lodash-es:
-        specifier: ^4.17.21
-        version: 4.17.21
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -865,9 +1142,6 @@ importers:
       '@tmagic/cli':
         specifier: workspace:*
         version: link:../../packages/cli
-      '@types/lodash-es':
-        specifier: ^4.17.4
-        version: 4.17.12
       '@types/react':
         specifier: ^18.3.3
         version: 18.3.3
@@ -887,6 +1161,46 @@ importers:
         specifier: ^5.2.11
         version: 5.3.5(@types/node@18.19.42)(sass@1.77.8)(terser@5.31.3)
 
+  runtime/react-runtime-help:
+    dependencies:
+      '@tmagic/core':
+        specifier: workspace:*
+        version: link:../../packages/core
+      '@tmagic/data-source':
+        specifier: workspace:*
+        version: link:../../packages/data-source
+      '@tmagic/schema':
+        specifier: workspace:*
+        version: link:../../packages/schema
+      '@tmagic/stage':
+        specifier: workspace:*
+        version: link:../../packages/stage
+      '@tmagic/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
+      react:
+        specifier: '>=18.3.1'
+        version: 18.3.1
+      typescript:
+        specifier: '*'
+        version: 5.5.4
+    devDependencies:
+      '@types/lodash-es':
+        specifier: ^4.17.4
+        version: 4.17.12
+      '@types/node':
+        specifier: ^18.19.0
+        version: 18.19.42
+      '@types/react':
+        specifier: ^18.3.3
+        version: 18.3.3
+      rimraf:
+        specifier: ^3.0.2
+        version: 3.0.2
+
   runtime/tmagic-form:
     dependencies:
       '@tmagic/core':
@@ -1181,9 +1495,6 @@ importers:
       '@tmagic/utils':
         specifier: workspace:*
         version: link:../../packages/utils
-      '@tmagic/vue-container':
-        specifier: workspace:*
-        version: link:../container
       '@tmagic/vue-runtime-help':
         specifier: workspace:*
         version: link:../../runtime/vue-runtime-help
@@ -1205,9 +1516,6 @@ importers:
       '@tmagic/schema':
         specifier: workspace:*
         version: link:../../packages/schema
-      '@tmagic/vue-container':
-        specifier: workspace:*
-        version: link:../container
       '@tmagic/vue-runtime-help':
         specifier: workspace:*
         version: link:../../runtime/vue-runtime-help
@@ -1226,9 +1534,6 @@ importers:
       '@tmagic/utils':
         specifier: workspace:*
         version: link:../../packages/utils
-      '@tmagic/vue-container':
-        specifier: workspace:*
-        version: link:../container
       '@tmagic/vue-runtime-help':
         specifier: workspace:*
         version: link:../../runtime/vue-runtime-help
@@ -1247,9 +1552,6 @@ importers:
       '@tmagic/utils':
         specifier: workspace:*
         version: link:../../packages/utils
-      '@tmagic/vue-container':
-        specifier: workspace:*
-        version: link:../container
       '@tmagic/vue-runtime-help':
         specifier: workspace:*
         version: link:../../runtime/vue-runtime-help
@@ -1265,9 +1567,6 @@ importers:
       '@tmagic/schema':
         specifier: workspace:*
         version: link:../../packages/schema
-      '@tmagic/vue-container':
-        specifier: workspace:*
-        version: link:../container
       '@tmagic/vue-runtime-help':
         specifier: workspace:*
         version: link:../../runtime/vue-runtime-help

pnpm-workspace.yaml

@@ -3,3 +3,4 @@ packages:
   - 'playground'
   - 'runtime/*'
   - 'vue-components/*'
+  - 'react-components/*'

react-components/button/package.json

@@ -0,0 +1,35 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-button",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "peerDependencies": {
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/react-runtime-help": "workspace:*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/button/src/Button.tsx

@@ -0,0 +1,69 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { useApp } from '@tmagic/react-runtime-help';
+import type { Id, MComponent } from '@tmagic/schema';
+
+interface ButtonSchema extends Omit<MComponent, 'id'> {
+  id?: Id;
+  type?: 'button';
+  text: string;
+}
+
+interface ButtonProps {
+  config: ButtonSchema;
+  className: string;
+  id: string;
+  style: Record<string, any>;
+  containerIndex: number;
+  iteratorIndex?: number[];
+  iteratorContainerId?: Id[];
+}
+
+const Page: React.FC<ButtonProps> = ({
+  id,
+  config,
+  className,
+  style,
+  containerIndex,
+  iteratorIndex,
+  iteratorContainerId,
+}) => {
+  const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
+
+  if (!app) return null;
+
+  return (
+    <button
+      className={className}
+      style={style}
+      data-tmagic-id={`${id || config.id || ''}`}
+      data-tmagic-container-index={containerIndex}
+      data-tmagic-iterator-index={iteratorIndex}
+      data-tmagic-iterator-container-id={iteratorContainerId}
+    >
+      {config.text || ''}
+    </button>
+  );
+};
+
+Page.displayName = 'magic-ui-button';
+
+export default Page;

react-components/button/src/event.ts

@@ -0,0 +1,4 @@
+export default {
+  methods: [],
+  events: [],
+};

react-components/button/src/formConfig.ts

@@ -18,13 +18,8 @@
 
 export default [
   {
-    name: 'text',
     text: '文本',
+    name: 'text',
     type: 'data-source-input',
   },
-  {
-    name: 'multiple',
-    text: '多行文本',
-    type: 'switch',
-  },
 ];

react-components/button/src/index.ts

@@ -20,5 +20,6 @@ import Button from './Button';
 
 export { default as config } from './formConfig';
 export { default as value } from './initValue';
+export { default as event } from './event';
 
 export default Button;

react-components/container/package.json

@@ -0,0 +1,36 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-container",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "peerDependencies": {
+    "@tmagic/utils": "workspace:*",
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/react-runtime-help": "workspace:*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/container/src/Container.tsx

@@ -0,0 +1,102 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { useApp } from '@tmagic/react-runtime-help';
+import type { Id, MContainer, MNode } from '@tmagic/schema';
+import { IS_DSL_NODE_KEY } from '@tmagic/utils';
+
+interface ContainerSchema extends Omit<MContainer, 'id'> {
+  id?: Id;
+  type?: 'container';
+}
+
+interface ContainerProps {
+  config: ContainerSchema;
+  className: string;
+  style: Record<string, any>;
+  id: string;
+  containerIndex: number;
+  iteratorIndex: number[];
+  iteratorContainerId: Id[];
+}
+
+const Container: React.FC<ContainerProps> = ({
+  config,
+  id,
+  style,
+  className,
+  containerIndex,
+  iteratorIndex,
+  iteratorContainerId,
+}) => {
+  const { app, display } = useApp({ config });
+
+  if (!app) return null;
+
+  const classNames = config[IS_DSL_NODE_KEY] ? [] : ['magic-ui-container'];
+  if (config.layout) {
+    classNames.push(`magic-layout-${config.layout}`);
+  }
+  if (className) {
+    classNames.push(className);
+  }
+
+  return (
+    <div
+      data-tmagic-id={`${id || ''}`}
+      data-container-index={containerIndex}
+      data-tmagic-iterator-index={iteratorIndex}
+      data-tmagic-iterator-container-id={iteratorContainerId}
+      className={classNames.join(' ')}
+      style={config[IS_DSL_NODE_KEY] ? style : app.transformStyle(config.style || {})}
+    >
+      {config.items?.map((item: MNode, index: number) => {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const MagicUiComp = app.resolveComponent(item.type || 'container');
+
+        if (!MagicUiComp) return null;
+
+        if (!display(item)) return null;
+
+        const itemClassName = [`magic-ui-${item.type}`];
+        if (item.className) {
+          itemClassName.push(item.className);
+        }
+
+        return (
+          <MagicUiComp
+            id={`${item.id || ''}`}
+            containerIndex={index}
+            iteratorIndex={iteratorIndex}
+            iteratorContainerId={iteratorContainerId}
+            key={item.id ?? index}
+            config={{ ...item, [IS_DSL_NODE_KEY]: true }}
+            className={itemClassName.join(' ')}
+            style={app.transformStyle(item.style || {})}
+          ></MagicUiComp>
+        );
+      })}
+    </div>
+  );
+};
+
+Container.displayName = 'magic-ui-container';
+
+export default Container;

react-components/container/src/event.ts

@@ -0,0 +1,4 @@
+export default {
+  methods: [],
+  events: [],
+};

react-components/container/src/formConfig.ts

@@ -33,7 +33,7 @@ export default [
       if (v === 'relative') {
         model.style.height = 'auto';
       } else {
-        const el = getElById(model.id);
+        const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
           model.style.height = el.getBoundingClientRect().height;
         }

react-components/container/src/index.ts

@@ -20,5 +20,6 @@ import Container from './Container';
 
 export { default as config } from './formConfig';
 export { default as value } from './initValue';
+export { default as event } from './event';
 
 export default Container;

react-components/img/package.json

@@ -0,0 +1,35 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-img",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "peerDependencies": {
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/react-runtime-help": "workspace:*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/img/src/Img.tsx

@@ -18,19 +18,36 @@
 
 import React from 'react';
 
-import type { MComponent } from '@tmagic/schema';
+import { useApp } from '@tmagic/react-runtime-help';
+import type { Id, MComponent } from '@tmagic/schema';
 
-import useApp from '../useApp';
+interface ImgSchema extends Omit<MComponent, 'id'> {
-
+  id?: Id;
-interface ImgProps {
+  type?: 'img';
-  config: {
+  src: string;
-    url: string;
+  url?: string;
-    src: string;
-  } & MComponent;
 }
 
-const Img: React.FC<ImgProps> = ({ config }) => {
+interface ImgProps {
-  const { app } = useApp({ config });
+  config: ImgSchema;
+  className: string;
+  id: string;
+  style: Record<string, any>;
+  containerIndex: number;
+  iteratorIndex?: number[];
+  iteratorContainerId?: Id[];
+}
+
+const Img: React.FC<ImgProps> = ({
+  id,
+  config,
+  className,
+  style,
+  containerIndex,
+  iteratorIndex,
+  iteratorContainerId,
+}) => {
+  const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
 
   if (!app) return null;
 
@@ -40,9 +57,12 @@ const Img: React.FC<ImgProps> = ({ config }) => {
 
   return (
     <img
-      className="magic-ui-img"
+      className={className}
-      style={app.transformStyle(config.style || {})}
+      style={style}
-      data-tmagic-id={`${config.id}`}
+      data-tmagic-id={`${id || config.id || ''}`}
+      data-tmagic-container-index={containerIndex}
+      data-tmagic-iterator-index={iteratorIndex}
+      data-tmagic-iterator-container-id={iteratorContainerId}
       src={config.src}
       onClick={clickHandler}
     />

react-components/img/src/event.ts

@@ -0,0 +1,4 @@
+export default {
+  methods: [],
+  events: [],
+};

react-components/img/src/formConfig.ts

@@ -20,6 +20,7 @@ export default [
   {
     text: '图片',
     name: 'src',
+    type: 'data-source-input',
   },
   {
     text: '链接',

react-components/img/src/index.ts

@@ -20,5 +20,6 @@ import Img from './Img';
 
 export { default as config } from './formConfig';
 export { default as value } from './initValue';
+export { default as event } from './event';
 
 export default Img;

react-components/iterator-container/package.json

@@ -0,0 +1,36 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-iterator-container",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "peerDependencies": {
+    "@tmagic/utils": "workspace:*",
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/react-runtime-help": "workspace:*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/iterator-container/src/IteratorContainer.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+
+import type { IteratorContainer as TMagicIteratorContainer } from '@tmagic/core';
+import { useApp } from '@tmagic/react-runtime-help';
+import type { Id, MIteratorContainer, MNode } from '@tmagic/schema';
+
+interface IteratorContainerSchema extends Omit<MIteratorContainer, 'id'> {
+  id?: Id;
+  type?: 'iterator-container';
+}
+
+interface IteratorContainerProps {
+  config: IteratorContainerSchema;
+  className: string;
+  style: Record<string, any>;
+  id: string;
+  containerIndex: number;
+  iteratorIndex: number[];
+  iteratorContainerId: Id[];
+}
+
+interface IteratorItemSchema {
+  items: MNode[];
+  condResult: boolean;
+  style: {
+    [key: string]: any;
+  };
+}
+
+const IteratorContainer: React.FC<IteratorContainerProps> = ({
+  config,
+  id,
+  style,
+  className,
+  containerIndex,
+  iteratorIndex,
+  iteratorContainerId,
+}) => {
+  const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
+
+  let { iteratorData = [] } = config;
+  const { itemConfig, dsField, items } = config;
+
+  if (!Array.isArray(iteratorData)) {
+    iteratorData = [];
+  }
+
+  if (app?.platform === 'editor' && !iteratorData.length) {
+    iteratorData.push({});
+  }
+
+  const MagicUiComp = app?.resolveComponent('container');
+
+  const iteratorContainerNode = app?.getNode<TMagicIteratorContainer>(
+    id || config.id || '',
+    iteratorContainerId,
+    iteratorIndex,
+  );
+
+  iteratorContainerNode?.resetNodes();
+
+  const configs: IteratorItemSchema[] = iteratorData.map((itemData: any, index: number) => {
+    const condResult =
+      app?.platform !== 'editor'
+        ? app?.dataSourceManager?.compliedIteratorItemConds(itemData, itemConfig, dsField) ?? true
+        : true;
+
+    const newItems = app?.dataSourceManager?.compliedIteratorItems(itemData, items, dsField) ?? items;
+
+    iteratorContainerNode?.setNodes(config.items, index);
+
+    return {
+      items: newItems,
+      condResult,
+      style: {
+        position: 'relative',
+        left: 0,
+        top: 0,
+        ...itemConfig.style,
+      },
+    };
+  });
+
+  return (
+    <div
+      className={className}
+      style={style}
+      data-tmagic-id={`${id || config.id || ''}`}
+      data-container-index={containerIndex}
+      data-iterator-index={iteratorIndex}
+      data-iterator-container-id={iteratorContainerId}
+    >
+      {configs.map((config: any, index: number) => (
+        <MagicUiComp
+          config={config}
+          key={index}
+          style={app?.transformStyle(config.style)}
+          iteratorIndex={[...(iteratorIndex || []), index]}
+          iteratorContainerId={[...(iteratorContainerId || []), config.id]}
+        ></MagicUiComp>
+      ))}
+    </div>
+  );
+};
+
+IteratorContainer.displayName = 'magic-ui-iterator-container';
+
+export default IteratorContainer;

react-components/iterator-container/src/event.ts

@@ -0,0 +1,4 @@
+export default {
+  methods: [],
+  events: [],
+};

react-components/iterator-container/src/formConfig.ts

@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { NODE_CONDS_KEY } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 export default [
@@ -43,6 +44,12 @@ export default [
     title: '子项配置',
     name: 'itemConfig',
     items: [
+      {
+        type: 'display-conds',
+        name: NODE_CONDS_KEY,
+        titlePrefix: '条件组',
+        defaultValue: [],
+      },
       {
         name: 'layout',
         text: '容器布局',

react-components/iterator-container/src/index.ts

@@ -0,0 +1,25 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import IteratorContainer from './IteratorContainer';
+
+export { default as config } from './formConfig';
+export { default as value } from './initValue';
+export { default as event } from './event';
+
+export default IteratorContainer;

react-components/overlay/package.json

@@ -0,0 +1,35 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-overlay",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "peerDependencies": {
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/react-runtime-help": "workspace:*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/overlay/src/Overlay.tsx

@@ -0,0 +1,109 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { useApp } from '@tmagic/react-runtime-help';
+import type { Id, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+
+interface OverlayProps {
+  config: MComponent;
+  className: string;
+  style: Record<string, any>;
+  id: string;
+  containerIndex: number;
+  iteratorIndex: number[];
+  iteratorContainerId: Id[];
+}
+
+const Overlay: React.FC<OverlayProps> = ({
+  config,
+  id,
+  style,
+  className,
+  containerIndex,
+  iteratorIndex,
+  iteratorContainerId,
+}) => {
+  const [visible, setVisible] = useState(false);
+
+  const { app, node } = useApp({
+    config,
+    methods: {
+      openOverlay() {
+        setVisible(true);
+        if (app) {
+          app.emit('overlay:open', node);
+        }
+      },
+      closeOverlay() {
+        setVisible(false);
+        if (app) {
+          app.emit('overlay:close', node);
+        }
+      },
+    },
+  });
+
+  if (!app) {
+    return null;
+  }
+
+  const editorSelectHandler = (
+    info: {
+      node: MNode;
+      page: MPage;
+      parent: MContainer;
+    },
+    path: MNode[],
+  ) => {
+    if (path.find((node: MNode) => node.id === config.id)) {
+      node?.instance.openOverlay();
+    } else {
+      node?.instance.closeOverlay();
+    }
+  };
+
+  useEffect(() => {
+    app.page?.on('editor:select', editorSelectHandler);
+
+    return () => {
+      app.page?.off('editor:select', editorSelectHandler);
+    };
+  }, []);
+
+  if (!visible) return null;
+
+  const MagicUiComp = app?.resolveComponent('container');
+
+  return (
+    <MagicUiComp
+      id={id}
+      containerIndex={containerIndex}
+      iteratorIndex={iteratorIndex}
+      iteratorContainerId={iteratorContainerId}
+      config={config}
+      className={className}
+      style={style}
+    ></MagicUiComp>
+  );
+};
+
+Overlay.displayName = 'magic-ui-overlay';
+
+export default Overlay;

react-components/page-fragment-container/package.json

@@ -0,0 +1,35 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-page-fragment-container",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "peerDependencies": {
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/react-runtime-help": "workspace:*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/page-fragment-container/src/PageFragmentContainer.tsx

@@ -1,20 +1,32 @@
-import React, { constructor, useEffect, useMemo, useState } from 'react';
+import React from 'react';
 
-import type { MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
+import { useApp } from '@tmagic/react-runtime-help';
+import type { Id, MComponent, MNode } from '@tmagic/schema';
 
-import useApp from '../../useApp';
 interface PageFragmentContainerProps {
   config: MComponent;
+  className: string;
+  style: Record<string, any>;
+  id: string;
+  containerIndex: number;
+  iteratorIndex: number[];
+  iteratorContainerId: Id[];
 }
 
-const PageFragmentContainer: React.FC<PageFragmentContainerProps> = ({ config }) => {
+const PageFragmentContainer: React.FC<PageFragmentContainerProps> = ({   config,
+  id,
+  style,
+  className,
+  containerIndex,
+  iteratorIndex,
+  iteratorContainerId, }) => {
   const { app } = useApp({
     config,
     methods: {},
   });
 
   if (!app) return null;
-  const MagicUiContainer = app.resolveComponent('container');
+
   let containerConfig = {};
   const fragment = app?.dsl?.items?.find((page) => page.id === config.pageFragmentId);
   if (fragment) {
@@ -36,11 +48,21 @@ const PageFragmentContainer: React.FC<PageFragmentContainerProps> = ({ config })
     }
   }
 
+  const MagicUiContainer = app.resolveComponent('container');
+
+  const classNames = ['magic-ui-page-fragment-container'];
+  if (className) {
+    classNames.push(className);
+  }
+
   return (
     <div
-      data-tmagic-id={`${config.id || ''}`}
+      data-tmagic-id={`${id || ''}`}
-      className="magic-ui-page-fragment-container"
+      data-container-index={containerIndex}
-      style={app.transformStyle(config.style || {})}
+      data-tmagic-iterator-index={iteratorIndex}
+      data-tmagic-iterator-container-id={iteratorContainerId}
+      className={classNames.join(' ')}
+      style={style}
     >
       <MagicUiContainer config={containerConfig}></MagicUiContainer>
     </div>

react-components/page-fragment-container/src/event.ts

@@ -0,0 +1,4 @@
+export default {
+  methods: [],
+  events: [],
+};

react-components/page-fragment-container/src/index.ts

@@ -0,0 +1,25 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PageFragmentContainer from './PageFragmentContainer';
+
+export { default as config } from './formConfig';
+export { default as value } from './initValue';
+export { default as event } from './event';
+
+export default PageFragmentContainer;

react-components/page-fragment/package.json

@@ -0,0 +1,36 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-page-fragment",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "peerDependencies": {
+    "@tmagic/utils": "workspace:*",
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/react-runtime-help": "workspace:*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/page-fragment/src/PageFragment.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { useApp } from '@tmagic/react-runtime-help';
+import type { MPageFragment } from '@tmagic/schema';
+
+interface PageFragmentProps {
+  config: MPageFragment;
+}
+
+const PageFragment: React.FC<PageFragmentProps> = ({ config }) => {
+  const { app } = useApp({
+    config,
+    methods: {},
+  });
+
+  if (!app) return null;
+
+  const MagicUiComp = app.resolveComponent('container');
+  const classNames = ['magic-ui-page-fragment'];
+  if (config.className) {
+    classNames.push(config.className);
+  }
+
+  return <MagicUiComp config={config} id={config.id} className={classNames.join(' ')}></MagicUiComp>;
+};
+
+PageFragment.displayName = 'magic-ui-page-fragment';
+
+export default PageFragment;

react-components/page-fragment/src/event.ts

@@ -0,0 +1,4 @@
+export default {
+  methods: [],
+  events: [],
+};

react-components/page-fragment/src/formConfig.ts

@@ -42,7 +42,7 @@ export default [
       if (v === 'relative') {
         model.style.height = 'auto';
       } else {
-        const el = getElById(model.id);
+        const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
           model.style.height = el.getBoundingClientRect().height;
         }

react-components/page-fragment/src/index.ts

@@ -0,0 +1,25 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import PageFragment from './PageFragment';
+
+export { default as config } from './formConfig';
+export { default as value } from './initValue';
+export { default as event } from './event';
+
+export default PageFragment;

react-components/page/package.json

@@ -0,0 +1,36 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-page",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "peerDependencies": {
+    "@tmagic/utils": "workspace:*",
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/react-runtime-help": "workspace:*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/page/src/Page.tsx

@@ -18,36 +18,33 @@
 
 import React from 'react';
 
-import type { MComponent } from '@tmagic/schema';
+import { useApp } from '@tmagic/react-runtime-help';
+import type { MPage } from '@tmagic/schema';
 
-import useApp from '../useApp';
+interface PageProps {
-
+  config: MPage;
-interface ButtonProps {
-  config: MComponent;
 }
 
-const Page: React.FC<ButtonProps> = ({ config }) => {
+const Page: React.FC<PageProps> = ({ config }) => {
-  const { app } = useApp({ config });
+  const { app } = useApp({
+    config,
+    methods: {
+      refresh: () => window.location.reload(),
+    },
+  });
 
   if (!app) return null;
 
-  const MagicUiText = app.resolveComponent('text');
+  const MagicUiComp = app.resolveComponent('container');
 
-  return (
+  const classNames = ['magic-ui-page'];
-    <button
+  if (config.className) {
-      className="magic-ui-button"
+    classNames.push(config.className);
-      style={app.transformStyle(config.style || {})}
+  }
-      data-tmagic-id={`${config.id || ''}`}
+
-    >
+  return <MagicUiComp config={config} id={config.id} className={classNames.join(' ')}></MagicUiComp>;
-      <MagicUiText
-        config={{
-          text: config.text,
-        }}
-      ></MagicUiText>
-    </button>
-  );
 };
 
-Page.displayName = 'magic-ui-button';
+Page.displayName = 'magic-ui-page';
 
 export default Page;

react-components/page/src/formConfig.ts

@@ -44,7 +44,7 @@ export default [
       if (v === 'relative') {
         model.style.height = 'auto';
       } else {
-        const el = getElById(model.id);
+        const el = getElById()(formState.stage?.renderer?.contentWindow.document, model.id);
         if (el) {
           model.style.height = el.getBoundingClientRect().height;
         }

react-components/qrcode/package.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-qrcode",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "qrcode": "^1.5.0"
+  },
+  "peerDependencies": {
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/react-runtime-help": "workspace:*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+     "@types/qrcode": "^1.4.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/qrcode/src/QrCode.tsx

@@ -19,17 +19,34 @@
 import React, { useEffect, useState } from 'react';
 import QRCode from 'qrcode';
 
-import type { MComponent } from '@tmagic/schema';
+import { useApp } from '@tmagic/react-runtime-help';
+import type { Id, MComponent } from '@tmagic/schema';
 
-import useApp from '../useApp';
+interface QrCodeSchema extends Omit<MComponent, 'id'> {
-
+  id?: Id;
-interface QrcodeProps {
+  type?: 'qrcode';
-  config: {
+  url: string;
-    url: string;
-  } & MComponent;
 }
 
-const Qrcode: React.FC<QrcodeProps> = ({ config }) => {
+interface QrCodeProps {
+  config: QrCodeSchema;
+  className: string;
+  id: string;
+  style: Record<string, any>;
+  containerIndex: number;
+  iteratorIndex?: number[];
+  iteratorContainerId?: Id[];
+}
+
+const QrCode: React.FC<QrCodeProps> = ({
+  id,
+  config,
+  className,
+  style,
+  containerIndex,
+  iteratorIndex,
+  iteratorContainerId,
+}) => {
   const { app } = useApp({ config });
 
   if (!app) return null;
@@ -45,14 +62,17 @@ const Qrcode: React.FC<QrcodeProps> = ({ config }) => {
 
   return (
     <img
-      className="magic-ui-qrcode"
+      className={className}
-      style={app.transformStyle(config.style || {})}
+      style={style}
-      data-tmagic-id={`${config.id}`}
+      data-tmagic-id={`${id || config.id || ''}`}
+      data-tmagic-container-index={containerIndex}
+      data-tmagic-iterator-index={iteratorIndex}
+      data-tmagic-iterator-container-id={iteratorContainerId}
       src={imgSrc}
     />
   );
 };
 
-Qrcode.displayName = 'magic-ui-qrcode';
+QrCode.displayName = 'magic-ui-qrcode';
 
-export default Qrcode;
+export default QrCode;

react-components/qrcode/src/event.ts

@@ -0,0 +1,4 @@
+export default {
+  methods: [],
+  events: [],
+};

react-components/qrcode/src/index.ts

@@ -16,9 +16,10 @@
  * limitations under the License.
  */
 
-import Qrcode from './Qrcode';
+import QrCode from './QrCode';
 
 export { default as config } from './formConfig';
 export { default as value } from './initValue';
+export { default as event } from './event';
 
-export default Qrcode;
+export default QrCode;

react-components/text/package.json

@@ -0,0 +1,35 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-text",
+  "type": "module",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "peerDependencies": {
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/react-runtime-help": "workspace:*",
+    "react": ">=18.3.1",
+    "react-dom": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

react-components/text/src/Text.tsx

@@ -18,26 +18,52 @@
 
 import React from 'react';
 
-import type { MComponent } from '@tmagic/schema';
+import { useApp } from '@tmagic/react-runtime-help';
+import type { Id, MComponent } from '@tmagic/schema';
 
-import useApp from '../useApp';
+interface TextSchema extends Omit<MComponent, 'id'> {
-
+  id?: Id;
-interface TextProps {
+  type?: 'text';
-  config: MComponent;
+  text: string;
 }
 
-const Text: React.FC<TextProps> = ({ config }) => {
+interface TextProps {
-  const { app } = useApp({ config });
+  id: Id;
+  config: TextSchema;
+  className: string;
+  style: Record<string, any>;
+  containerIndex: number;
+  iteratorIndex?: number[];
+  iteratorContainerId?: Id[];
+}
+
+const Text: React.FC<TextProps> = ({
+  id,
+  config,
+  className,
+  style,
+  containerIndex,
+  iteratorIndex,
+  iteratorContainerId,
+}) => {
+  const { app } = useApp({ config, iteratorIndex, iteratorContainerId });
 
   if (!app) return null;
 
   return (
-    <p className="magic-ui-text" style={app.transformStyle(config.style || {})} data-tmagic-id={`${config.id || ''}`}>
+    <p
+      className={className}
+      style={style}
+      data-tmagic-id={id}
+      data-tmagic-container-index={containerIndex}
+      data-tmagic-iterator-index={iteratorIndex}
+      data-tmagic-iterator-container-id={iteratorContainerId}
+    >
       {config.text}
     </p>
   );
 };
 
-Text.displayName = 'maigc-ui-text';
+Text.displayName = 'magic-ui-text';
 
 export default Text;

react-components/text/src/event.ts

@@ -0,0 +1,4 @@
+export default {
+  methods: [],
+  events: [],
+};

react-components/text/src/index.ts

@@ -20,5 +20,6 @@ import Text from './Text';
 
 export { default as config } from './formConfig';
 export { default as value } from './initValue';
+export { default as event } from './event';
 
 export default Text;

runtime/react-runtime-help/package.json

@@ -0,0 +1,61 @@
+{
+  "version": "0.0.1",
+  "name": "@tmagic/react-runtime-help",
+  "type": "module",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": "./*"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "pnpm clean && tsc -b tsconfig.build.json",
+    "clean": "rimraf dist *.tsbuildinfo",
+    "check:type": "tsc --noEmit --project tsconfig.build.json"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21"
+  },
+  "peerDependencies": {
+    "lodash-es": "^4.17.21",
+    "@tmagic/core": "workspace:*",
+    "@tmagic/data-source": "workspace:*",
+    "@tmagic/schema": "workspace:*",
+    "@tmagic/stage": "workspace:*",
+    "@tmagic/utils": "workspace:*",
+    "react": ">=18.3.1",
+    "typescript": "*"
+  },
+  "peerDependenciesMeta": {
+    "@tmagic/schema": {
+      "optional": true
+    },
+    "@tmagic/stage": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.4",
+    "@types/node": "^18.19.0",
+    "@types/react": "^18.3.3",
+    "rimraf": "^3.0.2"
+  }
+}

runtime/react-runtime-help/src/AppContent.ts

@@ -18,6 +18,6 @@
 
 import React from 'react';
 
-import Core from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
 
-export default React.createContext<Core | undefined>(undefined);
+export default React.createContext<TMagicApp | undefined>(undefined);

runtime/react-runtime-help/src/hooks/use-app.ts

@@ -0,0 +1,77 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useContext, useEffect, useState } from 'react';
+
+import type TMagicApp from '@tmagic/core';
+import type { Id, MNodeInstance } from '@tmagic/schema';
+import { isDslNode } from '@tmagic/utils';
+
+import AppContent from '../AppContent';
+
+interface UseAppOptions<T extends MNodeInstance = MNodeInstance> {
+  config: T;
+  iteratorContainerId?: Id[];
+  iteratorIndex?: number[];
+  methods?: {
+    [key: string]: Function;
+  };
+}
+
+export const useApp = ({ methods = {}, config, iteratorContainerId, iteratorIndex }: UseAppOptions) => {
+  const app: TMagicApp | undefined = useContext(AppContent);
+
+  const emitData = {
+    config,
+    ...methods,
+  };
+
+  const display = <T extends MNodeInstance>(config: T) => {
+    if (config.visible === false) return false;
+    if (config.condResult === false) return false;
+
+    const displayCfg = config.display;
+
+    if (typeof displayCfg === 'function') {
+      return displayCfg(app);
+    }
+
+    return displayCfg !== false;
+  };
+
+  const node = isDslNode(config) && config.id ? app?.getNode(config.id, iteratorContainerId, iteratorIndex) : undefined;
+  const [created, setCreated] = useState(false);
+
+  if (node) {
+    if (!created) {
+      // 只需要触发一次 created
+      setCreated(true);
+      node?.emit('created', emitData);
+    }
+
+    useEffect(() => {
+      node?.emit('mounted', emitData);
+
+      return () => {
+        node?.emit('destroy', emitData);
+      };
+    }, []);
+  }
+
+  return { app, node, display };
+};

runtime/react-runtime-help/src/hooks/use-dsl.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { cloneDeep } from 'lodash-es';
+
+import TMagicApp from '@tmagic/core';
+import type { ChangeEvent } from '@tmagic/data-source';
+import type { MNode } from '@tmagic/schema';
+import { isPage, replaceChildNode } from '@tmagic/utils';
+
+export const useDsl = (app: TMagicApp | undefined) => {
+  if (!app?.page) return null;
+
+  const [pageConfig, setPageConfig] = useState(app.page.data);
+
+  const updateDataHandler = (nodes: MNode[], sourceId: string, event: ChangeEvent) => {
+    let config = pageConfig;
+    nodes.forEach((node) => {
+      if (isPage(node)) {
+        config = node;
+      } else {
+        replaceChildNode(node, [config]);
+      }
+    });
+
+    setPageConfig(cloneDeep(config));
+
+    setTimeout(() => {
+      app.emit('replaced-node', {
+        ...event,
+        nodes,
+        sourceId,
+      });
+    }, 0);
+  };
+
+  useEffect(() => {
+    app.dataSourceManager?.on('update-data', updateDataHandler);
+
+    return () => {
+      app.dataSourceManager?.off('update-data', updateDataHandler);
+    };
+  }, []);
+
+  return { pageConfig };
+};

runtime/react-runtime-help/src/hooks/use-editor-dsl.ts

@@ -0,0 +1,66 @@
+import { cloneDeep } from 'lodash-es';
+
+import Core from '@tmagic/core';
+import type { Id, MApp } from '@tmagic/schema';
+import type { Magic, RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
+import { getElById, replaceChildNode } from '@tmagic/utils';
+
+declare global {
+  interface Window {
+    magic?: Magic;
+  }
+}
+
+export const useEditorDsl = (app: Core | undefined, renderDom: () => void) => {
+  let curPageId: Id = '';
+
+  const updateConfig = (root: MApp) => {
+    app?.setConfig(root, curPageId);
+    renderDom();
+  };
+
+  window.magic?.onRuntimeReady({
+    getApp() {
+      return app;
+    },
+
+    updateRootConfig(root: MApp) {
+      app?.setConfig(root);
+    },
+
+    updatePageId(id: Id) {
+      curPageId = id;
+      app?.setPage(curPageId);
+      renderDom();
+    },
+
+    select(id: Id) {
+      const el = getElById()(document, 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);
+    },
+  });
+};

runtime/react-runtime-help/src/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { default as AppContent } from './AppContent';
+export * from './hooks/use-editor-dsl';
+export * from './hooks/use-dsl';
+export * from './hooks/use-app';

runtime/react-runtime-help/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "declaration": true,
+    "sourceMap": false,
+    "types": ["node"],
+  },
+  "include": ["./src"],
+}

runtime/react-runtime-help/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "jsx": "react",
+    "forceConsistentCasingInFileNames": true,
+    "types": ["node"],
+  },
+}

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 React, { useContext } from 'react';
-import { cloneDeep } from 'lodash-es';
 
-import type Core from '@tmagic/core';
+import type TMagicApp from '@tmagic/core';
-import type { ChangeEvent } from '@tmagic/data-source';
+import { AppContent, useDsl } from '@tmagic/react-runtime-help';
-import type { MNode } from '@tmagic/schema';
-import { AppContent } from '@tmagic/ui-react';
-import { isPage, replaceChildNode } from '@tmagic/utils';
 
 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) => {
+  return <MagicUiPage config={pageConfig}></MagicUiPage>;
-    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>;
 }
 
 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 { AppContent, useEditorDsl } from '@tmagic/react-runtime-help';
-import type { RemoveData, SortEventData, UpdateData } from '@tmagic/stage';
-import { AppContent } from '@tmagic/ui-react';
-import { getElById, replaceChildNode } from '@tmagic/utils';
 
 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 root = createRoot(document.getElementById('root')!);
-
-const updateConfig = (root: MApp) => {
-  app?.setConfig(root, curPageId);
-  renderDom();
-};
 
 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
+useEditorDsl(app, renderDom);
-window.magic?.onRuntimeReady(operations);

runtime/react/tsconfig.json

@@ -1,24 +1,9 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
+    "baseUrl": "./",
-    "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,
     "jsx": "react",
-    "baseUrl": ".",
+    "forceConsistentCasingInFileNames": true,
-    "paths": {
+    "types": ["node"],
-      // 内部模块都指向 src/index.ts, 会有更好的代码跳转体验.
-      "@tmagic/*": ["../packages/*"],
-    },
   },
-  "include": ["./page", "./playground"]
 }

tsconfig.build-browser.json

@@ -14,5 +14,6 @@
     "packages/utils/src",
     "packages/element-plus-adapter/src",
     "packages/ui/src",
+    "packages/ui-react/src",
   ]
 }

tsconfig.json

@@ -22,6 +22,7 @@
       "@tmagic/*": ["packages/*/src"],
       "@tmagic/tmagic-form-runtime": ["runtime/tmagic-form/src"],
       "@tmagic/vue-runtime-help": ["runtime/vue-runtime-help/src"],
+      "@tmagic/react-runtime-help": ["runtime/react-runtime-help/src"],
       "@editor/*": ["packages/editor/src/*"],
       "@form/*": ["packages/form/src/*"],
       "@data-source/*": ["packages/data-source/src/*"],

vitest.config.ts

@@ -21,7 +21,6 @@ export default defineConfig({
         './packages/*/tests/**',
         './packages/cli/lib/**',
         './packages/ui/**',
-        './packages/ui-vue2/**',
         './packages/ui-react/**',
         './packages/design/**',
         './packages/element-plus-adapter/**',