docs(solid): Added instructions with the use directive for solid.

[Blankeos]

There was a weird "gotcha" that took me actually a few frustrating hours to figure out because it wasn't reflected in the docs or anything.

I'm not sure if use:form is actually possible because after some experimenting + reading up on how this works: https://docs.solidjs.com/reference/jsx-attributes/use#use.

I still couldn't get it. So I honestly don't know if it's a skill issue or just the docs.

This was the issue I posted yesterday: #291. I think adding this to the readme would save a ton of time.

I found two ways actually:

Fix 1: Defining in a global dts

// vite-env.d.ts (or any *.d.ts file)
declare global {
  declare module "solid-js" {
    namespace JSX {
      interface Directives {
        form: (node: HTMLFormElement) => void;
      }
    }
  }
}

Fix 2: Defining in local file where its used.

import { createForm } from "@felte/solid";

declare module "solid-js" {
  namespace JSX {
    interface Directives {
      form: (node: HTMLFormElement) => void;
    }
  }
}
export default function Register() {
  const { form } = createForm({
    onSubmit: async (values) => {
      /** call to an api. */
    },
  });

  return (
    <main class="text-center mx-auto text-gray-700 p-4">
      <h1 class="">Register</h1>

      <form class="form-control" use:form={form}>
      // ...

🙁 Didn't work

I assumed just using use:form would work, but it didn't lol.

🙁 Another attempt that didn't work.

This was what the docs showed, and it didn't work. (it's because of the global value)

// vite-env.d.ts (or any *.d.ts file)
declare module "solid-js" {
  namespace JSX {
    interface Directives {
      form: (node: HTMLFormElement) => void;
    }
  }
}

[vercel]

@Blankeos is attempting to deploy a commit to the Pablo Alejandro Berganza Campos' projects Team on Vercel.

A member of the Team first needs to authorize it.

[henrychea]

I've got it working by using a global.d.ts file

/// <reference types="@solidjs/start/env" />

import "solid-js";
declare module "solid-js" {
  namespace JSX {
    interface Directives {
      form: (node: HTMLFormElement) => void;
    }
  }
}

[klm127]

Thanks for this, you saved me a lot of time!

I used a slightly modified version to also add onFelteSuccess and onFelteError, and not lose intrinsic form properties.

import "solid-js";

import { JSX as JSXOrig } from "solid-js";

type TForm = JSXOrig.FormHTMLAttributes<HTMLFormElement> & {
  'use:form'?: any;
  onFelteSuccess?: (e: CustomEvent) => void;
  onFelteError?: (e:CustomEvent) => void;
}


declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      form: TForm;
    }
  }
}