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 strongly recommends the use of shallow immutable patterns for updating state. By separating reads and writes we maintain better control over the reactivity of our system without the risk of losing track of changes to our proxy when passed through layers of components. This is much more amplified with Stores compared to Signals.\n\nSometimes, however, mutation is just easier to reason about. That's why Solid provides an Immer inspired `produce` store modifier that allows you to mutate a writable proxy version of your Store object inside your `setStore` calls.\n\nThis is a nice tool to have to allow small zones of mutation without relinquishing control. Let's use `produce` on our Todos example by replacing our event handler code with:\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\nWhile `produce` with Stores probably handles the vast majority of cases, Solid also has a mutable Store object that is available from `createMutable`. While not the recommended approach for internal APIs, it is sometimes useful for interop or compatibility with 3rd party systems.\n";
var stores_mutation = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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