#Minimoon

#Project status

#What you can build

• Stateful pages and reusable components with typed events, local state and navigation.
• HTTP-backed applications with typed requests and optional application-owned shared state.
• Native, touch-first interfaces using the optional Minimoon UI library; the starter needs only core.

#Before you start

#Create your first app

moon install lampclaw/minimoon/cmd/minimoon
minimoon --version
minimoon init my-app
cd my-app
moon update
bun install
minimoon build .
minimoon verify . --candidate

#Make your first change

#What page code looks like

pub fn program() -> @minimoon.Page {
  @minimoon.page(
    id="home",
    route=@minimoon.route("pages/home/home"),
    title="Home",
    build=_ => {
      let (count, update_count) = @minimoon.create_variable(0)
      count.view(value => @minimoon.div([
        @minimoon.h1(value.to_string()),
        @minimoon.button(
          on_tap=update_count(current => current + 1),
          event_key="increment",
          "+1",
        ),
      ]))
    },
  )
}

#Learn next

1. Pages, state and components
2. Typed HTTP requests
3. Navigation and layout
4. Application-owned shared state
5. Optional Minimoon UI

#Examples

#Boundaries and next steps

#Contributing and internals

#Minimoon authoring contract

#Page and component composition

///|
#warnings("-unused_value")
fn readme_composition_page() -> Page {
  page(
    id="readme_composition",
    route=route("pages/readme_composition/readme_composition"),
    title="Composition",
    build=_ => {
      let (count, update_count) = create_variable(0)
      count.view(value => {
        div([
          h1(value.to_string()),
          button(
            on_tap=update_count(current => current + 1),
            event_key="increment",
            "+1",
          ),
        ])
      })
    },
  )
}

#Elm-style convenience

///|
priv enum ReadmePageMsg {
  ReadmeIncrement
  ReadmeNameChanged(String)
}

///|
#warnings("-unused_value")
fn readme_page() -> Page {
  elmish_page(
    id="readme",
    route=route("pages/readme/readme"),
    title="Readme",
    model=(0, "MoonBit"),
    update=(model, message, _emit) => {
      match message {
        ReadmeIncrement => no_cmd((model.0 + 1, model.1))
        ReadmeNameChanged(name) => with_cmd((model.0, name), none)
      }
    },
    view=(model, emit) => {
      div([
        button(on_tap=emit(ReadmeIncrement), model.0.to_string()),
        input(value=model.1, on_input=value => emit(ReadmeNameChanged(value))),
      ])
    },
  )
}

#HTTP requests

///|
#warnings("-unused_value")
fn readme_request(resolve : Emit[Result[RequestResult, HostError]]) -> Cmd {
  request(
    "https://echo.apifox.com/post",
    resolve,
    http_method=Post,
    query=[query("tag", "one"), query("tag", "two")],
    headers={ "X-Minimoon-Test": "public-smoke" },
    body=JsonBody(Json::object({ "message": Json::string("测试") })),
    timeout_ms=15000,
  )
}

#Optional application state

///|
priv struct ReadmeAppDeps {
  count : Shared[Int]
  change_count : Emit[Int]
}

///|
#warnings("-unused_value")
fn readme_app() -> App[ReadmeAppDeps] {
  app(build=context => {
    let (count, change_count) = context.create_pure_state(0, update=(
      count,
      delta : Int,
    ) => count + delta)
    { count, change_count, }
  })
}

///|
#warnings("-unused_value")
fn readme_shared_page(deps : ReadmeAppDeps) -> Page {
  page(
    id="readme_shared",
    route=route("pages/readme-shared/readme-shared"),
    title="Shared state",
    build=context => {
      context
      .bind(deps.count)
      .view(count => {
        button(
          on_tap=(deps.change_count)(1),
          event_key="readme/shared/increment",
          "Shared count: " + count.to_string(),
        )
      })
    },
  )
}

#Local state and resources

///|
priv enum ReadmeLocalMsg {
  ReadmeAdd
}

///|
fn readme_local_authoring(input_value : Val[Int]) -> Val[Node] {
  let (pure, pure_emit) = create_pure_state(0, update=(
    model,
    _message : ReadmeLocalMsg,
  ) => model + 1)
  let (state, state_emit) = create_state(0, update=(
    model,
    _message : ReadmeLocalMsg,
    _emit,
  ) => with_cmds(model + 1, []))
  let (initialized, initialized_emit) = create_state_with_init(
    init=emit => (0, emit(ReadmeAdd)),
    update=(model, _message : ReadmeLocalMsg, _emit) => no_cmd(model + 1),
  )
  let (input_state, input_emit) = create_state_with_input(
    input=input_value,
    init=(_emit, input) => no_cmd(input),
    update=(model, input, _message : ReadmeLocalMsg, _emit) => {
      no_cmd(model + input)
    },
  )
  let (flag, set_flag) = create_variable(false)
  let resource = create_resource(done => done(Ok("ready")))
  Val::view6(pure, state, initialized, input_state, flag, resource, (
    a,
    b,
    c,
    d,
    enabled,
    status,
  ) => {
    let status_text = match status {
      Pending => "pending"
      Loaded(value) => value
      Failed(_) => "failed"
    }
    div([
      button(on_tap=pure_emit(ReadmeAdd), a.to_string()),
      button(on_tap=state_emit(ReadmeAdd), b.to_string()),
      button(on_tap=initialized_emit(ReadmeAdd), c.to_string()),
      button(on_tap=input_emit(ReadmeAdd), d.to_string()),
      button(on_tap=set_flag(value => !value), enabled.to_string()),
      p(status_text),
    ])
  })
}

///|
#warnings("-unused_value")
fn readme_local_page() -> Page {
  page(
    id="readme_local",
    route=route("pages/readme-local/readme-local"),
    title="Readme local",
    build=_ => readme_local_authoring(Val::constant(2)),
  )
}