diff --git a/playground/src/configs/dsl.ts b/playground/src/configs/dsl.ts index 9952c88e..92ef37cf 100644 --- a/playground/src/configs/dsl.ts +++ b/playground/src/configs/dsl.ts @@ -64,6 +64,21 @@ const dsl: MApp = { }, params: [], }, + code_6778: { + name: 'toOtherPage', + desc: '', + timing: '', + params: [ + { + name: 'pageId', + extra: '', + type: '', + }, + ], + content: ({ app, params }) => { + app.setPage(params.pageId); + }, + }, }, items: [ { @@ -250,6 +265,37 @@ const dsl: MApp = { created: [], displayConds: [], }, + { + id: 'button_1cb163ad', + text: '前往page2', + multiple: true, + style: { + width: '270', + height: '37.5', + border: 0, + backgroundColor: '#fb6f00', + position: 'absolute', + left: 56, + top: 266, + }, + type: 'button', + name: '按钮', + events: [ + { + name: 'magic:common:events:click', + actions: [ + { + actionType: ActionType.CODE, + codeId: 'code_6778', + params: { + pageId: 'page_171ff161', + }, + }, + ], + }, + ], + displayConds: [], + }, { type: 'overlay', id: 'overlay_2159', @@ -376,6 +422,53 @@ const dsl: MApp = { }, ], }, + { + id: 'page_171ff161', + items: [ + { + id: 'button_80ca1076', + text: '返回', + multiple: true, + style: { + width: '270', + height: '37.5', + border: 0, + backgroundColor: '#fb6f00', + position: 'absolute', + left: 48, + top: 297, + }, + type: 'button', + name: '按钮', + events: [ + { + name: 'magic:common:events:click', + actions: [ + { + actionType: ActionType.CODE, + codeId: 'code_6778', + params: { + pageId: 'page_299', + }, + }, + ], + }, + ], + displayConds: [], + }, + ], + style: { + width: '100%', + height: '100%', + position: 'relative', + top: 0, + left: 0, + }, + type: NodeType.PAGE, + name: 'page2', + title: '', + layout: 'absolute', + }, ], dataSources: [ { diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue index 01627dec..45e1654d 100644 --- a/playground/src/pages/Editor.vue +++ b/playground/src/pages/Editor.vue @@ -263,7 +263,7 @@ const moveableOptions = (config?: CustomizeMoveableOptionsCallbackConfig): Movea const save = () => { localStorage.setItem( - 'magicDSL', + 'magicDSL2', serialize(toRaw(value.value), { space: 2, unsafe: true, @@ -290,7 +290,7 @@ asyncLoadJs(`${VITE_ENTRY_PATH}/ds-value/index.umd.cjs`).then(() => { try { // eslint-disable-next-line no-eval - const magicDSL = eval(`(${localStorage.getItem('magicDSL')})`); + const magicDSL = eval(`(${localStorage.getItem('magicDSL2')})`); if (!magicDSL) { save(); } else { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a8a1a197..903bec23 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -906,21 +906,12 @@ importers: '@tmagic/core': specifier: 1.5.9 version: 1.5.9(typescript@5.7.3) - '@tmagic/data-source': - specifier: 1.5.9 - version: 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3) '@tmagic/react-runtime-help': - specifier: 0.0.3 - version: 0.0.3(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/data-source@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@tmagic/schema@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@tmagic/utils@1.5.9(@tmagic/schema@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3) - '@tmagic/schema': - specifier: 1.5.9 - version: 1.5.9(typescript@5.7.3) + specifier: 0.0.4 + version: 0.0.4(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3) '@tmagic/stage': specifier: 1.5.9 version: 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3) - '@tmagic/utils': - specifier: 1.5.9 - version: 1.5.9(@tmagic/schema@1.5.9(typescript@5.7.3))(typescript@5.7.3) axios: specifier: ^0.25.0 version: 0.25.0 @@ -1033,8 +1024,8 @@ importers: specifier: 1.5.9 version: 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3) '@tmagic/vue-runtime-help': - specifier: ^0.1.4 - version: 0.1.5(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16) + specifier: ^1.0.0 + version: 1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16) axios: specifier: ^0.25.0 version: 0.25.0 @@ -1082,13 +1073,13 @@ importers: specifier: 1.5.9 version: 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3) '@tmagic/vue-runtime-help': - specifier: ^0.1.4 - version: 0.1.5(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)) + specifier: ^1.0.0 + version: 1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)) axios: specifier: ^0.25.0 version: 0.25.0 vue: - specifier: '>=3.5.0' + specifier: ^3.5.0 version: 3.5.13(typescript@5.7.3) devDependencies: '@tmagic/cli': @@ -2866,20 +2857,17 @@ packages: typescript: optional: true - '@tmagic/react-runtime-help@0.0.3': - resolution: {integrity: sha512-ZxoxTO+NEk8pVzgAysQW3B790rYY8HVXXE6JlhSZeF/P+vL9PWGZjZDImRiuHxR+EMLNq5lUrf5iWF9Tg4ho+w==} + '@tmagic/react-runtime-help@0.0.4': + resolution: {integrity: sha512-H6WnitSMQUjZ4ArkO/a70l0GIqmTP+n+416PIvbCEVaVb5M8cBk72h3rTvwVp3CGFptLo/OYooyw7hO1ofVmCw==} engines: {node: '>=18'} peerDependencies: - '@tmagic/core': ^1.5.0-beta.4 - '@tmagic/data-source': ^1.5.0-beta.4 - '@tmagic/schema': ^1.5.0-beta.4 - '@tmagic/stage': ^1.5.0-beta.4 - '@tmagic/utils': ^1.5.0-beta.4 + '@tmagic/core': '>=1.5.0' + '@tmagic/stage': '>=1.5.0' lodash-es: ^4.17.21 react: '>=18.3.1' typescript: '*' peerDependenciesMeta: - '@tmagic/schema': + '@tmagic/core': optional: true '@tmagic/stage': optional: true @@ -2985,12 +2973,12 @@ packages: typescript: optional: true - '@tmagic/vue-runtime-help@0.1.5': - resolution: {integrity: sha512-cBKqJYCND8I3DiNz8ENHa0kER+5zeuWhGISimglCddGcrAcg9+eloXZnFA8p4c4VzOrM8tqw+30gYUKMVZJ/UQ==} + '@tmagic/vue-runtime-help@1.0.0': + resolution: {integrity: sha512-dRNW56m7t9e+fDHVOgONz8xBI60rgCY+gxekyVP3oBq0JU8Sviuv8KVhM2YiMiTja6C/xTwBENSQLocYLV2UOw==} engines: {node: '>=18'} peerDependencies: - '@tmagic/core': '>=1.5.0-beta.14' - '@tmagic/stage': '>=1.5.0-beta.14' + '@tmagic/core': '>=1.5.0' + '@tmagic/stage': '>=1.5.0' '@vue/composition-api': '>=1.7.2' typescript: '*' vue: '>=2.6.0 || >=3.5.0' @@ -8450,15 +8438,12 @@ snapshots: optionalDependencies: typescript: 5.7.3 - '@tmagic/react-runtime-help@0.0.3(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/data-source@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@tmagic/schema@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@tmagic/utils@1.5.9(@tmagic/schema@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3)': + '@tmagic/react-runtime-help@0.0.4(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(lodash-es@4.17.21)(react@18.3.1)(typescript@5.7.3)': dependencies: - '@tmagic/core': 1.5.9(typescript@5.7.3) - '@tmagic/data-source': 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3) - '@tmagic/utils': 1.5.9(@tmagic/schema@1.5.9(typescript@5.7.3))(typescript@5.7.3) lodash-es: 4.17.21 react: 18.3.1 optionalDependencies: - '@tmagic/schema': 1.5.9(typescript@5.7.3) + '@tmagic/core': 1.5.9(typescript@5.7.3) '@tmagic/stage': 1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3) typescript: 5.7.3 @@ -8576,7 +8561,7 @@ snapshots: optionalDependencies: typescript: 5.7.3 - '@tmagic/vue-runtime-help@0.1.5(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16)': + '@tmagic/vue-runtime-help@1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@2.7.16))(typescript@5.7.3)(vue@2.7.16)': dependencies: vue: 2.7.16 vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@2.7.16))(vue@2.7.16) @@ -8586,7 +8571,7 @@ snapshots: '@vue/composition-api': 1.7.2(vue@2.7.16) typescript: 5.7.3 - '@tmagic/vue-runtime-help@0.1.5(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))': + '@tmagic/vue-runtime-help@1.0.0(@tmagic/core@1.5.9(typescript@5.7.3))(@tmagic/stage@1.5.9(@tmagic/core@1.5.9(typescript@5.7.3))(typescript@5.7.3))(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))': dependencies: vue: 3.5.13(typescript@5.7.3) vue-demi: 0.14.10(@vue/composition-api@1.7.2(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)) diff --git a/runtime/react-runtime-help/package.json b/runtime/react-runtime-help/package.json index 1b324e24..e7777bfa 100644 --- a/runtime/react-runtime-help/package.json +++ b/runtime/react-runtime-help/package.json @@ -1,5 +1,5 @@ { - "version": "0.0.3", + "version": "0.0.4", "name": "@tmagic/react-runtime-help", "type": "module", "sideEffects": false, diff --git a/runtime/react-runtime-help/src/hooks/use-dsl.ts b/runtime/react-runtime-help/src/hooks/use-dsl.ts index 158c715b..a65f5bee 100644 --- a/runtime/react-runtime-help/src/hooks/use-dsl.ts +++ b/runtime/react-runtime-help/src/hooks/use-dsl.ts @@ -6,9 +6,11 @@ import type TMagicApp from '@tmagic/core'; import { isPage, replaceChildNode } from '@tmagic/core'; export const useDsl = (app: TMagicApp | undefined) => { - if (!app?.page) return null; + const [pageConfig, setPageConfig] = useState(app?.page?.data); - const [pageConfig, setPageConfig] = useState(app.page.data); + app?.on('page-change', () => { + setPageConfig(app.page?.data); + }); const updateDataHandler = (nodes: MNode[], sourceId: string, event: ChangeEvent) => { let config = pageConfig; @@ -16,14 +18,14 @@ export const useDsl = (app: TMagicApp | undefined) => { if (isPage(node)) { config = node; } else { - replaceChildNode(node, [config]); + config && replaceChildNode(node, [config]); } }); setPageConfig(cloneDeep(config)); setTimeout(() => { - app.emit('replaced-node', { + app?.emit('replaced-node', { ...event, nodes, sourceId, @@ -32,10 +34,10 @@ export const useDsl = (app: TMagicApp | undefined) => { }; useEffect(() => { - app.dataSourceManager?.on('update-data', updateDataHandler); + app?.dataSourceManager?.on('update-data', updateDataHandler); return () => { - app.dataSourceManager?.off('update-data', updateDataHandler); + app?.dataSourceManager?.off('update-data', updateDataHandler); }; }, []); diff --git a/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts b/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts index ab78cc83..366943e8 100644 --- a/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts +++ b/runtime/react-runtime-help/src/hooks/use-editor-dsl.ts @@ -11,11 +11,11 @@ declare global { } } -export const useEditorDsl = (app: TMagicApp | undefined, renderDom: () => void) => { +export const useEditorDsl = (app: TMagicApp, renderDom: () => void) => { let curPageId: Id = ''; const updateConfig = (root: MApp) => { - app?.setConfig(root, curPageId); + app.setConfig(root, curPageId); renderDom(); }; @@ -30,7 +30,7 @@ export const useEditorDsl = (app: TMagicApp | undefined, renderDom: () => void) updatePageId(id: Id) { curPageId = id; - app?.setPage(curPageId); + app.setPage(curPageId); renderDom(); }, diff --git a/runtime/react/dev.vite.config.ts b/runtime/react/dev.vite.config.ts index 7eb22943..bf6c8271 100644 --- a/runtime/react/dev.vite.config.ts +++ b/runtime/react/dev.vite.config.ts @@ -38,6 +38,7 @@ export default defineConfig({ { find: /^@data-source/, replacement: path.join(__dirname, '../../packages/data-source/src') }, { find: /^@tmagic\/data-source/, replacement: path.join(__dirname, '../../packages/data-source/src/index.ts') }, { find: /^@tmagic\/dep/, replacement: path.join(__dirname, '../../packages/dep/src/index.ts') }, + { find: /^@tmagic\/react-runtime-help/, replacement: path.join(__dirname, '../react-runtime-help/src/index.ts') }, ], }, diff --git a/runtime/react/package.json b/runtime/react/package.json index 87488374..83a31688 100644 --- a/runtime/react/package.json +++ b/runtime/react/package.json @@ -20,11 +20,8 @@ }, "dependencies": { "@tmagic/core": "1.5.9", - "@tmagic/data-source": "1.5.9", - "@tmagic/react-runtime-help": "0.0.3", - "@tmagic/schema": "1.5.9", + "@tmagic/react-runtime-help": "0.0.4", "@tmagic/stage": "1.5.9", - "@tmagic/utils": "1.5.9", "axios": "^0.25.0", "terser": "^5.31.6", "react": "^18.3.1", diff --git a/runtime/react/page/main.tsx b/runtime/react/page/main.tsx index 65faae9f..e86ee1f4 100644 --- a/runtime/react/page/main.tsx +++ b/runtime/react/page/main.tsx @@ -18,11 +18,9 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; -import Core from '@tmagic/core'; -import { DataSourceManager, DeepObservedData } from '@tmagic/data-source'; +import type { MApp } from '@tmagic/core'; +import Core, { DataSourceManager, DeepObservedData, getUrlParam } from '@tmagic/core'; import { AppContent } from '@tmagic/react-runtime-help'; -import type { MApp } from '@tmagic/schema'; -import { getUrlParam } from '@tmagic/utils'; import components from '../.tmagic/comp-entry'; import dataSources from '../.tmagic/datasource-entry'; diff --git a/runtime/react/playground/App.tsx b/runtime/react/playground/App.tsx index 5e04000e..a3638d2d 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 type { MPage } from '@tmagic/core'; import { AppContent } from '@tmagic/react-runtime-help'; -import type { MPage } from '@tmagic/schema'; function App() { const app = useContext(AppContent); diff --git a/runtime/react/playground/main.tsx b/runtime/react/playground/main.tsx index 229c25b9..98cf3d4f 100644 --- a/runtime/react/playground/main.tsx +++ b/runtime/react/playground/main.tsx @@ -19,8 +19,7 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; -import Core from '@tmagic/core'; -import { DataSourceManager, DeepObservedData } from '@tmagic/data-source'; +import Core, { DataSourceManager, DeepObservedData } from '@tmagic/core'; import { AppContent, useEditorDsl } from '@tmagic/react-runtime-help'; import components from '../.tmagic/comp-entry'; diff --git a/runtime/vue-runtime-help/package.json b/runtime/vue-runtime-help/package.json index c0b9320c..bde11f79 100644 --- a/runtime/vue-runtime-help/package.json +++ b/runtime/vue-runtime-help/package.json @@ -1,5 +1,5 @@ { - "version": "0.1.5", + "version": "1.0.0", "name": "@tmagic/vue-runtime-help", "type": "module", "sideEffects": false, diff --git a/runtime/vue-runtime-help/src/hooks/use-dsl.ts b/runtime/vue-runtime-help/src/hooks/use-dsl.ts index 8c6cf1ab..fdc356ee 100644 --- a/runtime/vue-runtime-help/src/hooks/use-dsl.ts +++ b/runtime/vue-runtime-help/src/hooks/use-dsl.ts @@ -1,11 +1,21 @@ -import { nextTick, onBeforeUnmount, reactive, ref } from 'vue-demi'; +import { inject, nextTick, onBeforeUnmount, reactive, ref } from 'vue-demi'; import type TMagicCore from '@tmagic/core'; import type { ChangeEvent, MNode } from '@tmagic/core'; import { isPage, replaceChildNode } from '@tmagic/core'; -export const useDsl = (app?: TMagicCore) => { - const pageConfig = ref(app?.page?.data || {}); +export const useDsl = () => { + const app = inject('app'); + + if (!app) { + throw new Error('useDsl must be used after MagicApp is created'); + } + + const pageConfig = ref(app.page?.data || {}); + + app.on('page-change', () => { + pageConfig.value = app.page?.data || {}; + }); const updateDataHandler = (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => { nodes.forEach((node) => { @@ -16,20 +26,21 @@ export const useDsl = (app?: TMagicCore) => { } }); - if (!app) return; - nextTick(() => { app.emit('replaced-node', { nodes, sourceId, ...changeEvent }); }); }; - app?.dataSourceManager?.on('update-data', updateDataHandler); + if (app.dataSourceManager) { + app.dataSourceManager.on('update-data', updateDataHandler); - onBeforeUnmount(() => { - app?.dataSourceManager?.off('update-data', updateDataHandler); - }); + onBeforeUnmount(() => { + app.dataSourceManager!.off('update-data', updateDataHandler); + }); + } return { + app, pageConfig, }; }; diff --git a/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts b/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts index e0dd99eb..2455378a 100644 --- a/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts +++ b/runtime/vue-runtime-help/src/hooks/use-editor-dsl.ts @@ -1,4 +1,4 @@ -import { computed, nextTick, reactive, ref, watch } from 'vue-demi'; +import { computed, inject, nextTick, reactive, ref, watch } from 'vue-demi'; import type TMagicApp from '@tmagic/core'; import type { Id, MApp, MNode } from '@tmagic/core'; @@ -11,7 +11,9 @@ declare global { } } -export const useEditorDsl = (app: TMagicApp | undefined, win = window) => { +export const useEditorDsl = (win = window) => { + const app = inject('app'); + const root = ref(); const curPageId = ref(); const selectedId = ref(); @@ -123,5 +125,6 @@ export const useEditorDsl = (app: TMagicApp | undefined, win = window) => { return { pageConfig, + app, }; }; diff --git a/runtime/vue2/package.json b/runtime/vue2/package.json index f3b4905f..030bcb5b 100644 --- a/runtime/vue2/package.json +++ b/runtime/vue2/package.json @@ -21,7 +21,7 @@ "dependencies": { "@tmagic/core": "1.5.9", "@tmagic/stage": "1.5.9", - "@tmagic/vue-runtime-help": "^0.1.4", + "@tmagic/vue-runtime-help": "^1.0.0", "axios": "^0.25.0", "terser": "^5.31.6", "vue": "^2.7.16" diff --git a/runtime/vue2/page/App.vue b/runtime/vue2/page/App.vue index 7865ca6f..c212088c 100644 --- a/runtime/vue2/page/App.vue +++ b/runtime/vue2/page/App.vue @@ -3,28 +3,17 @@