var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { For, createSignal } from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\n\nconst App = () => {\n  let input;\n  let todoId = 0;\n  const [todos, setTodos] = createSignal([])\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 } from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\n\nconst App = () => {\n  let input;\n  let todoId = 0;\n  const [store, setStore] = createStore({ todos: [] })\n  const addTodo = (text) => {\n    setStore(\"todos\", todos => [...todos, { id: ++todoId, text, completed: false }]);\n  }\n  const toggleTodo = (id) => {\n    setStore(\"todos\", todo => todo.id === id, \"completed\", completed => !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={store.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 = "Stores sind Solids Antwort auf verschachtelte Reaktivität. Sie sind Proxy-Objekte, deren Eigenschaften verfolgt werden können und selbst Objekte enthalten können, die automatisch in Proxies verpackt werden, und so weiter.\n\nUm Dinge leichtgewichtig zu halten, erzeugt Solid die darunterliegenden Signale nur für Eigenschaften, auf die innerhalb des reaktiven Kontextes zugegriffen wird. Und so sind alle Signale in Stores je nach Nutzung verzögert erstellt.\n\nDer `createStore`-Aufruf nimmt den initialen Wert und gibt ein Getter-/Setter-Tupel ähnlich wie Signal zurück. Das erste Element ist der Store-Proxy, der nur lesbar ist und das zweite ist eine Setter-Funktion.\n\nDie Setter-Funktion nimmt in ihrer einfachsten Form ein Objekt, desssen Eigenschaften mit dem gegenwärtigen Zustand zusammengeführt werden. Sie unterstützt auch die Pfad-Syntax, so dass wir verschachtelte Updates machen können. Auf diese Weise können wir die Kontrolle über die Reaktivität behalten, aber gleichzeitig zielgerichtet aktualisieren.\n\n> Solids Pfad-Syntax hat viele Formen und enthält eine mächtige Syntax, um Iterationen und Bereiche zu handhaben. Die API-Dokumentation enthält eine vollständige Referenz.\n\nSchauen wir mal, wie viel einfacher es ist, verschachtelte Reaktivität mit einem Store zu erreichen. Wir können die Initialisierung unserer Komponente wie folgt ersetzen:\n\n```js\nconst [store, setStore] = createStore({ todos: [] });\nconst addTodo = (text) => {\n  setStore('todos', (todos) => [...todos, { id: ++todoId, text, completed: false }]);\n};\nconst toggleTodo = (id) => {\n  setStore('todos', (t) => t.id === id, 'completed', (completed) => !completed);\n};\n```\n\nWir benutzen nun die Pfad-Syntax des Stores mit Funktions-Settern, die es uns erlaubt, den vorherigen Zustand zu bekommen und den neuen innerhalb verschachtelter Wert zurückzugeben.\n\nUnd das war's. Der Rest des Templates ist bereits granular reaktiv (Schau in die Console, während die Checkbox geklickt wird).\n";
var stores_createstore = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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