RegorApp

Mount an independent browser app from a TypeScript file colocated with its MDX page.

RegorApp

View source · API reference

A focused browser app

The app owns a small review counter. Its interface, template, context and registration are all explicit in the source tab.

<RegorApp id="regor-app-demo" src="./playground.ts"/>
import {
  defineButtonComponents,
  defineFlexComponents,
  defineFormComponents,
} from '@purestack/ts-components'

import { createApp, defineComponent, html, type Ref, ref } from 'regor'

export interface RegorAppExample {
  completed: Ref<number>
  addTask: () => void
  reset: () => void
}

const regorAppExampleTemplate = html`<Flex direction="column">
  <FormStatus>{{ completed }} review tasks completed</FormStatus>
  <Flex wrap="true">
    <Btn tone="accent" @click="addTask">Complete a task</Btn>
    <Btn variant="outline" @click="reset">Reset review</Btn>
  </Flex>
</Flex>`

function createRegorAppExample(): RegorAppExample {
  const completed = ref(0)
  return {
    completed,
    addTask: () => completed(completed() + 1),
    reset: () => completed(0),
  }
}

const component = defineComponent<RegorAppExample>(regorAppExampleTemplate, {
  context: createRegorAppExample,
})

createApp(
  {
    components: {
      RegorAppExample: component,

      ...defineFlexComponents(),
      ...defineButtonComponents(),
      ...defineFormComponents(),
    },
  },
  { selector: 'app#regor-app-demo', template: html`<RegorAppExample />` },
)

Behavior and accessibility

RegorApp renders an app mount element and a module entry script. Give the mount a unique native id and use the matching selector in createApp. Source resolution is automatic; sourceRelPath is only an override. Register the component families and SVG icons your browser app uses.

API reference

RegorApp contract

src and sourceRelPath are component props. id is a native attribute on the app mount. The TypeScript entry point calls createApp explicitly.

src

string
Default
required

Browser entry point. A relative path resolves from the current MDX page. SSG records and bundles local scripts.

sourceRelPath

string
Default
detected from the current page

Optional source-resolution override. Omit it for ordinary colocated MDX and TypeScript files.

Composition

No content slot. RegorApp uses PageScript internally. Available in SSG’s standard component registration; browser code imports createApp, defineComponent and html from Regor.