@flowgram-vue/node-variable-plugin 0.2.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+Copyright (c) 2026 Crayon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,139 @@
+'use strict';
+
+var formCore = require('@flowgram-vue/form-core');
+var core = require('@flowgram-vue/core');
+var vue = require('vue');
+var variablePlugin = require('@flowgram-vue/variable-plugin');
+var node = require('@flowgram-vue/node');
+
+// src/create-node-variable-plugin.ts
+var PublicScopeProvider = vue.defineComponent({
+  name: "PublicScopeProvider",
+  setup(_props, { slots }) {
+    const node = core.useEntityFromContext();
+    const publicScope = vue.computed(() => node.getData(variablePlugin.FlowNodeVariableData).public);
+    return () => vue.h(variablePlugin.ScopeProvider, { scope: publicScope.value }, () => slots.default?.());
+  }
+});
+
+// src/with-node-variables.ts
+var withNodeVariables = (Component) => vue.defineComponent({
+  name: "WithNodeVariables",
+  setup(_props, { attrs }) {
+    return () => vue.h(PublicScopeProvider, null, {
+      default: () => {
+        if (typeof Component === "function") {
+          const result = Component(attrs);
+          if (vue.isVNode(result) || result == null) {
+            return result;
+          }
+          return vue.h(result, attrs);
+        }
+        return vue.h(Component, attrs);
+      }
+    });
+  }
+});
+
+// src/create-node-variable-plugin.ts
+var createNodeVariablePlugin = core.definePluginCreator({
+  onInit(ctx) {
+    const nodeManager = ctx.get(formCore.NodeManager);
+    nodeManager.registerNodeRenderHoc(withNodeVariables);
+  }
+});
+var PrivateScopeProvider = vue.defineComponent({
+  name: "PrivateScopeProvider",
+  setup(_props, { slots }) {
+    const node = core.useEntityFromContext();
+    const privateScope = vue.computed(() => {
+      const variableData = node.getData(variablePlugin.FlowNodeVariableData);
+      if (!variableData.private) {
+        variableData.initPrivate();
+      }
+      return variableData.private;
+    });
+    return () => vue.h(variablePlugin.ScopeProvider, { scope: privateScope.value }, () => slots.default?.());
+  }
+});
+function createEffectFromVariableProvider(options) {
+  const getScope = (node) => {
+    const variableData = node.getData(variablePlugin.FlowNodeVariableData);
+    if (options.private || options.scope === "private") {
+      return variableData.initPrivate();
+    }
+    return variableData.public;
+  };
+  const transformValueToAST = ({ value, name, context, formValues, form }) => {
+    if (!context) {
+      return;
+    }
+    const { node } = context;
+    const scope = getScope(node);
+    const parsedValue = options.parse(value, {
+      node,
+      scope,
+      options,
+      name,
+      formValues,
+      form
+    });
+    scope.ast.set(options.namespace || name || "", {
+      kind: variablePlugin.ASTKind.VariableDeclarationList,
+      declarations: Array.isArray(parsedValue) ? parsedValue : [parsedValue]
+    });
+  };
+  return [
+    {
+      event: node.DataEvent.onValueInit,
+      effect: ((params) => {
+        const { context } = params;
+        const scope = getScope(context.node);
+        const disposable = options.onInit?.({
+          node: context.node,
+          scope,
+          options,
+          name: params.name,
+          formValues: params.formValues,
+          form: params.form
+        });
+        transformValueToAST(params);
+        return () => {
+          disposable?.dispose();
+        };
+      })
+    },
+    {
+      event: node.DataEvent.onValueChange,
+      effect: ((params) => {
+        transformValueToAST(params);
+      })
+    }
+  ];
+}
+var createVariableProviderPlugin = node.defineFormPluginCreator({
+  name: "VariableProviderPlugin",
+  onInit: (ctx, opts) => {
+  },
+  onSetupFormMeta({ mergeEffect }) {
+    mergeEffect({
+      arr: [
+        {
+          event: node.DataEvent.onValueInitOrChange,
+          effect: () => {
+          }
+        }
+      ]
+    });
+  },
+  onDispose: (ctx, opts) => {
+  }
+});
+
+exports.PrivateScopeProvider = PrivateScopeProvider;
+exports.PublicScopeProvider = PublicScopeProvider;
+exports.createEffectFromVariableProvider = createEffectFromVariableProvider;
+exports.createNodeVariablePlugin = createNodeVariablePlugin;
+exports.createVariableProviderPlugin = createVariableProviderPlugin;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/public-scope-provider.ts","../src/with-node-variables.ts","../src/create-node-variable-plugin.ts","../src/components/private-scope-provider.ts","../src/form-v2/create-provider-effect.ts","../src/form-v2/create-variable-provider-plugin.ts"],"names":["defineComponent","useEntityFromContext","computed","FlowNodeVariableData","h","ScopeProvider","isVNode","definePluginCreator","NodeManager","ASTKind","DataEvent","defineFormPluginCreator"],"mappings":";;;;;;;;;AAaO,IAAM,sBAAsBA,mBAAA,CAAgB;AAAA,EACjD,IAAA,EAAM,qBAAA;AAAA,EACN,KAAA,CAAM,MAAA,EAAQ,EAAE,KAAA,EAAM,EAAG;AACvB,IAAA,MAAM,OAAOC,yBAAA,EAAqB;AAClC,IAAA,MAAM,cAAcC,YAAA,CAAS,MAAM,KAAK,OAAA,CAAQC,mCAAoB,EAAE,MAAM,CAAA;AAE5E,IAAA,OAAO,MAAMC,KAAA,CAAEC,4BAAA,EAAe,EAAE,KAAA,EAAO,WAAA,CAAY,KAAA,EAAM,EAAG,MAAM,KAAA,CAAM,OAAA,IAAW,CAAA;AAAA,EACrF;AACF,CAAC;;;ACVM,IAAM,iBAAA,GAAmC,CAAC,SAAA,KAC/CL,mBAAAA,CAAgB;AAAA,EACd,IAAA,EAAM,mBAAA;AAAA,EACN,KAAA,CAAM,MAAA,EAAQ,EAAE,KAAA,EAAM,EAAG;AACvB,IAAA,OAAO,MACLI,KAAAA,CAAE,mBAAA,EAAqB,IAAA,EAAM;AAAA,MAC3B,SAAS,MAAM;AACb,QAAA,IAAI,OAAO,cAAc,UAAA,EAAY;AACnC,UAAA,MAAM,MAAA,GAAU,UAA2C,KAAK,CAAA;AAChE,UAAA,IAAIE,WAAA,CAAQ,MAAM,CAAA,IAAK,MAAA,IAAU,IAAA,EAAM;AACrC,YAAA,OAAO,MAAA;AAAA,UACT;AACA,UAAA,OAAOF,KAAAA,CAAE,QAAqB,KAAK,CAAA;AAAA,QACrC;AACA,QAAA,OAAOA,KAAAA,CAAE,WAAwB,KAAK,CAAA;AAAA,MACxC;AAAA,KACD,CAAA;AAAA,EACL;AACF,CAAC,CAAA;;;AChBI,IAAM,2BAA2BG,wBAAA,CAAoB;AAAA,EAC1D,OAAO,GAAA,EAAK;AACV,IAAA,MAAM,WAAA,GAAc,GAAA,CAAI,GAAA,CAAiBC,oBAAW,CAAA;AACpD,IAAA,WAAA,CAAY,sBAAsB,iBAAiB,CAAA;AAAA,EACrD;AACF,CAAC;ACLM,IAAM,uBAAuBR,mBAAAA,CAAgB;AAAA,EAClD,IAAA,EAAM,sBAAA;AAAA,EACN,KAAA,CAAM,MAAA,EAAQ,EAAE,KAAA,EAAM,EAAG;AACvB,IAAA,MAAM,OAAOC,yBAAAA,EAAqB;AAClC,IAAA,MAAM,YAAA,GAAeC,aAAS,MAAM;AAClC,MAAA,MAAM,YAAA,GAAqC,IAAA,CAAK,OAAA,CAAQC,mCAAoB,CAAA;AAC5E,MAAA,IAAI,CAAC,aAAa,OAAA,EAAS;AACzB,QAAA,YAAA,CAAa,WAAA,EAAY;AAAA,MAC3B;AACA,MAAA,OAAO,YAAA,CAAa,OAAA;AAAA,IACtB,CAAC,CAAA;AAED,IAAA,OAAO,MAAMC,KAAAA,CAAEC,4BAAAA,EAAe,EAAE,KAAA,EAAO,YAAA,CAAa,KAAA,EAAM,EAAG,MAAM,KAAA,CAAM,OAAA,IAAW,CAAA;AAAA,EACtF;AACF,CAAC;ACXM,SAAS,iCACd,OAAA,EACiB;AACjB,EAAA,MAAM,QAAA,GAAW,CAAC,IAAA,KAAgC;AAChD,IAAA,MAAM,YAAA,GAAqC,IAAA,CAAK,OAAA,CAAQF,mCAAoB,CAAA;AAE5E,IAAA,IAAI,OAAA,CAAQ,OAAA,IAAW,OAAA,CAAQ,KAAA,KAAU,SAAA,EAAW;AAClD,MAAA,OAAO,aAAa,WAAA,EAAY;AAAA,IAClC;AACA,IAAA,OAAO,YAAA,CAAa,MAAA;AAAA,EACtB,CAAA;AAEA,EAAA,MAAM,mBAAA,GAA8B,CAAC,EAAE,KAAA,EAAO,MAAM,OAAA,EAAS,UAAA,EAAY,MAAK,KAAM;AAClF,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA;AAAA,IACF;AACA,IAAA,MAAM,EAAE,MAAK,GAAI,OAAA;AACjB,IAAA,MAAM,KAAA,GAAQ,SAAS,IAAI,CAAA;AAE3B,IAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,KAAA,CAAM,KAAA,EAAO;AAAA,MACvC,IAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACD,CAAA;AAGD,IAAA,KAAA,CAAM,GAAA,CAAI,GAAA,CAAI,OAAA,CAAQ,SAAA,IAAa,QAAQ,EAAA,EAAI;AAAA,MAC7C,MAAMM,sBAAA,CAAQ,uBAAA;AAAA,MACd,cAAc,KAAA,CAAM,OAAA,CAAQ,WAAW,CAAA,GAAI,WAAA,GAAc,CAAC,WAAW;AAAA,KACtE,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,OAAO;AAAA,IACL;AAAA,MACE,OAAOC,cAAA,CAAU,WAAA;AAAA,MACjB,MAAA,GAAS,CAAC,MAAA,KAAW;AACnB,QAAA,MAAM,EAAE,SAAQ,GAAI,MAAA;AAEpB,QAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,OAAA,CAAQ,IAAI,CAAA;AACnC,QAAA,MAAM,UAAA,GAAa,QAAQ,MAAA,GAAS;AAAA,UAClC,MAAM,OAAA,CAAQ,IAAA;AAAA,UACd,KAAA;AAAA,UACA,OAAA;AAAA,UACA,MAAM,MAAA,CAAO,IAAA;AAAA,UACb,YAAY,MAAA,CAAO,UAAA;AAAA,UACnB,MAAM,MAAA,CAAO;AAAA,SACd,CAAA;AAED,QAAA,mBAAA,CAAoB,MAAM,CAAA;AAE1B,QAAA,OAAO,MAAM;AACX,UAAA,UAAA,EAAY,OAAA,EAAQ;AAAA,QACtB,CAAA;AAAA,MACF,CAAA;AAAA,KACF;AAAA,IACA;AAAA,MACE,OAAOA,cAAA,CAAU,aAAA;AAAA,MACjB,MAAA,GAAS,CAAC,MAAA,KAAW;AACnB,QAAA,mBAAA,CAAoB,MAAM,CAAA;AAAA,MAC5B,CAAA;AAAA;AACF,GACF;AACF;AC1EO,IAAM,+BAA+BC,4BAAA,CAAwB;AAAA,EAClE,IAAA,EAAM,wBAAA;AAAA,EACN,MAAA,EAAQ,CAAC,GAAA,EAAK,IAAA,KAAS;AAAA,EAGvB,CAAA;AAAA,EACA,eAAA,CAAgB,EAAE,WAAA,EAAY,EAAG;AAC/B,IAAA,WAAA,CAAY;AAAA,MACV,GAAA,EAAK;AAAA,QACH;AAAA,UACE,OAAOD,cAAAA,CAAU,mBAAA;AAAA,UACjB,QAAQ,MAAM;AAAA,UAGd;AAAA;AACF;AACF,KACD,CAAA;AAAA,EACH,CAAA;AAAA,EACA,SAAA,EAAW,CAAC,GAAA,EAAK,IAAA,KAAS;AAAA,EAG1B;AACF,CAAC","file":"index.cjs","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { computed, defineComponent, h } from 'vue';\n\nimport { FlowNodeVariableData, ScopeProvider } from '@flowgram-vue/variable-plugin';\nimport { useEntityFromContext } from '@flowgram-vue/core';\n\n/**\n * PublicScopeProvider provides the public scope to its children via provide/inject.\n */\nexport const PublicScopeProvider = defineComponent({\n  name: 'PublicScopeProvider',\n  setup(_props, { slots }) {\n    const node = useEntityFromContext();\n    const publicScope = computed(() => node.getData(FlowNodeVariableData).public);\n\n    return () => h(ScopeProvider, { scope: publicScope.value }, () => slots.default?.());\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { defineComponent, h, isVNode, type Component } from 'vue';\n\nimport { NodeRenderHoc } from '@flowgram-vue/form-core';\n\nimport { PublicScopeProvider } from './components/public-scope-provider';\n\nexport const withNodeVariables: NodeRenderHoc = (Component) =>\n  defineComponent({\n    name: 'WithNodeVariables',\n    setup(_props, { attrs }) {\n      return () =>\n        h(PublicScopeProvider, null, {\n          default: () => {\n            if (typeof Component === 'function') {\n              const result = (Component as (props?: unknown) => unknown)(attrs);\n              if (isVNode(result) || result == null) {\n                return result;\n              }\n              return h(result as Component, attrs);\n            }\n            return h(Component as Component, attrs);\n          },\n        });\n    },\n  });\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\n// import { FormManager } from '@flowgram-vue/form-core';\nimport { NodeManager } from '@flowgram-vue/form-core';\nimport { definePluginCreator } from '@flowgram-vue/core';\n\nimport { withNodeVariables } from './with-node-variables';\n\n// import { withNodeVariables } from './with-node-variables';\n\nexport const createNodeVariablePlugin = definePluginCreator({\n  onInit(ctx) {\n    const nodeManager = ctx.get<NodeManager>(NodeManager);\n    nodeManager.registerNodeRenderHoc(withNodeVariables);\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { computed, defineComponent, h } from 'vue';\n\nimport { FlowNodeVariableData, ScopeProvider } from '@flowgram-vue/variable-plugin';\nimport { useEntityFromContext } from '@flowgram-vue/core';\n\n/**\n * PrivateScopeProvider provides the private scope to its children via provide/inject.\n */\nexport const PrivateScopeProvider = defineComponent({\n  name: 'PrivateScopeProvider',\n  setup(_props, { slots }) {\n    const node = useEntityFromContext();\n    const privateScope = computed(() => {\n      const variableData: FlowNodeVariableData = node.getData(FlowNodeVariableData);\n      if (!variableData.private) {\n        variableData.initPrivate();\n      }\n      return variableData.private!;\n    });\n\n    return () => h(ScopeProvider, { scope: privateScope.value }, () => slots.default?.());\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { FlowNodeVariableData, type Scope, ASTKind } from '@flowgram-vue/variable-plugin';\nimport { DataEvent, type Effect, type EffectOptions } from '@flowgram-vue/node';\nimport { FlowNodeEntity } from '@flowgram-vue/document';\n\nimport { type VariableProviderAbilityOptions } from '../types';\n\n/**\n * 根据 VariableProvider 生成 FormV2 的 Effect\n * @param options\n * @returns\n */\nexport function createEffectFromVariableProvider(\n  options: VariableProviderAbilityOptions\n): EffectOptions[] {\n  const getScope = (node: FlowNodeEntity): Scope => {\n    const variableData: FlowNodeVariableData = node.getData(FlowNodeVariableData);\n\n    if (options.private || options.scope === 'private') {\n      return variableData.initPrivate();\n    }\n    return variableData.public;\n  };\n\n  const transformValueToAST: Effect = ({ value, name, context, formValues, form }) => {\n    if (!context) {\n      return;\n    }\n    const { node } = context;\n    const scope = getScope(node);\n\n    const parsedValue = options.parse(value, {\n      node,\n      scope,\n      options,\n      name,\n      formValues,\n      form,\n    });\n\n    // Fix: When parsedValue is not an array, transform it to array\n    scope.ast.set(options.namespace || name || '', {\n      kind: ASTKind.VariableDeclarationList,\n      declarations: Array.isArray(parsedValue) ? parsedValue : [parsedValue],\n    });\n  };\n\n  return [\n    {\n      event: DataEvent.onValueInit,\n      effect: ((params) => {\n        const { context } = params;\n\n        const scope = getScope(context.node);\n        const disposable = options.onInit?.({\n          node: context.node,\n          scope,\n          options,\n          name: params.name,\n          formValues: params.formValues,\n          form: params.form,\n        });\n\n        transformValueToAST(params);\n\n        return () => {\n          disposable?.dispose();\n        };\n      }) as Effect,\n    },\n    {\n      event: DataEvent.onValueChange,\n      effect: ((params) => {\n        transformValueToAST(params);\n      }) as Effect,\n    },\n  ];\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { DataEvent, defineFormPluginCreator } from '@flowgram-vue/node';\n\nexport const createVariableProviderPlugin = defineFormPluginCreator({\n  name: 'VariableProviderPlugin',\n  onInit: (ctx, opts) => {\n    // todo\n    // console.log('>>> VariableProviderPlugin init', ctx, opts);\n  },\n  onSetupFormMeta({ mergeEffect }) {\n    mergeEffect({\n      arr: [\n        {\n          event: DataEvent.onValueInitOrChange,\n          effect: () => {\n            // todo\n            // console.log('>>> VariableProviderPlugin effect triggered');\n          },\n        },\n      ],\n    });\n  },\n  onDispose: (ctx, opts) => {\n    // todo\n    // console.log('>>> VariableProviderPlugin dispose', ctx, opts);\n  },\n});\n"]}

package/dist/index.d.ts

@@ -0,0 +1,89 @@
+import * as _flowgram_vue_core from '@flowgram-vue/core';
+import { Scope, ASTNodeJSON, VariableDeclarationJSON } from '@flowgram-vue/variable-plugin';
+import { Disposable } from '@flowgram-vue/utils';
+import * as _flowgram_vue_node from '@flowgram-vue/node';
+import { EffectFuncProps, EffectOptions } from '@flowgram-vue/node';
+import { FlowNodeEntity } from '@flowgram-vue/document';
+import * as vue from 'vue';
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+declare const createNodeVariablePlugin: _flowgram_vue_core.PluginCreator<unknown>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+interface VariableAbilityCommonContext {
+    node: FlowNodeEntity;
+    scope: Scope;
+    options: VariableAbilityOptions;
+    name: string;
+    formValues: EffectFuncProps['formValues'];
+    form: EffectFuncProps['form'];
+}
+interface VariableAbilityInitCtx extends VariableAbilityCommonContext {
+}
+interface VariableAbilityOptions {
+    /**
+     * @deprecated use scope: 'private'
+     */
+    private?: boolean;
+    namespace?: string;
+    scope?: 'private' | 'public';
+    onInit?: (ctx: VariableAbilityInitCtx) => Disposable | undefined;
+    [key: string]: any;
+}
+interface VariableAbilityParseContext extends VariableAbilityCommonContext {
+}
+interface VariableProviderAbilityOptions<V = any> extends VariableAbilityOptions {
+    parse: (v: V, ctx: VariableAbilityParseContext) => VariableDeclarationJSON | VariableDeclarationJSON[];
+}
+interface VariableConsumerAbilityOptions<V = any> extends VariableAbilityOptions {
+    parse: (v: V, ctx: VariableAbilityParseContext) => ASTNodeJSON | undefined;
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * PrivateScopeProvider provides the private scope to its children via provide/inject.
+ */
+declare const PrivateScopeProvider: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * PublicScopeProvider provides the public scope to its children via provide/inject.
+ */
+declare const PublicScopeProvider: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+/**
+ * 根据 VariableProvider 生成 FormV2 的 Effect
+ * @param options
+ * @returns
+ */
+declare function createEffectFromVariableProvider(options: VariableProviderAbilityOptions): EffectOptions[];
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+declare const createVariableProviderPlugin: _flowgram_vue_node.FormPluginCreator<unknown>;
+
+export { PrivateScopeProvider, PublicScopeProvider, type VariableAbilityParseContext, type VariableConsumerAbilityOptions, type VariableProviderAbilityOptions, createEffectFromVariableProvider, createNodeVariablePlugin, createVariableProviderPlugin };

package/dist/index.js

@@ -0,0 +1,133 @@
+import { NodeManager } from '@flowgram-vue/form-core';
+import { useEntityFromContext, definePluginCreator } from '@flowgram-vue/core';
+import { defineComponent, computed, h, isVNode } from 'vue';
+import { FlowNodeVariableData, ScopeProvider, ASTKind } from '@flowgram-vue/variable-plugin';
+import { defineFormPluginCreator, DataEvent } from '@flowgram-vue/node';
+
+// src/create-node-variable-plugin.ts
+var PublicScopeProvider = defineComponent({
+  name: "PublicScopeProvider",
+  setup(_props, { slots }) {
+    const node = useEntityFromContext();
+    const publicScope = computed(() => node.getData(FlowNodeVariableData).public);
+    return () => h(ScopeProvider, { scope: publicScope.value }, () => slots.default?.());
+  }
+});
+
+// src/with-node-variables.ts
+var withNodeVariables = (Component) => defineComponent({
+  name: "WithNodeVariables",
+  setup(_props, { attrs }) {
+    return () => h(PublicScopeProvider, null, {
+      default: () => {
+        if (typeof Component === "function") {
+          const result = Component(attrs);
+          if (isVNode(result) || result == null) {
+            return result;
+          }
+          return h(result, attrs);
+        }
+        return h(Component, attrs);
+      }
+    });
+  }
+});
+
+// src/create-node-variable-plugin.ts
+var createNodeVariablePlugin = definePluginCreator({
+  onInit(ctx) {
+    const nodeManager = ctx.get(NodeManager);
+    nodeManager.registerNodeRenderHoc(withNodeVariables);
+  }
+});
+var PrivateScopeProvider = defineComponent({
+  name: "PrivateScopeProvider",
+  setup(_props, { slots }) {
+    const node = useEntityFromContext();
+    const privateScope = computed(() => {
+      const variableData = node.getData(FlowNodeVariableData);
+      if (!variableData.private) {
+        variableData.initPrivate();
+      }
+      return variableData.private;
+    });
+    return () => h(ScopeProvider, { scope: privateScope.value }, () => slots.default?.());
+  }
+});
+function createEffectFromVariableProvider(options) {
+  const getScope = (node) => {
+    const variableData = node.getData(FlowNodeVariableData);
+    if (options.private || options.scope === "private") {
+      return variableData.initPrivate();
+    }
+    return variableData.public;
+  };
+  const transformValueToAST = ({ value, name, context, formValues, form }) => {
+    if (!context) {
+      return;
+    }
+    const { node } = context;
+    const scope = getScope(node);
+    const parsedValue = options.parse(value, {
+      node,
+      scope,
+      options,
+      name,
+      formValues,
+      form
+    });
+    scope.ast.set(options.namespace || name || "", {
+      kind: ASTKind.VariableDeclarationList,
+      declarations: Array.isArray(parsedValue) ? parsedValue : [parsedValue]
+    });
+  };
+  return [
+    {
+      event: DataEvent.onValueInit,
+      effect: ((params) => {
+        const { context } = params;
+        const scope = getScope(context.node);
+        const disposable = options.onInit?.({
+          node: context.node,
+          scope,
+          options,
+          name: params.name,
+          formValues: params.formValues,
+          form: params.form
+        });
+        transformValueToAST(params);
+        return () => {
+          disposable?.dispose();
+        };
+      })
+    },
+    {
+      event: DataEvent.onValueChange,
+      effect: ((params) => {
+        transformValueToAST(params);
+      })
+    }
+  ];
+}
+var createVariableProviderPlugin = defineFormPluginCreator({
+  name: "VariableProviderPlugin",
+  onInit: (ctx, opts) => {
+  },
+  onSetupFormMeta({ mergeEffect }) {
+    mergeEffect({
+      arr: [
+        {
+          event: DataEvent.onValueInitOrChange,
+          effect: () => {
+          }
+        }
+      ]
+    });
+  },
+  onDispose: (ctx, opts) => {
+  }
+});
+
+export { PrivateScopeProvider, PublicScopeProvider, createEffectFromVariableProvider, createNodeVariablePlugin, createVariableProviderPlugin };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/public-scope-provider.ts","../src/with-node-variables.ts","../src/create-node-variable-plugin.ts","../src/components/private-scope-provider.ts","../src/form-v2/create-provider-effect.ts","../src/form-v2/create-variable-provider-plugin.ts"],"names":["defineComponent","h","useEntityFromContext","computed","FlowNodeVariableData","ScopeProvider","DataEvent"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { computed, defineComponent, h } from 'vue';\n\nimport { FlowNodeVariableData, ScopeProvider } from '@flowgram-vue/variable-plugin';\nimport { useEntityFromContext } from '@flowgram-vue/core';\n\n/**\n * PublicScopeProvider provides the public scope to its children via provide/inject.\n */\nexport const PublicScopeProvider = defineComponent({\n  name: 'PublicScopeProvider',\n  setup(_props, { slots }) {\n    const node = useEntityFromContext();\n    const publicScope = computed(() => node.getData(FlowNodeVariableData).public);\n\n    return () => h(ScopeProvider, { scope: publicScope.value }, () => slots.default?.());\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { defineComponent, h, isVNode, type Component } from 'vue';\n\nimport { NodeRenderHoc } from '@flowgram-vue/form-core';\n\nimport { PublicScopeProvider } from './components/public-scope-provider';\n\nexport const withNodeVariables: NodeRenderHoc = (Component) =>\n  defineComponent({\n    name: 'WithNodeVariables',\n    setup(_props, { attrs }) {\n      return () =>\n        h(PublicScopeProvider, null, {\n          default: () => {\n            if (typeof Component === 'function') {\n              const result = (Component as (props?: unknown) => unknown)(attrs);\n              if (isVNode(result) || result == null) {\n                return result;\n              }\n              return h(result as Component, attrs);\n            }\n            return h(Component as Component, attrs);\n          },\n        });\n    },\n  });\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\n// import { FormManager } from '@flowgram-vue/form-core';\nimport { NodeManager } from '@flowgram-vue/form-core';\nimport { definePluginCreator } from '@flowgram-vue/core';\n\nimport { withNodeVariables } from './with-node-variables';\n\n// import { withNodeVariables } from './with-node-variables';\n\nexport const createNodeVariablePlugin = definePluginCreator({\n  onInit(ctx) {\n    const nodeManager = ctx.get<NodeManager>(NodeManager);\n    nodeManager.registerNodeRenderHoc(withNodeVariables);\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { computed, defineComponent, h } from 'vue';\n\nimport { FlowNodeVariableData, ScopeProvider } from '@flowgram-vue/variable-plugin';\nimport { useEntityFromContext } from '@flowgram-vue/core';\n\n/**\n * PrivateScopeProvider provides the private scope to its children via provide/inject.\n */\nexport const PrivateScopeProvider = defineComponent({\n  name: 'PrivateScopeProvider',\n  setup(_props, { slots }) {\n    const node = useEntityFromContext();\n    const privateScope = computed(() => {\n      const variableData: FlowNodeVariableData = node.getData(FlowNodeVariableData);\n      if (!variableData.private) {\n        variableData.initPrivate();\n      }\n      return variableData.private!;\n    });\n\n    return () => h(ScopeProvider, { scope: privateScope.value }, () => slots.default?.());\n  },\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { FlowNodeVariableData, type Scope, ASTKind } from '@flowgram-vue/variable-plugin';\nimport { DataEvent, type Effect, type EffectOptions } from '@flowgram-vue/node';\nimport { FlowNodeEntity } from '@flowgram-vue/document';\n\nimport { type VariableProviderAbilityOptions } from '../types';\n\n/**\n * 根据 VariableProvider 生成 FormV2 的 Effect\n * @param options\n * @returns\n */\nexport function createEffectFromVariableProvider(\n  options: VariableProviderAbilityOptions\n): EffectOptions[] {\n  const getScope = (node: FlowNodeEntity): Scope => {\n    const variableData: FlowNodeVariableData = node.getData(FlowNodeVariableData);\n\n    if (options.private || options.scope === 'private') {\n      return variableData.initPrivate();\n    }\n    return variableData.public;\n  };\n\n  const transformValueToAST: Effect = ({ value, name, context, formValues, form }) => {\n    if (!context) {\n      return;\n    }\n    const { node } = context;\n    const scope = getScope(node);\n\n    const parsedValue = options.parse(value, {\n      node,\n      scope,\n      options,\n      name,\n      formValues,\n      form,\n    });\n\n    // Fix: When parsedValue is not an array, transform it to array\n    scope.ast.set(options.namespace || name || '', {\n      kind: ASTKind.VariableDeclarationList,\n      declarations: Array.isArray(parsedValue) ? parsedValue : [parsedValue],\n    });\n  };\n\n  return [\n    {\n      event: DataEvent.onValueInit,\n      effect: ((params) => {\n        const { context } = params;\n\n        const scope = getScope(context.node);\n        const disposable = options.onInit?.({\n          node: context.node,\n          scope,\n          options,\n          name: params.name,\n          formValues: params.formValues,\n          form: params.form,\n        });\n\n        transformValueToAST(params);\n\n        return () => {\n          disposable?.dispose();\n        };\n      }) as Effect,\n    },\n    {\n      event: DataEvent.onValueChange,\n      effect: ((params) => {\n        transformValueToAST(params);\n      }) as Effect,\n    },\n  ];\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { DataEvent, defineFormPluginCreator } from '@flowgram-vue/node';\n\nexport const createVariableProviderPlugin = defineFormPluginCreator({\n  name: 'VariableProviderPlugin',\n  onInit: (ctx, opts) => {\n    // todo\n    // console.log('>>> VariableProviderPlugin init', ctx, opts);\n  },\n  onSetupFormMeta({ mergeEffect }) {\n    mergeEffect({\n      arr: [\n        {\n          event: DataEvent.onValueInitOrChange,\n          effect: () => {\n            // todo\n            // console.log('>>> VariableProviderPlugin effect triggered');\n          },\n        },\n      ],\n    });\n  },\n  onDispose: (ctx, opts) => {\n    // todo\n    // console.log('>>> VariableProviderPlugin dispose', ctx, opts);\n  },\n});\n"]}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@flowgram-vue/node-variable-plugin",
+  "version": "0.2.0",
+  "type": "module",
+  "homepage": "https://flowgram.ai/",
+  "repository": "https://github.com/Crayon-hua/flowgram-vue",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "inversify": "^6.0.1",
+    "reflect-metadata": "~0.2.2",
+    "@flowgram-vue/form-core": "0.2.0",
+    "@flowgram-vue/core": "0.2.0",
+    "@flowgram-vue/variable-plugin": "0.2.0",
+    "@flowgram-vue/utils": "0.2.0",
+    "@flowgram-vue/document": "0.2.0",
+    "@flowgram-vue/node": "0.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.0.0",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
+    "@flowgram-vue/ts-config": "0.2.0",
+    "@flowgram-vue/build-config": "0.2.0",
+    "@flowgram-vue/eslint-config": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "flowgram-build",
+    "test": "vitest run --passWithNoTests",
+    "lint": "eslint .",
+    "ts-check": "tsc --noEmit",
+    "type-check": "tsc --noEmit",
+    "build:fast": "flowgram-build --fast",
+    "build:watch": "flowgram-build --watch"
+  }
+}

package/src/components/private-scope-provider.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, defineComponent, h } from 'vue';
+
+import { FlowNodeVariableData, ScopeProvider } from '@flowgram-vue/variable-plugin';
+import { useEntityFromContext } from '@flowgram-vue/core';
+
+/**
+ * PrivateScopeProvider provides the private scope to its children via provide/inject.
+ */
+export const PrivateScopeProvider = defineComponent({
+  name: 'PrivateScopeProvider',
+  setup(_props, { slots }) {
+    const node = useEntityFromContext();
+    const privateScope = computed(() => {
+      const variableData: FlowNodeVariableData = node.getData(FlowNodeVariableData);
+      if (!variableData.private) {
+        variableData.initPrivate();
+      }
+      return variableData.private!;
+    });
+
+    return () => h(ScopeProvider, { scope: privateScope.value }, () => slots.default?.());
+  },
+});

package/src/components/public-scope-provider.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, defineComponent, h } from 'vue';
+
+import { FlowNodeVariableData, ScopeProvider } from '@flowgram-vue/variable-plugin';
+import { useEntityFromContext } from '@flowgram-vue/core';
+
+/**
+ * PublicScopeProvider provides the public scope to its children via provide/inject.
+ */
+export const PublicScopeProvider = defineComponent({
+  name: 'PublicScopeProvider',
+  setup(_props, { slots }) {
+    const node = useEntityFromContext();
+    const publicScope = computed(() => node.getData(FlowNodeVariableData).public);
+
+    return () => h(ScopeProvider, { scope: publicScope.value }, () => slots.default?.());
+  },
+});

package/src/create-node-variable-plugin.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+// import { FormManager } from '@flowgram-vue/form-core';
+import { NodeManager } from '@flowgram-vue/form-core';
+import { definePluginCreator } from '@flowgram-vue/core';
+
+import { withNodeVariables } from './with-node-variables';
+
+// import { withNodeVariables } from './with-node-variables';
+
+export const createNodeVariablePlugin = definePluginCreator({
+  onInit(ctx) {
+    const nodeManager = ctx.get<NodeManager>(NodeManager);
+    nodeManager.registerNodeRenderHoc(withNodeVariables);
+  },
+});

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/src/form-v2/create-provider-effect.ts

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FlowNodeVariableData, type Scope, ASTKind } from '@flowgram-vue/variable-plugin';
+import { DataEvent, type Effect, type EffectOptions } from '@flowgram-vue/node';
+import { FlowNodeEntity } from '@flowgram-vue/document';
+
+import { type VariableProviderAbilityOptions } from '../types';
+
+/**
+ * 根据 VariableProvider 生成 FormV2 的 Effect
+ * @param options
+ * @returns
+ */
+export function createEffectFromVariableProvider(
+  options: VariableProviderAbilityOptions
+): EffectOptions[] {
+  const getScope = (node: FlowNodeEntity): Scope => {
+    const variableData: FlowNodeVariableData = node.getData(FlowNodeVariableData);
+
+    if (options.private || options.scope === 'private') {
+      return variableData.initPrivate();
+    }
+    return variableData.public;
+  };
+
+  const transformValueToAST: Effect = ({ value, name, context, formValues, form }) => {
+    if (!context) {
+      return;
+    }
+    const { node } = context;
+    const scope = getScope(node);
+
+    const parsedValue = options.parse(value, {
+      node,
+      scope,
+      options,
+      name,
+      formValues,
+      form,
+    });
+
+    // Fix: When parsedValue is not an array, transform it to array
+    scope.ast.set(options.namespace || name || '', {
+      kind: ASTKind.VariableDeclarationList,
+      declarations: Array.isArray(parsedValue) ? parsedValue : [parsedValue],
+    });
+  };
+
+  return [
+    {
+      event: DataEvent.onValueInit,
+      effect: ((params) => {
+        const { context } = params;
+
+        const scope = getScope(context.node);
+        const disposable = options.onInit?.({
+          node: context.node,
+          scope,
+          options,
+          name: params.name,
+          formValues: params.formValues,
+          form: params.form,
+        });
+
+        transformValueToAST(params);
+
+        return () => {
+          disposable?.dispose();
+        };
+      }) as Effect,
+    },
+    {
+      event: DataEvent.onValueChange,
+      effect: ((params) => {
+        transformValueToAST(params);
+      }) as Effect,
+    },
+  ];
+}

package/src/form-v2/create-variable-provider-plugin.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { DataEvent, defineFormPluginCreator } from '@flowgram-vue/node';
+
+export const createVariableProviderPlugin = defineFormPluginCreator({
+  name: 'VariableProviderPlugin',
+  onInit: (ctx, opts) => {
+    // todo
+    // console.log('>>> VariableProviderPlugin init', ctx, opts);
+  },
+  onSetupFormMeta({ mergeEffect }) {
+    mergeEffect({
+      arr: [
+        {
+          event: DataEvent.onValueInitOrChange,
+          effect: () => {
+            // todo
+            // console.log('>>> VariableProviderPlugin effect triggered');
+          },
+        },
+      ],
+    });
+  },
+  onDispose: (ctx, opts) => {
+    // todo
+    // console.log('>>> VariableProviderPlugin dispose', ctx, opts);
+  },
+});

package/src/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './create-node-variable-plugin';
+export type {
+  VariableProviderAbilityOptions,
+  VariableConsumerAbilityOptions,
+  VariableAbilityParseContext,
+} from './types';
+export { PrivateScopeProvider } from './components/private-scope-provider';
+export { PublicScopeProvider } from './components/public-scope-provider';
+export { createEffectFromVariableProvider } from './form-v2/create-provider-effect';
+export { createVariableProviderPlugin } from './form-v2/create-variable-provider-plugin';

package/src/types.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  Scope,
+  type ASTNodeJSON,
+  type VariableDeclarationJSON,
+} from '@flowgram-vue/variable-plugin';
+import { Disposable } from '@flowgram-vue/utils';
+import { EffectFuncProps } from '@flowgram-vue/node';
+import { FlowNodeEntity } from '@flowgram-vue/document';
+
+export interface VariableAbilityCommonContext {
+  node: FlowNodeEntity; // 节点
+  scope: Scope; // 作用域
+  options: VariableAbilityOptions;
+  name: string; // 表单字段名
+  formValues: EffectFuncProps['formValues']; // 表单值
+  form: EffectFuncProps['form'];
+}
+
+export interface VariableAbilityInitCtx extends VariableAbilityCommonContext {}
+
+export interface VariableAbilityOptions {
+  /**
+   * @deprecated use scope: 'private'
+   */
+  private?: boolean;
+  // 生成 AST 在抽象语法树中的索引，默认用 formItem 的 Path 作为 namespace
+  namespace?: string;
+  // 输出变量的作用域类型，默认为 public
+  scope?: 'private' | 'public';
+  // 初始化，可以进行额外的操作监听
+  onInit?: (ctx: VariableAbilityInitCtx) => Disposable | undefined;
+  // 扩展字段，可以在 ability onInit 时进行一些额外操作
+  [key: string]: any;
+}
+
+export interface VariableAbilityParseContext extends VariableAbilityCommonContext {}
+
+export interface VariableProviderAbilityOptions<V = any> extends VariableAbilityOptions {
+  // 解析变量协议
+  parse: (
+    v: V,
+    ctx: VariableAbilityParseContext
+  ) => VariableDeclarationJSON | VariableDeclarationJSON[];
+}
+
+export interface VariableConsumerAbilityOptions<V = any> extends VariableAbilityOptions {
+  // 解析变量协议
+  parse: (v: V, ctx: VariableAbilityParseContext) => ASTNodeJSON | undefined;
+}

package/src/with-node-variables.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, isVNode, type Component } from 'vue';
+
+import { NodeRenderHoc } from '@flowgram-vue/form-core';
+
+import { PublicScopeProvider } from './components/public-scope-provider';
+
+export const withNodeVariables: NodeRenderHoc = (Component) =>
+  defineComponent({
+    name: 'WithNodeVariables',
+    setup(_props, { attrs }) {
+      return () =>
+        h(PublicScopeProvider, null, {
+          default: () => {
+            if (typeof Component === 'function') {
+              const result = (Component as (props?: unknown) => unknown)(attrs);
+              if (isVNode(result) || result == null) {
+                return result;
+              }
+              return h(result as Component, attrs);
+            }
+            return h(Component as Component, attrs);
+          },
+        });
+    },
+  });