This version of the module is deprecated: Use moonbit-community/rabbita instead.

README
U
Cmd
U
Command
V
application
V
attempt
V
batch
V
none
V
perform
V
startup
V
task

#Html

This package provides the helper functions to build Html.

Here are some design choices:

Guide Users with Type Definitions
This package defines specific types for arguments instead of relying on a potentially confusing String type. These types serve as documentation, helping users understand how to correctly provide arguments.
Seamless HTML EDSL
Instead of relying on a precompiler to process JSX-like syntax, this EDSL allows users to leverage the full power of Moonbit's syntax and toolchain.
You can embed expressions in views without needing escape characters like property={expression} or :property=expression. For cases where the property name matches the variable name, you can use the convenient name-punning syntax, such as property? or property~.
In this early stage, we need to focus on improving the functionality of Rabbit-TEA. Language extensions like JSX may be considered after the 1.0 release.
Keep it simple
No compile-time code translation or runtime reflection magic.

#Using the Html EDSL

We are trying to define wrapper functions for each HTML element. They all follow a form like this:

pub fn div[M](
  style~ : Array[String] = [],
  id? : String,
  klass? : String,
  click? : M,
  childrens : Array[Html[M]]
) -> Html[M]

#The text element

To represent text in HTML, use the text function.

let html = p([text("hello world")])

#The special nothing element

There is a special nothing element that does not represent an actual HTML element, it simply represents "nothing". This is particularly useful for handling multiple Option types in your model:

fn bar(path : Path, tag : Option[Tag]){
  let path = foo(path)
  let tag = match tag {
    None => []
    Some(x) => [view(x)] // Yuck!
  }
  div([path] + tag) // Don't do this
}

fn bar(path : Path, tag : Option[Tag]){
  let path = foo(path)
  let tag = match tag {
    None => nothing()
    Some(x) => view(x)
  }
  div([path, tag]) // Use @html.nothing
}

#Advanced Usage

The wrapper functions and properties provided here may not cover all possible use cases. If you encounter missing functionality, feel free to file an issue or use the node() function as a workaround. The node() function allows you to manually specify the tag name, attributes, and children for your HTML element, offering flexibility for advanced or uncommon scenarios.

let html = node(
  "div",
  [style("key","value"), property("id","key")],
  [child1, child2],
)

Contributions to help us finish the missing wrappers or arguments are also welcome.

#Html

#Using the Html EDSL

#The text element

#The special nothing element

#Advanced Usage

#T

#Attribute

#AutoComplete

#Html

#Html::inner

#Html::map

#Html::to_virtual_dom

#InputType

#Mouse

#Mouse::client_pos

#Mouse::offset_pos

#Mouse::screen_pos

#Pos

#Scope

#Scroll

#Scroll::height

#Scroll::offset_pos

#Scroll::width

#Target

#a

Parameters

#attribute

#b

#blockquote

#br

#button

#caption

#code

#col

#colgroup

#dd

#dialog

Attributes

Messages

Example

#div

#dl

#dt

#em

#external

#form

#h1

#h2

#h3

#h4

#h5

#h6

#hr

#href

#i

#iframe

#img

#input

#label

#li

#node

#nothing

#ol

#on_change

#on_click

#on_double_click

#on_input

#on_mouse_down

#on_mouse_enter

#on_mouse_leave

#on_mouse_move

#on_mouse_out

#on_mouse_over

#on_mouse_up

#on_scroll

#option

#p

#pre

#property

#section

T

Attribute

AutoComplete

Html

Html::inner

Html::map

Html::to_virtual_dom

InputType

Mouse

Mouse::client_pos

Mouse::offset_pos

Mouse::screen_pos

Pos

Scope

Scroll

Scroll::height

Scroll::offset_pos

Scroll::width

Target

a

attribute

b

blockquote

br

button

caption

code

col

colgroup

dd

dialog

div

dl

dt

em

external

form

h1

h2

h3

h4

h5

h6

hr

href

i

iframe

img

input

label

li

node

nothing

ol

on_change

on_click

on_double_click

on_input

on_mouse_down

on_mouse_enter

on_mouse_leave

on_mouse_move

on_mouse_out

on_mouse_over

on_mouse_up

on_scroll

option

p

pre

property

section

select

span

strong

style

sub

sup

table

target

tbody