var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport counter from \"./counter\"\n\nfunction Counter() {\n  return (\n    <button type=\"button\">\n      0 0\n    </button>\n  );\n}\n\nrender(() => <Counter />, document.getElementById(\"app\"));\n"
		},
		{
			name: "counter",
			content: "import { createSignal, createMemo, createRoot } from \"solid-js\";\n\nfunction createCounter() {\n  const [count, setCount] = createSignal(0);\n  const increment = () => setCount(count() + 1);\n  const doubleCount = createMemo(() => count() * 2);\n  return { count, doubleCount, increment };\n}\n\nexport default createRoot(createCounter);"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport counter from \"./counter\"\n\nfunction Counter() {\n  const { count, doubleCount, increment } = counter;\n\n  return (\n    <button type=\"button\" onClick={increment}>\n      {count()} {doubleCount()}\n    </button>\n  );\n}\n\nrender(() => <Counter />, document.getElementById(\"app\"));\n"
		},
		{
			name: "counter",
			content: "import { createSignal, createMemo, createRoot } from \"solid-js\";\n\nfunction createCounter() {\n  const [count, setCount] = createSignal(0);\n  const increment = () => setCount(count() + 1);\n  const doubleCount = createMemo(() => count() * 2);\n  return { count, doubleCount, increment };\n}\n\nexport default createRoot(createCounter);"
		}
	]
};
var markdown = "Context is a great tool for stores. It handles injection, ties ownership to the reactive graph, automatically manages disposal, and has no render overhead given Solid's fine-grained rendering.\n\nHowever, you could just use the reactive system directly for simple things. It's almost not worth pointing out but a simple writeable store is just a Signal:\n\n```js\nimport { createSignal } from 'solid-js';\n\nexport default createSignal(0);\n\n// somewhere else:\nimport counter from './counter';\nconst [count, setCount] = counter;\n```\n\nSolid's reactivity is a universal concept. It doesn't matter if it is inside or outside components. There is no separate concept for global vs local state. It is all the same thing.\n\nThe only restriction is that all computations (Effects/Memos) need to be created under a reactive root (`createRoot`). Solid's `render` does this automatically.\n\nIn this tutorial `counter.tsx` is such a global store. We can use it by modifying our component in `main.tsx` to:\n\n```jsx\nconst { count, doubleCount, increment } = counter;\n\nreturn (\n  <button type=\"button\" onClick={increment}>\n    {count()} {doubleCount()}\n  </button>\n);\n```\n\nSo when using your own more complicated global stores that contain computations, be sure to create a root. Or better yet, do yourself a favor and just use Context.\n";
var stores_nocontext = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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