var lesson = {
	files: [
		{
			name: "main",
			content: "import { render, For } from \"solid-js/web\";\nimport { createStore, produce } 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 solved = {
	files: [
		{
			name: "main",
			content: "// @ts-nocheck\nimport { render, For } from \"solid-js/web\";\nimport { createStore, produce } 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(\n      'todos',\n      produce((todos) => {\n        todos.push({ id: ++todoId, text, completed: false });\n      }),\n    );\n  };\n  const toggleTodo = (id) => {\n    setStore(\n      'todos',\n      todo => todo.id === id,\n      produce((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={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 = "Solid empfielt wärmstens die Verwendung von flachen unveränderlichen Schemata, um den Zustand zu aktualisieren. Indem wir Lese- und Schreibzugriffe voneinander trennen, behalten wir mehr Kontrolle über die Reaktivität unseres Systems ohne das Risiko, Änderungen an unserem Proxy zu übersehen, wenn sie durch verschiedene Ebenen unserer Komponenten laufen. Das ist noch mehr der Fall, wenn man Stores mit Signalen vergleicht.\n\nManchmal ist dennoch Mutation einfacher zu verstehen. Aus diesem Grund hat Solid einen von Immer inspirierten `produce`-Modifikator für Stores, der es erlaubt eine schreibbare Proxy-Version des Stores innerhalb des `setStore`-Aufrufs zu mutieren.\n\nDas ist ein nettes Werkzeug, dass es erlaubt, kleine Bereiche zu mutieren, ohne Kontrolle aufzugeben. Nutzen wir `produce` in unserem Todo-Beispiel, indem wir den Event-Handler mit dem folgenden Code ersetzen:\n\n```jsx\nconst addTodo = (text) => {\n  setStore(\n    'todos',\n    produce((todos) => {\n      todos.push({ id: ++todoId, text, completed: false });\n    }),\n  );\n};\nconst toggleTodo = (id) => {\n  setStore(\n    'todos',\n    todo => todo.id === id,\n    produce((todo) => (todo.completed = !todo.completed)),\n  );\n};\n```\n\nWährend `produce` mit Stores vermutlich die überwiegende Mehrheit aller Anwendungsfälle abdeckt, hat Solid auch einen mutierbaren Store, der mit `createMutable` verfügbar gemacht wird. Während dies nicht die empfohlene Herangehensweise für interne APIs ist, kann es mitunter nützlich für Interoperabilität oder Kompatibilität zu Sytemen anderer Parteien sein.\n";
var stores_mutation = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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