fix(runtime): 数据源变化更新页面出错

This commit is contained in:
roymondchen 2024-02-29 16:54:49 +08:00
parent 58b62d18e4
commit 0df98bc226
3 changed files with 24 additions and 11 deletions

View File

@ -23,7 +23,7 @@ import Core from '@tmagic/core';
import type { ChangeEvent } from '@tmagic/data-source';
import type { MNode } from '@tmagic/schema';
import { AppContent } from '@tmagic/ui-react';
import { replaceChildNode } from '@tmagic/utils';
import { isPage, replaceChildNode } from '@tmagic/utils';
function App() {
const app = useContext<Core | undefined>(AppContent);
@ -33,11 +33,16 @@ function App() {
const [config, setConfig] = useState(app.page.data);
app.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, event: ChangeEvent) => {
let pageConfig = config;
nodes.forEach((node) => {
replaceChildNode(node, [config]);
if (isPage(node)) {
pageConfig = node;
} else {
replaceChildNode(node, [pageConfig]);
}
});
setConfig(cloneDeep(config));
setConfig(cloneDeep(pageConfig));
setTimeout(() => {
app.emit('replaced-node', {

View File

@ -3,23 +3,27 @@
</template>
<script lang="ts">
import { defineComponent, inject, nextTick, reactive } from 'vue';
import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
import Core from '@tmagic/core';
import type { ChangeEvent } from '@tmagic/data-source';
import type { MNode } from '@tmagic/schema';
import { replaceChildNode } from '@tmagic/utils';
import { isPage, replaceChildNode } from '@tmagic/utils';
export default defineComponent({
name: 'App',
setup() {
const app = inject<Core | undefined>('app');
const pageConfig = reactive(app?.page?.data || {});
const pageConfig = ref(app?.page?.data || {});
app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
nodes.forEach((node) => {
replaceChildNode(reactive(node), [pageConfig as MNode]);
if (isPage(node)) {
pageConfig.value = node;
} else {
replaceChildNode(reactive(node), [pageConfig.value as MNode]);
}
});
if (!app) return;

View File

@ -3,23 +3,27 @@
</template>
<script lang="ts">
import { defineComponent, inject, nextTick, reactive } from 'vue';
import { defineComponent, inject, nextTick, reactive, ref } from 'vue';
import Core from '@tmagic/core';
import type { ChangeEvent } from '@tmagic/data-source';
import type { MNode } from '@tmagic/schema';
import { replaceChildNode } from '@tmagic/utils';
import { isPage, replaceChildNode } from '@tmagic/utils';
export default defineComponent({
name: 'App',
setup() {
const app = inject<Core | undefined>('app');
const pageConfig = reactive(app?.page?.data || {});
const pageConfig = ref(app?.page?.data || {});
app?.dataSourceManager?.on('update-data', (nodes: MNode[], sourceId: string, changeEvent: ChangeEvent) => {
nodes.forEach((node) => {
replaceChildNode(reactive(node), [pageConfig as MNode]);
if (isPage(node)) {
pageConfig.value = node;
} else {
replaceChildNode(reactive(node), [pageConfig.value as MNode]);
}
});
if (!app) return;