Using CanvasEngine Without the Compiler

CanvasEngine provides a powerful template syntax that gets compiled to JavaScript functions. However, you can also use CanvasEngine directly without the compiler by using the core functions: h, loop, and cond from the canvasengine package.

This approach gives you more control and can be useful for:

• Dynamic template generation
• Integration with existing build systems
• Learning how the compiler works under the hood
• Performance-critical applications where you want to avoid compilation overhead

Core Functions

h(component, props?, children?)

Creates a component instance. This is the equivalent of JSX elements.

loop(iterable, callback)

Renders a list of items. This is the equivalent of @for loops.

cond(condition, callback)

Conditionally renders content. This is the equivalent of @if statements.

Components

Basic Component

Instead of writing:

<Canvas />

Use:

h('Canvas')

Component with Properties

Instead of writing:

<Canvas width="800" height="600" />

Use:

h('Canvas', { width: '800', height: '600' })

Dynamic Properties

Instead of writing:

<Canvas width={screenWidth} height={screenHeight} />

Use:

h('Canvas', { width: screenWidth, height: screenHeight })

Computed Properties

For reactive expressions, instead of writing:

<Canvas width={x * 2} />

Use:

h('Canvas', { width: computed(() => x() * 2) })

Complex Computed Properties

For multiple reactive variables:

<Canvas width={x * 2 * y} />

Use:

h('Canvas', { width: computed(() => x() * 2 * y()) })

Object Properties

Instead of writing:

<Sprite sheet={{
    definition,
    playing: "stand",
    params: {
        direction: "right"
    },
    onFinish
}} />

Use:

h('Sprite', { 
  sheet: { 
    definition, 
    playing: "stand", 
    params: { 
      direction: "right" 
    }, 
    onFinish 
  } 
})

Array Properties

Instead of writing:

<Canvas positions={[x, 20]} />

Use:

h('Canvas', { positions: computed(() => [x(), 20]) })

Event Handlers

Instead of writing:

<Sprite click={handleClick} />

Use:

h('Sprite', { click: handleClick })

Inline Event Handlers

Instead of writing:

<Sprite click={() => console.log('clicked')} />

Use:

h('Sprite', { click: () => console.log('clicked') })

Spread Operator

Instead of writing:

<Canvas ...props />

Use:

h('Canvas', props)

Component as Property

Instead of writing:

<Canvas child={<Sprite />} />

Use:

h('Canvas', { child: h('Sprite') })

Function Returning Component

Instead of writing:

<Canvas child={() => <Sprite />} />

Use:

h('Canvas', { child: () => h('Sprite') })

Children

Single Child

Instead of writing:

<Canvas>
    <Sprite />
</Canvas>

Use:

h('Canvas', null, h('Sprite'))

Multiple Children

Instead of writing:

<Canvas>
    <Sprite />
    <Text />
</Canvas>

Use:

h('Canvas', null, [
    h('Sprite'),
    h('Text')
])

Loops

Basic Loop

Instead of writing:

@for (sprite of sprites) {
    <Sprite />
}

Use:

loop(sprites, sprite => h('Sprite'))

Loop with Properties

Instead of writing:

@for (sprite of sprites) {
    <Sprite x={sprite.x} y={sprite.y} />
}

Use:

loop(sprites, sprite => h('Sprite', { x: sprite.x, y: sprite.y }))

Loop with Index

Instead of writing:

@for ((sprite, index) of sprites) {
    <Sprite key={index} />
}

Use:

loop(sprites, (sprite, index) => h('Sprite', { key: index }))

Loop with Object Property

Instead of writing:

@for (sprite of sprites.items) {
    <Sprite />
}

Use:

loop(sprites.items, sprite => h('Sprite'))

Loop with Function Call

Instead of writing:

@for (sprite of getSprites()) {
    <Sprite />
}

Use:

loop(getSprites(), sprite => h('Sprite'))

Nested Loops

Instead of writing:

@for (sprite of sprites) {
    @for (other of others) {
        <Sprite />
    }
}

Use:

loop(sprites, sprite => 
    loop(others, other => h('Sprite'))
)

Loop in Component

Instead of writing:

<Canvas>
    @for (sprite of sprites) {
        <Sprite />
    }
</Canvas>

Use:

h('Canvas', null, loop(sprites, sprite => h('Sprite')))

Conditions

Basic Condition

Instead of writing:

@if (sprite) {
    <Sprite />
}

Use:

cond(sprite, () => h('Sprite'))

Property-based Condition

Instead of writing:

@if (sprite.visible) {
    <Sprite />
}

Use:

cond(sprite.visible, () => h('Sprite'))

Function-based Condition

Instead of writing:

@if (isVisible()) {
    <Sprite />
}

Use:

cond(isVisible(), () => h('Sprite'))

Complex Conditions

Instead of writing:

@if (!sprite && other) {
    <Sprite />
}

Use:

cond(computed(() => !sprite() && other()), () => h('Sprite'))

Multiple Conditions

Instead of writing:

@if (sprite) {
    <Sprite />
}
@if (other) {
    <Text />
}

Use:

[
    cond(sprite, () => h('Sprite')),
    cond(other, () => h('Text'))
]

Nested Conditions

Instead of writing:

@if (sprite.visible) {
    @if (deep) {
        <Sprite />
    }
}

Use:

cond(sprite.visible, () => 
    cond(deep, () => h('Sprite'))
)

Condition with Multiple Elements

Instead of writing:

@if (sprite.visible) {
    <Sprite />
    <Text />
}

Use:

cond(sprite.visible, () => [
    h('Sprite'),
    h('Text')
])

Combining Loops and Conditions

Condition in Loop

Instead of writing:

<Canvas>
    @for (sprite of sprites) {
        @if (sprite.visible) {
            <Sprite />
        }
    }
</Canvas>

Use:

h('Canvas', null, 
    loop(sprites, sprite => 
        cond(sprite.visible, () => h('Sprite'))
    )
)

Multiple Loops

Instead of writing:

<Canvas>
    @for (sprite of sprites) {
        <Sprite />
    }
    @for (other of others) {
        <Text />
    }
</Canvas>

Use:

h('Canvas', null, [
    loop(sprites, sprite => h('Sprite')),
    loop(others, other => h('Text'))
])

Complete Example

Here's a complete example showing how to build a complex component without the compiler:

import { h, loop, cond, computed } from 'canvasengine';

function GameScene({ sprites, enemies, showUI }) {
    return h('Canvas', { width: 800, height: 600 }, [
        // Background
        h('Sprite', { texture: 'background' }),
        
        // Player sprites
        loop(sprites, sprite => 
            cond(sprite.visible, () => 
                h('Sprite', {
                    x: sprite.x,
                    y: sprite.y,
                    texture: sprite.texture,
                    click: () => sprite.onClick()
                })
            )
        ),
        
        // Enemies
        loop(enemies, (enemy, index) => 
            h('Sprite', {
                key: index,
                x: computed(() => enemy.x() + 10),
                y: computed(() => enemy.y() + 10),
                texture: enemy.texture,
                tint: enemy.isHit ? 0xff0000 : 0xffffff
            })
        ),
        
        // UI overlay
        cond(showUI, () => 
            h('Container', null, [
                h('Text', { text: 'Score: 100', x: 10, y: 10 }),
                h('Text', { text: 'Lives: 3', x: 10, y: 30 })
            ])
        )
    ]);
}

This approach gives you the full power of CanvasEngine while maintaining complete control over your component structure and logic.