@neutro/form 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +95 -0
- package/package.json +23 -2
- package/src/adapters/angular.ts +0 -1
- package/src/adapters/react.ts +0 -1
- package/src/adapters/solid.ts +0 -1
- package/src/adapters/svelte.ts +0 -1
- package/src/adapters/vue.ts +0 -1
- package/src/core.ts +0 -1
- package/tsup.config.ts +0 -26
package/README.md
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
# @neutro/form
|
|
2
|
+
|
|
3
|
+
High-performance, zero-dependency, framework-agnostic reactive form engine. One closure factory — `createForm` — that handles validation, async checks, array operations, and DOM binding. Thin reactive adapters for React, Vue, Svelte, SolidJS, and Angular wrap the same engine.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @neutro/form
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Vanilla / framework-agnostic
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { createForm } from '@neutro/form/core'
|
|
17
|
+
|
|
18
|
+
const form = createForm({
|
|
19
|
+
initialValues: { email: '', password: '' },
|
|
20
|
+
rules: {
|
|
21
|
+
email: ['required', 'email'],
|
|
22
|
+
password: ['required', { minLength: 8 }],
|
|
23
|
+
},
|
|
24
|
+
})
|
|
25
|
+
|
|
26
|
+
form.set('email', 'user@example.com', { touch: true, validate: true })
|
|
27
|
+
const isValid = await form.validate()
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### React
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { createForm } from '@neutro/form/core'
|
|
34
|
+
import { useForm, useFormPath } from '@neutro/form/adapters/react'
|
|
35
|
+
|
|
36
|
+
const form = createForm({ initialValues: { name: '' } })
|
|
37
|
+
|
|
38
|
+
function NameField() {
|
|
39
|
+
const name = useFormPath(form, 'name')
|
|
40
|
+
const { errors, touched } = useForm(form)
|
|
41
|
+
return (
|
|
42
|
+
<input
|
|
43
|
+
value={name}
|
|
44
|
+
onChange={e => form.set('name', e.target.value, { touch: true, validate: true })}
|
|
45
|
+
/>
|
|
46
|
+
)
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Vue
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import { createForm } from '@neutro/form/core'
|
|
54
|
+
import { useVueForm } from '@neutro/form/adapters/vue'
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Svelte
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
import { createForm } from '@neutro/form/core'
|
|
61
|
+
import { useSvelteForm } from '@neutro/form/adapters/svelte'
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### SolidJS
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
import { createForm } from '@neutro/form/core'
|
|
68
|
+
import { useSolidForm } from '@neutro/form/adapters/solid'
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Angular
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
import { createForm } from '@neutro/form/core'
|
|
75
|
+
import { useAngularForm } from '@neutro/form/adapters/angular'
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Import paths
|
|
79
|
+
|
|
80
|
+
| Path | Exports |
|
|
81
|
+
|---|---|
|
|
82
|
+
| `@neutro/form/core` | `createForm`, validation adapters, types |
|
|
83
|
+
| `@neutro/form/adapters/react` | `useForm`, `useFormPath`, `useFormConnect` |
|
|
84
|
+
| `@neutro/form/adapters/vue` | `useVueForm`, `useVueFormPath` |
|
|
85
|
+
| `@neutro/form/adapters/svelte` | `useSvelteForm`, `useSvelteFormPath` |
|
|
86
|
+
| `@neutro/form/adapters/solid` | `useSolidForm`, `useSolidFormPath` |
|
|
87
|
+
| `@neutro/form/adapters/angular` | `useAngularForm`, `useAngularFormPath` |
|
|
88
|
+
|
|
89
|
+
## Docs
|
|
90
|
+
|
|
91
|
+
Full documentation, API reference, and live playground at **https://neutro-web.github.io/form/**.
|
|
92
|
+
|
|
93
|
+
## License
|
|
94
|
+
|
|
95
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neutro/form",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
|
+
"description": "High-performance, zero-dependency, framework-agnostic reactive form engine.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"form",
|
|
7
|
+
"validation",
|
|
8
|
+
"react",
|
|
9
|
+
"vue",
|
|
10
|
+
"svelte",
|
|
11
|
+
"solid",
|
|
12
|
+
"angular",
|
|
13
|
+
"framework-agnostic"
|
|
14
|
+
],
|
|
15
|
+
"license": "MIT",
|
|
16
|
+
"homepage": "https://neutro-web.github.io/form/",
|
|
17
|
+
"repository": {
|
|
18
|
+
"type": "git",
|
|
19
|
+
"url": "https://github.com/neutro-web/form.git"
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist",
|
|
23
|
+
"README.md"
|
|
24
|
+
],
|
|
4
25
|
"type": "module",
|
|
5
26
|
"exports": {
|
|
6
27
|
"./core": {
|
|
@@ -65,10 +86,10 @@
|
|
|
65
86
|
"devDependencies": {
|
|
66
87
|
"tsup": "^8.0.0",
|
|
67
88
|
"@neutro/form-core": "0.0.1",
|
|
68
|
-
"@neutro/form-react": "0.0.1",
|
|
69
89
|
"@neutro/form-svelte": "0.0.1",
|
|
70
90
|
"@neutro/form-vue": "0.0.1",
|
|
71
91
|
"@neutro/form-angular": "0.0.1",
|
|
92
|
+
"@neutro/form-react": "0.0.1",
|
|
72
93
|
"@neutro/form-solid": "0.0.1"
|
|
73
94
|
},
|
|
74
95
|
"scripts": {
|
package/src/adapters/angular.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '@neutro/form-angular';
|
package/src/adapters/react.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '@neutro/form-react';
|
package/src/adapters/solid.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '@neutro/form-solid';
|
package/src/adapters/svelte.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '@neutro/form-svelte';
|
package/src/adapters/vue.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '@neutro/form-vue';
|
package/src/core.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from '@neutro/form-core';
|
package/tsup.config.ts
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { defineConfig } from 'tsup';
|
|
2
|
-
|
|
3
|
-
export default defineConfig({
|
|
4
|
-
entry: {
|
|
5
|
-
core: 'src/core.ts',
|
|
6
|
-
'adapters/react': 'src/adapters/react.ts',
|
|
7
|
-
'adapters/svelte': 'src/adapters/svelte.ts',
|
|
8
|
-
'adapters/vue': 'src/adapters/vue.ts',
|
|
9
|
-
'adapters/solid': 'src/adapters/solid.ts',
|
|
10
|
-
'adapters/angular': 'src/adapters/angular.ts',
|
|
11
|
-
},
|
|
12
|
-
format: ['esm', 'cjs'],
|
|
13
|
-
dts: true,
|
|
14
|
-
clean: true,
|
|
15
|
-
external: [
|
|
16
|
-
'react',
|
|
17
|
-
'react-dom',
|
|
18
|
-
'svelte',
|
|
19
|
-
'svelte/store',
|
|
20
|
-
'svelte/internal',
|
|
21
|
-
'vue',
|
|
22
|
-
'solid-js',
|
|
23
|
-
'solid-js/store',
|
|
24
|
-
'@angular/core',
|
|
25
|
-
],
|
|
26
|
-
});
|