How will ripple handle forms?

[onionhammer]

That's one annoyance that React has recently (tried to?) address with new APIs like 'useActionState', or with 3rd party libs like react-h**k-form.

How does ripple plan to address forms?

[emeraldlinks]

so far there seems not to be any built in way of doing this except a js work around:
const submit = ()=>{

try{
  alert(`username: ${$username} and password: ${$password}`)
}catch(er){

}

}

{$username} {$username = e.target.value}} class="mx-2 border-green-400 border"/> {$password = e.target.value}} class="mx-2 border-green-400 border"/>

</form>
  <button  onClick={()=> submit()}>{"submit"}</button>
 </div>
 
 
 unfortunately, there's no browser event associated with this such that could trigger password save etc. The language is promising but young for a lot of things.

[emeraldlinks]

// Example pages
component Home() {
let $username = "";
let $password = ""

const submit = (e: Event)=>{
e.preventDefault()

try{
  alert(`username: ${$username} and password: ${$password}`)
}catch(er){

}

}
let $count = 0;

{"Home Page"}

$count--}>{"-"} {$count} $count++}>{"+"}

{$username} {$username = e.target}} class="mx-2 border-green-400 border"/> {$password = e.target.value}} class="mx-2 border-green-400 border"/>

  <button  >{"submit"}</button>
</form>
 </div>

}

i was wrong initially. this is correct. i hope it's what you were looking for?

[WebEferen]

Feel free to check this out (make sure you have newest version installed):

import { effect, track, createContext } from 'ripple';

export const FormContext = createContext<Record<string, any>>({});

function register(name: string) {
	const formData = FormContext.get();

	return {
		name: name,
    value: @formData[name],
    oninput: function (e: any) {  
      e.preventDefault();
      formData = {...@formData, [name]: e.target.value};
    },
    onchange: function (e: any) {
      e.preventDefault();
      formData = {...@formData, [name]: e.target.type === 'checkbox' ? e.target.checked : e.target.value};
    }
	};
};

export component Form({ id, children, initialValues, onChange }) {
    let formData = track(@initialValues)
    FormContext.set(formData)

    effect(() => {
        onChange(@formData)
    })

    <form id={id}>
        <children />
    </form>
}

export component App() {
  let formData = track({ username: 'testable', isAdmin: false })

  <Form id="form" initialValues={formData} onChange={data => { @formData = data }}>
    <input {...register('username')} type="text" />
    <input {...register('isAdmin')} type="checkbox" />
    <button {...register('submit')}>{@formData.username}</button>
    <button {...register('submitAdmin')}>{@formData.isAdmin ? 'Admin' : 'User'}</button>
  </Form>
}

[WebEferen]

This brings you closer to the react-hook-forms (for React).
As you can expose register function that will put the listeners on the inputs.

Then passing reactive state via context and voila, you can have your form ;)

[leonidaz]

We’re also planning to provide bind functions for each type of dom element that will create a two way binding between reactive data and dom properties.

[sreekar339339]

formData = {...@formData, [name]: e.target.value};

Is immutable update required in Ripple?

formData[name] = e.target.value should also work right?

[emeraldlinks]

These are great. However, this changes dont seem to be available at npm yet, right? cause i see last update is ripple@0.2.46 which updated this morning.

[WebEferen]

They will be available shortly. That was just an answer that we are also looking into other areas that might help developers 🙌