Nova · Shells

Replace

replace swaps the action on top for another. The stack does not grow, so a run of steps leaves nothing behind to go back through.

The shell, as it is written

{
  canvases: [{ id: 'replace.main', initial: 'replace.seats' }],
  actions: {
    replace.seats: {
      id: 'replace.seats',
      layout: {
        component: 'Stack',
        children: [
          { component: 'Text', children: 'Step 1: choose seats' },
          { component: 'Button', ref: 'next', children: 'Next' },
        ],
      },
      triggers: [
        {
          event: 'ui:click',
          ref: 'next',
          do: [{ replace: { action: 'replace.payment' } }],
        },
      ],
    },
    replace.payment: {
      id: 'replace.payment',
      layout: {
        component: 'Stack',
        children: [
          { component: 'Text', children: 'Step 2: pay' },
          { component: 'Button', ref: 'next', children: 'Next' },
        ],
      },
      triggers: [
        {
          event: 'ui:click',
          ref: 'next',
          do: [{ replace: { action: 'replace.done' } }],
        },
      ],
    },
    replace.done: {
      id: 'replace.done',
      layout: { component: 'Text', children: 'Step 3: booked' },
    },
  },
}

Running herepress it

Step 1: choose seats

What is done to it

press next
press next

What then stands on each canvas

{ replace.main: ['replace.done'] }

What it then says

Step 3: booked

Output matches the expected value

Left: the action as the package ships it. Right: the same action running in this page, rendered with this site’s components. Below: the action run as the example specifies, on the installed package.