From 653cafbe81b4d90fb4accc6dbab0a878631375d2 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 6 Jun 2024 17:42:27 +0800
Subject: [PATCH] =?UTF-8?q?chore(runtime):=20=E4=BD=BF=E7=94=A8DeepObserve?=
 =?UTF-8?q?dData=E5=81=9A=E5=AE=8C=E6=95=B0=E6=8D=AE=E6=BA=90=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E6=A8=A1=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 runtime/react/page/main.tsx       | 4 +++-
 runtime/react/playground/main.tsx | 4 +++-
 runtime/vue2/page/main.ts         | 4 +++-
 runtime/vue2/playground/main.ts   | 4 +++-
 runtime/vue3/page/main.ts         | 4 +++-
 runtime/vue3/playground/main.ts   | 4 +++-
 6 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/runtime/react/page/main.tsx b/runtime/react/page/main.tsx
index b76a765a..f00a3c2e 100644
--- a/runtime/react/page/main.tsx
+++ b/runtime/react/page/main.tsx
@@ -19,7 +19,7 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 import Core from '@tmagic/core';
-import { DataSourceManager } from '@tmagic/data-source';
+import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
 import type { MApp } from '@tmagic/schema';
 import { AppContent } from '@tmagic/ui-react';
 import { getUrlParam } from '@tmagic/utils';
@@ -41,6 +41,8 @@ declare global {
   }
 }
 
+DataSourceManager.registerObservedData(DeepObservedData);
+
 const getLocalConfig = (): MApp[] => {
   const configStr = localStorage.getItem('magicDSL');
   if (!configStr) return [];
diff --git a/runtime/react/playground/main.tsx b/runtime/react/playground/main.tsx
index 30812042..f68349f0 100644
--- a/runtime/react/playground/main.tsx
+++ b/runtime/react/playground/main.tsx
@@ -21,7 +21,7 @@ import { createRoot } from 'react-dom/client';
 import { cloneDeep } from 'lodash-es';
 
 import Core from '@tmagic/core';
-import { DataSourceManager } from '@tmagic/data-source';
+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';
@@ -41,6 +41,8 @@ declare global {
   }
 }
 
+DataSourceManager.registerObservedData(DeepObservedData);
+
 Object.entries(dataSources).forEach(([type, ds]: [string, any]) => {
   DataSourceManager.register(type, ds);
 });
diff --git a/runtime/vue2/page/main.ts b/runtime/vue2/page/main.ts
index ff398a78..3f53e1f4 100644
--- a/runtime/vue2/page/main.ts
+++ b/runtime/vue2/page/main.ts
@@ -19,7 +19,7 @@
 import Vue from 'vue';
 
 import Core from '@tmagic/core';
-import { DataSourceManager, registerDataSourceOnDemand } from '@tmagic/data-source';
+import { DataSourceManager, DeepObservedData， registerDataSourceOnDemand } from '@tmagic/data-source';
 import { getUrlParam } from '@tmagic/utils';
 
 import asyncDataSources from '../.tmagic/async-datasource-entry';
@@ -32,6 +32,8 @@ import { getLocalConfig } from './utils';
 
 import '@tmagic/utils/resetcss.css';
 
+DataSourceManager.registerObservedData(DeepObservedData);
+
 Vue.use(request);
 
 const dsl = ((getUrlParam('localPreview') ? getLocalConfig() : window.magicDSL) || [])[0] || {};
diff --git a/runtime/vue2/playground/main.ts b/runtime/vue2/playground/main.ts
index 2d52d840..20eebc07 100644
--- a/runtime/vue2/playground/main.ts
+++ b/runtime/vue2/playground/main.ts
@@ -19,12 +19,14 @@
 import Vue from 'vue';
 
 import Core from '@tmagic/core';
-import { DataSourceManager } from '@tmagic/data-source';
+import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
 
 import App from './App.vue';
 
 import '@tmagic/utils/resetcss.css';
 
+DataSourceManager.registerObservedData(DeepObservedData);
+
 Promise.all([
   import('../.tmagic/comp-entry'),
   import('../.tmagic/plugin-entry'),
diff --git a/runtime/vue3/page/main.ts b/runtime/vue3/page/main.ts
index 7bb5c3c3..ba969d89 100644
--- a/runtime/vue3/page/main.ts
+++ b/runtime/vue3/page/main.ts
@@ -19,7 +19,7 @@
 import { createApp, defineAsyncComponent } from 'vue';
 
 import Core from '@tmagic/core';
-import { DataSourceManager, registerDataSourceOnDemand } from '@tmagic/data-source';
+import { DataSourceManager, DeepObservedData, registerDataSourceOnDemand } from '@tmagic/data-source';
 import { getUrlParam } from '@tmagic/utils';
 
 import components from '../.tmagic/async-comp-entry';
@@ -32,6 +32,8 @@ import { getLocalConfig } from './utils';
 
 import '@tmagic/utils/resetcss.css';
 
+DataSourceManager.registerObservedData(DeepObservedData);
+
 const vueApp = createApp(AppComponent);
 
 vueApp.use(request);
diff --git a/runtime/vue3/playground/main.ts b/runtime/vue3/playground/main.ts
index 0fd4d2dd..33848fc8 100644
--- a/runtime/vue3/playground/main.ts
+++ b/runtime/vue3/playground/main.ts
@@ -19,12 +19,14 @@
 import { createApp } from 'vue';
 
 import Core from '@tmagic/core';
-import { DataSourceManager } from '@tmagic/data-source';
+import { DataSourceManager, DeepObservedData } from '@tmagic/data-source';
 
 import App from './App.vue';
 
 import '@tmagic/utils/resetcss.css';
 
+DataSourceManager.registerObservedData(DeepObservedData);
+
 Promise.all([
   import('../.tmagic/comp-entry'),
   import('../.tmagic/plugin-entry'),