v0.3.2
bytedance/flowgram.aiv0.3.2Aug 1, 2025by sanmaopep
AI Summary
This release introduces variable accessible validation with two new materials (`validateFlowValue` and `validateWhenVariableSync`) to help validate variable inputs and re-validate when previous scope variables change. It also adds a new `@flowgram.ai/type-editor` package (beta) for editing JSON schemas and includes a Variable Node in the demo-free-layout.
Key Highlights
- Added variable accessible validation with `validateFlowValue` and `validateWhenVariableSync` materials
- New `@flowgram.ai/type-editor` package (beta) for editing JSON schemas
- Added Variable Node in demo-free-layout demo
- Set node registry TypeScript to partial type
- Fixed issue where move out should await before clearing lines
New Features
- TypeEditor component for JSON schema editing (beta)
- validateFlowValue - validates flow value including accessibility of variable input
- validateWhenVariableSync - re-validates variable accessibility when previous scope variables update
- Variable Node for demo-free-layout
- Partial TypeScript types for node registry
Full Release Notes
## What's Changed
* feat(material): type-editor by @sanmaopep in https://github.com/bytedance/flowgram.ai/pull/613
* feat(material): set node registry ts to partial by @sanmaopep in https://github.com/bytedance/flowgram.ai/pull/616
* feat(material): variable assign by @sanmaopep in https://github.com/bytedance/flowgram.ai/pull/618
* feat(material): validate flow value by @sanmaopep in https://github.com/bytedance/flowgram.ai/pull/620
* fix(demo): handle move out should await before clear lines by @louisyoungx in https://github.com/bytedance/flowgram.ai/pull/617
### Variable Accessible Validation
We provide two new materials:
- `validateFlowValue`: Validate flow value, includes value required the accessibility of variable input
- `validateWhenVariableSync`: When variables in previous scopes updated, re-validate the accessibility of variable input
Example:
```typescript
import { FormMeta } from '@flowgram.ai/free-layout-editor';
import {
autoRenameRefEffect,
validateFlowValue,
validateWhenVariableSync,
} from '@flowgram.ai/form-materials';
export const formMeta: FormMeta<FlowNodeJSON> = {
validate: {
'inputsValues.*': ({ value, context, formValues, name }) => {
const valuePropertyKey = name.replace(/^inputsValues\./, '');
const required = formValues.inputs?.required || [];
return validateFlowValue(value, {
node: context.node,
required: required.includes(valuePropertyKey),
errorMessages: {
required: `${valuePropertyKey} is required`,
},
});
},
},
effect: {
inputsValues: [
...autoRenameRefEffect,
// when variable in previous nodes updated, the error messages should be re-validated
...validateWhenVariableSync()
],
},
};
```
### Add Variable Node in demo-free-layout
Read [Source Code](https://github.com/bytedance/flowgram.ai/blob/main/apps/demo-free-layout/src/nodes/variable/form-meta.tsx) for more details
<img width="3238" height="1826" alt="image" src="https://github.com/user-attachments/assets/bf595600-b266-4b04-8ec4-4a4d404d3933" />
### @flowgram.ai/type-editor
`TypeEditor` provide a complicated UI for edit json schema, **this package is still in beta**, here is a simple example:
```typescript
import { ObjectTypeEditor } from '@flowgram.ai/type-editor'
<Field
name="outputs"
render={({ field: { value, onChange } }: FieldRenderProps<JsonSchema>) => (
<>
<ObjectTypeEditor
value={value}
onChange={(value) => onChange(value as JsonSchema)}
/>
</>
)}
/>
```
<img width="3358" height="1896" alt="image" src="https://github.com/user-attachments/assets/fd49c081-6bfb-4e7c-b315-7d03279587bc" />
**Full Changelog**: https://github.com/bytedance/flowgram.ai/compare/v0.3.1...v0.3.2