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 настоятельно рекомендует использовать неглубокие неизменяемые (`shallow immutable`) паттерны для обновления состояния. Разделяя чтение и запись, мы сохраняем точный контроль над реактивностью нашей системы без риска потерять отслеживание изменений в наших прокси (`proxy`) при передаче данных через несколько компонентов. Этот подход виден гораздо сильнее в Сторах по сравнению с Сигналами.\n\nСтоит заметить, что мутабельная запись читается в разы проще. Поэтому Solid дает нам функцию `produce`, которая была вдохновлена библиотекой [Immer](https://github.com/immerjs/immer). Она позволяет нам изменять наши прокси-для-записи (`writable proxy`) в наших Сторах и применятся внутри вызова `setStore`.\n\nЭто хороший инструмент, позволяющий допускать небольшие зоны мутации, не отказываясь от реактивного контроля. Давайте воспользуемся `produce` в нашем примере Todos, заменив наш код обработчика событий на:\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Несмотря на то, что `produce` внутри `Сторов`, вероятно, покрывает подавляющее большинство случаев, Solid также позволяет нам создать мутабельный Стор, доступный в виде вызова ` createMutable`. Этот подход не рекомендуется для использования, но может быть полезен для совместимости со другими библиотеками.";
var stores_mutation = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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