tetra-framework / tetra

Tetra - A full stack component framework for Django using Alpine.js
https://www.tetraframework.com
MIT License
540 stars 14 forks source link

If child component has no public methods parent component re-render fails #4

Closed audriussagadinas closed 2 years ago

audriussagadinas commented 2 years ago

Hey, great work, congrats! Really enjoying playing with Tetra :)

Noticed one mini bug/issue - if child component has no public methods parent component re-render fails. Because child components without public methods doesn't have __state and THIS check fails. Because wrong (parent) component is resolved from data["state"]. Not sure how to address that best :)

Steps to reproduce

One way to reproduce - just remove all @public methods from example ToDoItem component and try adding couple of new items/to-dos. Adding a dummy public method fixes the issue.

@default.register
class ToDoItem(Component):
    title = public("")
    done = public(False)

    def load(self, todo):
        self.todo = todo
        self.title = todo.title
        self.done = todo.done

    template: django_html = """
    <div class="list-group-item d-flex gap-1 p-1" {% ... attrs %}>
        <label class="align-middle px-2 d-flex">
            <input class="form-check-input m-0 align-self-center" type="checkbox"
                x-model="done">
        </label>
        <input 
            type="text" 
            class="form-control border-0 p-0 m-0"
            :class="{'text-muted': done, 'todo-strike': done}"
            x-model="title"
            maxlength="80"
        >
    </div>
    """

    style: css = """
    .todo-strike {
        text-decoration: line-through;
    }
    """

Current behaviour

500 error (Component of ivalid type.) when calling parent component public method which re-renders the template.

Thank you!

samwillis commented 2 years ago

Thanks for the report, really appreciate the feedback! I’m not surprised I had missed something there…

So the reason for excluding the state on components with no public methods was to reduce the output html size. Clearly forgot about that after I got nested components working.

Easiest fix would be to always include the state, but would be better to keep track of if any parent has public methods. Will take a look today and fix it one way or the other.

(As an aside, the next thing on my to do list if a full set of tests so that these sort of issues are covered. Obviously needed before anyone would want to use Tetra in production)

samwillis commented 2 years ago

I have just released v0.0.2 which fixes this. I have removed the check for public methods so the state is always included. I'm going to revisit excluding state for efficiency at a later date, it will need a little thought how best to do as there are quite a few edge cases. Thanks for the report again!