VSCode Astro Error Example

add_test.astro

<app-complex-time>
    <button>click</button>
    <div class="target"></div>
</app-complex-time>

<script>
    import {actions} from "astro:actions";

    class AppComplexTime extends HTMLElement {
        async connectedCallback() {
            const button = this.querySelector('button');
            const target = this.querySelector('div.target');

            button.addEventListener('click', async () => {
                let input = {x: 1, y: 2};

                const { data, error } = await actions.add(input);

                if (error) {
                    target.innerHTML = "error";
                } else {
                    target.innerHTML = data.sum.toString();
                }
            });
        }
    }
    customElements.define('app-complex-time', AppComplexTime);
</script>

index.js

import {defineAction} from 'astro:actions';
import {z} from "astro:schema";

export const server = {
    add: defineAction({
        input: z.object({
            x: z.number(),
            y: z.number()
        }),
        handler: async ({x, y}) => {
            let sum = x + y;
            return {sum};
        }
    })    
};