Merge pull request #54 from x0k/deprecate-use-form

Deprecate use form

Author: x0k

.changeset/cool-snails-eat.md

@@ -0,0 +1,7 @@
+---
+"@sjsf/sveltekit": patch
+"playground": patch
+"docs": patch
+---
+
+Migrate to `createForm3`

.changeset/ten-experts-compete.md

@@ -0,0 +1,10 @@
+---
+"@sjsf/form": minor
+---
+
+Add `createForm3` function
+
+## Migration
+
+- Replace `useForm2` with `createForm3`.
+- If custom form is used it should call `setFormContext(form.context)` before using `FormContent` and `SubmitButton` components.

README.md

@@ -18,12 +18,12 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
 
 ```svelte
 <script lang="ts">
-  import { useForm2, SimpleForm, type Schema } from '@sjsf/form';
+  import { createForm3, SimpleForm, type Schema } from '@sjsf/form';
   import { translation } from '@sjsf/form/translations/en';
   import { theme } from '@sjsf/form/basic-theme';
-  import { createValidator } from "@sjsf/ajv8-validator";
+  import { createValidator2 } from "@sjsf/ajv8-validator";
 
-  const validator = createValidator();
+  const validator = createValidator2();
 
   const schema: Schema = {
     type: 'object',
@@ -40,7 +40,7 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
     required: ["name"]
   }
 
-  const form = useForm2({
+  const form = createForm3({
     ...theme,
     schema,
     validator,

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

@@ -1,31 +1,31 @@
 import type { ErrorObject } from "ajv";
-import { useForm2, type FormAPI, type UseFormOptions2 } from "@sjsf/form";
+import { type FormInternals, type FormState, type FormOptions, createForm3 } from "@sjsf/form";
 import { translation } from "@sjsf/form/translations/en";
 import { theme } from "@sjsf/form/basic-theme";
 import { createValidator2 } from "@sjsf/ajv8-validator";
 
 type Defaults = "widgets" | "components" | "validator" | "translation";
 
-export type CustomOptions<T, E> = Omit<UseFormOptions2<T, E>, Defaults> &
-  Partial<Pick<UseFormOptions2<T, E>, Defaults>>;
+export type CustomOptions<T, E> = Omit<FormOptions<T, E>, Defaults> &
+  Partial<Pick<FormOptions<T, E>, Defaults>>;
 
-export function useCustomForm<T, E = ErrorObject>(
+export function createCustomForm<T, E = ErrorObject>(
   options: CustomOptions<T, E>
-): FormAPI<T, E> {
+): FormState<T, E> & FormInternals {
   const validator = createValidator2();
-  const defaults: Pick<UseFormOptions2<T, ErrorObject>, Defaults> = {
+  const defaults: Pick<FormOptions<T, ErrorObject>, Defaults> = {
     ...theme,
     validator,
     translation,
   };
-  return useForm2(
+  return createForm3(
     new Proxy(options, {
       get(target, p, receiver) {
         if (!(p in target)) {
           return defaults[p as Defaults];
         }
         return Reflect.get(target, p, receiver);
       },
-    }) as UseFormOptions2<T, E>
+    }) as FormOptions<T, E>
   );
 }

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

@@ -1,13 +1,13 @@
 <script lang="ts">
-  import { useForm2, SimpleForm } from "@sjsf/form";
+  import { createForm3, SimpleForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/form/basic-theme";
 
   import { schema, uiSchema, initialValue } from "./_schema";
   import { validator } from "./_validator";
   import { onSubmit } from './_on-submit';
 
-  const form = useForm2({
+  const form = createForm3({
     ...theme,
     initialValue,
     schema,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SimpleForm, useForm2 } from "@sjsf/form";
+  import { SimpleForm, createForm3 } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/daisyui-theme";
 
@@ -11,7 +11,7 @@
 
   const astro = useAstro();
 
-  const form = useForm2({
+  const form = createForm3({
     ...theme,
     initialValue,
     schema,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SimpleForm, useForm2 } from "@sjsf/form";
+  import { SimpleForm, createForm3 } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/flowbite-theme";
 
@@ -11,7 +11,7 @@
 
   const astro = useAstro();
 
-  const form = useForm2({
+  const form = createForm3({
     ...theme,
     initialValue,
     schema,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SimpleForm, useForm2 } from "@sjsf/form";
+  import { SimpleForm, createForm3 } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme, setThemeContext } from "@sjsf/shadcn-theme";
   import { components } from "@sjsf/shadcn-theme/default";
@@ -12,7 +12,7 @@
 
   const astro = useAstro();
 
-  const form = useForm2({
+  const form = createForm3({
     ...theme,
     initialValue,
     schema,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { SimpleForm, useForm2 } from "@sjsf/form";
+  import { SimpleForm, createForm3 } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/skeleton-theme";
 
@@ -11,7 +11,7 @@
 
   const astro = useAstro();
 
-  const form = useForm2({
+  const form = createForm3({
     ...theme,
     initialValue,
     schema,

apps/docs/src/content/docs/advanced/_custom-form.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="T">
-  import { type Schema, type UiSchemaRoot, FormContent, SubmitButton } from '@sjsf/form'
+  import { type Schema, type UiSchemaRoot, FormContent, setFromContext, SubmitButton } from '@sjsf/form'
 
-  import { useCustomForm } from '@/components/custom-form'
+  import { createCustomForm } from '@/components/custom-form'
 
   interface Props {
     schema: Schema
@@ -12,12 +12,13 @@
 
   const { schema, uiSchema, initialValue, onSubmit }: Props = $props()
 
-  const form = useCustomForm({
+  const form = createCustomForm({
     schema,
     uiSchema,
     initialValue,
     onSubmit,
   })
+  setFromContext(form.context)
 </script>
 
 <form use:form.enhance style="display: flex; flex-direction: column; gap: 1rem">