@flowgram-vue/reactive 0.2.0

package/src/vue/observe.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  defineComponent,
+  getCurrentInstance,
+  onBeforeUnmount,
+  shallowRef,
+  type Component,
+  type VNode,
+} from 'vue';
+
+import { Tracker } from '../core/tracker';
+
+import Computation = Tracker.Computation;
+
+export function observe<T = any>(fc: (props: T) => VNode | null | undefined): Component {
+  return defineComponent({
+    name: 'ReactiveObserver',
+    inheritAttrs: false,
+    setup(_, { attrs, slots }) {
+      const instance = getCurrentInstance();
+      const tick = shallowRef(0);
+      const childrenRef: { current: VNode | null | undefined } = { current: null };
+      const computationRef: { current: Computation | undefined } = { current: undefined };
+      const refresh = () => {
+        tick.value += 1;
+        instance?.update();
+      };
+
+      onBeforeUnmount(() => {
+        computationRef.current?.stop();
+      });
+
+      return () => {
+        void tick.value;
+        computationRef.current?.stop();
+        const slotChildren = slots.default?.();
+        const childrenFromSlot =
+          slotChildren && slotChildren.length === 1 ? slotChildren[0] : slotChildren;
+        const props = {
+          ...attrs,
+          children: childrenFromSlot ?? (attrs as { children?: unknown }).children,
+        } as T;
+        computationRef.current = new Tracker.Computation((c) => {
+          if (c.firstRun) {
+            childrenRef.current = fc(props);
+          } else {
+            refresh();
+          }
+        });
+        return childrenRef.current ?? null;
+      };
+    },
+  });
+}