Skip to content

Commit f24dcdd

Browse files
x0kx0k
committed
[docs] Migrate to useForm2 
1 parent 96f1f06 commit f24dcdd

File tree

22 files changed

+76
-52
lines changed

22 files changed

+76
-52
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
1818

1919
```svelte
2020
<script lang="ts">
21-
import { useForm, SimpleForm, type Schema } from '@sjsf/form';
21+
import { useForm2, SimpleForm, type Schema } from '@sjsf/form';
2222
import { translation } from '@sjsf/form/translations/en';
2323
import { theme } from '@sjsf/form/basic-theme';
2424
import { createValidator } from "@sjsf/ajv8-validator";
@@ -40,7 +40,7 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
4040
required: ["name"]
4141
}
4242
43-
const form = useForm({
43+
const form = useForm2({
4444
...theme,
4545
schema,
4646
validator,

‎apps/docs/src/components/custom-form.ts‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
11
import type { ErrorObject } from "ajv";
2-
import { useForm, type FormAPI, type UseFormOptions } from "@sjsf/form";
2+
import { useForm2, type FormAPI, type UseFormOptions2 } from "@sjsf/form";
33
import { translation } from "@sjsf/form/translations/en";
44
import { theme } from "@sjsf/form/basic-theme";
55
import { createValidator } from "@sjsf/ajv8-validator";
66

77
type Defaults = "widgets" | "components" | "validator" | "translation";
88

9-
export type CustomOptions<T, E> = Omit<UseFormOptions<T, E>, Defaults> &
10-
Partial<Pick<UseFormOptions<T, E>, Defaults>>;
9+
export type CustomOptions<T, E> = Omit<UseFormOptions2<T, E>, Defaults> &
10+
Partial<Pick<UseFormOptions2<T, E>, Defaults>>;
1111

12-
export function useCustomForm<T, E = ErrorObject>(options: CustomOptions<T, E>): FormAPI<T, E> {
12+
export function useCustomForm<T, E = ErrorObject>(
13+
options: CustomOptions<T, E>
14+
): FormAPI<T, E> {
1315
const validator = createValidator();
14-
return useForm(
15-
Object.setPrototypeOf(options, {
16-
...theme,
17-
validator,
18-
translation,
19-
})
16+
const defaults: Pick<UseFormOptions2<T, ErrorObject>, Defaults> = {
17+
...theme,
18+
validator,
19+
translation,
20+
};
21+
return useForm2(
22+
new Proxy(options, {
23+
get(target, p, receiver) {
24+
if (!(p in target)) {
25+
return defaults[p as Defaults];
26+
}
27+
return Reflect.get(target, p, receiver);
28+
},
29+
}) as UseFormOptions2<T, E>
2030
);
2131
}

‎apps/docs/src/content/docs/_with-basic.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script lang="ts">
2-
import { useForm, SimpleForm } from "@sjsf/form";
2+
import { useForm2, SimpleForm } from "@sjsf/form";
33
import { translation } from "@sjsf/form/translations/en";
44
import { theme } from "@sjsf/form/basic-theme";
55
66
import { schema, uiSchema, initialValue } from "./_schema";
77
import { validator } from "./_validator";
88
9-
const form = useForm({
9+
const form = useForm2({
1010
...theme,
1111
initialValue,
1212
schema,

‎apps/docs/src/content/docs/_with-daisyui.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { SimpleForm, useForm } from "@sjsf/form";
2+
import { SimpleForm, useForm2 } from "@sjsf/form";
33
import { translation } from "@sjsf/form/translations/en";
44
import { theme } from "@sjsf/daisyui-theme";
55
@@ -10,7 +10,7 @@
1010
1111
const astro = useAstro();
1212
13-
const form = useForm({
13+
const form = useForm2({
1414
...theme,
1515
initialValue,
1616
schema,

‎apps/docs/src/content/docs/_with-flowbite.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { SimpleForm, useForm } from "@sjsf/form";
2+
import { SimpleForm, useForm2 } from "@sjsf/form";
33
import { translation } from "@sjsf/form/translations/en";
44
import { theme } from "@sjsf/flowbite-theme";
55
@@ -10,7 +10,7 @@
1010
1111
const astro = useAstro();
1212
13-
const form = useForm({
13+
const form = useForm2({
1414
...theme,
1515
initialValue,
1616
schema,

‎apps/docs/src/content/docs/_with-shadcn.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { SimpleForm, useForm } from "@sjsf/form";
2+
import { SimpleForm, useForm2 } from "@sjsf/form";
33
import { translation } from "@sjsf/form/translations/en";
44
import { theme, setThemeContext } from "@sjsf/shadcn-theme";
55
import { components } from "@sjsf/shadcn-theme/default";
@@ -11,7 +11,7 @@
1111
1212
const astro = useAstro();
1313
14-
const form = useForm({
14+
const form = useForm2({
1515
...theme,
1616
initialValue,
1717
schema,

‎apps/docs/src/content/docs/_with-skeleton.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { SimpleForm, useForm } from "@sjsf/form";
2+
import { SimpleForm, useForm2 } from "@sjsf/form";
33
import { translation } from "@sjsf/form/translations/en";
44
import { theme } from "@sjsf/skeleton-theme";
55
@@ -10,7 +10,7 @@
1010
1111
const astro = useAstro();
1212
13-
const form = useForm({
13+
const form = useForm2({
1414
...theme,
1515
initialValue,
1616
schema,

‎apps/docs/src/content/docs/advanced/custom-form.mdx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,24 @@ import customFormComponentCode from './_custom-form.svelte?raw';
1212
## Hook
1313

1414
Even with a simple setup, resulting code is very verbose.
15-
Therefore, after choosing a theme, validator and translation, it is convenient to create a wrapper around the `useForm`.
15+
Therefore, after choosing a theme, validator and translation, it is convenient to create a wrapper around the `useForm2`.
1616

1717
<Code code={customFormCode} lang="typescript" title="custom-form.ts" />
1818

19+
:::note
20+
21+
Note that you can simplify the above code if certain restrictions are met:
22+
23+
- If you are sure that you will always call the `useForm2` hook with passing the object literal, you can use the following code instead of `Proxy`:
24+
25+
`Object.setPrototypeOf(options, defaults)`
26+
27+
- If you are sure you will not use getters as options, then use a spread operator instead of `Proxy`:
28+
29+
`{ ...defaults, ...options }`
30+
31+
:::
32+
1933
## Component
2034

2135
You also can create your own form component.

‎apps/docs/src/content/docs/advanced/state-transformation.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ It will be replaced with `@sjsf/form/omit-extra-data` import in the major releas
2626
```svelte
2727
<script lang="ts">
2828
import { defaultMerger } from '@sjsf/form/core'
29-
import { useForm } from "@sjsf/form";
29+
import { useForm2 } from "@sjsf/form";
3030
import { translation } from "@sjsf/form/translations/en";
3131
import { theme } from "@sjsf/form/basic-theme";
3232
import { omitExtraData2 } from "@sjsf/form/legacy-omit-extra-data";
@@ -35,7 +35,7 @@ It will be replaced with `@sjsf/form/omit-extra-data` import in the major releas
3535
import { validator } from "./validator";
3636
import { transform } from "./transform";
3737
38-
const form = useForm({
38+
const form = useForm2({
3939
...theme,
4040
initialValue,
4141
schema,

‎apps/docs/src/content/docs/guides/_live-validation.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { useForm, SimpleForm, type Schema } from "@sjsf/form";
2+
import { useForm2, SimpleForm, type Schema } from "@sjsf/form";
33
import { translation } from "@sjsf/form/translations/en";
44
import { theme } from "@sjsf/form/basic-theme";
55
import { createValidator } from "@sjsf/ajv8-validator";
@@ -11,7 +11,7 @@
1111
minLength: 10,
1212
};
1313
14-
const form = useForm({
14+
const form = useForm2({
1515
...theme,
1616
initialValue: "initial",
1717
schema,

0 commit comments

Comments
 (0)