@michalzard/svelte-forms 1.0.0

package/index.ts

@@ -0,0 +1,93 @@
+import { writable, get, type Writable } from "svelte/store";
+import {
+  InferOutput,
+  safeParse,
+  type BaseSchema,
+  type BaseIssue,
+} from "valibot";
+type SubmitFn<T> = (values: T) => void | Promise<void>;
+
+type UseFormParams<S extends BaseSchema<unknown, unknown, BaseIssue<unknown>>> =
+  {
+    initialValues: InferOutput<S>;
+    schema: S;
+    onSubmit: SubmitFn<InferOutput<S>>;
+    debounceInterval?: number;
+  };
+
+export function useForm<
+  S extends BaseSchema<unknown, Record<string, any>, BaseIssue<unknown>>,
+>(params: UseFormParams<S>) {
+  type T = InferOutput<S>;
+  const { initialValues, schema, onSubmit, debounceInterval = 50 } = params;
+  const values: Writable<T> = writable({ ...initialValues });
+  // only contains fields that currenlty have errors
+  const errors: Writable<Partial<Record<keyof T, string>>> = writable({});
+  const touched: Writable<Record<keyof T, boolean>> = writable(
+    Object.keys(initialValues).reduce((acc, key) => {
+      acc[key as keyof T] = false;
+      return acc;
+    }, {} as Record<keyof T, boolean>),
+  );
+
+  function markTouched(field: keyof T) {
+    touched.update((t) => ({ ...t, [field]: true }));
+  }
+
+  function mapIssues(
+    issues: BaseIssue<any>[],
+  ): Partial<Record<keyof T, string>> {
+    const newErrors: Partial<Record<keyof T, string>> = {};
+    for (const issue of issues ?? []) {
+      const field = issue.path?.[0]?.key as keyof T;
+      if (field) newErrors[field] = issue.message;
+    }
+
+    return newErrors;
+  }
+  // Validation with debounce
+  let validationTimer: ReturnType<typeof setTimeout> | null = null;
+  values.subscribe(($values) => {
+    if (validationTimer) clearTimeout(validationTimer);
+
+    validationTimer = setTimeout(() => {
+      const result = safeParse(schema, $values);
+      errors.set(result.success ? {} : mapIssues(result.issues));
+    }, debounceInterval);
+  });
+
+  async function handleSubmit(event: SubmitEvent) {
+    event.preventDefault();
+    const currentValues = get(values);
+    errors.set({});
+    const result = safeParse(schema, currentValues);
+
+    if (!result.success) {
+      errors.set(mapIssues(result.issues));
+      // mark all invalid fields as touched
+      touched.update((t) => {
+        for (const issue of result.issues ?? []) {
+          const field = issue.path?.[0]?.key as keyof T;
+          if (field) t[field] = true;
+        }
+        return t;
+      });
+      return;
+    }
+
+    await onSubmit(currentValues);
+  }
+
+  function resetForm() {
+    values.set({ ...initialValues });
+    errors.set({});
+    touched.set(
+      Object.keys(initialValues).reduce((acc, key) => {
+        acc[key as keyof T] = false;
+        return acc;
+      }, {} as Record<keyof T, boolean>),
+    );
+  }
+
+  return { values, errors, touched, markTouched, handleSubmit, resetForm };
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@michalzard/svelte-forms",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "type": "module",
+  "scripts": {
+    "build": "bun build index.ts --format cjs --outdir dist/cjs && bun build index.ts --format esm --outdir dist/esm && mv dist/cjs/index.js dist/index.js && mv dist/esm/index.js dist/index.mjs",
+    "release": "bun run build && changeset publish"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.8",
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "svelte": "^5.53.6",
+    "valibot": "^1.2.0"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noPropertyAccessFromIndexSignature": true
+  }
+}