Alpine.morph fails in basic todo-list like scenario #4195

Mai-Lapyst · 2024-05-06T06:20:21Z

Mai-Lapyst
May 6, 2024

Hi, I have the problem that in a todo-list like list, Alpine.morph does not behave as expected with serverside rendered html.

If I run the example app down below, I get following issues:

if I click "Move Up" on the second task twice, it uses the form redirect, which is only possible if the eventhandler disappearead (which is the case)
if I click once "Move Up" on the second task and then any of the "Move *" buttons on the first one, the console prints following warning and error:

These problems also persist if I use this.$root instead of this.$el.

One workaround is to use this.$root.outerHTML = html;, but ofc this isn't ideal.

Browser: Firefox 124.0.1 & Vivaldi 6.6.3271.55

Code for `app.js`

import express from 'express';
import fs from 'fs';
const app = express();
const port = 3000;

let tasks = [
    { id: 1, name: 'Hello' },
    { id: 2, name: 'World' }
];
function insert(list, idx, elem) {
    const before = list.slice(0, idx);
    const after = list.slice(idx);
    return [...before, elem, ...after];
}
function moveTask(id, dir) {
    let idx = tasks.findIndex((task) => task.id == id);
    if (idx+dir < 0 || idx+dir >= tasks.length) {
        return
    }

    let task = tasks[idx];
    tasks.splice(idx, 1);
    tasks = insert(tasks, idx+dir, task);
}

function renderTaskList() {
    let list = '<div x-data="taskList" @reload-tasks.window="reload">';
    for (const task of tasks) {
        list += `<form x-data="task({ id: ${task.id}, name: '${task.name}', isDone: false })" key="${task.id}" method="POST" action="/updateTask" @submit.prevent="0">`;
        list += `<input name="isDone" type="checkbox" x-model="isDone">`;
        list += `<input name="name" type="text" value="${task.name}" x-model="name">`;
        list += `<button name="action" value="move_up" @click.prevent="moveTask('up')">Move Up</button>`;
        list += `<button name="action" value="move_down" @click.prevent="moveTask('down')">Move Down</button>`;
        list += `</form>`;
    }
    return list + '</div>'
}

app.get('/', function (req, res) {
    res.status(200);
    res.header('Content-Type', 'text/html');
    res.send(`<!DOCTYPE html>
<html>
    <head>
        <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
    </head>
    <body>
        ${renderTaskList()}
        <script src="./alpine.js"></script>
    </body>
</html>`);
});
app.get('/alpine.js', function (req, res) {
    res.send(fs.readFileSync('./alpine.js', {encoding: 'utf-8'}));
});

app.get('/_html', function (req, res) {
    res.status(200);
    res.send(renderTaskList());
});
app.get('/api/move', function (req, res) {
    const id = parseInt(req.query['id']);
    const dir = req.query['dir'];
    switch (dir) {
        case 'up': moveTask(id, -1); break;
        case 'down': moveTask(id, 1); break;
    }
    res.sendStatus(200);
});
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`);
});

Code for `alpine.js`

document.addEventListener('alpine:init', () => {
    Alpine.data('taskList', () => ({
        async reload() {
            const resp = await fetch('/_html');
            const html = await resp.text();
            Alpine.morph(this.$el, html);
        },
    }));
    Alpine.data('task', (initialState = null) => ({
        id: initialState?.id || null,
        name: initialState?.name || '',
        isDone: initialState?.isDone || false,
        async moveTask(dir) {
            await fetch(`/api/move?id=${this.id}&dir=${dir}`);
            this.$dispatch('reload-tasks');
        },
    }));
});

ekwoka · 2024-05-06T08:01:10Z

ekwoka
May 6, 2024

okay.

It looks to me the issue might be in tracking reference to the parent tree...

where Alpine.morph really needs to be on the rootiest root of the matching tree..

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Alpine.morph fails in basic todo-list like scenario #4195

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Alpine.morph fails in basic todo-list like scenario #4195

Uh oh!

Mai-Lapyst May 6, 2024

Replies: 1 comment

Uh oh!

ekwoka May 6, 2024

Mai-Lapyst
May 6, 2024

ekwoka
May 6, 2024