Compare SvelteKit `use:enhance` APIs

README.md

Type	Old enhance	Today's enhance	Proposal
Simple result - script	<script> const result = ({ form }) => form.reset(); </script> <form use:enhance={{ result }}></form>	<script> function add({ form }) { return (result) => { if (result.type === 'success') { form.reset(); invalidateAll(); } }; } </script> <form use:enhance={add}></form>	<script> function result({ form, result }) { if (result.type === 'success') { form.reset(); invalidateAll(); } } </script> <form use:enhance={{ result }}></form>
Simple result - inline	<form use:enhance={{ result: ({ form }) => form.reset() }}> </form>	<form use:enhance={({ form }) => { return ({ type }) => { if (type === 'success') { invalidateAll(); form.reset(); } }; }}> </form>	<form use:enhance={{ result: ({ form, result }) => { if (result.type === 'success') { form.reset(); invalidateAll(); } } }}> </form>
Simple pending - script	<script> const pending = ({ form, data }) => todo.done = !!data.get('done'); </script> <form use:enhance={{ pending }}></form>	<script> const pending = ({ form, data }) => todo.done = !!data.get('done'); </script> <form use:enhance={pending}></form>	<script> const pending = ({ form, data }) => todo.done = !!data.get('done'); </script> <form use:enhance={{ pending }}></form>
Simple result - inline	<form use:enhance={{ pending: ({ form, data }) => todo.done = !!data.get('done'); }}> </form>	<form use:enhance={({ form, data }) => todo.done = !!data.get('done')}> </form>	<form use:enhance={{ pending: ({ form, data }) => todo.done = !!data.get('done'); }}> </form>
Pending, Result combined - script	<script> const result = ({ form }) => form.reset(); const pending = ({ form, data }) => todo.done = !!data.get('done'); </script> <form use:enhance={{ result, pending }}></form>	<script> function add({ form, data }) { todo.done = !!data.get('done'); return (result) => { if (result.type === 'success') { form.reset(); invalidateAll(); } }; } </script> <form use:enhance={add}></form>	<script> function result({ form, result }) { if (result.type === 'success') { form.reset(); invalidateAll(); } }; const pending = ({ form, data }) => todo.done = !!data.get('done'); </script> <form use:enhance={{ result, pending }}></form>
Pending, Result combined - inline	<form use:enhance={{ result: ({ form }) => form.reset(), pending: ({ form, data }) => todo.done = !!data.get('done'); }}> </form>	<form use:enhance={({ form }) => { // pending code on this line return ({ type }) => { if (type === 'success') { invalidateAll(); form.reset(); } }; }}> </form>	<form use:enhance={{ result: ({ form, result }) => { if (result.type === 'success') { form.reset(); invalidateAll(); } }, pending: ({ form, data }) => todo.done = !!data.get('done'); }}> </form>