Nova · Composition

Reuse

One frame around many actions. Each action is opened with the same fragment, and the frame’s heading reads each action’s own label. Change the fragment and all of them change.

The shell, as it is written

{
  canvases: [
    {
      id: 'reuse.first',
      initial: { action: 'reuse.sold', with: ['reuse.tile'] },
    },
    {
      id: 'reuse.second',
      initial: { action: 'reuse.free', with: ['reuse.tile'] },
    },
  ],
  actions: {
    reuse.sold: {
      id: 'reuse.sold',
      data: { label: 'Sold', seats: 212 },
      layout: { component: 'Text', children: '{{$.seats}} seats' },
    },
    reuse.free: {
      id: 'reuse.free',
      data: { label: 'Free', rows: ['C', 'F'] },
      layout: {
        component: 'Stack',
        children: [
          {
            for: '$.rows',
            as: 'row',
            do: { component: 'Text', children: 'Row {{$row}}' },
          },
        ],
      },
    },
  },
  fragments: {
    reuse.tile: {
      kind: 'fragment',
      id: 'reuse.tile',
      layout: {
        component: 'Stack',
        children: [
          { component: 'Text', children: '$.label' },
          { slot: 'body' },
        ],
      },
    },
  },
}

Running herepress it

Sold

212 seats

Free

Row C

Row F

What is done to it

Nothing. It is only drawn.

What then stands on each canvas

{
  reuse.first: ['reuse.sold'],
  reuse.second: ['reuse.free'],
}

What it then says

Sold
212 seats
Free
Row C
Row F

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.