@flowgram.ai/form-materials 0.4.9 → 0.4.11

package/dist/types/shared/flow-value/types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+export interface IFlowValueExtra {
+    index?: number;
+}
+export type FlowValueType = 'constant' | 'ref' | 'expression' | 'template';
+export interface IFlowConstantValue {
+    type: 'constant';
+    content?: any;
+    schema?: IJsonSchema;
+    extra?: IFlowValueExtra;
+}
+export interface IFlowRefValue {
+    type: 'ref';
+    content?: string[];
+    extra?: IFlowValueExtra;
+}
+export interface IFlowExpressionValue {
+    type: 'expression';
+    content?: string;
+    extra?: IFlowValueExtra;
+}
+export interface IFlowTemplateValue {
+    type: 'template';
+    content?: string;
+    extra?: IFlowValueExtra;
+}
+export type IFlowValue = IFlowConstantValue | IFlowRefValue | IFlowExpressionValue | IFlowTemplateValue;
+export type IFlowConstantRefValue = IFlowConstantValue | IFlowRefValue;

package/dist/types/shared/flow-value/utils.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { Scope } from '@flowgram.ai/editor';
+import { IFlowConstantValue, IFlowRefValue, IFlowExpressionValue, IFlowTemplateValue, IFlowValue, IFlowConstantRefValue, FlowValueType } from './types';
+export declare namespace FlowValueUtils {
+    /**
+     * Check if the value is a constant type
+     */
+    function isConstant(value: any): value is IFlowConstantValue;
+    /**
+     * Check if the value is a reference type
+     */
+    function isRef(value: any): value is IFlowRefValue;
+    /**
+     * Check if the value is an expression type
+     */
+    function isExpression(value: any): value is IFlowExpressionValue;
+    /**
+     * Check if the value is a template type
+     */
+    function isTemplate(value: any): value is IFlowTemplateValue;
+    /**
+     * Check if the value is either a constant or reference type
+     */
+    function isConstantOrRef(value: any): value is IFlowConstantRefValue;
+    /**
+     * Check if the value is a valid flow value type
+     */
+    function isFlowValue(value: any): value is IFlowValue;
+    /**
+     * Traverse all flow values in the given value
+     * @param value The value to traverse
+     * @param options The options to traverse
+     * @returns A generator of flow values
+     */
+    function traverse(value: any, options: {
+        includeTypes?: FlowValueType[];
+        path?: string;
+    }): Generator<{
+        value: IFlowValue;
+        path: string;
+    }>;
+    /**
+     * Get all key paths in the template value
+     * @param value The template value
+     * @returns A list of key paths
+     */
+    function getTemplateKeyPaths(value: IFlowTemplateValue): string[][];
+    /**
+     * Infer the schema of the constant value
+     * @param value
+     * @returns
+     */
+    function inferConstantJsonSchema(value: IFlowConstantValue): IJsonSchema | undefined;
+    /**
+     * Infer the schema of the flow value
+     * @param values The flow value or object contains flow value
+     * @param scope
+     * @returns
+     */
+    function inferJsonSchema(values: any, scope: Scope): IJsonSchema | undefined;
+}

package/dist/types/shared/format-legacy-refs/index.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+interface LegacyFlowRefValueSchema {
+    type: 'ref';
+    content: string;
+}
+interface NewFlowRefValueSchema {
+    type: 'ref';
+    content: string[];
+}
+/**
+ * In flowgram 0.2.0, for introducing Loop variable functionality,
+ * the FlowRefValueSchema type definition is updated:
+ *
+ * interface LegacyFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string;
+ * }
+ *
+ * interface NewFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string[];
+ * }
+ *
+ *
+ * For making sure backend json will not be changed, we provide format legacy ref utils for updating the formData
+ *
+ * How to use:
+ *
+ * 1. Call formatLegacyRefOnSubmit on the formData before submitting
+ * 2. Call formatLegacyRefOnInit on the formData after submitting
+ *
+ * Example:
+ * import { formatLegacyRefOnSubmit, formatLegacyRefOnInit } from '@flowgram.ai/form-materials';
+ * formMeta: {
+ *  formatOnSubmit: (data) => formatLegacyRefOnSubmit(data),
+ *  formatOnInit: (data) => formatLegacyRefOnInit(data),
+ * }
+ */
+export declare function formatLegacyRefOnSubmit(value: any): any;
+/**
+ * In flowgram 0.2.0, for introducing Loop variable functionality,
+ * the FlowRefValueSchema type definition is updated:
+ *
+ * interface LegacyFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string;
+ * }
+ *
+ * interface NewFlowRefValueSchema {
+ *  type: 'ref';
+ *  content: string[];
+ * }
+ *
+ *
+ * For making sure backend json will not be changed, we provide format legacy ref utils for updating the formData
+ *
+ * How to use:
+ *
+ * 1. Call formatLegacyRefOnSubmit on the formData before submitting
+ * 2. Call formatLegacyRefOnInit on the formData after submitting
+ *
+ * Example:
+ * import { formatLegacyRefOnSubmit, formatLegacyRefOnInit } from '@flowgram.ai/form-materials';
+ *
+ * formMeta: {
+ *  formatOnSubmit: (data) => formatLegacyRefOnSubmit(data),
+ *  formatOnInit: (data) => formatLegacyRefOnInit(data),
+ * }
+ */
+export declare function formatLegacyRefOnInit(value: any): any;
+export declare function isLegacyFlowRefValueSchema(value: any): value is LegacyFlowRefValueSchema;
+export declare function isNewFlowRefValueSchema(value: any): value is NewFlowRefValueSchema;
+export declare function formatLegacyRefToNewRef(value: LegacyFlowRefValueSchema): {
+    type: string;
+    content: string[];
+};
+export declare function formatNewRefToLegacyRef(value: NewFlowRefValueSchema): {
+    type: string;
+    content: string;
+};
+export {};

package/dist/types/shared/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+export { FlowValueUtils, type FlowValueType, type IFlowConstantRefValue, type IFlowConstantValue, type IFlowExpressionValue, type IFlowRefValue, type IFlowTemplateValue, type IFlowValue, type IFlowValueExtra, } from './flow-value';
+export { formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, } from './format-legacy-refs';
+export { createInjectMaterial } from './inject-material';
+export { lazySuspense, withSuspense } from './lazy-suspense';
+export { polyfillCreateRoot, unstableSetCreateRoot, type IPolyfillRoot, } from './polyfill-create-root';

package/dist/types/shared/inject-material/index.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+type WithRenderKey<T> = T & {
+    renderKey?: string;
+};
+/**
+ * Creates a material component wrapper with dependency injection support
+ *
+ * This Higher-Order Component (HOC) implements a dynamic component replacement mechanism
+ * for material components. It automatically checks if a custom renderer is registered
+ * in the editor context, using the injected component if available, otherwise
+ * falling back to the default component.
+ *
+ * @example
+ * ```tsx
+ * // 1.Create an injectable material component
+ * const InjectVariableSelector = createInjectMaterial(VariableSelector)
+ *
+ * // 2. Register custom components in editor
+ * // Configure in use-editor-props.tsx:
+ * const editorProps = {
+ *   materials: {
+ *     components: {
+ *       [VariableSelector.renderKey]: YourCustomVariableSelector
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @description
+ * Data flow explanation:
+ * - Register components to FlowRendererRegistry in use-editor-props
+ * - InjectMaterial reads renderers from FlowRendererRegistry
+ * - If registered renderer exists and type is REACT, use injected component
+ * - If not exists or type mismatch, fallback to default component
+ *
+ * @param Component - Default React component
+ * @param params - Optional parameters
+ * @param params.renderKey - Custom render key name, highest priority
+ * @returns Wrapper component with dependency injection support
+ */
+export declare function createInjectMaterial<Props>(Component: WithRenderKey<React.FC<Props> | React.ExoticComponent<Props>>, params?: {
+    renderKey?: string;
+}): WithRenderKey<React.FC<Props>>;
+export {};

package/dist/types/shared/lazy-suspense/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React, { ComponentType, lazy } from 'react';
+export declare function withSuspense<T extends ComponentType<any>>(Component: T, fallback?: React.ReactNode): T;
+export declare function lazySuspense<T extends ComponentType<any>>(params: Parameters<typeof lazy<T>>[0], fallback?: React.ReactNode): React.LazyExoticComponent<T>;

package/dist/types/shared/polyfill-create-root/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+export interface IPolyfillRoot {
+    render(children: React.ReactNode): void;
+    unmount(): void;
+}
+export declare function polyfillCreateRoot(dom: HTMLElement): IPolyfillRoot;
+export declare function unstableSetCreateRoot(createRoot: (dom: HTMLElement) => IPolyfillRoot): void;

package/dist/types/validate/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+export { validateFlowValue } from './validate-flow-value';

package/dist/types/validate/validate-flow-value/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { FeedbackLevel, FlowNodeEntity } from '@flowgram.ai/editor';
+import { IFlowValue } from '../../shared';
+interface Context {
+    node: FlowNodeEntity;
+    required?: boolean;
+    errorMessages?: {
+        required?: string;
+        unknownVariable?: string;
+    };
+}
+export declare function validateFlowValue(value: IFlowValue | undefined, ctx: Context): {
+    level: FeedbackLevel;
+    message: string;
+} | undefined;
+export {};

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
   "exports": {
-    "types": "./dist/index.d.ts",
-    "import": "./dist/esm/index.js",
-    "require": "./dist/index.js"
+    "types": "./dist/types/index.d.ts",
+    "import": "./dist/esm/index.mjs",
+    "require": "./dist/cjs/index.js"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.mjs",
+  "types": "./dist/types/index.d.ts",
   "bin": {
-    "flowgram-form-materials": "./bin/index.ts"
+    "flowgram-form-materials": "./bin/run.sh"
   },
   "files": [
     "dist",
@@ -26,17 +26,13 @@
     "@douyinfe/semi-ui": "^2.80.0",
     "lodash-es": "^4.17.21",
     "nanoid": "^4.0.2",
-    "commander": "^11.0.0",
-    "chalk": "^5.3.0",
-    "inquirer": "^9.2.7",
     "immer": "~10.1.1",
-    "@coze-editor/editor": "0.1.0-alpha.5a549c",
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
-    "typescript": "^5.8.3",
     "zod": "^3.24.4",
-    "@flowgram.ai/editor": "0.4.9",
-    "@flowgram.ai/json-schema": "0.4.9"
+    "@flowgram.ai/json-schema": "0.4.11",
+    "@flowgram.ai/coze-editor": "0.4.11",
+    "@flowgram.ai/editor": "0.4.11"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -49,11 +45,13 @@
     "react": "^18",
     "react-dom": "^18",
     "styled-components": "^5",
-    "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/ts-config": "0.4.9",
-    "@flowgram.ai/eslint-config": "0.4.9"
+    "@rslib/core": "~0.12.4",
+    "cross-env": "~7.0.3",
+    "@rsbuild/plugin-react": "^1.1.1",
+    "@flowgram.ai/eslint-config": "0.4.11",
+    "@flowgram.ai/ts-config": "0.4.11"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -65,9 +63,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "build": "npm run build:fast -- --dts-resolve",
-    "build:fast": "tsup src/index.ts --format cjs,esm --sourcemap --legacy-output",
-    "build:watch": "npm run build:fast -- --dts-resolve",
+    "build": "cross-env NODE_ENV=production rslib build",
+    "build:fast": "cross-env NODE_ENV=development rslib build",
+    "build:watch": "npm run build:fast",
+    "name-export": "node scripts/name-export.js",
     "clean": "rimraf dist",
     "test": "exit 0",
     "test:cov": "exit 0",

package/src/components/assign-row/index.tsx

@@ -8,12 +8,12 @@ import React from 'react';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconMinus } from '@douyinfe/semi-icons';
 
-import { IFlowConstantRefValue } from '@/typings';
+import { IFlowConstantRefValue } from '@/shared';
 import { InjectVariableSelector } from '@/components/variable-selector';
 import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import { BlurInput } from '@/components/blur-input';
 
 import { AssignRowProps } from './types';
-import { BlurInput } from './components/blur-input';
 
 export function AssignRow(props: AssignRowProps) {
   const {
@@ -81,4 +81,4 @@ export function AssignRow(props: AssignRowProps) {
   );
 }
 
-export { AssignValueType } from './types';
+export { type AssignValueType } from './types';

package/src/components/assign-row/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowRefValue, IFlowValue } from '@/typings';
+import { IFlowRefValue, IFlowValue } from '@/shared';
 
 export type AssignValueType =
   | {

package/src/components/batch-outputs/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 export type ValueType = Record<string, IFlowRefValue | undefined>;
 

package/src/components/blur-input/index.tsx

@@ -3,9 +3,17 @@
  * SPDX-License-Identifier: MIT
  */
 
+/* eslint-disable react/prop-types */
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React, { useEffect, useState } from 'react';
 
-import Input, { InputProps } from '@douyinfe/semi-ui/lib/es/input';
+import { Input } from '@douyinfe/semi-ui';
+
+type InputProps = React.ComponentPropsWithoutRef<typeof Input>;
 
 export function BlurInput(props: InputProps) {
   const [value, setValue] = useState('');

package/src/components/code-editor/editor.tsx

@@ -10,12 +10,11 @@ import {
   createRenderer,
   EditorProvider,
   InferValues,
-} from '@coze-editor/editor/react';
-import preset, { type EditorAPI } from '@coze-editor/editor/preset-code';
+} from '@flowgram.ai/coze-editor/react';
+import preset, { type EditorAPI } from '@flowgram.ai/coze-editor/preset-code';
 import { EditorView } from '@codemirror/view';
 
 import { getSuffixByLanguageId } from './utils';
-import { initTsWorker } from './language-features';
 
 import './theme';
 import './language-features';
@@ -55,12 +54,6 @@ export function CodeEditor({
 }: CodeEditorPropsType) {
   const editorRef = useRef<EditorAPI | null>(null);
 
-  useEffect(() => {
-    if (languageId === 'typescript') {
-      initTsWorker();
-    }
-  }, [languageId]);
-
   useEffect(() => {
     // listen to value change
     if (editorRef.current?.getValue() !== value) {
@@ -68,6 +61,14 @@ export function CodeEditor({
     }
   }, [value]);
 
+  useEffect(() => {
+    if (languageId === 'typescript') {
+      import('./init-worker').then((module) => {
+        module.initTsWorker();
+      });
+    }
+  }, [languageId]);
+
   return (
     <EditorProvider>
       <OriginCodeEditor

package/src/components/code-editor/init-worker.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { typescript } from '@flowgram.ai/coze-editor/language-typescript';
+
+let tsWorkerInit = false;
+
+export const initTsWorker = () => {
+  if (tsWorkerInit) {
+    return;
+  }
+  tsWorkerInit = true;
+
+  const tsWorker = new Worker(
+    new URL(`@flowgram.ai/coze-editor/language-typescript/worker`, import.meta.url),
+    { type: 'module' }
+  );
+  typescript.languageService.initialize(tsWorker, {
+    compilerOptions: {
+      // eliminate Promise error
+      lib: ['es2015', 'dom'],
+      noImplicitAny: false,
+    },
+  });
+};

package/src/components/code-editor/language-features.ts

@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { languages } from '@coze-editor/editor/preset-code';
-import { typescript } from '@coze-editor/editor/language-typescript';
-import { shell } from '@coze-editor/editor/language-shell';
-import { python } from '@coze-editor/editor/language-python';
-import { json } from '@coze-editor/editor/language-json';
-import { mixLanguages } from '@coze-editor/editor';
+import { languages } from '@flowgram.ai/coze-editor/preset-code';
+import { typescript } from '@flowgram.ai/coze-editor/language-typescript';
+import { shell } from '@flowgram.ai/coze-editor/language-shell';
+import { python } from '@flowgram.ai/coze-editor/language-python';
+import { json } from '@flowgram.ai/coze-editor/language-json';
+import { mixLanguages } from '@flowgram.ai/coze-editor';
 
 languages.register('python', python);
 languages.register('shell', shell);
@@ -21,24 +21,3 @@ languages.register('json', {
   }),
   languageService: json.languageService,
 });
-
-let tsWorkerInit = false;
-
-export const initTsWorker = () => {
-  if (tsWorkerInit) {
-    return;
-  }
-  tsWorkerInit = true;
-
-  const tsWorker = new Worker(
-    new URL(`@coze-editor/editor/language-typescript/worker`, import.meta.url),
-    { type: 'module' }
-  );
-  typescript.languageService.initialize(tsWorker, {
-    compilerOptions: {
-      // eliminate Promise error
-      lib: ['es2015', 'dom'],
-      noImplicitAny: false,
-    },
-  });
-};

package/src/components/code-editor/theme/dark.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { createTheme, tags as t } from '@coze-editor/editor/preset-code';
+import { createTheme, tags as t } from '@flowgram.ai/coze-editor/preset-code';
 import { type Extension } from '@codemirror/state';
 
 const colors = {

package/src/components/code-editor/theme/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { themes } from '@coze-editor/editor/preset-code';
+import { themes } from '@flowgram.ai/coze-editor/preset-code';
 
 import { lightTheme } from './light';
 import { darkTheme } from './dark';

package/src/components/code-editor/theme/light.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { createTheme, tags as t } from '@coze-editor/editor/preset-code';
+import { createTheme, tags as t } from '@flowgram.ai/coze-editor/preset-code';
 import { type Extension } from '@codemirror/state';
 
 const colors = {

package/src/components/condition-row/hooks/useRule.ts

@@ -8,7 +8,7 @@ import { useMemo } from 'react';
 import { JsonSchemaUtils, JsonSchemaBasicType } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '@/typings';
+import { IFlowRefValue } from '@/shared';
 
 import { IRules } from '../types';
 import { defaultRules } from '../constants';

package/src/components/condition-row/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowConstantRefValue, IFlowRefValue } from '@/typings';
+import { IFlowConstantRefValue, IFlowRefValue } from '@/shared';
 
 export enum Op {
   EQ = 'eq',

package/src/components/constant-input/index.tsx

@@ -12,7 +12,7 @@ import { useTypeManager } from '@/plugins';
 
 import { PropsType, Strategy as ConstantInputStrategy } from './types';
 
-export { ConstantInputStrategy };
+export { type ConstantInputStrategy };
 
 export function ConstantInput(props: PropsType) {
   const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;