Merge pull request #28 from x0k/schema-analysis

SvelteKit integration

.changeset/config.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": [
-    "@changesets/changelog-github",
+    "@svitejs/changesets-changelog-github-compact",
     {
       "repo": "x0k/svelte-jsonschema-form"
     }

.changeset/empty-ants-push.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Add `parent` property to the `SchemaTraverserContext`

.changeset/metal-stingrays-cough.md

@@ -0,0 +1,5 @@
+---
+"playground": minor
+---
+
+Add entries dumper

.changeset/old-llamas-cry.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Add additional property key validator

.changeset/plenty-bees-mate.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/ajv8-validator": patch
+---
+
+Improve error path inference for `propertyNames` error

.changeset/soft-rivers-hide.md

@@ -0,0 +1,5 @@
+---
+"docs": minor
+---
+
+Add multiple forms guide

.changeset/tricky-crews-behave.md

@@ -0,0 +1,5 @@
+---
+"docs": minor
+---
+
+Add SvelteKit integration page

.github/workflows/deploy-pages.yaml

@@ -13,7 +13,7 @@ permissions:
 
 jobs:
   deploy:
-    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.merged == true && github.actor == 'github-actions[bot]')
+    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.merged == true && github.event.pull_request.user.login == 'github-actions[bot]')
     runs-on: ubuntu-latest
     environment:
       name: github-pages

.vscode/launch.json

@@ -7,9 +7,41 @@
       "request": "launch",
       "name": "Debug Form Test File",
       "autoAttachChildProcesses": true,
-      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "skipFiles": [
+        "<node_internals>/**",
+        "**/node_modules/**"
+      ],
       "program": "${workspaceRoot}/packages/form/node_modules/vitest/vitest.mjs",
-      "args": ["run", "${relativeFile}", "-r", "${workspaceRoot}/packages/form/"],
+      "args": [
+        "run",
+        "${relativeFile}",
+        "-r",
+        "${workspaceRoot}/packages/form/"
+      ],
+      "smartStep": true,
+      "console": "integratedTerminal"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Form SvelteKit Integration Test File",
+      "autoAttachChildProcesses": true,
+      "skipFiles": [
+        "<node_internals>/**",
+        "**/node_modules/**"
+      ],
+      "program": "${workspaceRoot}/packages/sveltekit-integration/node_modules/vitest/vitest.mjs",
+      "args": [
+        "run",
+        "../../${relativeFile}",
+        "-r",
+        "${workspaceRoot}/packages/sveltekit-integration/"
+      ],
+      "env": {
+        "NODE_ENV": "development",
+        "VITE_TEST": "true"
+      },
+      "cwd": "${workspaceRoot}/packages/sveltekit-integration",
       "smartStep": true,
       "console": "integratedTerminal"
     }

README.md

@@ -18,7 +18,7 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
 
 ```svelte
 <script lang="ts">
-  import { useForm, SimpleForm, type Schema } from '@sjsf/form';
+  import { useForm2, 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";
@@ -40,7 +40,7 @@ npm install @sjsf/form @sjsf/ajv8-validator ajv@8
     required: ["name"]
   }
 
-  const form = useForm({
+  const form = useForm2({
     ...theme,
     schema,
     validator,

apps/docs/package.json

@@ -16,6 +16,7 @@
     "@sjsf/form": "workspace:*",
     "@sjsf/shadcn-theme": "workspace:*",
     "@sjsf/skeleton-theme": "workspace:*",
+    "@sjsf/sveltekit": "workspace:*",
     "@sjsf/zod-integration": "workspace:*",
     "ajv": "catalog:",
     "mermaid": "^11.4.0",
@@ -25,9 +26,9 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/starlight": "^0.28.6",
-    "@astrojs/svelte": "^5.7.3",
-    "astro": "^4.16.10",
+    "@astrojs/starlight": "^0.29.0",
+    "@astrojs/svelte": "^6.0.1",
+    "astro": "^4.16.13",
     "astro-vtbot": "^1.10.6",
     "sharp": "^0.33.5",
     "starlight-package-managers": "^0.8.0",

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

@@ -1,21 +1,31 @@
 import type { ErrorObject } from "ajv";
-import { useForm, type FormAPI, type UseFormOptions } from "@sjsf/form";
+import { useForm2, type FormAPI, type UseFormOptions2 } from "@sjsf/form";
 import { translation } from "@sjsf/form/translations/en";
 import { theme } from "@sjsf/form/basic-theme";
 import { createValidator } from "@sjsf/ajv8-validator";
 
 type Defaults = "widgets" | "components" | "validator" | "translation";
 
-export type CustomOptions<T, E> = Omit<UseFormOptions<T, E>, Defaults> &
-  Partial<Pick<UseFormOptions<T, E>, Defaults>>;
+export type CustomOptions<T, E> = Omit<UseFormOptions2<T, E>, Defaults> &
+  Partial<Pick<UseFormOptions2<T, E>, Defaults>>;
 
-export function useCustomForm<T, E = ErrorObject>(options: CustomOptions<T, E>): FormAPI<T, E> {
+export function useCustomForm<T, E = ErrorObject>(
+  options: CustomOptions<T, E>
+): FormAPI<T, E> {
   const validator = createValidator();
-  return useForm(
-    Object.setPrototypeOf(options, {
-      ...theme,
-      validator,
-      translation,
-    })
+  const defaults: Pick<UseFormOptions2<T, ErrorObject>, Defaults> = {
+    ...theme,
+    validator,
+    translation,
+  };
+  return useForm2(
+    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>
   );
 }

apps/docs/src/content/docs/_validator.ts

@@ -5,7 +5,14 @@ import {
   DEFAULT_AJV_CONFIG,
 } from "@sjsf/ajv8-validator";
 import { isSchemaObjectValue } from "@sjsf/form/core";
-import type { Schema, SchemaValue, ValidationError } from "@sjsf/form";
+import {
+  DEFAULT_ID_PREFIX,
+  DEFAULT_ID_SEPARATOR,
+  pathToId,
+  type Schema,
+  type SchemaValue,
+  type ValidationError,
+} from "@sjsf/form";
 
 class StarValidator extends AjvValidator {
   validateFormData(
@@ -15,7 +22,9 @@ class StarValidator extends AjvValidator {
     const errors = super.validateFormData(schema, formData);
     return isSchemaObjectValue(formData) && !formData["star"]
       ? errors.concat({
-          instanceId: "root_star",
+          instanceId: pathToId(DEFAULT_ID_PREFIX, DEFAULT_ID_SEPARATOR, [
+            "star",
+          ]),
           propertyTitle: "Star",
           message: "I will try my best!",
           error: {} as ErrorObject,

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

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { useForm, SimpleForm } from "@sjsf/form";
+  import { useForm2, 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";
 
-  const form = useForm({
+  const form = useForm2({
     ...theme,
     initialValue,
     schema,

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

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

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

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

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

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

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

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

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

@@ -12,10 +12,24 @@ import customFormComponentCode from './_custom-form.svelte?raw';
 ## Hook
 
 Even with a simple setup, resulting code is very verbose.
-Therefore, after choosing a theme, validator and translation, it is convenient to create a wrapper around the `useForm`.
+Therefore, after choosing a theme, validator and translation, it is convenient to create a wrapper around the `useForm2`.
 
 <Code code={customFormCode} lang="typescript" title="custom-form.ts" />
 
+:::note
+
+Note that you can simplify the above code if certain restrictions are met:
+
+- 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`:
+
+`Object.setPrototypeOf(options, defaults)`
+
+- If you are sure you will not use getters as options, then use `Object.assign` instead of `Proxy`:
+
+`Object.assign(defaults, options)`
+
+:::
+
 ## Component
 
 You also can create your own form component.

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

@@ -26,7 +26,7 @@ It will be replaced with `@sjsf/form/omit-extra-data` import in the major releas
 ```svelte
 <script lang="ts">
   import { defaultMerger } from '@sjsf/form/core'
-  import { useForm } from "@sjsf/form";
+  import { useForm2 } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/form/basic-theme";
   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
   import { validator } from "./validator";
   import { transform } from "./transform";
   
-  const form = useForm({
+  const form = useForm2({
     ...theme,
     initialValue,
     schema,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { useForm, SimpleForm, type Schema } from "@sjsf/form";
+  import { useForm2, 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";
@@ -11,7 +11,7 @@
     minLength: 10,
   };
 
-  const form = useForm({
+  const form = useForm2({
     ...theme,
     initialValue: "initial",
     schema,

apps/docs/src/content/docs/guides/_minimal-setup.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { type Schema, useForm, SimpleForm } from "@sjsf/form";
+  import { type Schema, useForm2, SimpleForm } from "@sjsf/form";
   import { translation } from "@sjsf/form/translations/en";
   import { theme } from "@sjsf/form/basic-theme";
   import { createValidator } from "@sjsf/ajv8-validator";
@@ -11,7 +11,7 @@
     title: "Simple text input",
   };
 
-  const form = useForm({
+  const form = useForm2({
     ...theme,
     schema,
     validator,

apps/docs/src/content/docs/guides/_multiple-forms-form.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" generics="T, E">
+  import type { HTMLFormAttributes } from "svelte/elements";
+  import { FormContent, setFromContext, SubmitButton, type FormAPI, type FormContext } from '@sjsf/form';
+
+  interface Props extends HTMLFormAttributes {
+    form: FormAPI<T, E>;
+    ctx: FormContext;
+  }
+
+  const { form, ctx, ...rest }: Props = $props();
+
+  setFromContext(ctx)
+</script>
+
+<form use:form.enhance {...rest}>
+  <!-- svelte-ignore ownership_invalid_binding -->
+  <FormContent bind:value={form.formValue} />
+  <SubmitButton />
+</form>

apps/docs/src/content/docs/guides/_multiple-forms.astro

@@ -0,0 +1,9 @@
+---
+import { ShadowHost } from '@/components/shadow';
+
+import Form from './_multiple-forms.svelte'
+---
+
+<ShadowHost client:only="svelte">
+  <Form client:only="svelte" />
+</ShadowHost>