Variable Naming

[ije]

Alef Component matches variable names to specify some features.

Props

Any variable starts with $ will be treated as a prop from parent component.

const $name: string = 'Alex'
const $age: number = 18

<p>{$name}: {$age}</p>

$children

The specific prop $children is reference to the solt node from parent component.

const $children: Node = null

<div>{$children}</div>

Ref

Any variable starts with _ will be treated as a ref that will not update the view when it changed.

let _name: string = 'World'

// click will NOT update view
<p onClick={() => { _name = '世界' }}>Hello {_name}!</p>

[shadowtime2000]

@ije For the Ref example you have it resetting a const variable, which will basically break. Maybe this could be the Prop<T> type:

type Prop<T> = undefined | T

[ije]

@shadowtime2000 make sense, but people may want to set a default value when the prop or context is undefined, i prefer using <string | null> if you don't want an initial value:

let name: Prop<string | null> = null

[shadowtime2000]

I am a little confused, would this make the compiler recognize what the value is, memo, context, ref, etc based on their types, basically forcing usage of some static type checker?

[ije]

@shadowtime2000 yes, AlefType<T> will tell compiler the variable whether it is a reactive role explicitly.

[ije]