What Is Your Best Practices For Writing a TodoList?

[cqh963852]

Hi I am using vanjs creating a jsx-runtime.

I found the todo list here. https://vanjs.org/demo#todo-list

But still have two problem.

1. The list isn't driven by van state.
2. The item component is so simple.

What are your best practices for writing todolists using vanjs?

[cqh963852]

I have create a easy demo.

But it not works fine.

After each input in the input box. The list will be re-execute.

So I can't do continuous input

import van from "vanjs-core";

const VanTodoList = () => {
  const items = van.state<Record<number, string>>({});
  let count = 0;

  return van.tags.div(
    van.tags.button(
      {
        onclick: () => {
          items.val = { ...items.oldVal, [count++]: "" };
        },
      },
      "add item"
    ),
    () => {
      return van.tags.div(
        Object.entries(items.val).flatMap(([key, value]) => {
          return van.tags.input({
            defaultValue: value,
            oninput: (e) => {
              items.val = { ...items.oldVal, [key]: e.target.value };
            },
          });
        })
      );
    }
  );
};

export default VanTodoList;

[Tao-VanJS]

Hi @cqh963852,

Regarding your demo, you can make the values of the items list nested states of string. In this way, the oninput event handler needs only to update the value state, instead of refreshing the entire items list.

Thus, your program can be modified like this:

const VanTodoList = () => {
  const items = van.state<Record<number, State<string>>>({});
  let count = 0;

  return van.tags.div(
    van.tags.button(
      {
        onclick: () => {
          items.val = { ...items.oldVal, [count++]: van.state("") };
        },
      },
      "add item"
    ),
    () => {
      return van.tags.div(
        Object.entries(items.val).flatMap(([key, value]) => {
          return van.tags.input({
            defaultValue: value,
            oninput: (e) => value.val = e.target.value,
          });
        })
      );
    }
  );
};

You can preview it on jsfiddle.

[Tao-VanJS]

Regarding your comments:

I found the todo list here. https://vanjs.org/demo#todo-list

But still have two problem.

1. The list isn't driven by van state.

VanJS doesn't require your app to be 100% fully reactive. Like mentioned in https://vanjs.org/demo#todo-list, you can choose to build your app in a fully procedural way, a hybrid way between procedural and reactive, or a fully reactive way like the sample app I just demonstrated in this thread, which derives the entire TODO list from a state.

2. The item component is so simple.

You can definitely extend the TodoItem component to make it more sophisticated.

[efpage]

I´m not sure what you mean by "reactive"? Even procedural code can be reactive, if it is used in an event driven system.

Van States are just one way to handle events, but not the only one. Every time, a state variable is changed, this change is propagated to all bound elements or attributes. But we have to notice, that a state does not change without reason, there is always something happening, that changes a state value (e.g. a user input or a life cycle event).

VanStates are convenient, if you just need to display a value. This happens immediately to all bound elements. But if you need more complex interactions, states are not always helpful or necessary.

In case of a todo-app, there are different possible ways to handle events:

• You can put your code into the event hander of the initial event. Given there is a "new todo"-Button, you simply use the onclick()-event to create a new todo, which is most straigth forwand
• You can change a state variable in the onClick-Event and put your code in the onnew-event of that state

I´m not sure that the second way is better, as you only detect the state change, but not the reason, why the state was changed. Assume, there is a state that indicates, that a new item needs to be created. But there are two situations, you need to do this:

1. The user clicked "new todo" button
2. The app is loaded and the stored events need do be rebuild

In both cases you need to create a new todo, but in the second case, the stored content has to be loaded. So, it could be easier to write some simple code that is called from the event handlers.