Random id for default object forms.

Author: ciscoheat

CHANGELOG.md

@@ -9,13 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- "SPA action mode", the `SPA` option can now take a string, corresponding to a form action, and it will post there, without the need for a html form on the page.
+- "SPA action mode", the `SPA` option can now take a string, corresponding to a form action, and it will post there, even without a html form on the page.
 
 ### Fixed
 
 - Fixed types for constraints, tainted and errors when using intersections and unions in schemas.
 - Fixed SuperDebug collapsed height by preventing global css leak.
 - Redirect in SPA mode cancelled normal redirects, preventing applyAction.
+- Default objects sent to `superForm` returned a form with an empty id, causing collisions, it is now a random string.
 
 ## [2.8.1] - 2024-03-07
 

src/lib/client/superForm.ts

@@ -39,6 +39,7 @@ import type {
 } from '$lib/adapters/adapters.js';
 import type { InputConstraints } from '$lib/jsonSchema/constraints.js';
 import { fieldProxy, type ProxyOptions } from './proxies.js';
+import { shapeFromObject } from '$lib/jsonSchema/schemaShape.js';
 
 export type SuperFormEvents<T extends Record<string, unknown>, M> = Pick<
 	FormOptions<T, M>,
@@ -395,9 +396,9 @@ try {
 
 /**
  * Initializes a SvelteKit form, for convenient handling of values, errors and sumbitting data.
- * @param {SuperValidated} form Usually data.form from PageData.
- * @param {FormOptions} options Configuration for the form.
- * @returns {SuperForm} An object with properties for the form.
+ * @param {SuperValidated} form Usually data.form from PageData or defaults, but can also be an object with default values, but then constraints won't be available.
+ * @param {FormOptions} formOptions Configuration for the form.
+ * @returns {SuperForm} A SuperForm object that can be used in a Svelte component.
  * @DCI-context
  */
 export function superForm<
@@ -423,7 +424,6 @@ export function superForm<
 		}
 
 		if (typeof options.SPA === 'string') {
-			if (options.validators === undefined) options.validators = false;
 			if (options.invalidateAll === undefined) options.invalidateAll = false;
 			if (options.applyAction === undefined) options.applyAction = false;
 		}
@@ -435,7 +435,7 @@ export function superForm<
 			...options
 		};
 
-		if (options.SPA && options.validators === undefined) {
+		if (options.SPA === true && options.validators === undefined) {
 			console.warn(
 				'No validators set for superForm in SPA mode. ' +
 					'Add a validation adapter to the validators option, or set it to false to disable this warning.'
@@ -452,11 +452,12 @@ export function superForm<
 
 		if (Context_isValidationObject(form) === false) {
 			form = {
-				id: options.id ?? '',
+				id: options.id ?? Math.random().toString(36).slice(2, 10),
 				valid: false,
 				posted: false,
 				errors: {},
-				data: form as T
+				data: form as T,
+				shape: shapeFromObject(form)
 			} satisfies SuperValidated<T, M, In>;
 		}
 
@@ -489,13 +490,6 @@ export function superForm<
 		}
 		initialForm = initialForms.get(form) as SuperValidated<T, M, In>;
 
-		if (typeof initialForm.valid !== 'boolean') {
-			throw new SuperFormError(
-				'A non-validation object was passed to superForm. ' +
-					'It should be an object of type SuperValidated, usually returned from superValidate.'
-			);
-		}
-
 		// Detect if a form is posted without JavaScript.
 		if (!browser && _currentPage.form && typeof _currentPage.form === 'object') {
 			const postedData = _currentPage.form;

src/lib/jsonSchema/schemaShape.ts

@@ -49,3 +49,16 @@ function _schemaShape(schema: JSONSchema7Definition, path: string[]): SchemaShap
 
 	return info.types.includes('array') || info.types.includes('object') ? {} : undefined;
 }
+
+export function shapeFromObject(obj: object): SchemaShape {
+	let output: SchemaShape = {};
+	const isArray = Array.isArray(obj);
+
+	for (const [key, value] of Object.entries(obj)) {
+		if (!value || typeof value !== 'object') continue;
+		if (isArray) output = { ...output, ...shapeFromObject(value) };
+		else output[key] = shapeFromObject(value);
+	}
+
+	return output;
+}

src/routes/(v2)/v2/Navigation.svelte

@@ -47,7 +47,8 @@
 		'zod-discriminated',
 		'syncflash',
 		'redirect-login',
-		'debounce-username'
+		'debounce-username',
+		'mixed-forms'
 	].sort();
 </script>
 

src/routes/(v2)/v2/mixed-forms/+page.server.ts

@@ -0,0 +1,23 @@
+import { zod } from '$lib/adapters/zod.js';
+import { message, superValidate } from '$lib/server/index.js';
+import { schema } from './schema.js';
+import { fail } from '@sveltejs/kit';
+
+export const load = async () => {
+	const form = await superValidate(zod(schema));
+	return { form };
+};
+
+export const actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		console.log(formData);
+
+		const form = await superValidate(formData, zod(schema));
+		console.log(form);
+
+		if (!form.valid) return fail(400, { form });
+
+		return message(form, 'Posted OK!');
+	}
+};

src/routes/(v2)/v2/mixed-forms/+page.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { superForm } from '$lib/client/index.js';
+	import SuperDebug from '$lib/client/SuperDebug.svelte';
+	//import { zod } from '$lib/adapters/zod.js'
+	//import { schema } from './schema.js';
+
+	export let data;
+
+	const { form, errors, tainted, message, enhance } = superForm(data.form, {
+		taintedMessage: false
+	});
+
+	const {
+		form: formData,
+		formId,
+		enhance: enhance2,
+		posted
+	} = superForm({ name: '' }, { taintedMessage: false, invalidateAll: false });
+</script>
+
+<SuperDebug data={{ $form, $errors, $tainted }} />
+
+{#if $message}<h4>{$message}</h4>{/if}
+
+<form method="POST" use:enhance>
+	<label>
+		Name: <input
+			name="name"
+			bind:value={$form.name}
+			aria-invalid={$errors.name ? 'true' : undefined}
+		/>
+		{#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+	</label>
+	<label>
+		Email: <input
+			name="email"
+			bind:value={$form.email}
+			aria-invalid={$errors.email ? 'true' : undefined}
+		/>
+		{#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
+	</label>
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<form method="POST" use:enhance2>
+	<div>FORMID:{$formId}:</div>
+	<div>POSTED:{$posted}:</div>
+	<label>
+		Name2: <input name="name" bind:value={$formData.name} />
+	</label>
+	<input type="hidden" name="email" value="[email protected]" />
+	<div>
+		<button>Submit</button>
+	</div>
+</form>
+
+<style lang="scss">
+	form {
+		margin: 2rem 0;
+
+		input {
+			background-color: #dedede;
+		}
+
+		.invalid {
+			color: crimson;
+		}
+	}
+</style>

src/routes/(v2)/v2/mixed-forms/schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+	name: z.string().min(2),
+	email: z.string().email()
+});

src/tests/JSONSchema.test.ts

@@ -3,12 +3,13 @@ import type { JSONSchema7 } from 'json-schema';
 import { schemaInfo } from '$lib/jsonSchema/schemaInfo.js';
 import type { FromSchema } from 'json-schema-to-ts';
 import { defaultValues, defaultTypes } from '$lib/jsonSchema/schemaDefaults.js';
-import { schemaShape } from '$lib/jsonSchema/schemaShape.js';
+import { schemaShape, shapeFromObject } from '$lib/jsonSchema/schemaShape.js';
 import { z } from 'zod';
 import { zod, zodToJSONSchema } from '$lib/adapters/zod.js';
 import { schemaHash } from '$lib/jsonSchema/schemaHash.js';
 import { constraints } from '$lib/jsonSchema/constraints.js';
 import { SchemaError } from '$lib/errors.js';
+import type { Infer } from '$lib/index.js';
 
 const schema = {
 	type: 'object',
@@ -394,6 +395,18 @@ describe('Object shapes', () => {
 			numberArray: {}
 		});
 	});
+
+	it('should return the same with the shapeFromObject function', () => {
+		const data = {
+			tags: [
+				{ id: 1, names: ['aa', 'bb'], test: '' },
+				{ id: 2, names: ['bb', 'cc'], test: ['aaa'] }
+			]
+		} satisfies Infer<typeof schema>;
+
+		assert(schema.safeParse(data).success);
+		expect(shapeFromObject(data)).toEqual({ tags: { names: {}, test: {} } });
+	});
 });
 
 describe('Schema hash function', () => {