A reactive rendering framework agnostic to both reactive systems and rendering targets.
import { setReactiveRuntime } from '@rasenjs/core'
import { createVueRuntime } from '@rasenjs/reactive-vue'
import { div, button, mount } from '@rasenjs/dom'
import { ref } from 'vue'
setReactiveRuntime(createVueRuntime())
const count = ref(0)
const Counter = () =>
div({
children: [
div({ textContent: () => `Count: ${count.value}` }),
button({
textContent: '+',
on: { click: () => count.value++ }
})
]
})
mount(Counter(), document.getElementById('app'))import { canvas } from '@rasenjs/dom'
import { rect, text } from '@rasenjs/canvas-2d'
import { ref } from 'vue'
const x = ref(50)
mount(
canvas({
width: 400,
height: 200,
children: [
rect({ x, y: 50, width: 100, height: 80, fill: '#4CAF50' }),
text({ text: () => `X: ${x.value}`, x: 10, y: 20 })
]
}),
document.getElementById('app')
)import { view, text, touchableOpacity } from '@rasenjs/react-native'
import { ref } from 'vue'
const count = ref(0)
view({
style: { flex: 1, justifyContent: 'center', alignItems: 'center' },
children: [
text({
style: { fontSize: 48 },
children: () => `${count.value}`
}),
touchableOpacity({
onPress: () => count.value++,
children: text({ children: '+' })
})
]
})import { renderToString, div, p, ul, li } from '@rasenjs/html'
const html = renderToString(
div(
{ class: 'container' },
p({ class: 'title' }, 'Hello from SSR!'),
ul({ class: 'list' }, li('Item 1'), li('Item 2'), li('Item 3'))
)
)Everything in Rasen comes down to one simple type:
type MountFunction<Host> = (host: Host) => (() => void) | undefinedA component receives a host, mounts itself, and returns a cleanup function. That's it.