Question about composability

[directormac]

Hello everyone just would like to ask about composability and how would you implement a reuable form and components for reference this example by superforms

Superform example SvelteLab
Repository

I have comeup with this for formsnap usecase, don't mind the dispatches its my way of hacking something from the parent.

Here i expose superForm in the slot as a let declaration, as its needed by formfield as SuperForm<T,ResponseMessage>

<script lang="ts" context="module">
	type T = Record<string, unknown>;
</script>

<script lang="ts" generics="T extends Record<string, unknown>">
	imports ....

	export let data: SuperValidated<T>;
	export let dataType: 'form' | 'json' = 'form';
	export let invalidateAll = true; // set to false to keep form data using muliple forms on a page
	export let debug = false;

	export let dispatch: () => void = () => {};
	export let cancelDispatch: () => void = () => {};

	export const superform = superForm(data, {
		dataType,
		invalidateAll,
		onUpdated({ form }) {
			if (form.message) {
				switch (form.message.type) {
					case 'success':
						{
							toast.success(form.message.text);
							if (form.message.data && form.message.data?.redirect) {
								goto(String(form.message.data?.redirect));
							}
							dispatch();
						}
						break;
					case 'error': {
						toast.error(form.message.text);
						if (form.message.data && form.message.data?.redirect) {
							goto(String(form.message.data?.redirect));
						}
						cancelDispatch();
					}
				}
			}
		}
	});

	const { form, message, delayed, errors, allErrors, enhance } = superform;
</script>

<form method="POST" use:enhance {...$$restProps}>
	<slot
		{superform}
		superForm={superform}
		formData={$form}
		message={$message}
		errors={$errors}
		allErrors={$allErrors}
		delayed={$delayed}
	/>
</form>

{#if debug}
	<SuperDebug data={$form}></SuperDebug>
{/if}

in a basic input field i have this

<script lang="ts" context="module">
	import type { FormPath } from 'sveltekit-superforms';
	type T = Record<string, unknown>;
	type U = unknown;
</script>

<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
	imports ...

	type $$Props = FieldProps<T, U> & {
		label: string;
		placeholder?: string;
		description?: string;
		value: T[U];
	};

	export let form: SuperForm<T>;
	export let name: U;
	export let label: string;

	export let value: T[U];
	export let placeholder: string | undefined = undefined;
	export let description: string | undefined = undefined;
	export let type: HTMLInputTypeAttribute = 'text';
</script>

<FormField {form} {name}>
	<FormControl let:attrs>
		<FormLabel>{label}</FormLabel>
		<Input {...attrs} bind:value {placeholder} {type} />
	</FormControl>
	{#if description}
		<FormDescription>{description}</FormDescription>
	{/if}
	<FormFieldErrors />
</FormField>

And using it with this, my problem now is binding it as svelte does not allow us to bind values from the let declaration

<script lang="ts">
	imports ....

	let data: SuperValidated<Infer<CategoryFormSchema>> = $page.data.categoryForm;

	let categories: Array<{ value: string; label: string }> = $page.data.categories;
</script>

<Card class="border-transparent">
	<SuperForm {data} let:superForm let:formData>
		<CardHeader>
			<CardTitle>New Category</CardTitle>
			<CardDescription>Create new category nad optionally select its parent</CardDescription>
		</CardHeader>
		<CardContent class="space-y-3.5">
			<InputField form={superForm} name="name" label="Category Name" bind:value={formData.name} />
			<ComboBoxField
				form={superForm}
				name="parent"
				options={categories}
				label="Parent Category"
				bind:value={formData.parent}
				bind:itemValue={formData.parent}
				placeholder="Select Category"
				description="This is optional you can choose a parent category, if you want the product to be on a subcategory"
			/>
		</CardContent>
		<CardFooter>
			<FormButton type="submit" class="w-full">Save Category</FormButton>
		</CardFooter>
	</SuperForm>
</Card>

Help would be appreciated. i'm just trying to hack things around on this im fine redeclaring my forms in a single file but given that snapshot is only supported on page level, i need to redeclare those on pages and pass them down the drain elegantly.

[ambergristle]

hey @directormac! i'm thinking through these same questions right now. could you share a bit more about your context/use-case?

• what problems are you trying to solve with this composition?
• how many forms will be sharing it?
  • are they typically larger or smaller? more or less complex?

you can resolve that ts error by simplifying how you pass the form. the fields need the whole form value regardless, so there's no need to destructure in the composed form and expose formData as a separate slot prop. see the reused forms section below for an example and more details.

RE composition patterns: i've come to take a need-driven approach. in my experience, it can be difficult to predict what an abstraction will need to do, or whether a coupling will be help or hindrance. i try to build with 'primitives' as long as possible. once it begins to get burdensome, i find that i usually have enough data points to abstract away repeated work.

i'm new to svelte, but i've built composed forms on top of a few react libraries, and these days i lean towards "less is more". composition can be really useful, but there's always a trade-off to the convenience of the coupling. fields get reused a ton, and are more likely to have complex styling or logical requirements, so there's a lot of value-add to composing them. in my experience, binding form state to ui is a bit more hit/miss.

one-off forms

with superform especially, instantiation boilerplate feels pretty minimal, so in cases where i'm only instantiating a form once, i've opted to do it inline. it keeps the typing simple, and reviewers have good visibility into how the form is constructed because the (sole) instantiation is coupled to the ui. in order to maintain consistency between client + server, i export validators/adapters derived from the same schema in /dtos. common onUpdated or onError handlers could be similarly imported, providing modularity without coupling.

<script lang="ts">
  import { verifyEmailValidator } from '$dtos/client';
  export let data: PageData;
  const verifyEmailForm = superForm(data.verifyEmailForm, {
    id: 'verify-email',
    dataType: 'json',
    validators: verifyEmailValidator,
  });
</script>

<form
  use:verifyEmailForm.enhance
  novalidate
  method="POST"
>
  <Card.Content class="space-y-4">
    <!-- composed using formsnap + bits-ui -->
    <FormCodeInput
      form={verifyEmailForm} 
      name="code"
      length={6}
      label={locale.verificationCode}
    />
    <!-- composed using formsnap + bits-ui -->
    <FormButton class="w-full mt-2">
      {locale.register}
    </FormButton>
  </Card.Content>
</form>

reused forms

i have come across a few cases where i've composed a specific form that needs* to be instantiated multiple times. since formsnap FormFields require the whole form value, i don't destructure in the composed form component. this keeps the typing simple. superforms includes a number of helpers for grabbing field-specific values/state. i found their docs on componentization very helpful: https://superforms.rocks/components

*note: i'm not convinced this is the right level of abstraction. differences between implementations are largely stylistic, so there's probably a better way to express that within the context of a single component. i'm still doing a lot of refactoring and simplification as i refine what was initially a fairly brute-force approach

<script lang="ts">
  const form = superForm($page.data.signInForm, {
    id: 'sign-in',
    dataType: 'json',
    validators: signInValidator,
  });
</script>

<form
  use:form.enhance
  novalidate
  action="/api/sign-in"
  method="POST"
  class={className}
>
  <slot {form} />
</form>

<!-- consumer -->
<SignInForm let:form>
  <Input {form} />
  <Input {form} />
</SignInForm>