on event send a diff of a block/template

[Adnaan Badr]

We want to send a diff of the changed template instead of everything. This is similar to how phoenix liveview works: https://www.poeticoding.com/how-phoenix-liveview-works/

For the following example html page:

<div
    @fir:create:ok::todo="$fir.appendEl()"
    @fir:query:ok::todos="$fir.replace()">
    {{ block "todos" }}
        <div>List of todos</div>
        <div>Number of todos: {{ len .todos }}</div>
        <ul>
            {{ range .todos }}
                {{ block "todo" . }}
                    <li>{{ .Text }}</li>
                {{ end }}
            {{ end }}
        </ul>
    {{ end }}
</div>

OnLoad:

Include the static parts in the rendered html page when the page is first loaded:

<script>
{
    "todos": {
        "d": [
            "template@todo",
            "{{ len .todos }}"
        ],
        "s": [
            "<div>List of todos</div>\n<ul>",
            "</ul>\n<div>Number of todos: ",
            "</div>"
        ]
    },
    "todo": {
        "d": [
            "{{.Text}}"
        ],
        "s": [
            "<li>",
            "</li>"
        ]
    }
}</script>

Respond with dynamic parts to an event:

OnEvent('create',...)

{
    "type": "@fir:create:ok::todo",
    "detail": {
        "diff": [
            "todo 1"
        ]
    },
    "target": ".fir-create-ok--todo"
}

OnEvent('query',...)

{
    "type": "@fir:query:ok::todos",
    "detail": {
        "diff": {
            "0": {
                "d": [
                    [
                        "todo 1"
                    ],
                    [
                        "todo 2"
                    ]
                ]
            }
        }
    },
    "target": "fir-query-ok--todos"
}

The fir alpinejs plugin combines the static and dynamic parts to update the block/template in the browser.