Skip to main content

What the build can read

The build reads source and never runs it. A value has to be written out as data for the build to see it.

<Headline id="title" />                    // read

const TITLE_ID = "title";
<Headline id={TITLE_ID} /> // read: TITLE_ID is a const assigned a literal

<Headline id={titleId} /> // not read: id-not-written-out

What counts as data​

The build follows a value as far as it is made of data, and stops at the first part that is not. Data is:

  • a string, number, boolean or null literal
  • an array or object whose items are data
  • the name of a const, in the same file or imported, assigned data - Object.freeze around it changes nothing
  • ... spreading data into an array, an object, or the arguments where a field is rendered
  • a property written out on data: TOOLBARS.simple, TOOLBARS["simple"]
fields.js
import { STAT_FIELDS } from "./stats.js";

const SIMPLE = ["bold", "italic"];
const TOOLBARS = { simple: SIMPLE, full: [...SIMPLE, "list"] };
const intro = { id: "a-field", description: "The pitch's opening line." };
<Headline {...intro} toolbar={TOOLBARS.full} />

Every argument here is read: id and description from the spread intro, and toolbar from the property written out on TOOLBARS.

This applies wherever the build reads a value: a declaration's options, keys included, and every argument where a field is rendered.

Where it stops​

<Headline id={computeId()} />              a call

<Headline id={isCompany ? "a" : "b"} /> a condition, or any other operator

<Headline id={`field-${index}`} /> a template literal with ${}

<Headline toolbar={TOOLBARS[kind]} /> a property picked by a variable

An id picked off what a declared function returned is the exception. See Ids from a declared function.

let TITLE_ID = "title";                    // a let or var, rather than a const

function renderHeadline(titleId) { ... } // a parameter

Where a value stops the build, it warns for the argument it was in. In a declaration, it refuses the whole declaration and fails the build - see Build warnings.

A JSX tag​

<Headline id="title" hasPersonalChannel />

A class being constructed​

new Headline({ id: "title", hasPersonalChannel: true });

A plain call​

headline({ id: "title", hasPersonalChannel: true });

The arguments are read from the parameter that takes them: the one whose braces name an argument the declaration reads, or else the one with a ...rest.

export function card(Component, settings, { id = "card" } = {}) {}

card(Photo, settings); // id is "card", the parameter's default
card(Photo, settings, { id: "hero" }); // id is "hero"
card(Photo, settings, CARD_OPTIONS); // read, where CARD_OPTIONS is a const of data
card(Photo, settings, options); // not read: arguments-spread

Where the parameters say neither, the first object written in the call is read.

All three are read with the same declaration. The build matches a usage by the name callable is imported under, or declared under in the same file.

import { Headline } from "./headline.js";
<Headline />; // read
import { Headline as Title } from "./headline.js";
<Title />; // read
const Tag = Headline;
<Tag />; // not read

Markup​

A plain element carrying a marker attribute is a field. No declaration is needed.

<!-- @public The legal line under the price table. -->
<p data-companywide-editable="pricing-fees">Fees apply. See the PDS.</p>
AttributeField
data-companywide-editabletext, everyone
data-editabletext, personal
data-companywide-dynamic-imageimage, everyone
data-dynamic-imageimage, personal
data-companywide-youtube-playervideo, everyone
data-toolbarThe formatting it permits. See toolbar.

A @public comment directly above the element describes the field.

A data-editable or data-dynamic-image written with no value, or as "true", takes the element's id as its key, the same as on the page:

<td id="monthly-fee" data-editable>$20</td>
<!-- the same field as -->
<td id="monthly-fee" data-editable="monthly-fee">$20</td>

Blind spots​

WrittenWhat happens
A value in braces that is not data - a call, a condition, ${...}Not read. The build warns.
A spread of a value the build cannot read as dataNot read. The build warns, and an argument written after the spread is still read.
A variable passed where a plain call takes its argumentsNot read. The build warns, the same as for a spread.
A callable reached through a variableNot read. Nothing warns.
A usage in a package .deckrc.json does not nameNot read. Nothing warns. See Setup.

Where a value genuinely is decided at runtime, silence the warning. See Silencing a warning.