From 2fa9db5fdea1bb236a7b35eb3f8cfa7b5b434600 Mon Sep 17 00:00:00 2001
From: Bowen Tan <bowen.tan@smartx.com>
Date: Wed, 30 Aug 2023 16:36:26 +0800
Subject: [PATCH] feat(runtime): add watcher data source

---
 .../runtime/src/components/core/Watcher.ts    | 42 +++++++++++++++++++
 packages/runtime/src/services/Registry.tsx    |  2 +
 packages/shared/src/constants/core.ts         |  1 +
 3 files changed, 45 insertions(+)
 create mode 100644 packages/runtime/src/components/core/Watcher.ts

diff --git a/packages/runtime/src/components/core/Watcher.ts b/packages/runtime/src/components/core/Watcher.ts
new file mode 100644
index 000000000..be8230850
--- /dev/null
+++ b/packages/runtime/src/components/core/Watcher.ts
@@ -0,0 +1,42 @@
+import { Type } from '@sinclair/typebox';
+import {
+  CORE_VERSION_V2,
+  CoreComponentName,
+  PRESET_PROPERTY_CATEGORY,
+} from '@sunmao-ui/shared';
+import { implementRuntimeComponent } from '../../utils/buildKit';
+import { useEffect } from 'react';
+
+export default implementRuntimeComponent({
+  version: CORE_VERSION_V2,
+  metadata: {
+    name: CoreComponentName.Watcher,
+    displayName: 'Watcher',
+    description: 'Watch expression changing and trigger events',
+    exampleProperties: { value: '' },
+    isDataSource: true,
+    annotations: {
+      category: 'Data',
+    },
+  },
+  spec: {
+    properties: Type.Object({
+      value: Type.String({
+        title: 'Value',
+        category: PRESET_PROPERTY_CATEGORY.Basic,
+      }),
+    }),
+    state: Type.Object({ value: Type.Any() }),
+    methods: {},
+    slots: {},
+    styleSlots: [],
+    events: ['onChange'],
+  },
+})(({ value, mergeState, callbackMap }) => {
+  useEffect(() => {
+    mergeState({ value });
+    callbackMap?.onChange();
+  }, [callbackMap, mergeState, value]);
+
+  return null;
+});
diff --git a/packages/runtime/src/services/Registry.tsx b/packages/runtime/src/services/Registry.tsx
index 5491eb597..728d781fb 100644
--- a/packages/runtime/src/services/Registry.tsx
+++ b/packages/runtime/src/services/Registry.tsx
@@ -11,6 +11,7 @@ import CoreStack from '../components/core/Stack';
 import CoreFileInput from '../components/core/FileInput';
 import CoreList from '../components/core/List';
 import CoreIframe from '../components/core/Iframe';
+import CoreWatcher from '../components/core/Watcher';
 
 // traits
 import CoreArrayState from '../traits/core/ArrayState';
@@ -257,6 +258,7 @@ export function initRegistry(
   registry.registerComponent(CoreFileInput);
   registry.registerComponent(CoreList);
   registry.registerComponent(CoreIframe);
+  registry.registerComponent(CoreWatcher);
 
   registry.registerTrait(CoreState);
   registry.registerTrait(CoreArrayState);
diff --git a/packages/shared/src/constants/core.ts b/packages/shared/src/constants/core.ts
index 1e8ef397d..b33c9a954 100644
--- a/packages/shared/src/constants/core.ts
+++ b/packages/shared/src/constants/core.ts
@@ -7,6 +7,7 @@ export enum CoreComponentName {
   ModuleContainer = 'moduleContainer',
   Text = 'text',
   Iframe = 'iframe',
+  Watcher = 'watcher',
 }
 // core traits
 export enum CoreTraitName {