block()
Syntax: block((props) => vnode)
Example: block((props) => <div>{props.foo}</div>)
The block function instantiates a Block (a stateless "component"). It accepts a function with a props object parameter and returns a VNode.
Rules of usage
props is an immutable object with primitive or Block values.
someBlock({
one: '1', // ✅
two: 1 + 1 // ✅
three: true // ✅
four: Date.now() // ✅
five: { imposter: true } // ❌
six: new Date() // ❌
});Values of props may not be interpolated with other values.
The props are filled with Hole values. These Hole values are replaced with the actual values when the Block is instantiated. The Hole values are immutable and cannot be interpolated with other values.
// Anatomy of a `Hole`
{
$: 'prop';
}
// Example:
block((props) => {
console.log(props.foo); // { $: 'foo' }
console.log(props.foo + ' bar'); // { $: 'foo' } + ' bar' ❌
return <div>{props.foo}</div>;
});The following are examples of this rule:
block((props) => {
const { favorite } = props.favorite; // ❌
<div className={props.className /* ✅ */}>
{props.hello /* ✅ */}
{Date.now() /* ✅ */}
<button
onClick={() => {
console.log(props.world); /* ❌ */
}}
>
{props.count + 1 /* ❌ */}
{props.foo.toString() /* ❌ */}
</button>
</div>;
});