@flowgram.ai/form-materials 0.5.7 → 1.0.1

package/dist/cjs/components/condition-context/hooks/use-condition.js

@@ -87,6 +87,10 @@ function useCondition({ leftSchema, operator, onClearOp, onClearRight, ruleConfi
     ]);
     const prevTargetSchemaRef = (0, external_react_namespaceObject.useRef)(void 0);
     (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!prevTargetSchemaRef.current) {
+            prevTargetSchemaRef.current = targetSchema;
+            return;
+        }
         if (prevTargetSchemaRef.current?.type !== targetSchema?.type) onClearRight?.();
         prevTargetSchemaRef.current = targetSchema;
     }, [

package/dist/esm/components/condition-context/hooks/use-condition.mjs

@@ -59,6 +59,10 @@ function useCondition({ leftSchema, operator, onClearOp, onClearRight, ruleConfi
     ]);
     const prevTargetSchemaRef = useRef(void 0);
     useEffect(()=>{
+        if (!prevTargetSchemaRef.current) {
+            prevTargetSchemaRef.current = targetSchema;
+            return;
+        }
         if (prevTargetSchemaRef.current?.type !== targetSchema?.type) onClearRight?.();
         prevTargetSchemaRef.current = targetSchema;
     }, [

package/dist/types/plugins/json-schema-preset/create-type-preset-plugin.d.ts

@@ -2,8 +2,12 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
+import { type PluginCreator } from '@flowgram.ai/editor';
 import { JsonSchemaTypeRegistry } from './types';
-export declare const createTypePresetPlugin: import("@flowgram.ai/core").PluginCreator<{
-    types?: Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, "type">[];
+type TypePresetRegistry = Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>;
+interface TypePresetPluginOptions {
+    types?: TypePresetRegistry[];
     unregisterTypes?: string[];
-}>;
+}
+export declare const createTypePresetPlugin: PluginCreator<TypePresetPluginOptions>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.5.7",
+  "version": "1.0.1",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -67,9 +67,9 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "zod": "^3.24.4",
-    "@flowgram.ai/json-schema": "0.5.7",
-    "@flowgram.ai/editor": "0.5.7",
-    "@flowgram.ai/coze-editor": "0.5.7"
+    "@flowgram.ai/editor": "1.0.1",
+    "@flowgram.ai/json-schema": "1.0.1",
+    "@flowgram.ai/coze-editor": "1.0.1"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -86,8 +86,8 @@
     "cross-env": "~7.0.3",
     "@rsbuild/plugin-react": "^1.1.1",
     "date-fns": "~4.1.0",
-    "@flowgram.ai/eslint-config": "0.5.7",
-    "@flowgram.ai/ts-config": "0.5.7"
+    "@flowgram.ai/eslint-config": "1.0.1",
+    "@flowgram.ai/ts-config": "1.0.1"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/src/components/condition-context/hooks/use-condition.tsx

@@ -125,6 +125,10 @@ export function useCondition({
 
   // When type of target schema updated, clear it
   useEffect(() => {
+    if (!prevTargetSchemaRef.current) {
+      prevTargetSchemaRef.current = targetSchema;
+      return;
+    }
     if (prevTargetSchemaRef.current?.type !== targetSchema?.type) {
       onClearRight?.();
     }

package/src/plugins/json-schema-preset/create-type-preset-plugin.tsx

@@ -8,23 +8,28 @@ import {
   jsonSchemaContainerModule,
   JsonSchemaTypeManager,
 } from '@flowgram.ai/json-schema';
-import { definePluginCreator } from '@flowgram.ai/editor';
+import { definePluginCreator, type PluginCreator } from '@flowgram.ai/editor';
 
 import { JsonSchemaTypeRegistry } from './types';
 import { initRegistries, jsonSchemaTypePreset } from './type-definition';
 
 initRegistries();
 
-export const createTypePresetPlugin = definePluginCreator<{
-  types?: Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>[];
+type TypePresetRegistry = Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>;
+
+interface TypePresetPluginOptions {
+  types?: TypePresetRegistry[];
   unregisterTypes?: string[];
-}>({
-  onInit(ctx, opts) {
-    const typeManager = ctx.get(BaseTypeManager) as JsonSchemaTypeManager;
-    jsonSchemaTypePreset.forEach((_type) => typeManager.register(_type));
+}
+
+export const createTypePresetPlugin: PluginCreator<TypePresetPluginOptions> =
+  definePluginCreator<TypePresetPluginOptions>({
+    onInit(ctx, opts) {
+      const typeManager = ctx.get(BaseTypeManager) as JsonSchemaTypeManager;
+      jsonSchemaTypePreset.forEach((_type) => typeManager.register(_type));
 
-    opts.types?.forEach((_type) => typeManager.register(_type));
-    opts.unregisterTypes?.forEach((_type) => typeManager.unregister(_type));
-  },
-  containerModules: [jsonSchemaContainerModule],
-});
+      opts.types?.forEach((_type) => typeManager.register(_type));
+      opts.unregisterTypes?.forEach((_type) => typeManager.unregister(_type));
+    },
+    containerModules: [jsonSchemaContainerModule],
+  });

package/src/shared/inject-material/README.md

@@ -1,170 +0,0 @@
-# InjectMaterial Component
-
-A material component wrapper with dependency injection support for implementing dynamic component replacement mechanisms.
-
-## Why Dependency Injection Matters
-
-### ❌ Tight Coupling: Traditional Dependency Issues
-
-```mermaid
-graph TD
-    A[Material A] --> B[Material B]
-    B --> D[Material D]
-    C[Material C] --> D
-
-    style D fill:#ff4757
-    style A fill:#ffa502
-    style B fill:#ffa502
-    style C fill:#ffa502
-
-    note["💥 Problem: D changes require modifications to A, B, C"]
-```
-
-**Issues:** Chain reactions, high maintenance costs
-
-### ✅ Decoupling: Dependency Injection Solution
-
-```mermaid
-graph TD
-    A[Material A] --> RenderKey[Material D RenderKey]
-    B[Material B] --> RenderKey
-    C[Material C] --> RenderKey
-
-    RenderKey -.-> BaseD[Origin D]
-    CustomD[Custom D] -.-> RenderKey
-
-    style RenderKey fill:#5f27cd
-    style BaseD fill:#2ed573
-    style CustomD fill:#26d0ce
-    style A fill:#a55eea
-    style B fill:#a55eea
-    style C fill:#a55eea
-
-    note2["✅ A, B, C depend on abstract interface, decoupled from D"]
-```
-
-**Benefits:** Hot-swapping, parallel development, version compatibility
-
-## Features
-
-- 🔧 **Dependency Injection**: Support dynamic component replacement via FlowRendererRegistry
-- 🔄 **Smart Fallback**: Automatically use default component when no custom component is registered
-- 🎯 **Type Safety**: Full TypeScript type inference support
-- 📦 **Zero Configuration**: Works out of the box without additional setup
-
-## Usage
-
-### 1. Create Injectable Material Component
-
-```tsx
-import { createInjectMaterial } from '@flowgram.ai/form-materials';
-import { VariableSelector } from './VariableSelector';
-
-// Create injectable material wrapper component
-const InjectVariableSelector = createInjectMaterial(VariableSelector);
-
-// Now you can use it like a regular component
-function MyComponent() {
-  return <InjectVariableSelector value={value} onChange={handleChange} />;
-}
-```
-
-### 2. Register Custom Components
-
-Configure custom renderer in `use-editor-props.tsx`:
-
-```tsx
-import { useEditorProps } from '@flowgram.ai/editor';
-import { YourCustomVariableSelector } from './YourCustomVariableSelector';
-import { VariableSelector } from '@flowgram.ai/form-materials';
-
-function useCustomEditorProps() {
-  const editorProps = useEditorProps({
-    materials: {
-      components: {
-        // Use component's renderKey or component name as key
-        [VariableSelector.renderKey]: YourCustomVariableSelector,
-        [TypeSelector.renderKey]: YourCustomTypeSelector,
-      }
-    }
-  });
-
-  return editorProps;
-}
-```
-
-### 3. Use Custom renderKey
-
-If your component requires a specific renderKey:
-
-```tsx
-const InjectCustomComponent = createInjectMaterial(MyComponent, {
-  renderKey: 'my-custom-key'
-});
-
-// When registering
-{
-  materials: {
-    components: {
-      'my-custom-key': MyCustomRenderer
-    }
-  }
-}
-```
-
-## Sequence Diagram
-
-Complete component registration and rendering sequence diagram:
-
-```mermaid
-sequenceDiagram
-    participant App as Application
-    participant Editor as use-editor-props
-    participant Registry as FlowRendererRegistry
-    participant Inject as InjectMaterial
-    participant Default as Default Component
-    participant Custom as Custom Component
-
-    Note over App,Custom: Component Registration Phase
-    App->>Editor: Call use-editor-props()
-    Editor->>Editor: Configure materials.components
-    Editor->>Registry: Register component to FlowRendererRegistry
-    Registry->>Registry: Store mapping relationship
-    Registry-->>App: Registration complete
-
-    Note over App,Custom: Component Rendering Phase
-    App->>Inject: Render InjectMaterial component
-    Inject->>Registry: Query renderer (getRendererComponent)
-
-    alt Custom renderer exists
-        Registry-->>Inject: Return custom React component
-        Inject->>Custom: Render with custom component
-        Custom-->>App: Render custom UI
-    else No custom renderer
-        Registry-->>Inject: Return null or type mismatch
-        Inject->>Default: Render with default component
-        Default-->>App: Render default UI
-    end
-```
-
-## Render Key Priority
-
-Component render key determination follows this priority order:
-
-1. `params.renderKey` (second parameter of createInjectMaterial)
-2. `Component.renderKey` (component's own renderKey property)
-3. `Component.name` (component's display name)
-4. Empty string (final fallback)
-
-## Type Definition
-
-```typescript
-interface CreateInjectMaterialOptions {
-  renderKey?: string;
-}
-
-function createInjectMaterial<Props>(
-  Component: React.FC<Props> & { renderKey?: string },
-  params?: CreateInjectMaterialOptions
-): React.FC<Props>
-```

package/src/shared/inject-material/README.zh.md

@@ -1,174 +0,0 @@
-# InjectMaterial 组件
-
-一个支持依赖注入的 Material 组件包装器，用于实现动态组件替换机制。
-
-## 为什么需要依赖注入
-
-### ❌ 紧耦合：传统依赖问题
-
-```mermaid
-graph TD
-    A[Material A] --> B[Material B]
-    B --> D[Material D]
-    C[Material C] --> D
-
-    style D fill:#ff4757
-    style A fill:#ffa502
-    style B fill:#ffa502
-    style C fill:#ffa502
-
-    note["💥 问题：D变更导致A、B、C全部需要修改"]
-```
-
-**问题：** 连锁反应、高维护成本
-
-### ✅ 解耦：依赖注入方案
-
-```mermaid
-graph TD
-    A[Material A] --> RenderKey[Material D RenderKey]
-    B[Material B] --> RenderKey
-    C[Material C] --> RenderKey
-
-    RenderKey -.-> BaseD[Origin D]
-    CustomD[Custom D] -.-> RenderKey
-
-    style RenderKey fill:#5f27cd
-    style BaseD fill:#2ed573
-    style CustomD fill:#26d0ce
-    style A fill:#a55eea
-    style B fill:#a55eea
-    style C fill:#a55eea
-
-    note2["✅ A、B、C依赖抽象接口，与D实现解耦"]
-```
-
-**优势：** 热插拔、并行开发、版本兼容
-
-## 特性
-
-- 🔧 **依赖注入**：通过 FlowRendererRegistry 支持动态组件替换
-- 🔄 **智能回退**：当没有注册自定义组件时自动使用默认组件
-- 🎯 **类型安全**：完整的 TypeScript 类型推断支持
-- 📦 **零配置**：开箱即用，无需额外设置
-
-## 安装
-
-该组件是 `@flowgram.ai/form-materials` 包的一部分，无需单独安装。
-
-## 使用
-
-### 1. 创建可注入的 Material 组件件
-
-```tsx
-import { createInjectMaterial } from '@flowgram.ai/form-materials';
-import { VariableSelector } from './VariableSelector';
-
-// 创建可注入的Material包装组件
-const InjectVariableSelector = createInjectMaterial(VariableSelector);
-
-// 现在你可以像使用普通组件一样使用它
-function MyComponent() {
-  return <InjectVariableSelector value={value} onChange={handleChange} />;
-}
-```
-
-### 2. 注册自定义组件
-
-在 `use-editor-props.tsx` 中配置自定义渲染器：
-
-```tsx
-import { useEditorProps } from '@flowgram.ai/editor';
-import { YourCustomVariableSelector } from './YourCustomVariableSelector';
-import { VariableSelector } from '@flowgram.ai/form-materials';
-
-function useCustomEditorProps() {
-  const editorProps = useEditorProps({
-    materials: {
-      components: {
-        // 使用组件的 renderKey 或组件名称作为键
-        [VariableSelector.renderKey]: YourCustomVariableSelector,
-        [TypeSelector.renderKey]: YourCustomTypeSelector,
-      }
-    }
-  });
-
-  return editorProps;
-}
-```
-
-### 3. 使用自定义 renderKey
-
-如果你的组件需要特定的 renderKey：
-
-```tsx
-const InjectCustomComponent = createInjectMaterial(MyComponent, {
-  renderKey: 'my-custom-key'
-});
-
-// 注册时
-{
-  materials: {
-    components: {
-      'my-custom-key': MyCustomRenderer
-    }
-  }
-}
-```
-
-## 时序图
-
-完整的组件注册和渲染时序图：
-
-```mermaid
-sequenceDiagram
-    participant App as 应用程序
-    participant Editor as use-editor-props
-    participant Registry as FlowRendererRegistry
-    participant Inject as InjectMaterial
-    participant Default as 默认组件
-    participant Custom as 自定义组件
-
-    Note over App,Custom: 组件注册阶段
-    App->>Editor: 调用 use-editor-props()
-    Editor->>Editor: 配置 materials.components
-    Editor->>Registry: 向 FlowRendererRegistry 注册组件
-    Registry->>Registry: 存储映射关系
-    Registry-->>App: 注册完成
-
-    Note over App,Custom: 组件渲染阶段
-    App->>Inject: 渲染 InjectMaterial 组件
-    Inject->>Registry: 查询渲染器 (getRendererComponent)
-
-    alt 存在自定义渲染器
-        Registry-->>Inject: 返回自定义 React 组件
-        Inject->>Custom: 使用自定义组件渲染
-        Custom-->>App: 渲染自定义 UI
-    else 无自定义渲染器
-        Registry-->>Inject: 返回 null 或类型不匹配
-        Inject->>Default: 使用默认组件渲染
-        Default-->>App: 渲染默认 UI
-    end
-```
-
-## 渲染键优先级
-
-组件渲染键的确定遵循以下优先级顺序：
-
-1. `params.renderKey` (createInjectMaterial 的第二个参数)
-2. `Component.renderKey` (组件自身的 renderKey 属性)
-3. `Component.name` (组件的显示名称)
-4. 空字符串 (最终回退)
-
-## 类型定义
-
-```typescript
-interface CreateInjectMaterialOptions {
-  renderKey?: string;
-}
-
-function createInjectMaterial<Props>(
-  Component: React.FC<Props> & { renderKey?: string },
-  params?: CreateInjectMaterialOptions
-): React.FC<Props>
-```