⚠️
This function is part of the internal API. You should only be using this if you are making your own framework.
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 that 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: anotherBlock({ crewmate: true }), // ✅
six: { imposter: true }, // ❌
seven: new Date(), // ❌
});Top level 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 called. The Hole values are immutable and cannot be derived 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); /* ❌ (no holes inside listeners) */
}}
>
{props.count + 1 /* ❌ */}
{props.foo.toString() /* ❌ */}
</button>
</div>;
});