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 = "Eine der Gründe für feingranulare Reaktivität in Solid ist die Fähigkeit, Aktualisierungen unabhängig voneinander zu behandeln. Man kann eine Liste von Nutzern haben und wenn ein Name geändert wird, aktualisieren wir nur eine einzige Stelle im DOM, ohne die Liste selbst abzugleichen. Wenige (selbst reaktive) UI-Frameworks können das tun.\n\nAber wie schaffen wir das? In dem Beispiel haben wir eine Liste von Aufgaben in einem Signal. Um eine Aufgabe als abgeschlossen zu markieren, müssten wir diese mit einem Klon ersetzen. Das ist die Herangehensweise der meisten Frameworks, aber es ist verschwenderisch, wenn wir wieder und wieder die Liste abgleichen und erstellen die DOM-Elemente neu, wie es das `console.log` sichtbar macht.\n\n```js\nconst toggleTodo = (id) => {\n  setTodos(\n    todos().map((todo) => (todo.id !== id ? todo : { ...todo, completed: !todo.completed })),\n  );\n};\n```\n\nStattdessen initialisiert man in einer feingranularen Library wie Solid die Daten mit verschachtelten Signalen, etwa so:\n\n```js\nconst addTodo = (text) => {\n  const [completed, setCompleted] = createSignal(false);\n  setTodos([...todos(), { id: ++todoId, text, completed, setCompleted }]);\n};\n```\n\nJetzt können wir den Erledigungszustand aktualisieren, indem wir `setCompleted` aufrufen, ohne dass ein zusätzlicher Abgleich nötig wäre. Das liegt daran, dass wir die Komplexität in die Daten statt in die Darstellung verschoben haben. Und wir wissen genau, wie sich die Daten ändern.\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```\nWenn man nun die restlichen Referenzen zu `todo.completed` in `todo.completed()` ändert, sollte das Beispiel nur noch `console.log` aufrufen, wenn der Eintrag erzeugt wird und nicht, wenn man die Erledigung umschaltet.\n\nDas erfordert natürlich etwas manuelles Abbilden und es war einmal in der Vergangenheit die einzige Möglichkeit. Aber jetzt, dank Proxies, können wir die meiste Arbeit im Hintergrund machen, ohne manuelle Einmischung. Gehe weiter zur nächsten Anleitung, um zu sehen, wie.\n";
var stores_nested_reactivity = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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