#Aitne

#Getting Started

#Installing CLI

curl -fsSL https://raw.githubusercontent.com/Arcelyth/aitne/main/scripts/install.sh | bash

#Initializing

aitne init your_project
cd your_project
moon update

aitne build

#Running

aitne run

#Examples

fn todo_app() -> &View {
  let (input_val, set_input_val) = @reactive.create_signal("")
  let (todo, set_todo) = @reactive.create_signal(["Example."])

  let add_item = _ => {
    let text = input_val.get()
    if text != "" {
      set_todo.set(todo.get() + [text])
    }
    set_input_val.set("")
  }

  let remove_item = item => {
    let new_list = todo.get().filter(fn(t) { t != item })
    set_todo.set(new_list)
  }

  <div>
    <h1> Todo List </h1>
    <div>{() => todo.get().length().to_string() }</div>
    <div>
      <input
        type="text"
        value={input_val}
        on:input={ev => set_input_val.set(event_target_value(ev))}
      />
      <button on:click={add_item}> Add </button>
    </div>
    <ul>
      <ForEach
        each={()=>todo.get().iter()}
        key={(x)=>{return x}}
        children={(item) => {
          <li>
            {() => item}
            <button on:click={_ => remove_item(item)}> "Delete" </button>
          </li>
        }}
      />
    </ul>
  </div>
}

///|
pub fn app() -> &View {
  <Router base="/">
    <Routes fallback={() => <NotFound />}>
        <Route path="/" view={() => <Home />} />
        <ParentRoute 
            path="/users" 
            view={() => <UsersPage />}> 
           <Route path="/:id" view={() => <UserDetailPage />}/> 
        </ParentRoute>
        <ParentRoute 
            path="/t"
            view={() => <TryPage />}> 
           <Route path="/t1" view={() => <TryPage />} /> 
        </ParentRoute>
    </Routes>
  </Router>
}

///|
fn main {
  let _ = @dom.mount_to_body(() => <App />)
}

#Style

pub fn counter_btn(incr?: Int = 1) -> &View {
    let style = ${ 
        !"./counter_btn.module.css"
        .btn {
            background-color: #000000;
        }
    }$ 
    let (count, set_count) = @reactive.create_signal(0)
    <button on:click={(_) => { set_count.update((v) => { v + incr }) }} class={()=>style.btn}>
        Click me:  {() => count.get().to_string()}
    </button>
}

#WebAssembly (Experimental)

Experimental: WebAssembly support is currently experimental and may be unstable. APIs, runtime behavior, and build configuration may change without notice. It is not recommended for production use at this stage.

#Editor Support

• Neovim
• Zed
• VScode

#Eirene

[app]
name = "examples"
mode = "development"
entry_html = "index.html"

[build]
target = "js"
src_dir = "src"
out_dir = "."

[server]
host = "127.0.0.1"
port = 8000
hmr_enabled = false

#Learn more