feat(conform-dom,conform-react)!: imperative command api

[edmundhung]

This simplifies the useFieldList() to only returns the array with an extra list command builder that could be used anywhere.

import { list, requestCommand } from '@conform-to/react';

function Example(config) {
    const ref = useRef<HTMLFieldSetElement>(null);
    // useFieldList no longer returns the command
    const list = useFieldList(ref, { name: 'tasks' });
    // requestCommand is a helper to execute a command in an imperative way
    const reorder = (from, to) => requestCommand(ref.current?.form, list.reorder('tasks', { from, to }));

    return (
        <fieldset ref={ref}>
            {/* As the command is no longer scoped, you need to provide the name as well */}
            <button {...list.append('tasks')}>Add</button>
        </fieldset>
    )
}

close #68

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	554ff59
Status:	✅  Deploy successful!
Preview URL:	https://571861e8.conform.pages.dev
Branch Preview URL:	https://request-command.conform.pages.dev

View logs

[brandonpittman]

Is the reorder function being used in the example above?

[edmundhung]

Is the reorder function being used in the example above?

No. Can't think of a simple example to demonstrate it. Maybe something that requires dynamic index like drag and drop.