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.freezearound 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"]
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>
| Attribute | Field |
|---|---|
data-companywide-editable | text, everyone |
data-editable | text, personal |
data-companywide-dynamic-image | image, everyone |
data-dynamic-image | image, personal |
data-companywide-youtube-player | video, everyone |
data-toolbar | The 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
| Written | What 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 data | Not read. The build warns, and an argument written after the spread is still read. |
| A variable passed where a plain call takes its arguments | Not read. The build warns, the same as for a spread. |
| A callable reached through a variable | Not read. Nothing warns. |
A usage in a package .deckrc.json does not name | Not read. Nothing warns. See Setup. |
Where a value genuinely is decided at runtime, silence the warning. See Silencing a warning.