var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { For, createSignal } from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\n\nconst App = () => {\n  let input;\n  let todoId = 0;\n  const [todos, setTodos] = createSignal([])\n  const addTodo = (text) => {\n    setTodos([...todos(), { id: ++todoId, text, completed: false }]);\n  }\n  const toggleTodo = (id) => {\n    setTodos(todos().map((todo) => (\n      todo.id !== id ? 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={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: "import { render } from \"solid-js/web\";\nimport { For } from \"solid-js\";\nimport { createStore } 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 markdown = "`Сторы` в Solid позволяют нам использовать вложенную реактивность. Это [прокси](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Proxy), свойства которых можно отслеживать, и они могут содержать другие объекты, которые сами автоматически оборачиваются в прокси, и так далее.\n\nЧтобы облегчить использование ресурсов, Solid создает базовые `Сигналы` только для свойств, доступ к которым осуществляется в областях отслеживания. Таким образом все `Сигналы` в `Сторах` создаются лениво, в момент запроса.\n\nВызов createStore принимает начальное значение и возвращает кортеж (`tuple`) для чтения / записи, аналогичный `Сигналам`. Первый элемент - это прокси, доступный только-для-чтения, а второй - функция-сеттер (`setter function`).\n\nФункция-сеттер в своей самой простой форме принимает объект, свойства которого будут объединены с текущим состоянием. Она также поддерживает синтаксис пути для свойства, поэтому мы легко сможем выполнять вложенные обновления. Таким образом, мы по-прежнему сохраняем нашу реактивность, но точно определять обновления.\n\n> Синтаксис пути Solid имеет множество форм и включает мощный синтаксис для назначения итераций и диапазонов. Обратитесь к документации API за подробностями.\n\nДавайте посмотрим, насколько проще добиться вложенной реактивности с помощью Store. Мы можем заменить инициализацию нашего компонента следующим образом:\n\n```js\nconst [store, setStore] = createStore({ todos: [] });\nconst addTodo = (text) => {\n  setStore('todos', (todos) => [...todos, { id: ++todoId, text, completed: false }]);\n};\nconst toggleTodo = (id) => {\n  setStore('todos', (t) => t.id === id, 'completed', (completed) => !completed);\n};\n```\n\nВ данном примере мы используем синтаксис пути Store с функцией-сеттером, которые позволяют нам получить предыдущее состояние и возвращать новое состояние для вложенных значений.\n\nВот и все. Для того, чтобы посмотреть как происходят обновление вы можете установить флажок и посмотреть в Консоли (`Console`)\n";
var stores_createstore = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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