Implement

/sunboard.implement makes an existing spec executable against your real app. It reads the spec, then patches your code so every target selector and completeWhen.event has a real counterpart.

When to use it

• After a spec is authored or revised, before you deploy it.
• When Analyze finds an event firing from the wrong place.

What happens

1. Reads the spec and lists every selector and completion event.
2. Checks hosted state (sunboard experiences get) so it doesn't rename a data-sunboard-id that live versions still reference.
3. Adds selectors — a stable data-sunboard-id on the most specific element (the button, the input, the list item).
4. Wires events — await useSunboard().track("<event>") in the success path of the real product action.
5. Re-validates, then deploys to the sandbox so you can verify route waits, modals, and hotspots in your app on the pk_test_ key.

// Preferred: fire from the success handler of the real action.
const { track } = useSunboard();
await track("workflow.created", { workflowId: workflow.id });

// If the success signal is a prop/state change, fire from an effect and depend
// on the stable `track` callback — never the whole useSunboard() value.
useEffect(() => {
  track("workflow.created", { workflowId });
}, [track, workflowId]);

track() is safe by default — it never throws on a missing user, network error, or unready state. When you call it from useEffect, depend on the stable track callback ([track, id]), not the whole useSunboard() value: the provider recreates that object on every checklist update, so an effect depending on it re-runs and loops.

Related