Million Lint is in public beta →
Docs
Internals
block()
⚠️

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 immutable Hole values. These values are replaced with the actual values when the block() is called.

// 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>;
});
Virtualizationmount()