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 强烈建议使用浅层不可变模式来更新状态。通过分离读写，我们可以更好地控制系统的响应性，而不会遭遇经过组件层传递后丢失变更跟踪代理。与 Signal 相比，使用 Store 适用范围更广。\n\n然而，有时，突变更容易推理。这就是为什么 Solid 提供了一个受 Immer 启发的 `produce` store 修饰符的原因，它可以让你在 `setStore` 调用中改变 Store 对象的可写代理版本。\n\n这是一个很好的工具，可以在不放弃控制的情况下允许小范围的突变。让我们在 Todos 示例中使用 `produce`，将事件处理程序代码替换为：\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\n虽然带有 Store 配合 `produce` 可以处理绝大多数情况，但 Solid 也可以用 `createMutable` 创建一个可变的 Store 对象。虽然不是内部 API 所推荐的方法，但有时用来与第三方系统进行互操作或兼容很有用。\n";
var stores_mutation = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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