@neutro/form 0.0.1 → 0.0.2
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 +22 -1
- 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
|
+
Framework-agnostic form state management. 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.2",
|
|
4
|
+
"description": "Framework-agnostic form state management for React, Vue, Svelte, SolidJS, and Angular",
|
|
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": {
|
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
|
-
});
|