String Array prop error maping issue

.gitignore

@@ -2,3 +2,4 @@ build
 .DS_Store
 node_modules
 .cache
+.idea

.prettierrc.js

@@ -6,4 +6,5 @@ module.exports = {
   tabWidth: 2,
   trailingComma: 'all',
   useTabs: false,
+  plugins: ["prettier-plugin-svelte"]
 };

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   env: {
     test: {
       presets: [['@babel/preset-env', {targets: {node: 'current'}}]],

commitlint.config.js

@@ -1 +1 @@
-module.exports = {extends: ['@commitlint/config-conventional']};
+export default {extends: ['@commitlint/config-conventional']};

jest.config.js

@@ -1,8 +1,8 @@
-const jestCommon = require('./test/config/jest.common');
-const lintProject = require('./test/config/jest.lint');
-const testProject = require('./test/config/jest.test');
+import jestCommon from './test/config/jest.common';
+import lintProject from './test/config/jest.lint';
+import testProject from './test/config/jest.test';
 
-module.exports = {
+export default {
   ...jestCommon,
 
   projects: [testProject, lintProject],

lib/components/ErrorMessage.svelte

@@ -2,11 +2,11 @@
   import {getContext} from 'svelte';
   import {key} from './key';
 
-  export let name;
+  let {name, ...restProps} = $props();
 
   const {errors} = getContext(key);
 </script>
 
 {#if $errors[name]}
-  <small {...$$props}>{$errors[name]}</small>
+  <small {...restProps}>{$errors[name]}</small>
 {/if}

lib/components/Field.svelte

@@ -2,8 +2,7 @@
   import {getContext} from 'svelte';
   import {key} from './key';
 
-  export let name;
-  export let type = 'text';
+  let {name, type, ...restProps} = $props();
 
   const {form, handleChange} = getContext(key);
 </script>
@@ -12,7 +11,7 @@
   {name}
   {type}
   value={$form[name]}
-  on:change={handleChange}
-  on:blur={handleChange}
-  {...$$props}
+  onchange={handleChange}
+  onblur={handleChange}
+  {...restProps}
 />

lib/components/Form.svelte

@@ -3,20 +3,24 @@
   import {createForm} from '../create-form';
   import {key} from './key';
 
-  export let initialValues = {};
-  export let validate = null;
-  export let validationSchema = null;
-  export let onSubmit = () => {
-    throw new Error(
-      'onSubmit is a required property in <Form /> when using the fallback context',
-    );
-  };
-  export let context = createForm({
-    initialValues,
-    onSubmit,
-    validate,
-    validationSchema,
-  });
+  let {
+    initialValues = {},
+    validate = null,
+    validationSchema = null,
+    onSubmit = () => {
+      throw new Error(
+        'onSubmit is a required property in <Form /> when using the fallback context',
+      );
+    },
+    context = createForm({
+      initialValues,
+      onSubmit,
+      validate,
+      validationSchema,
+    }),
+    children,
+    ...restProps
+  } = $props();
 
   const {
     form,
@@ -47,18 +51,18 @@
   });
 </script>
 
-<form on:submit={handleSubmit} {...$$restProps}>
-  <slot
-    {form}
-    {errors}
-    {touched}
-    {state}
-    {handleChange}
-    {handleSubmit}
-    {updateField}
-    {updateInitialValues}
-    {updateTouched}
-    {updateValidateField}
-    {validateField}
-  />
+<form onsubmit={handleSubmit} {...restProps}>
+  {@render children(
+    form,
+    errors,
+    touched,
+    state,
+    handleChange,
+    handleSubmit,
+    updateField,
+    updateInitialValues,
+    updateTouched,
+    updateValidateField,
+    validateField,
+  )}
 </form>

lib/components/Select.svelte

@@ -2,17 +2,17 @@
   import {getContext} from 'svelte';
   import {key} from './key';
 
-  export let name;
+  let {name, children, ...restProps} = $props();
 
   const {form, handleChange} = getContext(key);
 </script>
 
 <select
   {name}
   value={$form[name]}
-  on:change={handleChange}
-  on:blur={handleChange}
-  {...$$props}
+  onchange={handleChange}
+  onblur={handleChange}
+  {...restProps}
 >
-  <slot />
+  {@render children()}
 </select>

lib/components/Textarea.svelte

@@ -2,10 +2,10 @@
   import {getContext} from 'svelte';
   import {key} from './key';
 
-  export let name;
+  let {name, ...restProps} = $props();
 
   const {form, handleChange} = getContext(key);
 </script>
 
 <!-- prettier-ignore -->
-<textarea {name} on:change={handleChange} on:blur={handleChange} {...$$props}>{$form[name]}</textarea>
+<textarea {name} onchange={handleChange} onblur={handleChange} {...restProps}>{$form[name]}</textarea>

lib/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference lib="svelte2tsx" />
-import type {SvelteComponentTyped} from 'svelte';
+import type {SvelteComponent, } from 'svelte';
 import type {Readable, Writable} from 'svelte/store';
 import type {ObjectSchema} from 'yup';
 
@@ -65,33 +65,33 @@ declare function createForm<Inf = Record<string, any>>(formProperties: {
   validationSchema?: ObjectSchema<any>;
 }): FormState<Inf>;
 
-declare class Form extends SvelteComponentTyped<
+declare class Form extends SvelteComponent<
   FormProps,
   Record<string, unknown>,
   {
     default: FormState;
   }
 > {}
 
-declare class Field extends SvelteComponentTyped<
+declare class Field extends SvelteComponent<
   FieldProperties,
   Record<string, unknown>,
   Record<string, unknown>
 > {}
 
-declare class Textarea extends SvelteComponentTyped<
+declare class Textarea extends SvelteComponent<
   TextareaProperties,
   Record<string, unknown>,
   Record<string, unknown>
 > {}
 
-declare class Select extends SvelteComponentTyped<
+declare class Select extends SvelteComponent<
   SelectProperties,
   Record<string, unknown>,
   {default: any}
 > {}
 
-declare class ErrorMessage extends SvelteComponentTyped<
+declare class ErrorMessage extends SvelteComponent<
   ErrorProperties,
   Record<string, unknown>,
   {default: any}

lib/util.js

@@ -84,7 +84,9 @@ function assignDeep(object, value) {
   const copy = {};
   for (const key in object) {
     copy[key] =
-      typeof object[key] === 'object' && !isNullish(object[key]) ? assignDeep(object[key], value) : value;
+      typeof object[key] === 'object' && !isNullish(object[key])
+        ? assignDeep(object[key], value)
+        : value;
   }
   return copy;
 }
@@ -105,13 +107,22 @@ function set(object, path, value) {
         new Object(accumulator[key]) === accumulator[key]
           ? accumulator[key]
           : (accumulator[key] =
-              Math.trunc(Math.abs(path[index + 1])) === +path[index + 1]
-                ? []
-                : {}),
+            Math.trunc(Math.abs(path[index + 1])) === +path[index + 1]
+              ? []
+              : {}),
       object,
     );
 
-  result[path[path.length - 1]] = value;
+  // member like [""], may result in "path[path.length - 1]" as '"0"' expected as '0'
+  // this casuse issue in error maping
+  // following is the solution to avoid it
+  const p = path[path.length - 1];
+  const n = Number(p.replace(/"/g, ''));
+  if (Number.isNaN(n)) {
+    result[p] = value;
+  } else {
+    result[n] = value;
+  }
 
   return object;
 }