Marko 6 Compiler Article Examples

js-framework-benchmark.marko

import { buildData } from "./build-data";

<let/data = []/>
<let/selected = null/>

<div class="jumbotron">
  <div class="row">
    <div class="col-md-6">
      <h1>Marko 6 (keyed)</h1>
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="run" onclick() {
            data = buildData(1000);
            selected = null;
          }>Create 1,000 rows</button>
        </div>
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="runlots" onclick() {
            data = buildData(10000);
            selected = null;
          }>Create 10,000
            rows</button>
        </div>
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="add" onclick() {
            data = data.concat(buildData(1000))
          }>Append 1,000 rows</button>
        </div>
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="update" onclick() {
            const newData = data.slice(0);

            for (let i = 0; i < newData.length; i += 10) {
              const r = newData[i];
              newData[i] = { id: r.id, label: r.label + " !!!" };
            }

            data = newData;
          }>Update every 10th row</button>
        </div>
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="clear" onclick() {
            data = [];
            selected = null;
          }>Clear</button>
        </div>
        <div class="col-sm-6 smallpad">
          <button type="button" class="btn btn-primary btn-block" id="swaprows" onclick() {
            if (data.length > 998) {
              const newData = data.slice(0);
              newData[1] = data[998];
              newData[998] = data[1];
              data = newData;
            }
          }>Swap Rows</button>
        </div>
      </div>
    </div>
  </div>
</div>
<table class="table table-hover table-striped test-data">
  <tbody>
    <for|row| of=data by=(row => row.id)>
      <tr class=(selected === row.id ? 'danger' : '')>
        <td class="col-md-1">${row.id}</td>
        <td class="col-md-4">
          <a onclick() { selected = row.id; }>${row.label}</a>
        </td>
        <td class="col-md-1">
          <a onclick() {
            const idx = data.findIndex(d => d.id === row.id);
            data = [...data.slice(0, idx), ...data.slice(idx + 1)];
          }>
            <span class="glyphicon glyphicon-remove" aria-hidden="true" />
          </a>
        </td>
        <td class="col-md-6" />
      </tr>
    </for>
  </tbody>
</table>
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>

todomvc.marko

<let/visibility = ""/>
<let/todos = JSON.parse(localStorage.getItem("$todos") || "[]")/>
<const/filteredTodos = !visibility ? todos : todos.filter(todo => todo.completed === (visibility === "completed"))/>
<effect() {
  localStorage.setItem("$todos", JSON.stringify(todos))
}/>
<effect() {
  window.addEventListener('hashchange', () => visibility = location.hash.slice(2))
}/>

<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input 
      class="new-todo" 
      placeholder="What needs to be done?" 
      autofocus
      onkeydown(event) {
        if (event.code === "Enter") {
          const newTodo = {
            text: event.target.value,
            completed: false
          };
          todos = todos.concat(newTodo);
          event.target.value = "";
        }
      }>
  </header>
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox">
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <for|todo| of=filteredTodos>
        <let/editing = false/>
        <li class={ completed: todo.completed, editing }>
          <div class="view" ondblclick() {
            editing = true;
          }>
            <input 
              class="toggle"
              type="checkbox"
              checked=todo.completed
              onchange() {
                const updatedTodos = [...todos];
                const index = todos.indexOf(todo);
                updatedTodos[index] = {
                  ...todo,
                  completed: !todo.completed
                }
                todos = updatedTodos;
              }>
            <label>${todo.text}</label>
            <button 
              class="destroy"
              onclick() {
                const index = todos.indexOf(todo);
                todos = [...todos.slice(0, index), ...todos.slice(index + 1)];
              }/>
          </div>
          <const/updateTodoText(event) {
            const updatedTodos = [...todos];
            const index = todos.indexOf(todo);
            updatedTodos[index] = {
              ...todo,
              text: event.target.value
            }
            todos = updatedTodos;
            editing = false;
          }/>
          <input 
            class="edit" 
            value=todo.text 
            onblur=updateTodoText
            onkeydown(event) {
              if (event.code === "Enter") {
                updateTodoText(event);
              }
            }>
        </li>
      </for>
    </ul>
  </section>
  <footer class="footer">
    <const/activeTodos = todos.filter(t => !t.completed)/>
    <span class="todo-count"><strong>${activeTodos.length}</strong> ${activeTodos.length === 1 ? "item" : "items"} left</span>
    <ul class="filters">
      <li>
        <a class={ selected: !visibility } href="#/">All</a>
      </li>
      <li>
        <a class={ selected: visibility === "active" } href="#/active">Active</a>
      </li>
      <li>
        <a class={ selected: visibility === "completed" } href="#/completed">Completed</a>
      </li>
    </ul>
    <if=todos.length !== activeTodos.length>
      <button 
        class="clear-completed"
        onclick() {
          todos = activeTodos;
        }>
        Clear completed
      </button>
    </if>
  </footer>
</section>