API Reference

This section documents the core APIs of Rasen.

Core Package

setReactiveRuntime

Sets the global reactive runtime. Must be called before mounting any components.

import { setReactiveRuntime } from '@rasenjs/core'
import { createVueRuntime } from '@rasenjs/reactive-vue'

setReactiveRuntime(createVueRuntime())

Learn more →

getReactiveRuntime

Returns the current reactive runtime. Throws if not set.

import { getReactiveRuntime } from '@rasenjs/core'

const runtime = getReactiveRuntime()

Types

// The core mount function type
type MountFunction<Host = unknown> = (host: Host) => (() => void) | undefined

// Component types
type SyncComponent<Host, Props> = (props: Props) => MountFunction<Host>
type AsyncComponent<Host, Props> = (
  props: Props
) => Promise<MountFunction<Host>>
type Component<Host, Props> =
  | SyncComponent<Host, Props>
  | AsyncComponent<Host, Props>

// Reactive value types
type PropValue<T> = T | Ref<T> | ReadonlyRef<T>

Learn more →

DOM Package

mount

Mounts a component to a DOM element.

import { mount } from '@rasenjs/dom'

const unmount = mount(component, document.getElementById('app'))

Element Components

All HTML elements are available as components:

import {
  div,
  span,
  button,
  input,
  a,
  img,
  p,
  h1,
  h2,
  h3,
  ul,
  ol,
  li,
  form,
  label,
  textarea,
  select,
  option,
  canvas,
  svg,
  section,
  article,
  header,
  footer,
  nav,
  main,
  aside
} from '@rasenjs/dom'

element

Generic element component for any tag:

import { element } from '@rasenjs/dom'

element({
  tag: 'custom-element',
  attrs: { 'data-id': '123' }
})

Canvas 2D Package

Components

import { rect, circle, line, text } from '@rasenjs/canvas-2d'

RenderContext

Manages canvas rendering and batched updates:

import { RenderContext } from '@rasenjs/canvas-2d'

React Native Package

registerApp

Registers the app with React Native:

import { registerApp } from '@rasenjs/react-native'

registerApp('MyApp', App)

Components

import {
  view,
  text,
  image,
  textInput,
  touchableOpacity,
  scrollView
} from '@rasenjs/react-native'

HTML Package

renderToString

Renders components to HTML string:

import { renderToString } from '@rasenjs/html'

const html = renderToString(component)

Components

import {
  html,
  head,
  body,
  div,
  span,
  p,
  h1,
  h2,
  h3,
  ul,
  ol,
  li,
  a,
  img
} from '@rasenjs/html'

Reactive Adapters

Vue Adapter

import { createVueRuntime } from '@rasenjs/reactive-vue'

setReactiveRuntime(createVueRuntime())

Signals Adapter

import { createSignalsRuntime, ref, computed } from '@rasenjs/reactive-signals'

setReactiveRuntime(createSignalsRuntime())