-
-
Notifications
You must be signed in to change notification settings - Fork 64
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
accept union type in generic component #429
Comments
Does it work to put the union in the schemas, or in Infer? SuperForm<Infer<typeof eventSchema | typeof admissionSchema>>
SuperForm<Infer<typeof eventSchema> | Infer<typeof admissionSchema>> |
Unfortunately not. I tried all variations 😕 |
I updated the demo with your suggestion but it still fails
|
I though maybe a way to solve this would be to use generics but it also doesn't work. This time the <script lang="ts" generics="T extends { name: string }">
import type { SuperForm } from 'sveltekit-superforms/client';
import Input from './input.svelte';
export let superForm: SuperForm<T>;
$: ({ form } = superForm);
</script>
<Input {superForm} field="name" />
|
You can use either export const schema = z.union([eventTemplateSchema, eventSchema, admissionSchema]);
export type UnionSchema =
| Infer<typeof eventSchema>
| Infer<typeof admissionSchema>
| Infer<typeof eventTemplateSchema>; Then use the superForm type parameter to get the correct type for the schema: +page.svelte <script lang="ts">
import Union from './union.svelte';
import { superForm as _superForm } from '$lib/index.js';
import type { UnionSchema } from './schemas.js';
export let data;
const superForm = _superForm<UnionSchema>(data.form);
</script>
<Union {superForm} /> union.svelte <script lang="ts">
import type { SuperForm } from '$lib/index.js';
import { type UnionSchema } from './schemas.js';
import Input from './input.svelte';
export let superForm: SuperForm<UnionSchema>;
</script>
<Input {superForm} field="name" /> |
Thank you so much for your help! The problem with that is that if we have e.g. 3 different pages I don't want to use I think a great solution would be (if that's somehow possible) if we could use generics or maybe create something like a page 1: <script lang="ts">
export let superForm: SuperForm<Infer<typeof eventSchema>>;
</script>
<Union {superForm} /> page 2: <script lang="ts">
export let superForm: SuperForm<Infer<typeof admissionSchema>>;
</script>
<Union {superForm} /> union.svelte <script lang="ts">
import type { SuperForm } from 'sveltekit-superforms';
import Input from './input.svelte';
export let superForm: SuperForm<PartialSchema<{ name: string }>>;
</script>
<Input {superForm} field="name" /> |
Yes, please I also need this. The workaround does not really work in my case (as it complains about properties in both schemas but unrelated to the common fields of interest). I split my form into smaller parts to reuse them on different pages that are similar but not identical. One small part is responsible for the selection of a range of product numbers ( I would love to exactly the same as the comment right above this one: <!-- ProductNumbersRangeSelect.svelte -->
<script lang="ts">
import type { SuperForm } from 'sveltekit-superforms';
export let form: SuperForm<{ productNoFrom: string, productNoTo: string }>;
</script>
<Input {form} name="productNoFrom" />
<Input {form} name="productNoTo" /> And call out to this component from both pages: <!-- src/routes/+page.svelte -->
<script lang="ts">
import { superForm } from 'sveltekit-superforms';
export let data;
const filterForm = superForm(data.filterForm);
</script>
<ProductNumbersRangeSelect form={filterForm} /> <!-- src/routes/export/+page.svelte -->
<script lang="ts">
import { superForm } from 'sveltekit-superforms';
export let data;
const exportForm = superForm(data.exportForm);
</script>
<ProductNumbersRangeSelect form={exportForm} /> |
Is your feature request related to a problem? Please describe.
To have generic components it's sometimes neccessary to pass down union types where only an intersection of the type is equal.
Demo:
https://www.sveltelab.dev/y7gmqoire0bl3u4?files=.%2Fsrc%2Flib%2Funion.svelte
Union component:
Schemas:
Generic input component
But TypeScript complains if the schema types differ even slightly from each other.
Describe the solution you'd like
It would be helpful to make the generics work with unions somehow
The text was updated successfully, but these errors were encountered: