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">
    <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">
    <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">
  <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.
• An unattached Stream renders nothing. With no enclosing Flow, or as a second Stream in one Flow, the marker stays inert and Format reports it as a misplaced marker on DocumentSummary.elements.misplacedMarkers.
• The marker carries no state. Its position in the Flow's markup is the entire signal.

Related

• Flow
• Scaffolding
• Pagination