Entry points

REALM ships as ES modules. Load them from the CDN, and pin an exact version in production.

File Package export Purpose
https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js @realmorg/realm/auto Calls start() when it loads, and exports the API
https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/index.js @realmorg/realm The same API without starting. No side effects
https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/compiler.js @realmorg/realm/compiler Build-time helpers. See Compiler
https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css @realmorg/realm/realm.css The page stylesheet. See realm.css

realm.js and index.js share one runtime chunk, so a page that starts REALM with realm.js and a module that imports from index.js (same version) use the same stores and definitions.

Starting REALM

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>

Or start it yourself after other setup:

<script type="module">
  import { start } from "https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/index.js";

  start();
</script>

Exports

realm.js and index.js export the same names:

Export Signature Page
start start(): void start
importDefinitions importDefinitions(url: string): Promise<void> importDefinitions
defineComponent defineComponent(element: Element, base: string, inline: boolean): Promise<void> defineComponent
useState useState<T extends object>(initial: T): T useState
observe observe(fn: () => unknown): () => void observe. Not tied to an element when imported
defineStore defineStore<T extends object>(name: string, initial: T, options?: StoreOptions): T defineStore
prop { string, number, boolean, enum, date, array, object } prop
flush flush(): void flush
toRaw toRaw<T>(value: T): T toRaw
untrack untrack<T>(fn: () => T): T untrack

Types (for TypeScript users of the package): Context (the script helpers), StoreOptions and StorageAdapter.

Bare specifiers in component scripts

A component script that writes import { defineStore } from "@realmorg/realm" needs an import map. Point it at the file the page uses to start REALM:

<script type="importmap">
  { "imports": { "@realmorg/realm": "https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js" } }
</script>

Edit this page on GitHub · View as Markdown