Hyperscript Cookbook

Below are several examples that might be helpful if you're familiar with Angular templates and are moving to JSX or hyperscrpt (AKA Javascript.)

Hyperscript imlementations vary, but are fairly similar for the most part. In the examples below, the function h() represents the hyperscript function. (For example React's React.createElement() or Mithril's m().)

Note that when using hyperscript with React, the second parameter must always be the element attributes or component props (or null if none.) With Mithril, this parameter can be omitted. Examples below follow Mithril's convention.

String Interpolation

Angular:

<p>Hello, {{user.firstName}}</p>
<p>1 + 1 = {{1 + 1}}</p>

JSX:

<p>Hello, {user.firstName}</p>
<p>1 + 1 = {1 + 1}</p>

Hyperscript:

h('p', `Hello, ${user.firstName}`),
h('p', `1 + 1 = ${1 + 1}`)

Property Binding

Angular:

<img [src]="heroImageUrl">
<button [disabled]="isDisabled">Button Text</button>

JSX:

<img src={heroImageUrl}>
<button disabled={isDisabled}>Button Text</button>

Hyperscript:

h('img', {src: heroImageUrl}),
h('button', {disabled: isDisabled}, 'Button Text')

Classes

Angular:

<div class="article">Article</div>

JSX:

<div class="article">Article</div>

Hyperscript:

h('.article', 'Article')

Class Binding

Angular:

<div [class]="article">Article</div>

JSX:

<div class={article}>Article</div>

Hyperscript:

h('div', {class: article}, 'Article')

Note that with React you must use className. Mithril will accept class or className.

Inline Style Binding

Angular:

<div [style.color]="isSpecial ? 'red' : 'green'">The Hero</div>

JSX:

<div style={color: isSpecial ? 'red' : 'green'}>The Hero</div>

Hyperscript:

h('div', {style: {color: isSpecial ? 'red' : 'green'}}, 'The Hero')

Statements

Angular:

<button (click)="deleteHero()">Delete hero</button>

JSX:

<button onclick={deleteHero()}>Delete hero</button>

Hyperscript:

h('button', {onclick(){deleteHero()}}, 'Delete hero')

Iteration

Angular:

<div *ngFor="let hero of heroes">{{hero.name}}</div>

JSX:

heroes.map(hero => <div>{hero.name}</div>)

Hyperscript:

heroes.map(hero => h('div', hero.name))

Iteration with index

Angular:

<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.name}}</div>

JSX:

heroes.map((hero, i) => <div>{i + 1} - {hero.name}</div>)

Hyperscript:

heroes.map((hero, i) => h('div', `${i + 1} - ${hero.name}`))

Components

Angular:

<myComponent [name]="Zeke"></myComponent>

JSX:

<myComponent name="Zeke"/>

Hyperscript:

h(myComponent, {name: 'Zeke'})

Nesting Components

Angular:

<div>
    <myComponent [name]="Zeke">
        <myChildComponent/>
    </myComponent>
</div>

JSX:

<div>
    <myComponent name="Zeke">
        <myChildComponent/>
    </myComponent>
</div>

Hyperscript:

h('div',
    h(myComponent, {name: 'Zeke'},
        h(myChildComponent)
    )
)

if

Angular:

<div *ngIf="isActive">Is active</div>

JSX:

isActive && <div>Is active</div>

Hyperscript:

isActive && h('div', 'Is active')

if ... else

Angular:

(See swtich below.)

JSX:

<div>{
    isAlive
    ? <p class="green">The hero is alive.</p>
    : <p class="red">The hero is dead.</p>
}</div>

Hyperscript:

h('div', isAlive
    ? h('p.green', 'The hero is alive.')
    : h('p.red', 'The hero is dead.')
)

switch

Angular:

<div [ngSwitch]="hero.emotion">
    <happy-hero *ngSwitchCase="'happy'" [hero]="hero"></happy-hero>
    <sad-hero *ngSwitchCase="'sad'" [hero]="hero"></sad-hero>
    <confused-hero *ngSwitchCase="'confused'" [hero]="hero"></confused-hero>
    <unknown-hero *ngSwitchDefault [hero]="hero"></unknown-hero>
</div>

JSX:

<div>{
    hero.emotion === 'happy' ? <happyHero hero={hero}/>
    : hero.emotion === 'sad' ? <sadHero hero={hero}/>
    : hero.emotion === 'confused' ? <confusedHero hero={hero}/>
    : <unknownHero hero={hero}/>
}</div>

Hyperscript:

h('div',
    hero.emotion === 'happy' ? h(happyHero, {hero})
    : hero.emotion === 'sad' ? h(sadHero, {hero})
    : hero.emotion === 'confused' ? h(confusedHero, {hero})
    : h(unknownHero, {hero})
)

null object testing

Angular:

<p>The hero's name is {{hero?.name}}</p>

JSX:

<p>The hero's name is {hero ? hero.name : ''}</p>

Hyperscript:

h('p', `The hero's name is ${hero ? hero.name : ''}`)