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 は、props を経由せずにデータを渡すための Context API を提供しています。これは、Signal やストアを共有するのに便利です。コンテキストを使うと、リアクティブシステムの一部として作成され、それによって管理されるという利点があります。\n\nまず始めに、Context オブジェクトを作成します。このオブジェクトには、データを注入するために使う `Provider` コンポーネントが含まれています。しかし、`Provider`（訳注: 生産者）コンポーネントと、消費者である `useContext` を、特定のコンテキスト用に設定されたバージョンでラップするのが一般的な方法です。\n\nこのチュートリアルでは、まさにそれを実践しています。シンプルなカウンターストアの定義は、`counter.tsx` ファイルで確認できます。\n\nコンテキストを使用するには、まず App コンポーネントをラップしてグローバルに提供します。ラップされた `CounterProvider` を使用します。この場合、初期カウントを 1 にしましょう。\n\n```jsx\nrender(() => (\n  <CounterProvider count={1}>\n    <App />\n  </CounterProvider>\n), document.getElementById(\"app\"));\n```\n\n次に、カウンターのコンテキストを `nested.tsx` コンポーネントで利用する必要があります。これにはラップされた `useCounter` を使って行います。\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```\n";
var stores_context = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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