Nova · Composition

Stacking

with takes a list. Each fragment wraps what the ones before it made, so the last one named ends up outermost.

The shell, as it is written

{
  canvases: [
    {
      id: 'stacking.main',
      initial: {
        action: 'stacking.core',
        with: ['stacking.inner', 'stacking.outer'],
      },
    },
  ],
  actions: {
    stacking.core: {
      id: 'stacking.core',
      layout: { component: 'Text', children: 'the action' },
    },
  },
  fragments: {
    stacking.inner: {
      kind: 'fragment',
      id: 'stacking.inner',
      layout: {
        component: 'Stack',
        children: [
          { component: 'Text', children: 'inner begins' },
          { slot: 'body' },
          { component: 'Text', children: 'inner ends' },
        ],
      },
    },
    stacking.outer: {
      kind: 'fragment',
      id: 'stacking.outer',
      layout: {
        component: 'Stack',
        children: [
          { component: 'Text', children: 'outer begins' },
          { slot: 'body' },
          { component: 'Text', children: 'outer ends' },
        ],
      },
    },
  },
}

Running herepress it

outer begins

inner begins

the action

inner ends

outer ends

What is done to it

Nothing. It is only drawn.

What then stands on each canvas

{ stacking.main: ['stacking.core'] }

What it then says

outer begins
inner begins
the action
inner ends
outer ends

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.