wasp/examples/todoMVC/todoMVC.wasp

// Goal of this file is to re-create a TODO app from http://todomvc.com

import * as config from "config"  // Imports from external code dir (src/).

// -- Entities
entity Task {
    description :: string,
    isDone :: boolean
}

// -- App and pages
app todoMVC {
    title: "ToDo MVC"
}

// IDEA: `@connect Task as taskList` -> this would make it more obvious what is available, also we don't need to automatically try to guess what to import.
page Main {
    route: "/",

    style: {=css
        div {
            color: green;
        }

        .mainContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .taskListContainer {
            width: 60%;
        }
    css=},

    content: {=jsx
        <div className="mainContainer">
            <h1> { config.appName } </h1>

            <NewTaskForm
                onCreate={task => this.props.addTask(task)}
                submitButtonLabel={'Create new task'}
            />

            <div className="taskListContainer">
                <TaskList editable />
            </div>

            <div className="footer">
              { this.props.taskList.filter(task => !task.isDone).length } items left
            </div>
        </div>
    jsx=}
}

// NOTE(matija): this is only being parsed for now, no code is generated yet.
// Entity form definition.
entity-form<Task> CreateTaskForm {
    submit: {
        onEnter: false
    }
}

// We can define multiple forms for a single entity.
entity-form<Task> NewTaskForm {
}