var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport Nested from \"./nested\";\nimport { CounterProvider } from \"./counter\";\n\nfunction App() {\n  return <>\n    <h1>Welcome to Counter App</h1>\n    <Nested />\n  </>\n};\n\nrender(() => <App />, document.getElementById(\"app\"));"
		},
		{
			name: "nested",
			content: "import { useCounter } from \"./counter\";\n\nexport default function Nested() {\n  return (\n    <>\n      <div>0</div>\n      <button>+</button>\n      <button>-</button>\n    </>\n  );\n};"
		},
		{
			name: "counter",
			content: "import { createSignal, createContext, useContext } from \"solid-js\";\n\nconst CounterContext = createContext();\n\nexport function CounterProvider(props) {\n  const [count, setCount] = createSignal(props.count || 0),\n    store = [\n      count,\n      {\n        increment() {\n          setCount(c => c + 1);\n        },\n        decrement() {\n          setCount(c => c - 1);\n        }\n      }\n    ];\n\n  return (\n    <CounterContext.Provider value={store}>\n      {props.children}\n    </CounterContext.Provider>\n  );\n}\n\nexport function useCounter() { return useContext(CounterContext); }"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport Nested from \"./nested\";\nimport { CounterProvider } from \"./counter\";\n\nfunction App() {\n  return <>\n    <h1>Welcome to Counter App</h1>\n    <Nested />\n  </>\n};\n\nrender(() => (\n  <CounterProvider count={1}>\n    <App />\n  </CounterProvider>\n), document.getElementById(\"app\"));"
		},
		{
			name: "nested",
			content: "import { useCounter } from \"./counter\";\n\nexport default function Nested() {\n  const [count, { increment, decrement }] = useCounter();\n  return (\n    <>\n      <div>{count()}</div>\n      <button onClick={increment}>+</button>\n      <button onClick={decrement}>-</button>\n    </>\n  );\n};"
		},
		{
			name: "counter",
			content: "import { createSignal, createContext, useContext } from \"solid-js\";\n\nconst CounterContext = createContext();\n\nexport function CounterProvider(props) {\n  const [count, setCount] = createSignal(props.count || 0),\n    store = [\n      count,\n      {\n        increment() {\n          setCount(c => c + 1);\n        },\n        decrement() {\n          setCount(c => c - 1);\n        }\n      }\n    ];\n\n  return (\n    <CounterContext.Provider value={store}>\n      {props.children}\n    </CounterContext.Provider>\n  );\n}\n\nexport function useCounter() { return useContext(CounterContext); }"
		}
	]
};
var markdown = "Solid bringt eine Context-API mit, um Daten weiterzugeben, ohne sie durch Props zu leiten. Das ist nützlich, um Signale und Stores zu teilen. Context zu benutzen hat den Vorteil, dass dieser als Teil des reaktiven Systems erzeugt und von diesem verfolgt wird.\n\nFür den Anfang erzeugen wir ein Context-Objekt. Dieses Objekt enthält eine `Provider`-Komponente, die verwendet wird, um unsere Daten einzubringen. Allerdings ist es Gang und gäbe, die `Provider`-Komponente und deren `useContext`-Konsumenten in eine andere Komponente zu schachteln, die bereits für den spezifischen Kontext konfiguriert ist.\n\nUnd das ist genau das, was wir in dieser Anleitung haben. Du kannst die Definition für einen einfachen Zähler-Store in der Datei `counter.tsx` sehen.\n\nUm Context zu benutzen, packen wir unsere Komponente ein, um es global verfügbar zu machen. Wir nutzen dazu unseren verschachtelten `CounterProvider`. In diesem Fall geben wir ihm einen ursprünglichen Zählerstand von 1.\n\n```jsx\nrender(() => (\n  <CounterProvider count={1}>\n    <App />\n  </CounterProvider>\n), document.getElementById(\"app\"));\n```\n\nAls nächstes müssen wir den Counter-Context in unserer `nested.tsx` konsumieren. Das tun wir, indem wir den bereits verpackten `useCounter`-Konsumenten nutzen.\n\n```jsx\nconst [count, { increment, decrement }] = useCounter();\nreturn (\n  <>\n    <div>{count()}</div>\n    <button onClick={increment}>+</button>\n    <button onClick={decrement}>-</button>\n  </>\n);\n```";
var stores_context = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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