create-modulo/build/starter/static/components/App.html

Starter projects for Modulo.html - Ready for all uses - Markdown-SSG / SSR / API-backed SPA

<script src=../Modulo.html></script><meta charset=utf8><template type=f>

<!-- 
    Modulo can be used with APIs to create interactive apps. This is a very
    basic one that shows the principal parts.
-->
<Template>
    <!-- Examples of bound input to "search" State variable: -->
    <input name="search" state.bind />

    <!-- Example of click event: -->
    <button on.click=script.doSearch><span alt="book">🕮 </span> Search</button>

    <!-- Examples of using both if and for template tags -->
    {% if state.loading %}
        <em><span alt="refresh icon">⟳ </span> Loading...</em>
    {% endif %}
    <ol>
        {% for item in state.results %}
            <li><strong>{{ item.title }}</strong>{% if item.author_name %} (by
                    {{ item.author_name|join:' and ' }}){% endif %}</li>
        {% endfor %}
    </ol>
</Template>

<!-- HINT: State is a "reactive data container" used for private state
(default), or used as a globally shared "store" (-store="name_of_store") -->
<State
    search="Macbeth"
    loading:=false
    results:=[]
></State>

<Script>
    // Script tags can contain arbitrary JavaScript, including fetching data
    // from backend APIs, and can operate on Component Parts such as State.
    const OPTS = 'limit=10&fields=title,author_name';
    const API = 'http://openlibrary.org/search.json?q=';

    async function doSearch() {
        state.loading = true; // (Hint: Modify state directly by setting)
        const response = await fetch(`${ API }?q=${ state.search }&${ OPTS }`);
        state.results = (await response.json()).docs; // Hint: await; re-render
        state.loading = false;
        element.rerender(); // Hint: Manually re-render (since already awaited)
    }
</Script>

<Style>
   input, button, select {
        border: 3px groove var(--fg-shading);
        font-size: 22px;
        line-height: 2;
        background: var(--color);
        color: var(--fg);
   }
</Style>