Nova · Shells

Hooks

An action is told when it is put on a canvas, covered, uncovered and taken off: mount, suspend, resume, unmount. Here the first action writes down each one as it happens. Uncovered, it is told mount again and then resume, so what it loads on mount is never stale.

The shell, as it is written

{
  canvases: [{ id: 'hooks.main', initial: 'hooks.first' }],
  actions: {
    hooks.first: {
      id: 'hooks.first',
      data: { seen: [] },
      layout: {
        component: 'Stack',
        children: [
          {
            for: '$.seen',
            as: 'hook',
            do: { component: 'Text', children: '$hook' },
          },
          {
            component: 'Button',
            ref: 'cover',
            children: 'Open another on top',
          },
        ],
      },
      lifecycle: {
        mount: [{ push: 'seen', value: 'mount' }],
        suspend: [{ push: 'seen', value: 'suspend' }],
        resume: [{ push: 'seen', value: 'resume' }],
      },
      triggers: [
        {
          event: 'ui:click',
          ref: 'cover',
          do: [{ push: { action: 'hooks.second' } }],
        },
      ],
    },
    hooks.second: {
      id: 'hooks.second',
      layout: { component: 'Button', ref: 'back', children: 'Back' },
      triggers: [{ event: 'ui:click', ref: 'back', do: [{ pop: true }] }],
    },
  },
}

Running herepress it

mount

What is done to it

press cover
press back

What then stands on each canvas

{ hooks.main: ['hooks.first'] }

What it then says

mount
suspend
mount
resume
Open another on top

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.