astrobit 0.1.1 → 0.1.3

package/README.md

@@ -0,0 +1,146 @@
+# astrobit
+
+A thin framework for running [MoonBit](https://www.moonbitlang.com/) components as [Astro](https://astro.build/) islands.
+
+Write your UI logic in MoonBit, use it directly in `.astro` files — SSR and client-side hydration included.
+
+## Requirements
+
+- [Astro](https://astro.build/) 6+
+- [MoonBit toolchain](https://www.moonbitlang.com/download/) (`moon` CLI)
+
+## Installation
+
+```sh
+npm install astrobit
+```
+
+Add the integration to your `astro.config.mjs`:
+
+```js
+import { defineConfig } from 'astro/config'
+import astrobit from 'astrobit'
+
+export default defineConfig({
+  integrations: [astrobit()],
+})
+```
+
+## Project Setup
+
+Place a `moon.mod.json` at the root of your Astro project:
+
+```json
+{
+  "name": "yourname/your-project",
+  "deps": {
+    "SouichiroTsujimoto/astrobit": "0.1.1",
+    "mizchi/signals": "0.6.4"
+  },
+  "preferred-target": "js"
+}
+```
+
+Then install the MoonBit dependencies:
+
+```sh
+moon install
+```
+
+## Writing a Component
+
+Each component lives in its own directory with a `moon.pkg` file.
+
+**`src/components/counter/moon.pkg`**
+```json
+{
+  "import": [
+    "SouichiroTsujimoto/astrobit" @a,
+    "SouichiroTsujimoto/astrobit/dom",
+    "mizchi/signals"
+  ],
+  "options": {
+    "link": { "js": { "exports": ["mount", "render", "hydrate"], "format": "esm" } }
+  }
+}
+```
+
+**`src/components/counter/counter.mbt`**
+```moonbit
+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:
+
+```moonbit
+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.
+
+```astro
+---
+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
+
+Before running the dev server, build the MoonBit sources:
+
+```sh
+moon build
+```
+
+Then start Astro:
+
+```sh
+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`](https://mooncakes.io/docs/#/mizchi/signals/).
+
+## License
+
+MIT

package/bin/astrobit.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+import { execSync, spawnSync } from "node:child_process";
+import { platform } from "node:os";
+
+const [, , command, ...args] = process.argv;
+
+function run(cmd, opts = {}) {
+  const result = spawnSync(cmd, { shell: true, stdio: "inherit", ...opts });
+  if (result.status !== 0) process.exit(result.status ?? 1);
+}
+
+function hasMoon() {
+  const result = spawnSync("moon --version", { shell: true, stdio: "pipe" });
+  return result.status === 0;
+}
+
+function installMoon() {
+  if (platform() === "win32") {
+    console.error(
+      "[astrobit] moon is not installed. Please install it manually: https://www.moonbitlang.com/download"
+    );
+    process.exit(1);
+  }
+  console.log("[astrobit] moon not found, installing...");
+  run("curl -fsSL https://cli.moonbitlang.com/install/unix.sh | bash");
+  // Add moon to PATH for subsequent commands in this process
+  process.env.PATH = `${process.env.HOME}/.moon/bin:${process.env.PATH}`;
+  try {
+    const version = execSync("moon --version", { env: process.env })
+      .toString()
+      .trim();
+    console.log(`[astrobit] moon installed: ${version}`);
+  } catch {
+    // ignore version display failure
+  }
+}
+
+if (command === "build") {
+  if (!hasMoon()) {
+    installMoon();
+  } else {
+    try {
+      const version = execSync("moon --version").toString().trim();
+      console.log(`[astrobit] moon already available: ${version}`);
+    } catch {
+      // ignore
+    }
+  }
+
+  console.log("[astrobit] running moon build...");
+  run("moon build");
+
+  console.log("[astrobit] running astro build...");
+  run("astro build");
+} else {
+  console.error(
+    `[astrobit] Unknown command: ${command ?? "(none)"}\n\nUsage:\n  astrobit build`
+  );
+  process.exit(1);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astrobit",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "main": "./dist/integration.js",
   "types": "./dist/integration.d.ts",
@@ -13,8 +13,12 @@
       "types": "./env.d.ts"
     }
   },
+  "bin": {
+    "astrobit": "./bin/astrobit.js"
+  },
   "files": [
     "dist",
+    "bin",
     "env.d.ts"
   ],
   "scripts": {