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 предоставляет API `Контекст` (`Context API`) для передачи данных не используя props. Это полезно для обмена `Сигналами` и `Сторами`. Преимущество использования `Контекста` заключается в том, что он создается как часть детальной реактивной системы и управляется ею.\n\nДля начала создадим объект `Контекста`. Этот объект содержит компонент Provider, используемый для ввода наших данных. Однако распространенной практикой является оборачивание компонентов `Provider` и потребителей` useContext` со значениями, уже настроенными для конкретного контекста.\n\nИ именно этот подход мы и реализуем в этом примере. Вы можете увидеть определение простого хранилища счетчика в файле `counter.tsx`.\n\nЧтобы использовать контекст, сначала давайте обернем наш компонент приложения, чтобы мы могли использовать его глобально. Мы будем использовать наш провайдер `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```";
var stores_context = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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