Skip to content

v0.13.0

Compare
Choose a tag to compare
@ryansolid ryansolid released this 18 Oct 07:55
a8a2c93

Breaking Change - Removal of Explicit Binding "Parens" Syntax

The new heuristic for how bindings will be reactive will work as follows:

There are certain types of syntax that will never be reactive like function declarations, literal values.

// these bindings never need to be wrapped
<div onClick={() => setState({clicked: true})} name={"mydiv"} />

Similarly since reactivity requires access only function calls or property accesses can be reactive. So simple variables will never need to be wrapped

// also never needs to be wrapped
<div name={myName} maxlength={count * 2} />

So we can limit wrapping to only expressions that could be reactive like:

// wrap because they could be reactive
<div name={props.name} title={getTitle()} />

Also for Component props that take Components like fallback or children we will wrap any expression with a tag to allow deferred evaluation.

// these will be wrapped
<Show when={state.accepted} fallback={<Denied />}>
  <Accepted />
</Show>

What if you wish for these things to be static? Hoist the value access. Since normal variables aren't reactive just assign it to a variable. This is JSX so we have all the power of JavaScript at our side and do not need a special syntax.

const name = props.name;
// not wrapped as simple variable
<div name={name} />