Nova · Composition

Merge rules

A fragment brings more than layout. Its data is merged under the action’s, so where both name a key the action’s value stands. Its triggers are added to the action’s, so both sets answer on the one instance.

The shell, as it is written

{
  canvases: [
    {
      id: 'merge-rules.main',
      initial: {
        action: 'merge-rules.show',
        with: ['merge-rules.star'],
      },
    },
  ],
  actions: {
    merge-rules.show: {
      id: 'merge-rules.show',
      data: { title: 'The Tempest', liked: false },
      layout: {
        component: 'Stack',
        children: [
          { component: 'Text', children: '$.title' },
          {
            component: 'Text',
            children: 'starred: {{$.starred}}, liked: {{$.liked}}',
          },
          { component: 'Button', ref: 'like', children: 'Like' },
        ],
      },
      triggers: [
        {
          event: 'ui:click',
          ref: 'like',
          do: [{ toggle: 'liked' }],
        },
      ],
    },
  },
  fragments: {
    merge-rules.star: {
      kind: 'fragment',
      id: 'merge-rules.star',
      data: { title: 'Untitled', starred: false },
      layout: {
        component: 'Stack',
        children: [
          { slot: 'body' },
          { component: 'Button', ref: 'star', children: 'Star' },
        ],
      },
      triggers: [
        {
          event: 'ui:click',
          ref: 'star',
          do: [{ toggle: 'starred' }],
        },
      ],
    },
  },
}

Running herepress it

The Tempest

starred: false, liked: false

What is done to it

press star
press like

What then stands on each canvas

{ merge-rules.main: ['merge-rules.show'] }

What it then says

The Tempest
starred: true, liked: true
Like
Star

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.