var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { For, createSignal } from \"solid-js\";\n\nconst App = () => {\n  const [todos, setTodos] = createSignal([])\n  let input;\n  let todoId = 0;\n\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, createSignal } from \"solid-js\";\n\nconst App = () => {\n  const [todos, setTodos] = createSignal([])\n  let input;\n  let todoId = 0;\n\n  const addTodo = (text) => {\n    const [completed, setCompleted] = createSignal(false); \n    setTodos([...todos(), { id: ++todoId, text, completed, setCompleted }]);\n  }\n  const toggleTodo = (id) => {\n    const index = todos().findIndex((t) => t.id === id);\n    const todo = todos()[index];\n    if (todo) todo.setCompleted(!todo.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={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 = "Одна из причин использования детальной (`fine-grained`) реактивности в Solid заключается в том, что он может обрабатывать вложенные обновления независимо друг от друга. Например, если у нас есть список пользователей в котором обновилось одно имя, то Solid обновит лишь одно место в DOM не перерендеривая весь список. Очень немногие (даже реактивные) UI-фреймворки могут это сделать.\n\nКак мы этого добились? Давайте рассмотрим это на примере списка задач в Сигнале. Чтобы пометить задачу как выполненную, нам нужно заменить ее клоном. Несмотря на то, что так работает большинство фреймворков, это далеко от ресурсоэффективного подхода, поскольку мы повторно запускаем алгоритм вычисления различий (`diffing algorithm`) и воссоздаем элементы DOM, как показано в `console.log`.\n\n```js\nconst toggleTodo = (id) => {\n  setTodos(\n    todos().map((todo) => (todo.id !== id ? todo : { ...todo, completed: !todo.completed })),\n  );\n};\n```\n\nВместо этого в библиотеке с точной реактивностью, такой как Solid, мы инициализируем данные вложенными Сигналами следующим образом:\n\n```js\nconst addTodo = (text) => {\n  const [completed, setCompleted] = createSignal(false);\n  setTodos([...todos(), { id: ++todoId, text, completed, setCompleted }]);\n};\n```\n\nТеперь мы можем обновить данные с помощью вызова `setCompleted` без вычисления различий. Это возможно потому, что мы перенесли вычисления на уровень данных, вместо вычислений на уровне элементов DOM. Такой подход позволяет точно знать каким образом данные изменяются.\n\n```js\nconst toggleTodo = (id) => {\n  const index = todos().findIndex((t) => t.id === id);\n  const todo = todos()[index];\n  if (todo) todo.setCompleted(!todo.completed())\n}\n```\n\nЕсли мы изменим все оставшиеся ссылки с `todo.completed` на `Сигналы` `todo.completed()`, то мы будем видеть вызов `console.log` только при создании элемента, а не при переключении.\n\nБезусловно, это требует ручного контроля и понимания как устроена ваши данные и недалеком прошлом это был единственный способ добиться эффективного рендеринга в прошлом. Но теперь, благодаря прокси мы можем выполнять большую часть этой работы в фоновом режиме без какой-либо ручной работы. В следующих главах мы рассмотрим механизм, позволяющий Solid реализовать эффективную и точную систему обновлений.";
var stores_nested_reactivity = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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