Svelte-only version of Superforms

[ciscoheat]

I'm looking for ideas on how to separate the code to make a Svelte-only version of Superforms. It should share as much code as possible with the SK version, and there should be some convenient build tool to easily package two versions.

The SvelteKit imports that needs to be removed are:

import { navigating, page } from '$app/stores';
import { browser } from '$app/environment';
import { beforeNavigate, goto, invalidateAll } from '$app/navigation';
import { applyAction, enhance } from '$app/forms';

Thanks for any help!

[FluffyDiscord]

Svelte only version where we could connect it to our own backend would be amazing

[philippone]

I'm using a workaround in a much more complex setup (Svelte Web Comonents inside of an old AngularJs Project).

To be able to use superforms without sveltekit, I provide the missing functionality by using a vite/typescript alias, i.e. I implement the $app/*-interfaces inside of my application and overwrite the import $app/* via alias.

To support all superform functionality you have to provide a proper implementation of the interfaces (for instance link your application router to beforeNavigate) . I'm just fine with client side validation and did not implement all missing methods.

I have set up an example repo that using (most of) client-side functionality of superforms. Maybe it provides enough functionality of superforms to be used in your project, too.

https://stackblitz.com/edit/vitejs-vite-ktneyp?file=src%2FApp.svelte

Nevertheless, it would be nice to have a native adapter inside of superforms to overwrite the interface to sveltekit without that workaround.

[FluffyDiscord]

Interesting solution. It really is hacky tho.

[Anton-2]

I have set up an example repo that using (most of) client-side functionality of superforms. Maybe it provides enough functionality of superforms to be used in your project, too.

It's working well for me, thanks @philippone.

Note, you can use setError and setMessage successfully without overwriting $app/forms.applyAction() by skipping it with applyAction: false in superForm's options.

Still, having a pure svelte SuperForm.core that can be the base of the current SvelteKit superForm would be really better !

[soupman99]

@philippone this works great! Thanks so much. Have been fiddling for 2 days.

[oscarhermoso]

https://github.com/benmccann/esm-env is a clean replacement for { browser } (and dev) from '$app/environment';

@sveltejs/kit actually depends on esm-env, so you will have identical functionality

[amit13k]

@philippone Thanks. I made the changes suggested and it allowed me to use superforms with Astro.

[gbouteiller]

Hello everyone,
I'd love to see this feature as Superforms is, for me, the best js form library out there but I love both Astro and Sveltekit.
In that regard, I have created a small Astro integration to ease the use of Superforms with Astro.
PS: by the way, it's my first integration so please be indulgent 😅

[reesericci]

I would also love this to make it work properly with actionview-svelte-handler for Rails

[janzheng]

Hello everyone, I'd love to see this feature as Superforms is, for me, the best js form library out there but I love both Astro and Sveltekit. In that regard, I have created a small Astro integration to ease the use of Superforms with Astro. PS: by the way, it's my first integration so please be indulgent 😅

Could you please add a couple of examples on how it works in the readme, e.g. how replace Astro w/ Sveltekit's server, and how to combine with astro:actions / defineAction?

[gbouteiller]

Hello everyone, I'd love to see this feature as Superforms is, for me, the best js form library out there but I love both Astro and Sveltekit. In that regard, I have created a small Astro integration to ease the use of Superforms with Astro. PS: by the way, it's my first integration so please be indulgent 😅

Could you please add a couple of examples on how it works in the readme, e.g. how replace Astro w/ Sveltekit's server, and how to combine with astro:actions / defineAction?

Hello @janzheng and sorry for the late answer, I've started a doc here : https://astro-superforms.vercel.app
I will add more information in the next days

[janzheng]

wow looks amazing. Thanks for working on this!

…

On Fri, Oct 18, 2024 at 9:21 AM Gregory Bouteiller ***@***.***> wrote: Hello everyone, I'd love to see this feature as *Superforms* is, for me, the best js form library out there but I love both *Astro* and *Sveltekit*. In that regard, I have created a small Astro integration <https://www.npmjs.com/package/astro-superforms> to ease the use of *Superforms* with *Astro*. PS: by the way, it's my first integration so please be indulgent 😅 Could you please add a couple of examples on how it works in the readme, e.g. how replace Astro w/ Sveltekit's server, and how to combine with astro:actions / defineAction? Hello @janzheng <https://github.com/janzheng> and sorry for the late answer, I've started a doc here : https://astro-superforms.vercel.app I will add more information in the next days — Reply to this email directly, view it on GitHub <#321 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA5QO2BOYXNYJQDLTSPGFATZ4EYPVAVCNFSM6AAAAABCUM7746VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMRSHAZDMNBXHA> . You are receiving this because you were mentioned.Message ID: ***@***.***>