It's been a little over 2 years since the version 1.0.0 release of robo-wizard:
Related to this, I published v1.0.0 of a new project called robo-wizard, a library for building multi-step forms backed by a state machine. 🤖🧙♂️
— Nick Hehr (@hipsterbrown) May 11, 2020
👏 Shoutout to @matthewcp for robot3, which makes this all possible.https://t.co/7kujZPy0uj
Quite a bit has changed since that original announcement, although the focus of the library has remained the same.
While I'm still grateful to robot3 for inspiring the minimal API and creating a smooth on-ramp to learning about state machines in UI development, that dependency has been replaced by @xstate/fsm. XState FSM also provides a minimal API to power the internal logic of robo-wizard, with consistent updates and dedicated team behind it. This refactor was purely internal and did not affect the public API of the package.
Another advantage of adopting XState is the ability to fire "entry" actions that can be configured as options when creating the machine, separate from the schema. This feature lead to the createWizard function from robo-wizard accepting its first action parameter for navigating routed steps.
import { createWizard } from 'robo-wizard';
const wizard = createWizard(
['first', 'second', 'third'],
{ firstName: '', lastName: '' }
{
navigate: () => history.pushState({}, '', `/${wizard.currentStep}`)
}
);
window.addEventListener('popstate', () => {
const stepFromPath = window.location.pathname.split('/').pop();
if (stepFromPath !== wizard.currentStep) {
wizard.sync({ step: stepFromPath })
}
})
While these updates are exciting enough for a single blog post, there's one more thing.
The core robo-wizard package is no longer alone in the repo; the first official framework integration packages have been published: @robo-wizard/react & @robo-wizard/react-router
These packages make getting started with Robo Wizard and React much easier than before, while the other framework examples still exist until more demand motivates their own official integrations. The repo is now in a better place to support adding more packages through the help of pnpm workspaces.
It feels good to get this project started again. There's plenty of work ahead; from documentation and educational content to feature development to expand the functionality to as many environments as possible. If any of this sounds interesting to you, please drop a line on Twitter or start a discussion in the project repo.
Cheers and thanks for making the web a bit more magical!