https://github.com/withastro-utils/utils

Server components for Astro (server + client validation)
https://github.com/withastro-utils/utils

asp-framework asp-net aspx astrojs code-behind elanat form-binder form-controls form-library form-validation forms hooks htmx js-free postback seo-friendly ssr view-state

Last synced: about 1 month ago
JSON representation

Server components for Astro (server + client validation)

• Host: GitHub
• URL: https://github.com/withastro-utils/utils
• Owner: withastro-utils
• License: mit
• Created: 2022-12-09T08:59:31.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-16T17:05:33.000Z (3 months ago)
• Last Synced: 2024-08-27T11:09:00.639Z (3 months ago)
• Topics: asp-framework, asp-net, aspx, astrojs, code-behind, elanat, form-binder, form-controls, form-library, form-validation, forms, hooks, htmx, js-free, postback, seo-friendly, ssr, view-state
• Language: TypeScript
• Homepage: https://withastro-utils.github.io/docs/
• Size: 9.87 MB
• Stars: 18
• Watchers: 0
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


# Astro Forms Utils



[![Build](https://github.com/withastro-utils/utils/actions/workflows/release.yml/badge.svg)](https://github.com/withastro-utils/utils/actions/workflows/build.yml)

[![License](https://badgen.net/badge/color/MIT/green?label=license)](https://www.npmjs.com/package/@astro-utils/forms)

[![License](https://badgen.net/badge/color/TypeScript/blue?label=types)](https://www.npmjs.com/package/@astro-utils/forms)

[![Version](https://badgen.net/npm/v/@astro-utils/forms)](https://www.npmjs.com/package/@astro-utils/forms)



> Server component for Astro (validation and state management)

# Full feature server components for Astro.js

This package is a framework for Astro.js that allows you to create forms and manage their state without any JavaScript.

It also allows you to validate the form on the client side and server side, and protect against CSRF attacks.

### More features

- JWT session management

- Override response at runtime (useful for error handling)

- Custom server validation with `zod`

- Multiples app states at the same time

# Show me the code

```astro

---

import { Bind, BindForm, BButton, BInput } from "@astro-utils/forms/forms.js";

import Layout from "../layouts/Layout.astro";

const form = Bind();

let showSubmitText: string;

function formSubmit(){

    showSubmitText = `You name is ${form.name}, you are ${form.age} years old. `;

}

---

    

        {showSubmitText}

        

        
What you name*

        

    

        
Enter age*

        

    

        Submit

    


```

## Usage

### Add the middleware to your server

```

npm install @astro-utils/forms

```

Add the middleware to your server

`src/middleware.ts`

```ts

import astroForms from "@astro-utils/forms";

import {sequence} from "astro/middleware";

export const onRequest = sequence(astroForms());

```

### Add to Layout

Add the `WebForms` component in the layout

`layouts/Layout.astro`

```astro

---

import {WebForms} from '@astro-utils/forms/forms.js';

---

    

```

### Code Integration

This changes astro behavior to allow the form to work, it ensure the components render by the order they are in the file.

`astro.config.mjs`

```js

import { defineConfig } from 'astro/config';

import astroForms from "@astro-utils/forms/dist/integration.js";

export default defineConfig({

    output: 'server',

    integrations: [astroForms]

});

```