var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { For, createSignal } from \"solid-js\";\n\nconst App = () => {\n  const [todos, setTodos] = createSignal([])\n  let input;\n  let todoId = 0;\n\n  const addTodo = (text) => {\n    setTodos([...todos(), { id: ++todoId, text, completed: false }]);\n  }\n  const toggleTodo = (id) => {\n    setTodos(todos().map((todo) => (\n      todo.id !== id ? todo : { ...todo, completed: !todo.completed }\n    )));\n  }\n\n  return (\n    <>\n      <div>\n        <input ref={input} />\n        <button\n          onClick={(e) => {\n            if (!input.value.trim()) return;\n            addTodo(input.value);\n            input.value = \"\";\n          }}\n        >\n          Add Todo\n        </button>\n      </div>\n      <For each={todos()}>\n        {(todo) => {\n          const { id, text } = todo;\n          console.log(`Creating ${text}`)\n          return <div>\n            <input\n              type=\"checkbox\"\n              checked={todo.completed}\n              onchange={[toggleTodo, id]}\n            />\n            <span\n              style={{ \"text-decoration\": todo.completed ? \"line-through\" : \"none\"}}\n            >{text}</span>\n          </div>\n        }}\n      </For>\n    </>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { For, createSignal } from \"solid-js\";\n\nconst App = () => {\n  const [todos, setTodos] = createSignal([])\n  let input;\n  let todoId = 0;\n\n  const addTodo = (text) => {\n    const [completed, setCompleted] = createSignal(false); \n    setTodos([...todos(), { id: ++todoId, text, completed, setCompleted }]);\n  }\n  const toggleTodo = (id) => {\n    const index = todos().findIndex((t) => t.id === id);\n    const todo = todos()[index];\n    if (todo) todo.setCompleted(!todo.completed())\n  }\n\n  return (\n    <>\n      <div>\n        <input ref={input} />\n        <button\n          onClick={(e) => {\n            if (!input.value.trim()) return;\n            addTodo(input.value);\n            input.value = \"\";\n          }}\n        >\n          Add Todo\n        </button>\n      </div>\n      <For each={todos()}>\n        {(todo) => {\n          const { id, text } = todo;\n          console.log(`Creating ${text}`)\n          return <div>\n            <input\n              type=\"checkbox\"\n              checked={todo.completed()}\n              onchange={[toggleTodo, id]}\n            />\n            <span\n              style={{ \"text-decoration\": todo.completed() ? \"line-through\" : \"none\"}}\n            >{text}</span>\n          </div>\n        }}\n      </For>\n    </>\n  );\n};\n\nrender(App, document.getElementById(\"app\"));\n"
		}
	]
};
var markdown = "One of the reasons for fine-grained reactivity in Solid is that it can handle nested updates independently. You can have a list of users and when we update one name we only update a single location in the DOM without diffing the list itself. Very few (even reactive) UI frameworks can do this.\n\nBut how do we accomplish this? In the example we have a list of todos in a signal. In order to mark a todo as complete, we would need to replace the todo with a clone. This is how most frameworks work, but it's wasteful as we rerun the list diffing and we recreate the DOM elements as illustrated in the `console.log`.\n\n```js\nconst toggleTodo = (id) => {\n  setTodos(\n    todos().map((todo) => (todo.id !== id ? todo : { ...todo, completed: !todo.completed })),\n  );\n};\n```\n\nInstead, in a fine-grained library like Solid, we initialize the data with nested Signals like this:\n\n```js\nconst addTodo = (text) => {\n  const [completed, setCompleted] = createSignal(false);\n  setTodos([...todos(), { id: ++todoId, text, completed, setCompleted }]);\n};\n```\n\nNow we can update the completion state by calling `setCompleted` without any additional diffing. This is because we've moved the complexity to the data rather than the view. And we know exactly how the data changes.\n\n```js\nconst toggleTodo = (id) => {\n  const index = todos().findIndex((t) => t.id === id);\n  const todo = todos()[index];\n  if (todo) todo.setCompleted(!todo.completed())\n}\n```\nIf you change the remaining references of `todo.completed` to `todo.completed()`, the example should now only run the `console.log` on creation and not when you toggle a todo.\n\nThis of course requires some manual mapping and it was the only choice available to us in the past. But now, thanks to proxies, we can do most of this work in the background without manual intervention. Continue to the next tutorials to see how.\n";
var stores_nested_reactivity = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { stores_nested_reactivity as default, lesson, markdown, solved };
