Published
Edited
Jun 22, 2020
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
freedom = component => props => {
jsx.open`<${React.Fragment} />`;
component(props);
return jsx.close``;
}
Insert cell
USE_JSX_WRAP = true
Insert cell
App = freedom(({ content }) => {
jsx`<div>Header</div>`;

if (content !== '') {
// When in a loop we either need to do jsx.wrap`` which takes another function that
// should yield it's children
if (USE_JSX_WRAP === true) {
for (let char of content) {
jsx.wrap`<div
style=${{
backgroundColor: char > 'i' ? 'lightred' : 'lightblue'
}}
/>`(() => {
if (char !== 'a') {
jsx`<div>${char} = ${char.charCodeAt(0)}</div>`;
} else {
jsx`<div>${char} = A</div>`;
}
});
}
}

// Or we can use "bare" jsx.open`` en jsx.close
// Both ways of wrapping elements while in a loop should yield the same results
if (USE_JSX_WRAP === false) {
for (let char of content) {
jsx.open`<div
style=${{
backgroundColor: char > 'i' ? 'lightred' : 'lightblue'
}}
/>`;

if (char !== 'a') {
jsx`<div>${char} = ${char.charCodeAt(0)}</div>`;
} else {
jsx`<div>${char} = A</div>`;
}
jsx.close();
}
}
} else {
jsx`<div>NO CONTENT!</div>`;
}

jsx`<div>Footer</div>`;
})
Insert cell
viewof content = html`<input type="text" />`
Insert cell
render(this, jsx_stupid`<${App} content=${content} />`)
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more