|
1 |
| -# create-svelte |
| 1 | +<p align="center"> |
| 2 | + <img src="https://github.com/ciscoheat/sveltekit-superforms/raw/main/logo.svg" width="150px" align="center" alt="Superforms logo" /> |
| 3 | + <h1 align="center">Superforms 💥</h1> |
| 4 | +</p> |
| 5 | + |
| 6 | +<div align="center"> |
| 7 | + <a align="center" href="https://superforms.rocks/">https://superforms.rocks/</a> |
| 8 | + <br /> |
| 9 | + <a href="https://discord.gg/AptebvVuhB">Discord</a> |
| 10 | + <span> • </span> |
| 11 | + <a href="https://superforms.rocks/api">API</a> |
| 12 | + <span> • </span> |
| 13 | + <a href="https://superforms.rocks/faq">FAQ</a> |
| 14 | + <span> • </span> |
| 15 | + <a href="https://www.npmjs.com/package/sveltekit-superforms">npm</a> |
| 16 | + <span> • </span> |
| 17 | + <a href="https://github.com/ciscoheat/sveltekit-superforms/issues">Issues</a> |
| 18 | + <span> • </span> |
| 19 | + <a href="https://github.com/ciscoheat/sveltekit-superforms/discussions">Discussions</a> |
| 20 | +</div> |
| 21 | + |
| 22 | +<br/> |
| 23 | + |
| 24 | +Making SvelteKit **validation** and **displaying** of forms a pleasure! |
| 25 | + |
| 26 | +# Feature list |
| 27 | + |
| 28 | +- Seamless merging of `PageData` and `ActionData` - Forget about which one to use and how, just focus on your data. |
| 29 | +- Server- and client-side data validation using [Zod](https://zod.dev), with output that can be used directly on the client. |
| 30 | +- [Auto-centering and auto-focusing](https://superforms.rocks/concepts/error-handling#usage-client) on invalid form fields. |
| 31 | +- [Tainted form detection](https://superforms.rocks/concepts/tainted), prevents the user from losing data if navigating away from an unsaved form. |
| 32 | +- No JS required as default, but full support for [progressive enhancement](https://superforms.rocks/concepts/enhance). |
| 33 | +- Automatically coerces the string data from `FormData` into correct types. |
| 34 | +- For advanced data structures, forget about the limitations of `FormData` - [Send your forms as devalued JSON](https://superforms.rocks/concepts/nested-data), transparently. |
| 35 | +- Generates [default form values](https://superforms.rocks/default-values) from validation schemas. |
| 36 | +- Support for [nested data structures](https://superforms.rocks/concepts/nested-data), [snapshots](https://superforms.rocks/concepts/snapshots) and [multiple forms](https://superforms.rocks/concepts/multiple-forms) on the same page. |
| 37 | +- Works both on the server and with [single-page applications](https://superforms.rocks/concepts/spa) (SPA)! |
| 38 | +- [Proxy objects](https://superforms.rocks/concepts/proxy-objects) for handling data conversions to string and back again. |
| 39 | +- Realtime [client-side validators](https://superforms.rocks/concepts/client-validation) for immediate user feedback. |
| 40 | +- Create loading spinners easily with three [auto-updating timers](https://superforms.rocks/concepts/timers), based on human perception research. |
| 41 | +- Even more care for the user: No form data loss, by [preventing error page rendering](https://superforms.rocks/concepts/enhance#differences-from-sveltekits-useenhance) as default. |
| 42 | +- Hook into [a number of events](https://superforms.rocks/concepts/events) for full control over the validation data and the `ActionResult`, with a possibility to cancel the update at every step. |
| 43 | +- Complete customization with a [huge list of options](https://superforms.rocks/api#superformform-options). |
| 44 | +- Comes with a Super Debugging Svelte Component: [SuperDebug](https://superforms.rocks/super-debug). |
| 45 | + |
| 46 | +# Installation |
2 | 47 |
|
3 |
| -Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). |
4 |
| - |
5 |
| -Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging). |
6 |
| - |
7 |
| -## Creating a project |
8 |
| - |
9 |
| -If you're seeing this, you've probably already done this step. Congrats! |
10 |
| - |
11 |
| -```bash |
12 |
| -# create a new project in the current directory |
13 |
| -npm create svelte@latest |
14 |
| - |
15 |
| -# create a new project in my-app |
16 |
| -npm create svelte@latest my-app |
17 | 48 | ```
|
18 |
| - |
19 |
| -## Developing |
20 |
| - |
21 |
| -Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: |
22 |
| - |
23 |
| -```bash |
24 |
| -npm run dev |
25 |
| - |
26 |
| -# or start the server and open the app in a new browser tab |
27 |
| -npm run dev -- --open |
| 49 | +npm i -D sveltekit-superforms zod |
28 | 50 | ```
|
29 | 51 |
|
30 |
| -Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app. |
31 |
| - |
32 |
| -## Building |
33 |
| - |
34 |
| -To build your library: |
35 |
| - |
36 |
| -```bash |
37 |
| -npm run package |
| 52 | +``` |
| 53 | +pnpm i -D sveltekit-superforms zod |
38 | 54 | ```
|
39 | 55 |
|
40 |
| -To create a production version of your showcase app: |
| 56 | +# Get started |
41 | 57 |
|
42 |
| -```bash |
43 |
| -npm run build |
44 |
| -``` |
| 58 | +Follow the get started tutorial on the website to get a hands-on introduction to Superforms: https://superforms.rocks/get-started |
45 | 59 |
|
46 |
| -You can preview the production build with `npm run preview`. |
| 60 | +You can also watch this excellent introduction video to see what's possible: https://www.youtube.com/watch?v=MiKzH3kcVfs |
47 | 61 |
|
48 |
| -> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. |
| 62 | +# Contributing and sponsoring |
49 | 63 |
|
50 |
| -## Publishing |
| 64 | +Ideas, general feedback, bug reports, PR:s, etc, are very welcome as a Github [issue](https://github.com/ciscoheat/sveltekit-superforms/issues) [discussion](https://github.com/ciscoheat/sveltekit-superforms/discussions), or on the [Discord server](https://discord.gg/AptebvVuhB)! |
51 | 65 |
|
52 |
| -Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)). |
| 66 | +If you're using Superforms in non-profit circumstances, the library is completely free, a star on Github is more than enough if you want to give your support. But if you are using Superforms in a commercial project, would you or the company you work for consider donating? |
53 | 67 |
|
54 |
| -To publish your library to [npm](https://www.npmjs.com): |
| 68 | +If you have appreciated my support on <a href="https://discord.gg/AptebvVuhB">Discord</a> and <a href="https://github.com/ciscoheat/sveltekit-superforms">Github</a>, or want to ensure that things keep rolling, please support open source software in this way. |
55 | 69 |
|
56 |
| -```bash |
57 |
| -npm publish |
58 |
| -``` |
| 70 | +[](https://github.com/sponsors/ciscoheat) [](https://www.buymeacoffee.com/ciscoheat) [](https://ko-fi.com/ciscoheat) |
0 commit comments