Formisch 用于固态JS
Formisch是SolidJS的一个基于计划,无头形式库. 它管理形态状态和验证. 它的型号安全,默认速度快,而由于其模块化设计,它的捆绑尺寸也很小. 试试看 游乐场来啊!
福尔米施也可供 角质, (中文(简体) ), 霍诺克, (中文(简体) ), 预录, (中文(简体) ), 齐克, (中文(简体) ), 反应, (中文(简体) ), 原生反应, (中文(简体) ), 丝绒 财务报告和审定财务报表 阴道。 。 。 .
要点
- 从2.5 kB开始的小捆绑大小
- 与 Valibot 基于 Schema 的验证
- 编辑器中自动补全的安全性
- 开放源码和全面测试,覆盖率为100%
- - DOM更新精细
- 最小、可读和深思熟虑的API
- 支持所有本地 HTML 窗体字段
示例
每个表格都从 createForm 原始的。 原始的。 它根据所提供的 Valibot 计划 初始化了你的表型商店 并推断出它的类型 接下来,将表格包装在 <Form /> 组件。 土生土长的薄层 <form /> 处理构成验证和提交要素。 然后,你可以访问一个田的状态与 useField 原始的还是 <Field /> 要连接您输入的组件.
import { createForm, Field, Form } from '@formisch/solid';
import * as v from 'valibot';
const LoginSchema = v.object({
email: v.pipe(v.string(), v.email()),
password: v.pipe(v.string(), v.minLength(8)),
});
export default function LoginPage() {
const loginForm = createForm({
schema: LoginSchema,
});
return (
<Form of={loginForm} onSubmit={(output, event) => console.log(output)}>
<Field of={loginForm} path={['email']}>
{(field) => (
<div>
<input {...field.props} value={field.input} type="email" />
{field.errors && <div>{field.errors[0]}</div>}
</div>
)}
</Field>
<Field of={loginForm} path={['password']}>
{(field) => (
<div>
<input {...field.props} value={field.input} type="password" />
{field.errors && <div>{field.errors[0]}</div>}
</div>
)}
</Field>
<button type="submit">Login</button>
</Form>
);
}
此外,Formisch还提供了几种功能(我们称之为"方法"),可用于读取和操纵形式状态. 其中包括: focus, (中文(简体) ), getDeepErrorEntries, (中文(简体) ), getDeepErrors, (中文(简体) ), getDirtyInput, (中文(简体) ), getDirtyPaths, (中文(简体) ), getErrors, (中文(简体) ), getInput, (中文(简体) ), handleSubmit, (中文(简体) ), insert, (中文(简体) ), isDirty, (中文(简体) ), isEdited, (中文(简体) ), isTouched, (中文(简体) ), isValid, (中文(简体) ), move, (中文(简体) ), pickDirty, (中文(简体) ), remove, (中文(简体) ), replace, (中文(简体) ), reset, (中文(简体) ), setErrors, (中文(简体) ), setInput, (中文(简体) ), submit, (中文(简体) ), swap 财务报告和审定财务报表 validate。这些方法允许您在程序上控制表格.
固态JS 2
支持SolidJS 2 发布候选人 @formisch/solid/v2 进入点。 这需要 solid-js 财务报告和审定财务报表 @solidjs/web v2 以及 SolidJS 2 Vite 插件 @solidjs/vite-plugin。API是相同的,只有导入路径会改变.
import { createForm, Field, Form } from '@formisch/solid/v2';
入境点船舶通过 solid 导出条件, SolidJS 2 Vite 插件会自动取出 。 所编译的倒计时只支持客户端渲染.
和SolidJS 2中通常一样,衍生出的形式和字段状态,例如: input, (中文(简体) ), isDirty 财务报告和审定财务报表 isValid 下个刷新。 读它的反应或呼叫 flush() 从 solid-js 在变化后同步读取.
比较
使得福米斯奇独有的是其框架-不可知性核心,它与你所使用的框架完全本土. 它通过在核心软件包构建时插入框架特定的反应块来工作,为任何UI更新赋予你本土性能. 模块化方法 API 仅通过包含您导入的方法来保持从 ~2.5 kB 开始的捆绑,端到端类型安全覆盖了深层嵌入路径和字段阵列,其TypeScript 推论即使在形式增长时也保持了快.
对于一个侧面看 如何比较Felte和TanStack Form,参见 比较指南。 。 。 .
愿景
我对Formisch的愿景是建立一个框架不可知的平台,类似于 维特但是对于形式来说——一个共享的核心,让同样的精神模型和代码基础在本土工作,跨越每一个现代UI框架.
合作伙伴
感谢我们的伙伴们支持发展! 加入他们 并促进开源软件的可持续性!
反馈
找到一个错误或有一个想法 如何改进库? 请填写一个 问题我们一起可以让表格变得更好!
许可证
这个项目是免费提供的,并获得许可证 麻省理工学院许可证。 。 。 .