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 提供了一个 Context API 来传递数据，Context 不依赖于 props 传递。这对于共享 Signal 和 Store 很有用。使用 Context 的好处是创建的 Context 是响应式系统的一部分创建并由之管理。\n\n首先，我们创建一个 Context 对象。该对象包含一个用于注入数据的 `Provider` 组件。但是通常的做法是将 `Provider` 组件和 `useContext` 消费者与已经为 Context 设置的数据封装在一起。\n\n这正是我们在本教程中的内容。你可以在 `counter.tsx` 文件中查看简单计数器 Store 的定义。\n\n要使用 Context，我们需要使用 `CounterProvider` 组件包装 App 组件以在全局范围内注入 Context。并在设置初始计数值为 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```";
var stores_context = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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