#moobile

用 MoonBit 写一次 UI，跑在 Android / iOS / Web。

#1. 快速上手

#1.1 MoonBit 侧

# app/moon.mod
name = "you/myapp"

version = "0.1.0"

preferred_target = "js"

import {
  "XiLaiTL/moobile@0.2.2",
}

// app/moon.pkg
import {
  "XiLaiTL/moobile" @moobile,     // 库本体
  "XiLaiTL/moobile/style",        // 类型化样式（写视图的入口）
  "XiLaiTL/moobile/html",         // @html DSL
  "XiLaiTL/moobile/cmd",          // Cmd / Emit
  "XiLaiTL/moobile/sub",          // Sub（订阅：定时器、传感器…）
}

options(
  link: {
    "js": { "format": "esm", "exports": [ "app" ] },
  },
)

要用到的包就这五条。fork 住在 vendor/rabbita/，但使用者看不到那一层： 根上的 html/ cmd/ sub/ http/ 是转发包（由 tools/gen_forwarders.py 生成）， 所以 XiLaiTL/moobile/html 这种短路径照旧可用。

fn view(m : Model, emit : @cmd.Emit[Msg]) -> @html.Html {
  @html.div(
    attrs=@html.Attrs::build().styles(
      @style.Style::new().font_size(16.0).padding_horizontal(@style.px(12.0)),
    ),
    [ @html.button(on_click=emit(Bump), "+1") ],
  )
}

/// 应用入口：交出句柄表（start / snapshot / subscribe / element）。
pub fn app() -> @moobile.JsValue {
  @moobile.handlers(model=initial(), update~, view~)
}

#1.2 宿主侧（React Native / Expo）

// App.js —— 全部手写代码就这几行
import { mountApp } from 'moobile-host';
import { app } from './myapp.js';                    // MoonBit 编译产物
import { registry } from './registry.generated.js';  // npx moobile-host regen 生成

export default mountApp(app, { registry });

#1.3 跑起来

moon build --target js
cp _build/js/debug/build/<你的模块>/<你的模块>.js <Expo 工程>/myapp.js
cd <Expo 工程> && npx expo start --port 8081     # 浏览器打开 http://localhost:8081
# 真机/模拟器：adb reverse tcp:8081 tcp:8081 之后扫码或用 expo run:android

#2. 能力边界

#3. 工作原理

   你的 MoonBit 应用        Model / Msg / update / view   ← 与 rabbita 同款 TEA 写法
        │
        │  视图用 @html DSL；样式用 @style（类型化，不是 CSS 字符串）
        ▼
   rabbita 运行时（vendor fork）   VNode 树 + Cmd / Sub + 事件派发 + 异步 effect
        │
        │  moobile 的翻译层：① 标签表 ② 事件映射 ③ 样式 map → RN style
        ▼
   React 元素（React.createElement 的产物，不是 DOM 节点、也不是 HTML 字符串）
        │
        ├──► React Native ──────► Android / iOS 原生视图
        └──► react-native-web ──► 浏览器 DOM

1. 不实现渲染 —— 布局、排版、文本引擎交给 React / RN。
2. 只换挂载层 —— Cmd / Emit / 订阅 / 异步 effect 仍由 rabbita 自己的运行时执行。
3. 样式必须走类型化通道 —— RN 没有 CSS 类、也不吃 CSS 字符串。
4. 事件解码是可替换的策略 —— DOM 事件在 RN 上拿不到，所以解码点做成查表， 换来的是"不崩、可降级"，不是"载荷等价"。

#4. 例子、文档与贡献

#5. 许可证与第三方