Stream

A Stream marks where a scaffolded Flow's items flow in. Use it when a Flow wraps its content in repeating scaffolding, such as a table's header and footer or a titled panel, and you need to say where in that scaffolding the items land. The scaffolding around the Stream repeats on every page the content reaches; the Stream's items flow.

Omit it for a bare Flow, where the Flow's own children are the stream.

Example

A Stream inside a Flow's table scaffolding. The <thead> repeats on every page the Flow produces; the rows appear at the Stream and paginate as they fill.

export const doc = () => (
  <Document title="Invoice #1234" lang="en">
    <Layout id="invoice" width={793.71} height={1122.52}>
      <Flow>
        <table>
          <thead>
            <tr><th>Item</th><th>Qty</th></tr>
          </thead>
          <tbody>
            <Stream>
              <tr><td>Design work</td><td>1</td></tr>
            </Stream>
          </tbody>
        </table>
      </Flow>
    </Layout>
  </Document>
)

<template>
  <Document title="Invoice #1234" lang="en">
    <Layout id="invoice" :width="793.71" :height="1122.52">
      <Flow>
        <table>
          <thead>
            <tr><th>Item</th><th>Qty</th></tr>
          </thead>
          <tbody>
            <Stream>
              <tr><td>Design work</td><td>1</td></tr>
            </Stream>
          </tbody>
        </table>
      </Flow>
    </Layout>
  </Document>
</template>

<template data-type="document" data-title="Invoice #1234" data-lang="en">
  <template data-type="layout" data-id="invoice" data-width="793.71px" data-height="1122.52px">
    <template data-type="flow">
      <table>
        <thead>
          <tr><th>Item</th><th>Qty</th></tr>
        </thead>
        <tbody>
          <template data-type="stream">
            <tr><td>Design work</td><td>1</td></tr>
          </template>
        </tbody>
      </table>
    </template>
  </template>
</template>

Usage

Use a Stream only when a Flow needs scaffolding around its items. A Flow with no Stream takes its own children as the stream, so a plain list of paragraphs needs no Stream at all. Add one when markup must wrap the items and repeat on every page:

• Inside a <tbody>. The header rows above stay static; only the body rows fill in.
• Between a <header> and a <footer> in a flex column. Items flow between them, with fixed scaffolding top and bottom.
• Wrapped in a styled container. The wrapper's padding, border, or background frames the whole filled area.

The Stream's position in the Flow's markup is what controls where the items render. To move the items, move the Stream, not the items.

Constraints

• A Stream must sit inside a Flow, anywhere in that Flow's scaffolding. The marker alone does not stand in for a Flow.
• At most one Stream counts per Flow. Format uses the first one and treats a Flow that has none as a bare Flow, taking its own children as the stream.
• A Stream needs an enclosing Flow. Its items do not render outside a Flow or in a second Stream within the same Flow.
• The marker carries no state. Its position in the Flow's markup is the entire signal.

Related

• Flow
• Scaffolding
• Pagination