From cab36b49a368b1a8e582efaa3ba0fe80debe03ea Mon Sep 17 00:00:00 2001 From: roymondchen Date: Tue, 13 Aug 2024 20:35:14 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=86ui-react=E4=B8=AD=E7=9A=84?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=8B=AC=E7=AB=8B=E6=88=90=E5=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.cjs | 1 + packages/ui-react/README.md | 1 + packages/ui-react/package.json | 29 +- packages/ui-react/src/container/Container.tsx | 67 --- packages/ui-react/src/index.ts | 41 +- .../ui-react/src/iterator-container/index.ts | 24 -- .../src/IteratorContainer.tsx | 62 --- packages/ui-react/src/overlay/Overlay.tsx | 84 ---- .../src/page-fragment-container/index.ts | 24 -- packages/ui-react/src/page-fragment/index.ts | 24 -- .../src/page-fragment/src/PageFragment.tsx | 50 --- packages/ui-react/src/page/Page.tsx | 71 ---- packages/ui-react/src/useApp.ts | 58 --- .../useCommonMethod.tsx => vite.config.ts} | 32 +- pnpm-lock.yaml | 383 ++++++++++++++++-- pnpm-workspace.yaml | 3 +- react-components/button/package.json | 35 ++ react-components/button/src/Button.tsx | 69 ++++ react-components/button/src/event.ts | 4 + .../button/src}/formConfig.ts | 7 +- .../button/src}/index.ts | 1 + .../button/src}/initValue.ts | 0 react-components/container/package.json | 36 ++ react-components/container/src/Container.tsx | 102 +++++ react-components/container/src/event.ts | 4 + .../container/src}/formConfig.ts | 2 +- .../container/src}/index.ts | 1 + .../container/src}/initValue.ts | 0 react-components/img/package.json | 35 ++ .../img => react-components/img/src}/Img.tsx | 46 ++- react-components/img/src/event.ts | 4 + .../img/src}/formConfig.ts | 1 + .../img => react-components/img/src}/index.ts | 1 + .../img/src}/initValue.ts | 0 .../iterator-container/package.json | 36 ++ .../src/IteratorContainer.tsx | 108 +++++ .../iterator-container/src/event.ts | 4 + .../iterator-container/src/formConfig.ts | 7 + .../iterator-container/src/index.ts | 25 ++ .../iterator-container/src/initValue.ts | 0 react-components/overlay/package.json | 35 ++ react-components/overlay/src/Overlay.tsx | 109 +++++ .../overlay/src}/event.ts | 0 .../overlay/src}/formConfig.ts | 0 .../overlay/src}/index.ts | 0 .../overlay/src}/initValue.ts | 0 .../page-fragment-container/package.json | 35 ++ .../src/PageFragmentContainer.tsx | 38 +- .../page-fragment-container/src/event.ts | 4 + .../page-fragment-container/src/formConfig.ts | 0 .../page-fragment-container/src/index.ts | 25 ++ .../page-fragment-container/src/initValue.ts | 0 react-components/page-fragment/package.json | 36 ++ .../page-fragment/src/PageFragment.tsx | 29 ++ react-components/page-fragment/src/event.ts | 4 + .../page-fragment/src/formConfig.ts | 2 +- react-components/page-fragment/src/index.ts | 25 ++ .../page-fragment/src/initValue.ts | 0 react-components/page/package.json | 36 ++ .../page/src/Page.tsx | 41 +- .../page/src}/event.ts | 0 .../page/src}/formConfig.ts | 2 +- .../page/src}/index.ts | 0 .../page/src}/initValue.ts | 0 react-components/qrcode/package.json | 39 ++ .../qrcode/src/QrCode.tsx | 46 ++- react-components/qrcode/src/event.ts | 4 + .../qrcode/src}/formConfig.ts | 0 .../qrcode/src}/index.ts | 5 +- .../qrcode/src}/initValue.ts | 0 react-components/text/package.json | 35 ++ .../text/src}/Text.tsx | 44 +- react-components/text/src/event.ts | 4 + .../text/src}/formConfig.ts | 0 .../text/src}/index.ts | 1 + .../text/src}/initValue.ts | 0 runtime/react-runtime-help/package.json | 61 +++ .../react-runtime-help}/src/AppContent.ts | 4 +- .../react-runtime-help/src/hooks/use-app.ts | 77 ++++ .../react-runtime-help/src/hooks/use-dsl.ts | 44 ++ .../src/hooks/use-editor-dsl.ts | 66 +++ runtime/react-runtime-help/src/index.ts | 21 + .../react-runtime-help/tsconfig.build.json | 11 + runtime/react-runtime-help/tsconfig.json | 9 + runtime/react/package.json | 2 - runtime/react/page/App.tsx | 41 +- runtime/react/page/main.tsx | 2 +- runtime/react/playground/App.tsx | 2 +- runtime/react/playground/main.tsx | 66 +-- runtime/react/tsconfig.json | 23 +- tsconfig.build-browser.json | 1 + tsconfig.json | 1 + vitest.config.ts | 1 - 93 files changed, 1772 insertions(+), 741 deletions(-) create mode 100644 packages/ui-react/README.md delete mode 100644 packages/ui-react/src/container/Container.tsx delete mode 100644 packages/ui-react/src/iterator-container/index.ts delete mode 100644 packages/ui-react/src/iterator-container/src/IteratorContainer.tsx delete mode 100644 packages/ui-react/src/overlay/Overlay.tsx delete mode 100644 packages/ui-react/src/page-fragment-container/index.ts delete mode 100644 packages/ui-react/src/page-fragment/index.ts delete mode 100644 packages/ui-react/src/page-fragment/src/PageFragment.tsx delete mode 100644 packages/ui-react/src/page/Page.tsx delete mode 100644 packages/ui-react/src/useApp.ts rename packages/ui-react/{src/useCommonMethod.tsx => vite.config.ts} (55%) create mode 100644 react-components/button/package.json create mode 100644 react-components/button/src/Button.tsx create mode 100644 react-components/button/src/event.ts rename {packages/ui-react/src/text => react-components/button/src}/formConfig.ts (91%) rename {packages/ui-react/src/button => react-components/button/src}/index.ts (95%) rename {packages/ui-react/src/button => react-components/button/src}/initValue.ts (100%) create mode 100644 react-components/container/package.json create mode 100644 react-components/container/src/Container.tsx create mode 100644 react-components/container/src/event.ts rename {packages/ui-react/src/container => react-components/container/src}/formConfig.ts (93%) rename {packages/ui-react/src/container => react-components/container/src}/index.ts (95%) rename {packages/ui-react/src/container => react-components/container/src}/initValue.ts (100%) create mode 100644 react-components/img/package.json rename {packages/ui-react/src/img => react-components/img/src}/Img.tsx (55%) create mode 100644 react-components/img/src/event.ts rename {packages/ui-react/src/img => react-components/img/src}/formConfig.ts (96%) rename {packages/ui-react/src/img => react-components/img/src}/index.ts (95%) rename {packages/ui-react/src/img => react-components/img/src}/initValue.ts (100%) create mode 100644 react-components/iterator-container/package.json create mode 100644 react-components/iterator-container/src/IteratorContainer.tsx create mode 100644 react-components/iterator-container/src/event.ts rename {packages/ui-react/src => react-components}/iterator-container/src/formConfig.ts (94%) create mode 100644 react-components/iterator-container/src/index.ts rename {packages/ui-react/src => react-components}/iterator-container/src/initValue.ts (100%) create mode 100644 react-components/overlay/package.json create mode 100644 react-components/overlay/src/Overlay.tsx rename {packages/ui-react/src/overlay => react-components/overlay/src}/event.ts (100%) rename {packages/ui-react/src/overlay => react-components/overlay/src}/formConfig.ts (100%) rename {packages/ui-react/src/overlay => react-components/overlay/src}/index.ts (100%) rename {packages/ui-react/src/overlay => react-components/overlay/src}/initValue.ts (100%) create mode 100644 react-components/page-fragment-container/package.json rename {packages/ui-react/src => react-components}/page-fragment-container/src/PageFragmentContainer.tsx (57%) create mode 100644 react-components/page-fragment-container/src/event.ts rename {packages/ui-react/src => react-components}/page-fragment-container/src/formConfig.ts (100%) create mode 100644 react-components/page-fragment-container/src/index.ts rename {packages/ui-react/src => react-components}/page-fragment-container/src/initValue.ts (100%) create mode 100644 react-components/page-fragment/package.json create mode 100644 react-components/page-fragment/src/PageFragment.tsx create mode 100644 react-components/page-fragment/src/event.ts rename {packages/ui-react/src => react-components}/page-fragment/src/formConfig.ts (93%) create mode 100644 react-components/page-fragment/src/index.ts rename {packages/ui-react/src => react-components}/page-fragment/src/initValue.ts (100%) create mode 100644 react-components/page/package.json rename packages/ui-react/src/button/Button.tsx => react-components/page/src/Page.tsx (57%) rename {packages/ui-react/src/page => react-components/page/src}/event.ts (100%) rename {packages/ui-react/src/page => react-components/page/src}/formConfig.ts (94%) rename {packages/ui-react/src/page => react-components/page/src}/index.ts (100%) rename {packages/ui-react/src/page => react-components/page/src}/initValue.ts (100%) create mode 100644 react-components/qrcode/package.json rename packages/ui-react/src/qrcode/Qrcode.tsx => react-components/qrcode/src/QrCode.tsx (56%) create mode 100644 react-components/qrcode/src/event.ts rename {packages/ui-react/src/qrcode => react-components/qrcode/src}/formConfig.ts (100%) rename {packages/ui-react/src/qrcode => react-components/qrcode/src}/index.ts (89%) rename {packages/ui-react/src/qrcode => react-components/qrcode/src}/initValue.ts (100%) create mode 100644 react-components/text/package.json rename {packages/ui-react/src/text => react-components/text/src}/Text.tsx (50%) create mode 100644 react-components/text/src/event.ts rename {packages/ui-react/src/button => react-components/text/src}/formConfig.ts (100%) rename {packages/ui-react/src/text => react-components/text/src}/index.ts (95%) rename {packages/ui-react/src/text => react-components/text/src}/initValue.ts (100%) create mode 100644 runtime/react-runtime-help/package.json rename {packages/ui-react => runtime/react-runtime-help}/src/AppContent.ts (87%) create mode 100644 runtime/react-runtime-help/src/hooks/use-app.ts create mode 100644 runtime/react-runtime-help/src/hooks/use-dsl.ts create mode 100644 runtime/react-runtime-help/src/hooks/use-editor-dsl.ts create mode 100644 runtime/react-runtime-help/src/index.ts create mode 100644 runtime/react-runtime-help/tsconfig.build.json create mode 100644 runtime/react-runtime-help/tsconfig.json diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 9016a395..12505be9 100644 --- a/.eslintrc.cjs +++ b/.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", diff --git a/packages/ui-react/README.md b/packages/ui-react/README.md new file mode 100644 index 00000000..0c425cb8 --- /dev/null +++ b/packages/ui-react/README.md @@ -0,0 +1 @@ +# [文档](https://tencent.github.io/tmagic-editor/docs/) \ No newline at end of file diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json index 29ec4301..6c14be36 100644 --- a/packages/ui-react/package.json +++ b/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" - }, - "devDependencies": { - "@types/react": "^18.3.3", - "@types/react-dom": "^18.3.0" + "@tmagic/react-button": "workspace:*", + "@tmagic/react-container": "workspace:*", + "@tmagic/react-img": "workspace:*", + "@tmagic/react-iterator-container": "workspace:*", + "@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" } } diff --git a/packages/ui-react/src/container/Container.tsx b/packages/ui-react/src/container/Container.tsx deleted file mode 100644 index c6c01a77..00000000 --- a/packages/ui-react/src/container/Container.tsx +++ /dev/null @@ -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; - id: string; -} - -const Container: React.FC = ({ config, id }) => { - const { app } = useApp({ config }); - - if (!app) return null; - - return ( -
- {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 ( - - ); - })} -
- ); -}; - -Container.displayName = 'magic-ui-container'; - -export default Container; diff --git a/packages/ui-react/src/index.ts b/packages/ui-react/src/index.ts index 992525aa..9624703a 100644 --- a/packages/ui-react/src/index.ts +++ b/packages/ui-react/src/index.ts @@ -16,31 +16,38 @@ * limitations under the License. */ -import Button from './button'; -import Container from './container'; -import Img from './img'; -import IteratorContainer from './iterator-container'; -import Overlay from './overlay'; -import Page from './page'; -import pageFragment from './page-fragment'; -import pageFragmentContainer from './page-fragment-container'; -import Qrcode from './qrcode'; -import Text from './text'; -export { default as AppContent } from './AppContent'; -export { default as useApp } from './useApp'; +import Button from '@tmagic/react-button'; +import Container from '@tmagic/react-container'; +import Img from '@tmagic/react-img'; +import IteratorContainer from '@tmagic/react-iterator-container'; +import Overlay from '@tmagic/react-overlay'; +import Page from '@tmagic/react-page'; +import PageFragment from '@tmagic/react-page-fragment'; +import PageFragmentContainer from '@tmagic/react-page-fragment-container'; +import QRcode from '@tmagic/react-qrcode'; +import Text from '@tmagic/react-text'; -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 = { 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, }; diff --git a/packages/ui-react/src/iterator-container/index.ts b/packages/ui-react/src/iterator-container/index.ts deleted file mode 100644 index 95c66b77..00000000 --- a/packages/ui-react/src/iterator-container/index.ts +++ /dev/null @@ -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; diff --git a/packages/ui-react/src/iterator-container/src/IteratorContainer.tsx b/packages/ui-react/src/iterator-container/src/IteratorContainer.tsx deleted file mode 100644 index 6e116117..00000000 --- a/packages/ui-react/src/iterator-container/src/IteratorContainer.tsx +++ /dev/null @@ -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; - }; - }; - className: string; - style: Record; - id: string; -} - -const IteratorContainer: React.FC = ({ 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 ( -
- {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 ; - })} -
- ); -}; - -IteratorContainer.displayName = 'magic-ui-iterator-container'; - -export default IteratorContainer; diff --git a/packages/ui-react/src/overlay/Overlay.tsx b/packages/ui-react/src/overlay/Overlay.tsx deleted file mode 100644 index e0664a2f..00000000 --- a/packages/ui-react/src/overlay/Overlay.tsx +++ /dev/null @@ -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 = ({ 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 ( - - ); -}; - -Overlay.displayName = 'magic-ui-overlay'; - -export default Overlay; diff --git a/packages/ui-react/src/page-fragment-container/index.ts b/packages/ui-react/src/page-fragment-container/index.ts deleted file mode 100644 index d68f4eb4..00000000 --- a/packages/ui-react/src/page-fragment-container/index.ts +++ /dev/null @@ -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; diff --git a/packages/ui-react/src/page-fragment/index.ts b/packages/ui-react/src/page-fragment/index.ts deleted file mode 100644 index 14d1cf27..00000000 --- a/packages/ui-react/src/page-fragment/index.ts +++ /dev/null @@ -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; diff --git a/packages/ui-react/src/page-fragment/src/PageFragment.tsx b/packages/ui-react/src/page-fragment/src/PageFragment.tsx deleted file mode 100644 index 7e3d1394..00000000 --- a/packages/ui-react/src/page-fragment/src/PageFragment.tsx +++ /dev/null @@ -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 = ({ config }) => { - const { app } = useApp({ - config, - methods: {}, - }); - - if (!app) return null; - - return ( -
- {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 ( - - ); - })} -
- ); -}; - -PageFragment.displayName = 'magic-ui-page-fragment'; - -export default PageFragment; diff --git a/packages/ui-react/src/page/Page.tsx b/packages/ui-react/src/page/Page.tsx deleted file mode 100644 index bc724c47..00000000 --- a/packages/ui-react/src/page/Page.tsx +++ /dev/null @@ -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 = ({ config }) => { - const { app } = useApp({ - config, - methods: { - refresh: () => window.location.reload(), - }, - }); - - if (!app) return null; - - return ( -
- {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 ( - - ); - })} -
- ); -}; - -Page.displayName = 'magic-ui-page'; - -export default Page; diff --git a/packages/ui-react/src/useApp.ts b/packages/ui-react/src/useApp.ts deleted file mode 100644 index 6a92e43a..00000000 --- a/packages/ui-react/src/useApp.ts +++ /dev/null @@ -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 }; -}; diff --git a/packages/ui-react/src/useCommonMethod.tsx b/packages/ui-react/vite.config.ts similarity index 55% rename from packages/ui-react/src/useCommonMethod.tsx rename to packages/ui-react/vite.config.ts index 146a538c..aabce97f 100644 --- a/packages/ui-react/src/useCommonMethod.tsx +++ b/packages/ui-react/vite.config.ts @@ -16,11 +16,31 @@ * limitations under the License. */ -export default (ref: any) => ({ - show: () => { - ref.style.display = 'initial'; - }, - hide: () => { - ref.style.display = 'none'; +import { defineConfig } from 'vite'; + +import pkg from './package.json'; + +export default defineConfig({ + 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)); + }, + }, }, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b3e443d2..3e383227 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -678,34 +678,46 @@ importers: packages/ui-react: dependencies: - '@tmagic/core': + '@tmagic/react-button': specifier: workspace:* - version: link:../core - '@tmagic/schema': + version: link:../../react-components/button + '@tmagic/react-container': specifier: workspace:* - version: link:../schema - '@tmagic/utils': + version: link:../../react-components/container + '@tmagic/react-img': specifier: workspace:* - version: link:../utils - 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) + version: link:../../react-components/img + '@tmagic/react-iterator-container': + specifier: workspace:* + version: link:../../react-components/iterator-container + '@tmagic/react-overlay': + specifier: workspace:* + version: link:../../react-components/overlay + '@tmagic/react-page': + specifier: workspace:* + 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': - specifier: ^18.3.3 - version: 18.3.3 - '@types/react-dom': - specifier: ^18.3.0 - version: 18.3.0 + rimraf: + specifier: ^3.0.2 + version: 3.0.2 + vite: + specifier: ^5.3.5 + 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 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 91cbd7cc..3613c3e1 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -2,4 +2,5 @@ packages: - 'packages/*' - 'playground' - 'runtime/*' - - 'vue-components/*' \ No newline at end of file + - 'vue-components/*' + - 'react-components/*' \ No newline at end of file diff --git a/react-components/button/package.json b/react-components/button/package.json new file mode 100644 index 00000000..1b0e6ddc --- /dev/null +++ b/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" + } +} diff --git a/react-components/button/src/Button.tsx b/react-components/button/src/Button.tsx new file mode 100644 index 00000000..e861531e --- /dev/null +++ b/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 { + id?: Id; + type?: 'button'; + text: string; +} + +interface ButtonProps { + config: ButtonSchema; + className: string; + id: string; + style: Record; + containerIndex: number; + iteratorIndex?: number[]; + iteratorContainerId?: Id[]; +} + +const Page: React.FC = ({ + id, + config, + className, + style, + containerIndex, + iteratorIndex, + iteratorContainerId, +}) => { + const { app } = useApp({ config, iteratorIndex, iteratorContainerId }); + + if (!app) return null; + + return ( + + ); +}; + +Page.displayName = 'magic-ui-button'; + +export default Page; diff --git a/react-components/button/src/event.ts b/react-components/button/src/event.ts new file mode 100644 index 00000000..cdf87604 --- /dev/null +++ b/react-components/button/src/event.ts @@ -0,0 +1,4 @@ +export default { + methods: [], + events: [], +}; diff --git a/packages/ui-react/src/text/formConfig.ts b/react-components/button/src/formConfig.ts similarity index 91% rename from packages/ui-react/src/text/formConfig.ts rename to react-components/button/src/formConfig.ts index 2e86b78c..22a9a517 100644 --- a/packages/ui-react/src/text/formConfig.ts +++ b/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', - }, ]; diff --git a/packages/ui-react/src/button/index.ts b/react-components/button/src/index.ts similarity index 95% rename from packages/ui-react/src/button/index.ts rename to react-components/button/src/index.ts index 02716020..9bb21ebe 100644 --- a/packages/ui-react/src/button/index.ts +++ b/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; diff --git a/packages/ui-react/src/button/initValue.ts b/react-components/button/src/initValue.ts similarity index 100% rename from packages/ui-react/src/button/initValue.ts rename to react-components/button/src/initValue.ts diff --git a/react-components/container/package.json b/react-components/container/package.json new file mode 100644 index 00000000..99df6c4c --- /dev/null +++ b/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" + } +} diff --git a/react-components/container/src/Container.tsx b/react-components/container/src/Container.tsx new file mode 100644 index 00000000..507e0073 --- /dev/null +++ b/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 { + id?: Id; + type?: 'container'; +} + +interface ContainerProps { + config: ContainerSchema; + className: string; + style: Record; + id: string; + containerIndex: number; + iteratorIndex: number[]; + iteratorContainerId: Id[]; +} + +const Container: React.FC = ({ + 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 ( +
+ {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 ( + + ); + })} +
+ ); +}; + +Container.displayName = 'magic-ui-container'; + +export default Container; diff --git a/react-components/container/src/event.ts b/react-components/container/src/event.ts new file mode 100644 index 00000000..cdf87604 --- /dev/null +++ b/react-components/container/src/event.ts @@ -0,0 +1,4 @@ +export default { + methods: [], + events: [], +}; diff --git a/packages/ui-react/src/container/formConfig.ts b/react-components/container/src/formConfig.ts similarity index 93% rename from packages/ui-react/src/container/formConfig.ts rename to react-components/container/src/formConfig.ts index dfe93287..6ad088c3 100644 --- a/packages/ui-react/src/container/formConfig.ts +++ b/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; } diff --git a/packages/ui-react/src/container/index.ts b/react-components/container/src/index.ts similarity index 95% rename from packages/ui-react/src/container/index.ts rename to react-components/container/src/index.ts index c0d5c9f2..9425257f 100644 --- a/packages/ui-react/src/container/index.ts +++ b/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; diff --git a/packages/ui-react/src/container/initValue.ts b/react-components/container/src/initValue.ts similarity index 100% rename from packages/ui-react/src/container/initValue.ts rename to react-components/container/src/initValue.ts diff --git a/react-components/img/package.json b/react-components/img/package.json new file mode 100644 index 00000000..c0685deb --- /dev/null +++ b/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" + } +} diff --git a/packages/ui-react/src/img/Img.tsx b/react-components/img/src/Img.tsx similarity index 55% rename from packages/ui-react/src/img/Img.tsx rename to react-components/img/src/Img.tsx index ae0db3b0..50bce662 100644 --- a/packages/ui-react/src/img/Img.tsx +++ b/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 ImgProps { - config: { - url: string; - src: string; - } & MComponent; +interface ImgSchema extends Omit { + id?: Id; + type?: 'img'; + src: string; + url?: string; } -const Img: React.FC = ({ config }) => { - const { app } = useApp({ config }); +interface ImgProps { + config: ImgSchema; + className: string; + id: string; + style: Record; + containerIndex: number; + iteratorIndex?: number[]; + iteratorContainerId?: Id[]; +} + +const Img: React.FC = ({ + 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 = ({ config }) => { return ( diff --git a/react-components/img/src/event.ts b/react-components/img/src/event.ts new file mode 100644 index 00000000..cdf87604 --- /dev/null +++ b/react-components/img/src/event.ts @@ -0,0 +1,4 @@ +export default { + methods: [], + events: [], +}; diff --git a/packages/ui-react/src/img/formConfig.ts b/react-components/img/src/formConfig.ts similarity index 96% rename from packages/ui-react/src/img/formConfig.ts rename to react-components/img/src/formConfig.ts index 1616e0b4..82926bdb 100644 --- a/packages/ui-react/src/img/formConfig.ts +++ b/react-components/img/src/formConfig.ts @@ -20,6 +20,7 @@ export default [ { text: '图片', name: 'src', + type: 'data-source-input', }, { text: '链接', diff --git a/packages/ui-react/src/img/index.ts b/react-components/img/src/index.ts similarity index 95% rename from packages/ui-react/src/img/index.ts rename to react-components/img/src/index.ts index 9651d901..a4faec7e 100644 --- a/packages/ui-react/src/img/index.ts +++ b/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; diff --git a/packages/ui-react/src/img/initValue.ts b/react-components/img/src/initValue.ts similarity index 100% rename from packages/ui-react/src/img/initValue.ts rename to react-components/img/src/initValue.ts diff --git a/react-components/iterator-container/package.json b/react-components/iterator-container/package.json new file mode 100644 index 00000000..b6535248 --- /dev/null +++ b/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" + } +} diff --git a/react-components/iterator-container/src/IteratorContainer.tsx b/react-components/iterator-container/src/IteratorContainer.tsx new file mode 100644 index 00000000..0686c7f4 --- /dev/null +++ b/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 { + id?: Id; + type?: 'iterator-container'; +} + +interface IteratorContainerProps { + config: IteratorContainerSchema; + className: string; + style: Record; + id: string; + containerIndex: number; + iteratorIndex: number[]; + iteratorContainerId: Id[]; +} + +interface IteratorItemSchema { + items: MNode[]; + condResult: boolean; + style: { + [key: string]: any; + }; +} + +const IteratorContainer: React.FC = ({ + 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( + 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 ( +
+ {configs.map((config: any, index: number) => ( + + ))} +
+ ); +}; + +IteratorContainer.displayName = 'magic-ui-iterator-container'; + +export default IteratorContainer; diff --git a/react-components/iterator-container/src/event.ts b/react-components/iterator-container/src/event.ts new file mode 100644 index 00000000..cdf87604 --- /dev/null +++ b/react-components/iterator-container/src/event.ts @@ -0,0 +1,4 @@ +export default { + methods: [], + events: [], +}; diff --git a/packages/ui-react/src/iterator-container/src/formConfig.ts b/react-components/iterator-container/src/formConfig.ts similarity index 94% rename from packages/ui-react/src/iterator-container/src/formConfig.ts rename to react-components/iterator-container/src/formConfig.ts index 212a97c5..6058ccf5 100644 --- a/packages/ui-react/src/iterator-container/src/formConfig.ts +++ b/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: '容器布局', diff --git a/react-components/iterator-container/src/index.ts b/react-components/iterator-container/src/index.ts new file mode 100644 index 00000000..4413ff5a --- /dev/null +++ b/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; diff --git a/packages/ui-react/src/iterator-container/src/initValue.ts b/react-components/iterator-container/src/initValue.ts similarity index 100% rename from packages/ui-react/src/iterator-container/src/initValue.ts rename to react-components/iterator-container/src/initValue.ts diff --git a/react-components/overlay/package.json b/react-components/overlay/package.json new file mode 100644 index 00000000..6698d3f2 --- /dev/null +++ b/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" + } +} diff --git a/react-components/overlay/src/Overlay.tsx b/react-components/overlay/src/Overlay.tsx new file mode 100644 index 00000000..c8e78c4c --- /dev/null +++ b/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; + id: string; + containerIndex: number; + iteratorIndex: number[]; + iteratorContainerId: Id[]; +} + +const Overlay: React.FC = ({ + 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 ( + + ); +}; + +Overlay.displayName = 'magic-ui-overlay'; + +export default Overlay; diff --git a/packages/ui-react/src/overlay/event.ts b/react-components/overlay/src/event.ts similarity index 100% rename from packages/ui-react/src/overlay/event.ts rename to react-components/overlay/src/event.ts diff --git a/packages/ui-react/src/overlay/formConfig.ts b/react-components/overlay/src/formConfig.ts similarity index 100% rename from packages/ui-react/src/overlay/formConfig.ts rename to react-components/overlay/src/formConfig.ts diff --git a/packages/ui-react/src/overlay/index.ts b/react-components/overlay/src/index.ts similarity index 100% rename from packages/ui-react/src/overlay/index.ts rename to react-components/overlay/src/index.ts diff --git a/packages/ui-react/src/overlay/initValue.ts b/react-components/overlay/src/initValue.ts similarity index 100% rename from packages/ui-react/src/overlay/initValue.ts rename to react-components/overlay/src/initValue.ts diff --git a/react-components/page-fragment-container/package.json b/react-components/page-fragment-container/package.json new file mode 100644 index 00000000..1e48d860 --- /dev/null +++ b/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" + } +} diff --git a/packages/ui-react/src/page-fragment-container/src/PageFragmentContainer.tsx b/react-components/page-fragment-container/src/PageFragmentContainer.tsx similarity index 57% rename from packages/ui-react/src/page-fragment-container/src/PageFragmentContainer.tsx rename to react-components/page-fragment-container/src/PageFragmentContainer.tsx index 4939fe12..16f8e717 100644 --- a/packages/ui-react/src/page-fragment-container/src/PageFragmentContainer.tsx +++ b/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; + id: string; + containerIndex: number; + iteratorIndex: number[]; + iteratorContainerId: Id[]; } -const PageFragmentContainer: React.FC = ({ config }) => { +const PageFragmentContainer: React.FC = ({ 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 = ({ config }) } } + const MagicUiContainer = app.resolveComponent('container'); + + const classNames = ['magic-ui-page-fragment-container']; + if (className) { + classNames.push(className); + } + return (
diff --git a/react-components/page-fragment-container/src/event.ts b/react-components/page-fragment-container/src/event.ts new file mode 100644 index 00000000..cdf87604 --- /dev/null +++ b/react-components/page-fragment-container/src/event.ts @@ -0,0 +1,4 @@ +export default { + methods: [], + events: [], +}; diff --git a/packages/ui-react/src/page-fragment-container/src/formConfig.ts b/react-components/page-fragment-container/src/formConfig.ts similarity index 100% rename from packages/ui-react/src/page-fragment-container/src/formConfig.ts rename to react-components/page-fragment-container/src/formConfig.ts diff --git a/react-components/page-fragment-container/src/index.ts b/react-components/page-fragment-container/src/index.ts new file mode 100644 index 00000000..6c342b15 --- /dev/null +++ b/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; diff --git a/packages/ui-react/src/page-fragment-container/src/initValue.ts b/react-components/page-fragment-container/src/initValue.ts similarity index 100% rename from packages/ui-react/src/page-fragment-container/src/initValue.ts rename to react-components/page-fragment-container/src/initValue.ts diff --git a/react-components/page-fragment/package.json b/react-components/page-fragment/package.json new file mode 100644 index 00000000..ff4b91ed --- /dev/null +++ b/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" + } +} diff --git a/react-components/page-fragment/src/PageFragment.tsx b/react-components/page-fragment/src/PageFragment.tsx new file mode 100644 index 00000000..31a2c66d --- /dev/null +++ b/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 = ({ 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 ; +}; + +PageFragment.displayName = 'magic-ui-page-fragment'; + +export default PageFragment; diff --git a/react-components/page-fragment/src/event.ts b/react-components/page-fragment/src/event.ts new file mode 100644 index 00000000..cdf87604 --- /dev/null +++ b/react-components/page-fragment/src/event.ts @@ -0,0 +1,4 @@ +export default { + methods: [], + events: [], +}; diff --git a/packages/ui-react/src/page-fragment/src/formConfig.ts b/react-components/page-fragment/src/formConfig.ts similarity index 93% rename from packages/ui-react/src/page-fragment/src/formConfig.ts rename to react-components/page-fragment/src/formConfig.ts index bc057ef7..c1412758 100644 --- a/packages/ui-react/src/page-fragment/src/formConfig.ts +++ b/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; } diff --git a/react-components/page-fragment/src/index.ts b/react-components/page-fragment/src/index.ts new file mode 100644 index 00000000..3e0d8d7a --- /dev/null +++ b/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; diff --git a/packages/ui-react/src/page-fragment/src/initValue.ts b/react-components/page-fragment/src/initValue.ts similarity index 100% rename from packages/ui-react/src/page-fragment/src/initValue.ts rename to react-components/page-fragment/src/initValue.ts diff --git a/react-components/page/package.json b/react-components/page/package.json new file mode 100644 index 00000000..39bd37a0 --- /dev/null +++ b/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" + } +} diff --git a/packages/ui-react/src/button/Button.tsx b/react-components/page/src/Page.tsx similarity index 57% rename from packages/ui-react/src/button/Button.tsx rename to react-components/page/src/Page.tsx index b88ae9c6..96436ac1 100644 --- a/packages/ui-react/src/button/Button.tsx +++ b/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 ButtonProps { - config: MComponent; +interface PageProps { + config: MPage; } -const Page: React.FC = ({ config }) => { - const { app } = useApp({ config }); +const Page: React.FC = ({ 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']; + if (config.className) { + classNames.push(config.className); + } + + return ; }; -Page.displayName = 'magic-ui-button'; +Page.displayName = 'magic-ui-page'; export default Page; diff --git a/packages/ui-react/src/page/event.ts b/react-components/page/src/event.ts similarity index 100% rename from packages/ui-react/src/page/event.ts rename to react-components/page/src/event.ts diff --git a/packages/ui-react/src/page/formConfig.ts b/react-components/page/src/formConfig.ts similarity index 94% rename from packages/ui-react/src/page/formConfig.ts rename to react-components/page/src/formConfig.ts index b2ffc046..c80c46cd 100644 --- a/packages/ui-react/src/page/formConfig.ts +++ b/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; } diff --git a/packages/ui-react/src/page/index.ts b/react-components/page/src/index.ts similarity index 100% rename from packages/ui-react/src/page/index.ts rename to react-components/page/src/index.ts diff --git a/packages/ui-react/src/page/initValue.ts b/react-components/page/src/initValue.ts similarity index 100% rename from packages/ui-react/src/page/initValue.ts rename to react-components/page/src/initValue.ts diff --git a/react-components/qrcode/package.json b/react-components/qrcode/package.json new file mode 100644 index 00000000..c14736e7 --- /dev/null +++ b/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" + } +} diff --git a/packages/ui-react/src/qrcode/Qrcode.tsx b/react-components/qrcode/src/QrCode.tsx similarity index 56% rename from packages/ui-react/src/qrcode/Qrcode.tsx rename to react-components/qrcode/src/QrCode.tsx index aef6149c..c28c2a83 100644 --- a/packages/ui-react/src/qrcode/Qrcode.tsx +++ b/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 QrcodeProps { - config: { - url: string; - } & MComponent; +interface QrCodeSchema extends Omit { + id?: Id; + type?: 'qrcode'; + url: string; } -const Qrcode: React.FC = ({ config }) => { +interface QrCodeProps { + config: QrCodeSchema; + className: string; + id: string; + style: Record; + containerIndex: number; + iteratorIndex?: number[]; + iteratorContainerId?: Id[]; +} + +const QrCode: React.FC = ({ + id, + config, + className, + style, + containerIndex, + iteratorIndex, + iteratorContainerId, +}) => { const { app } = useApp({ config }); if (!app) return null; @@ -45,14 +62,17 @@ const Qrcode: React.FC = ({ config }) => { return ( ); }; -Qrcode.displayName = 'magic-ui-qrcode'; +QrCode.displayName = 'magic-ui-qrcode'; -export default Qrcode; +export default QrCode; diff --git a/react-components/qrcode/src/event.ts b/react-components/qrcode/src/event.ts new file mode 100644 index 00000000..cdf87604 --- /dev/null +++ b/react-components/qrcode/src/event.ts @@ -0,0 +1,4 @@ +export default { + methods: [], + events: [], +}; diff --git a/packages/ui-react/src/qrcode/formConfig.ts b/react-components/qrcode/src/formConfig.ts similarity index 100% rename from packages/ui-react/src/qrcode/formConfig.ts rename to react-components/qrcode/src/formConfig.ts diff --git a/packages/ui-react/src/qrcode/index.ts b/react-components/qrcode/src/index.ts similarity index 89% rename from packages/ui-react/src/qrcode/index.ts rename to react-components/qrcode/src/index.ts index 5bc98fa8..edad48c5 100644 --- a/packages/ui-react/src/qrcode/index.ts +++ b/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; diff --git a/packages/ui-react/src/qrcode/initValue.ts b/react-components/qrcode/src/initValue.ts similarity index 100% rename from packages/ui-react/src/qrcode/initValue.ts rename to react-components/qrcode/src/initValue.ts diff --git a/react-components/text/package.json b/react-components/text/package.json new file mode 100644 index 00000000..fa0f1786 --- /dev/null +++ b/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" + } +} diff --git a/packages/ui-react/src/text/Text.tsx b/react-components/text/src/Text.tsx similarity index 50% rename from packages/ui-react/src/text/Text.tsx rename to react-components/text/src/Text.tsx index 92a7f988..78fbb835 100644 --- a/packages/ui-react/src/text/Text.tsx +++ b/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 TextProps { - config: MComponent; +interface TextSchema extends Omit { + id?: Id; + type?: 'text'; + text: string; } -const Text: React.FC = ({ config }) => { - const { app } = useApp({ config }); +interface TextProps { + id: Id; + config: TextSchema; + className: string; + style: Record; + containerIndex: number; + iteratorIndex?: number[]; + iteratorContainerId?: Id[]; +} + +const Text: React.FC = ({ + id, + config, + className, + style, + containerIndex, + iteratorIndex, + iteratorContainerId, +}) => { + const { app } = useApp({ config, iteratorIndex, iteratorContainerId }); if (!app) return null; return ( -

+

{config.text}

); }; -Text.displayName = 'maigc-ui-text'; +Text.displayName = 'magic-ui-text'; export default Text; diff --git a/react-components/text/src/event.ts b/react-components/text/src/event.ts new file mode 100644 index 00000000..cdf87604 --- /dev/null +++ b/react-components/text/src/event.ts @@ -0,0 +1,4 @@ +export default { + methods: [], + events: [], +}; diff --git a/packages/ui-react/src/button/formConfig.ts b/react-components/text/src/formConfig.ts similarity index 100% rename from packages/ui-react/src/button/formConfig.ts rename to react-components/text/src/formConfig.ts diff --git a/packages/ui-react/src/text/index.ts b/react-components/text/src/index.ts similarity index 95% rename from packages/ui-react/src/text/index.ts rename to react-components/text/src/index.ts index 9dc1642d..9e89caee 100644 --- a/packages/ui-react/src/text/index.ts +++ b/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; diff --git a/packages/ui-react/src/text/initValue.ts b/react-components/text/src/initValue.ts similarity index 100% rename from packages/ui-react/src/text/initValue.ts rename to react-components/text/src/initValue.ts diff --git a/runtime/react-runtime-help/package.json b/runtime/react-runtime-help/package.json new file mode 100644 index 00000000..06857004 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/packages/ui-react/src/AppContent.ts b/runtime/react-runtime-help/src/AppContent.ts similarity index 87% rename from packages/ui-react/src/AppContent.ts rename to runtime/react-runtime-help/src/AppContent.ts index 1b90ea7f..bba90c5e 100644 --- a/packages/ui-react/src/AppContent.ts +++ b/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(undefined); +export default React.createContext(undefined); diff --git a/runtime/react-runtime-help/src/hooks/use-app.ts b/runtime/react-runtime-help/src/hooks/use-app.ts new file mode 100644 index 00000000..a2140cda --- /dev/null +++ b/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 { + 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 = (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 }; +}; diff --git a/runtime/react-runtime-help/src/hooks/use-dsl.ts b/runtime/react-runtime-help/src/hooks/use-dsl.ts new file mode 100644 index 00000000..13f102a8 --- /dev/null +++ b/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 }; +}; diff --git a/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts b/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts new file mode 100644 index 00000000..e30b3bbc --- /dev/null +++ b/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); + }, + }); +}; diff --git a/runtime/react-runtime-help/src/index.ts b/runtime/react-runtime-help/src/index.ts new file mode 100644 index 00000000..8453556c --- /dev/null +++ b/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'; diff --git a/runtime/react-runtime-help/tsconfig.build.json b/runtime/react-runtime-help/tsconfig.build.json new file mode 100644 index 00000000..ea5ec8de --- /dev/null +++ b/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"], +} diff --git a/runtime/react-runtime-help/tsconfig.json b/runtime/react-runtime-help/tsconfig.json new file mode 100644 index 00000000..cb593495 --- /dev/null +++ b/runtime/react-runtime-help/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "baseUrl": "./", + "jsx": "react", + "forceConsistentCasingInFileNames": true, + "types": ["node"], + }, +} diff --git a/runtime/react/package.json b/runtime/react/package.json index 1b283b46..5ce61e0d 100644 --- a/runtime/react/package.json +++ b/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", diff --git a/runtime/react/page/App.tsx b/runtime/react/page/App.tsx index 0fb1a221..2fe5d408 100644 --- a/runtime/react/page/App.tsx +++ b/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(AppContent); + const app = useContext(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 ; + return ; } export default App; diff --git a/runtime/react/page/main.tsx b/runtime/react/page/main.tsx index f00a3c2e..f8cfcb80 100644 --- a/runtime/react/page/main.tsx +++ b/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'; diff --git a/runtime/react/playground/App.tsx b/runtime/react/playground/App.tsx index c533caf7..5e04000e 100644 --- a/runtime/react/playground/App.tsx +++ b/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(AppContent); diff --git a/runtime/react/playground/main.tsx b/runtime/react/playground/main.tsx index f8794db4..cdfe9abb 100644 --- a/runtime/react/playground/main.tsx +++ b/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( @@ -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); diff --git a/runtime/react/tsconfig.json b/runtime/react/tsconfig.json index 43e3e99f..cb593495 100644 --- a/runtime/react/tsconfig.json +++ b/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"] } diff --git a/tsconfig.build-browser.json b/tsconfig.build-browser.json index ccb59bb6..cade1360 100644 --- a/tsconfig.build-browser.json +++ b/tsconfig.build-browser.json @@ -14,5 +14,6 @@ "packages/utils/src", "packages/element-plus-adapter/src", "packages/ui/src", + "packages/ui-react/src", ] } diff --git a/tsconfig.json b/tsconfig.json index bf378a9f..f76db196 100644 --- a/tsconfig.json +++ b/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/*"], diff --git a/vitest.config.ts b/vitest.config.ts index 4db6ad16..79dd1e4a 100644 --- a/vitest.config.ts +++ b/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/**',