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는 상태를 업데이트할 때 얕은 불변 패턴 사용할 것을 강력하게 권장합니다.\n읽기와 쓰기를 분리함으로써 컴포넌트 계층들을 통과할 때 프록시에 대한 변경 사항을 잃어버릴 위험없이 시스템의 반응성을 더 잘 컨트롤할 수 있습니다. \n이 점은 Signal에 비해 Store에서 훨씬 더 증대됩니다.\n\n하지만 Mutation이 더 추론하기 쉬운 경우도 있습니다.\n그렇기 때문에 Solid는 `setStore` 호출 내에서 Store 객체의 쓰기 가능한 프록시 버전을 수정할 수 있도록 Immer에서 영감을 받은 `produce` store 수정 함수를 제공합니다. \n\n이는 컨트롤을 포기하지 않으면서도 작은 영역의 mutation을 허용하는 좋은 도구입니다.\nTodo 예제에서 이벤트 핸들러를 다음과 같이 변경해서 `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\nStore에 `produce`를 사용하면 대부분의 케이스를 처리할 수 있지만, Solid에는 `createMutable`를 사용해 mutable Store 객체를 생성하는 방법도 있습니다.\n내부 API에 권장되는 접근 방식은 아니지만, 때로는 서드파티 시스템과의 상호 운용성이나 호환성을 위해 유용하게 사용할 수 있습니다. \n";
var stores_mutation = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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