update readme and vitest

Author: iatrophobic

README.md

@@ -5,7 +5,7 @@ Svelte-Command-Form allows you to have easy to use forms with commands instead o
 ## Features
 
 - **Schema-agnostic validation** – Works with any library that implements the Standard Schema v1 interface (Zod, Valibot, TypeBox, custom validators, …).
-- **Command-first workflow** – Wire forms directly to your remote command (e.g. [`command` from `$app/server`](https://kit.svelte.dev/docs/load#command-functions)), and let the helper manage submission, success, and error hooks.
+- **Command-first workflow** – Wire forms directly to your remote command ([`command` from `$app/server`](https://kit.svelte.dev/docs/load#command-functions)), and let the helper manage submission, success, and error hooks.
 - **Typed form state** – `form`, `errors`, and `issues` are all strongly typed from your schema, so your component code stays in sync with validation rules.
 - **Friendly + raw errors** – Surface user-friendly `errors` for rendering, while also exposing the untouched validator `issues` array for logging/analytics.
 - **Helpers for remote inputs** – Includes `normalizeFiles` for bundling file uploads and `standardValidate` for reusing schema validation outside the form class.
@@ -182,7 +182,7 @@ Both the Zod and Valibot schemas above can be adapted to accept either `File[]`
 
 ## Initial values and schema defaults
 
-Standard Schema v1 intentionally does **not** provide a cross-library location for default values. A Zod or Valibot schema may specify defaults internally, but those defaults are not discoverable through the shared `~standard` interface. Because of that, `CommandForm` cannot pull defaults from your schema automatically. Instead, pass defaults via `options.initial`:
+Standard Schema v1 does **not** provide a cross-library location for default values. A Zod or Valibot schema may specify defaults internally, but those defaults are not discoverable through the shared `~standard` interface. If there is an easy way to do this feel free to submit a PR. Because of that, `CommandForm` cannot pull defaults from your schema automatically. Instead, pass defaults via `options.initial`:
 
 ```ts
 const form = new CommandForm(userSchema, {
@@ -201,21 +201,38 @@ When validation fails, `CommandForm`:
 2. Converts issues into `errors` (per field) via `transformIssues`.
 3. Stores the raw issue array in `issues` for programmatic access.
 
-If the command throws an `HttpError` from SvelteKit, the helper looks for `err.body.issues` and merges them into the same structures. Any other error is forwarded to `onError` after clearing submission state.
+If the command throws an `HttpError` from SvelteKit, the helper looks for `err.body.issues` and merges them into the same structures. Any other error is forwarded to `onError` after clearing submission state. You can handle validation errors to populate this in your `hooks.server.ts`
 
-## Development
+## Manual Errors
 
-- `pnpm dev` – Play with the demo app in `src/routes`.
-- `pnpm check` – Run `svelte-check` for type and accessibility diagnostics.
-- `pnpm test` – Execute the Vitest suite (if present).
-- `pnpm prepack` – Builds the library with `svelte-package` + `publint` (also run as part of `pnpm build`).
+You can add errors manually by using the `addErrors` method on the client or by throwing a `new SchemaValidationError` inside of the remote function.
 
-## Publishing
+```typescript
+// server add error
+const someFunc = command(schema, async (data) => {
+	const user = await db.find({where: email: data.email})
+	if(!user) throw new SchemaValidationError([{ message: "User does with this email does not exist!", path: ['email'] }])
+})
+```
+
+```html
+<!-- +page.svelte -->
+<script lang="ts">
+	const form = new CommandForm(schema, {
+		command: someCommand
+	});
+
+	function addError() {
+		form.addError({ path: 'name', message: 'Test Error' });
+	}
+</script>
+
+<button onclick="{addError}">Add an Error</button>
+```
+
+## Contributing
 
-1. Confirm `package.json` metadata (name, version, description, license, repository, etc.).
-2. Run `pnpm build` to emit `dist/`.
-3. Inspect the output (`npm pack --dry-run`) if desired.
-4. Publish: `npm publish` (or `pnpm publish`).
+Feel free to contribute by opening a PR with a detailed description of why you are wanting to change what you are changing. If it can be tested with Vitest, that is preferred.
 
 ## License
 

package.json

@@ -12,8 +12,7 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
+		"test": "vitest"
 	},
 	"homepage": "https://github.com/akcodeworks/svelte-command-form#readme",
 	"bugs": {
@@ -28,7 +27,8 @@
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
+		"!dist/**/*.spec.*",
+		"!dist/**/tests/**"
 	],
 	"sideEffects": [
 		"**/*.css"
@@ -43,8 +43,8 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0",
-		"@sveltejs/kit": "^2.47.1"
+		"@sveltejs/kit": "^2.47.1",
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.4.0",
@@ -59,7 +59,6 @@
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.12.4",
 		"globals": "^16.4.0",
-		"playwright": "^1.56.1",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
 		"publint": "^0.3.14",

pnpm-lock.yaml

@@ -0,0 +1,76 @@
+import { CommandForm, SchemaValidationError } from '$lib/index.ts';
+import { describe, it, expect } from 'vitest';
+import { testRemoteCommand } from './test.remote.ts';
+import { testSchema } from './test.schema.ts';
+// there is no way to actually test the other parts of remote functions currently without a hacky mockup...for now just test client side parts
+// https://github.com/sveltejs/kit/issues/14796
+
+describe('initial values', async () => {
+	it('test client side transforms', async () => {
+		let someNum = $state(1)
+		const f = new CommandForm(testSchema, {
+			command: testRemoteCommand,
+			onSubmit: async () => {
+				throw new SchemaValidationError([{ message: "Test Error", path: ['name'] }])
+			}
+		})
+
+		expect(f.errors).toStrictEqual({})
+
+		f.set({ name: "Vitest" })
+
+		expect(f.form.name).toBe("Vitest")
+
+		f.set({ name: "TestVitest", age: 5 })
+
+		expect(f.form).toStrictEqual({ name: "TestVitest", age: 5 })
+
+		f.set({ age: 10 }, true)
+
+		expect(f.form).toStrictEqual({ age: 10 })
+
+		f.form.name = "DirectSet"
+
+		expect(f.form).toStrictEqual({ name: "DirectSet", age: 10 })
+
+		f.addError({ path: 'name', message: "Test Error" })
+
+		expect(f.errors).toStrictEqual({ name: { message: "Test Error" } })
+
+		// test initial values without a getter func so reset should go back to inital value not the derived updated value
+		const ff = new CommandForm(testSchema, {
+			command: testRemoteCommand,
+			initial: { name: "Initial Name", age: someNum + 1 }
+		})
+
+		expect(ff.form).toStrictEqual({ name: "Initial Name", age: 2 })
+
+		someNum = 2
+
+
+		expect(ff.form).toStrictEqual({ name: "Initial Name", age: 2 })
+
+		ff.reset()
+
+		expect(ff.form).toStrictEqual({ name: "Initial Name", age: 2 })
+
+		someNum = 1
+
+		// do same test but with a getter function to see if it reacts
+
+		const fff = new CommandForm(testSchema, {
+			command: testRemoteCommand,
+			initial: () => ({ name: "Initial Name", age: someNum + 1 })
+		})
+
+		expect(fff.form).toStrictEqual({ name: "Initial Name", age: 2 })
+
+		someNum++
+
+		expect(fff.form).toStrictEqual({ name: "Initial Name", age: 2 })
+
+		fff.reset()
+
+		expect(fff.form).toStrictEqual({ name: "Initial Name", age: 3 })
+	});
+});

src/demo.spec.ts

@@ -0,0 +1,8 @@
+import { command } from "$app/server";
+import { testSchema } from "./test.schema.ts";
+
+const testRemoteCommand = command(testSchema, async (data) => {
+  return data
+})
+
+export { testRemoteCommand };

src/lib/tests/cf.svelte.spec.ts

@@ -0,0 +1,8 @@
+import z from "zod";
+
+const testSchema = z.object({
+  name: z.string().min(2, "Name is required"),
+  age: z.number().min(0)
+})
+
+export { testSchema };

src/lib/tests/test.remote.ts

@@ -1,34 +1,6 @@
 import { defineConfig } from 'vitest/config';
-import { playwright } from '@vitest/browser-playwright';
 import { sveltekit } from '@sveltejs/kit/vite';
 
 export default defineConfig({
-	plugins: [sveltekit()],
-	test: {
-		expect: { requireAssertions: true },
-		projects: [
-			{
-				extends: './vite.config.ts',
-				test: {
-					name: 'client',
-					browser: {
-						enabled: true,
-						provider: playwright(),
-						instances: [{ browser: 'chromium', headless: true }]
-					},
-					include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
-					exclude: ['src/lib/server/**']
-				}
-			},
-			{
-				extends: './vite.config.ts',
-				test: {
-					name: 'server',
-					environment: 'node',
-					include: ['src/**/*.{test,spec}.{js,ts}'],
-					exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
-				}
-			}
-		]
-	}
+	plugins: [sveltekit()]
 });