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 = "Stores are Solid's answer to nested reactivity. They are proxy objects whose properties can be tracked and can contain other objects which automatically become wrapped in proxies themselves, and so on.\n\nTo keep things light, Solid creates underlying Signals only for properties that are accessed under tracking scopes. And so, all Signals in Stores are created lazily as requested.\n\nThe `createStore` call takes the initial value and returns a read/write tuple similar to Signals. The first element is the store proxy which is readonly, and the second is a setter function.\n\nThe setter function in its most basic form takes an object whose properties will be merged with the current state. It also supports path syntax so that we can do nested updates. In this way we can still maintain control of our reactivity but do pinpoint updates.\n\n> Solid's path syntax has many forms and includes some powerful syntax to do iteration and ranges. Refer to the API documentation for a full reference.\n\nLet's look at how much easier it is to achieve nested reactivity with a Store. We can replace the initialization of our component with this:\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\nWe make use of the Store's path syntax with function setters that allow us to take the previous state and return the new state on nested values.\n\nAnd that's it. The rest of the template will already react granularly (check the Console on clicking the checkbox).\n";
var stores_createstore = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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