A thin framework for running MoonBit components as Astro islands

astro

moonbit

island

framework

Download zip

Author

SouichiroTsujimoto

Version

0.1.6

License

MIT

Repository

github.com/SouichiroTsujimoto/astrobit

Last updated

6 months ago

Downloads

Dependencies

mizchi/signals0.6.4

#astrobit

A thin framework for running MoonBit components as Astro islands.

Write your UI logic in MoonBit, use it directly in .astro files — SSR and client-side hydration included.

#Demo

See the live demo at: https://astrobit-sample.vercel.app/

#Requirements

Astro 6+

[!NOTE] The MoonBit toolchain (moon CLI) is required, but astrobit build will install it automatically if not found.

#Installation

npm install astrobit
// or
yarn add astrobit

Add the integration to your astro.config.mjs:

import { defineConfig } from 'astro/config'
import astrobit from 'astrobit' // here

export default defineConfig({
  integrations: [
    astrobit() // and here
  ],
})

#Project Setup

Place a moon.mod.json at the root of your Astro project:

{
  "name": "yourname/your-project",
  "deps": {
    "SouichiroTsujimoto/astrobit": "0.1.6",
    "mizchi/signals": "0.6.4"
  },
  "preferred-target": "js"
}

Then install the MoonBit dependencies:

moon install

#Writing a Component

Each component lives in its own directory with a moon.pkg file.

src/components/counter/moon.pkg

import {
  "SouichiroTsujimoto/astrobit" @a,
  "SouichiroTsujimoto/astrobit/dom",
  "mizchi/signals",
}

options(
  link: { "js": { "exports": [ "mount", "render", "hydrate" ], "format": "esm" } },
)

src/components/counter/counter.mbt

fn counter(props : @dom.Props) -> @a.Node {
  let initial = props.get_int("initial")
  let count = @signals.signal(initial)
  @a.div([
    @a.p(@a.dyn_text(fn() { "Count: " + count.get().to_string() })),
    @a.button("-") |> @a.on_click(fn(_) { count.update(fn(n) { n - 1 }) }),
    @a.button("+") |> @a.on_click(fn(_) { count.update(fn(n) { n + 1 }) }),
  ])
}

pub fn mount(element : @dom.Element, props : @dom.Props) -> Unit {
  @a.mount_dom(element, counter(props))
}

pub fn render(props : @dom.Props) -> String {
  @a.render_to_html(counter(props))
}

pub fn hydrate(element : @dom.Element, props : @dom.Props) -> Unit {
  @a.hydrate_dom(element, counter(props))
}

Props are received as @dom.Props and extracted with typed accessors:

props.get_int("key")               // Int (default: 0)
props.get_string("key")            // String (default: "")
props.get_bool("key")              // Bool (default: false)

props.get_int("key", default=10)   // with explicit default

#Using in Astro

Import the .mbt file directly. The Vite plugin handles the rest.

---
import Counter from '../components/counter/counter.mbt'
---

<!-- client:only — mount on the client, no SSR -->
<Counter client:only="astrobit" initial={0} />

<!-- client:load — SSR + hydration -->
<Counter client:load initial={0} />

TypeScript types for *.mbt imports are injected automatically — no manual env.d.ts setup required.

#Build

Add astrobit build as your build script in package.json:

{
  "scripts": {
    "build": "astrobit build"
  }
}

astrobit build installs the moon CLI automatically if it's not available, then runs moon build followed by astro build. No manual toolchain setup is required for deployment (e.g. Vercel).

For local development, build the MoonBit sources first:

moon build

Then start Astro:

npm run dev

HMR is supported — saving a .mbt file triggers an automatic rebuild and page reload.

#How It Works

SSR: render(props) returns an HTML string, rendered server-side by Astro.
Hydration (client:load): hydrate(element, props) attaches signals and event listeners to the existing DOM without re-rendering.
Mount (client:only): mount(element, props) builds the DOM from scratch on the client.
Reactivity: Powered by mizchi/signals.

#License

MIT

ToArrayNode

source

pub(open) trait ToArrayNode {
  to_array_node(Self) -> Array[Node]
}

impl ToArrayNode for String

impl ToArrayNode for Array[Node]

Node

source

pub(all) enum Node {
  Element(String, Map[String, String], Array[Node])
  Text(String)
  Empty
  RawHtml(String)
  DynText(() -> String)
  Dynamic(() -> Node)
  WithEvents(Node, Array[(String, (@SouichiroTsujimoto/astrobit/dom.Event
Event) -> Unit)])
  WithDynAttrs(Node, Array[(String, () -> String?)])
}

impl ToArrayNode for Node

a

source

fn[C : ToArrayNode] a(attrs? : Map[String, String], children : C) -> Node

article

source

fn[C : ToArrayNode] article(attrs? : Map[String, String], children : C) -> Node

body

source

fn[C : ToArrayNode] body(attrs? : Map[String, String], children : C) -> Node

br

source

fn br(attrs? : Map[String, String]) -> Node

button

source

fn[C : ToArrayNode] button(attrs? : Map[String, String], children : C) -> Node

code

source

fn[C : ToArrayNode] code(attrs? : Map[String, String], children : C) -> Node

div

source

fn[C : ToArrayNode] div(attrs? : Map[String, String], children : C) -> Node

dyn

source

fn dyn(f : () -> Node) -> Node

dyn_attr

source

fn dyn_attr(node : Node, name : String, f : () -> String) -> Node

dyn_bool_attr

source

fn dyn_bool_attr(node : Node, name : String, f : () -> Bool) -> Node

dyn_text

source

fn dyn_text(f : () -> String) -> Node

footer

source

fn[C : ToArrayNode] footer(attrs? : Map[String, String], children : C) -> Node

form

source

fn[C : ToArrayNode] form(attrs? : Map[String, String], children : C) -> Node

h1

source

fn[C : ToArrayNode] h1(attrs? : Map[String, String], children : C) -> Node

h2

source

fn[C : ToArrayNode] h2(attrs? : Map[String, String], children : C) -> Node

h3

source

fn[C : ToArrayNode] h3(attrs? : Map[String, String], children : C) -> Node

h4

source

fn[C : ToArrayNode] h4(attrs? : Map[String, String], children : C) -> Node

h5

source

fn[C : ToArrayNode] h5(attrs? : Map[String, String], children : C) -> Node

head

source

fn[C : ToArrayNode] head(attrs? : Map[String, String], children : C) -> Node

header

source

fn[C : ToArrayNode] header(attrs? : Map[String, String], children : C) -> Node

hr

source

fn hr(attrs? : Map[String, String]) -> Node

html

source

fn[C : ToArrayNode] html(attrs? : Map[String, String], children : C) -> Node

hydrate_dom

source

fn hydrate_dom(parent : @SouichiroTsujimoto/astrobit/dom.Element
Element, node : Node) -> Unit

img

source

fn img(attrs? : Map[String, String]) -> Node

input

source

fn input(attrs? : Map[String, String]) -> Node

label

source

fn[C : ToArrayNode] label(attrs? : Map[String, String], children : C) -> Node

li

source

fn[C : ToArrayNode] li(attrs? : Map[String, String], children : C) -> Node

main_tag

source

fn[C : ToArrayNode] main_tag(attrs? : Map[String, String], children : C) -> Node

mount_dom

source

fn mount_dom(parent : @SouichiroTsujimoto/astrobit/dom.Element
Element, node : Node) -> Unit

nav

source

fn[C : ToArrayNode] nav(attrs? : Map[String, String], children : C) -> Node

ol

source

fn[C : ToArrayNode] ol(attrs? : Map[String, String], children : C) -> Node

on

source

fn on(node : Node, event : String, handler : (@SouichiroTsujimoto/astrobit/dom.Event
Event) -> Unit) -> Node

on_click

source

fn on_click(node : Node, handler : (@SouichiroTsujimoto/astrobit/dom.Event
Event) -> Unit) -> Node

on_input

source

fn on_input(node : Node, handler : (@SouichiroTsujimoto/astrobit/dom.Event
Event) -> Unit) -> Node

on_submit

source

fn on_submit(node : Node, handler : (@SouichiroTsujimoto/astrobit/dom.Event
Event) -> Unit) -> Node

option

source

fn[C : ToArrayNode] option(attrs? : Map[String, String], children : C) -> Node

p

source

fn[C : ToArrayNode] p(attrs? : Map[String, String], children : C) -> Node

pre

source

fn[C : ToArrayNode] pre(attrs? : Map[String, String], children : C) -> Node

raw_html

source

fn raw_html(s : String) -> Node

render_to_html

source

fn render_to_html(node : Node) -> String

section

source

fn[C : ToArrayNode] section(attrs? : Map[String, String], children : C) -> Node

select

source

fn[C : ToArrayNode] select(attrs? : Map[String, String], children : C) -> Node

span

source

fn[C : ToArrayNode] span(attrs? : Map[String, String], children : C) -> Node

tag

source

fn[C : ToArrayNode] tag(tag : String, attrs? : Map[String, String], children : C) -> Node

textarea

source

fn[C : ToArrayNode] textarea(attrs? : Map[String, String], children : C) -> Node

title

source

fn[C : ToArrayNode] title(attrs? : Map[String, String], children : C) -> Node

ul

source

fn[C : ToArrayNode] ul(attrs? : Map[String, String], children : C) -> Node

Source Files

Site source Report issue Packages Build queue Skills Statistics

astrobit

#astrobit

#Demo

#Requirements

#Installation

#Project Setup

#Writing a Component

#Using in Astro

#Build

#How It Works

#License

#ToArrayNode

#Node

#a

#article

#body

#br

#button

#code

#div

#dyn

#dyn_attr

#dyn_bool_attr

#dyn_text

#footer

#form

#h1

#h2

#h3

#h4

#h5

#head

#header

#hr

#html

#hydrate_dom

#img

#input

#label

#li

#main_tag

#meta

#mount_dom

#nav

#ol

#on

#on_click

#on_input

#on_submit

#option

#p

#pre

#raw_html

#render_to_html

#section

#select

#span

#tag

#textarea

#title

#ul

Source Files

ToArrayNode

Node

a

article

body

br

button

code

div

dyn

dyn_attr

dyn_bool_attr

dyn_text

footer

form

h1

h2

h3

h4

h5

head

header

hr

html

hydrate_dom

img

input

label

li

main_tag

meta

mount_dom

nav

ol

on

on_click

on_input

on_submit

option

p

pre

raw_html

render_to_html

section

select

span

tag

textarea

title

ul