Getting Started

Regor binds runtime behavior directly to DOM you already have, or to template content you provide at mount time.

This means you can start from static HTML, mount only where needed, and scale to multiple independent runtime islands on the same page.

Install

yarn add regor

npm install regor

Quick Start (TypeScript)

import { createApp, html, ref } from 'regor'

const app = createApp(
  {
    count: ref(0),
    inc() {
      this.count(this.count() + 1)
    },
  },
  {
    element: document.querySelector('#app')!,
    template: html`
      <section>
        <button @click="inc">Increment</button>
        <p>Count: <span r-text="count"></span></p>
      </section>
    `,
  },
)

// optional teardown
// app.unbind()
// app.unmount()

CDN ESM

<div id="app"></div>
<script type="module">
  import {
    createApp,
    ref,
  } from 'https://unpkg.com/regor/dist/regor.es2022.esm.prod.js'

  createApp(
    {
      message: ref('Hello from CDN'),
    },
    {
      element: document.querySelector('#app'),
      template: '<h1 r-text="message"></h1>',
    },
  )
</script>

Core Mount Modes

Bind existing markup in place:

createApp({ userName: ref('Ada') }, { selector: '#profile-island' })

Replace root content from template string:

createApp(
  { title: ref('Home') },
  {
    selector: '#app',
    template: '<h1 r-text="title"></h1>',
  },
)

Replace root content from JSON template:

createApp(
  { label: ref('Save') },
  {
    element: document.querySelector('#app')!,
    json: { t: 'button', a: { 'r-text': 'label' } },
  },
)

Reactivity Basics

ref for values and deep object conversion:

import { ref } from 'regor'

const count = ref(0)
count(1)
console.log(count())

sref for shallow object state:

import { sref } from 'regor'

const user = sref({ name: 'Ada', age: 30 })
user().name = 'Grace'
user({ ...user(), age: 31 })

Inside templates, refs are auto-unwrapped, so use count, user.name, not count() or .value.

Component Quick Example

import { createApp, defineComponent, ref } from 'regor'

const UserCard = defineComponent('<article><h3 r-text="name"></h3></article>', {
  props: ['name'],
  context: (head) => ({
    name: head.props.name ?? 'Anonymous',
  }),
})

createApp({
  components: { UserCard },
  activeName: ref('Ada Lovelace'),
})

<UserCard :name="activeName"></UserCard>

Template Syntax You Will Use Daily

r-text="expr" for text.
:attr="expr" or r-bind:attr="expr" for attributes.
.prop="expr" or :prop.prop="expr" for DOM properties.
@event="handler" for events.
r-if / r-else-if / r-else for conditional branches.
r-for="item, #i in items" for loops.
:context="{ ... }" / r-context="{ ... }" for object-style component input.
{{ expr }} and [[ expr ]] interpolation (enabled by default).