What is the plan for dynamic elements?

The current strategy of instrumenting JSX with a babel plugin is really neat! I’m wondering what the plan is to work around the dynamism of JSX when it comes to elements determined at runtime, such as:

Conditional Elements

{someFlag && <Display 
  {/*What is the plan for working with me and being able to toggle someFlag?*/}
/>}

Lists of Elements

data.map((item) => <div {/*What about the plan here? */} />);

Is your plan to teach the editor about these sorts of syntax expressions and render an interface for displaying these sorts of “dynamic elements”? Alternatively, Blocks could provide <If> and <Map> components to be able to statically work with these sorts things?

[johno]

Good question!

For now, the strategy I’m thinking is to slowly teach the editor about common syntax expressions. Both dynamic and lists of elements would definitely fall into common!

With dynamic elements based on flags/ternaries I’m hoping to expose the element in the tree (or two elements for a ternary) with a toggle. Will mostly be a matter of locating the syntax at the root level and adding support for it in the blocks selection/editing of the canvas.

Lists are more interesting because we’ll need to search for this syntax and expose the list in some unified interface for editing the rendered component being mapped over. Interestingly we’ll get manipulating the mapped over element for free as a result of the UUID being used to apply props.

[ackvf]

Why bother with AST and not use control components?

Instead of this

{someFlag && <Display />}

{data.map((item) => <div />)}

{someOtherFlag
  ? <Yes />
  : <No />}

write this

<Branch condition={someFlag} truthy={<Display />} />
<List items={data} />
<Branch condition={someOtherFlag} truthy={<Yes />} falsy={<No />} />

The advantage is that these proprietary components can attach special interaction and editing possibilities.