var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nimport Greeting from \"./greeting\";\n\nfunction App() {\n  const [name, setName] = createSignal(\"Jakob\");\n\n  return <>\n    <Greeting greeting=\"Yo\" name={name()} style=\"color: teal;\" />\n    <button onClick={() => setName(\"Jarod\")}>Set Name</button>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "greeting",
			content: "import { splitProps } from \"solid-js\";\n\nexport default function Greeting(props) {\n  const { greeting, name, ...others } = props;\n  return <h3 {...others}>{greeting} {name}</h3>\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal } from \"solid-js\";\n\nimport Greeting from \"./greeting\";\n\nfunction App() {\n  const [name, setName] = createSignal(\"Jakob\");\n\n  return <>\n    <Greeting greeting=\"Yo\" name={name()} style=\"color: teal;\" />\n    <button onClick={() => setName(\"Jarod\")}>Set Name</button>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "greeting",
			content: "import { splitProps } from \"solid-js\";\n\nexport default function Greeting(props) {\n  const [local, others] = splitProps(props, [\"greeting\", \"name\"]);\n  return <h3 {...others}>{local.greeting} {local.name}</h3>\n}"
		}
	]
};
var markdown = "Объединение `пропсов` - не единственная операция, которую мы можем выполнить. Часто мы используем деструктуризацию, чтобы использовать часть `пропсов` в текущем компоненте, а другие передать дочерним компонентам.\n\nДля этого в Solid есть `splitProps`. Он принимает объект `props` и один или несколько массивов ключей, которые мы хотим извлечь в отдельные объекты `props`. Он возвращает массив объектов `props`, по одному на массив указанных ключей, плюс один объект `props` с оставшимися ключами, аналогично параметру `rest`. Все возвращенные объекты сохраняют реактивность.\n\nНаш пример не обновляется, когда мы задаем имя, из-за потери реактивности при деструктуризации в `greeting.tsx`:\n\n```jsx\nexport default function Greeting(props) {\n\tconst { greeting, name, ...others } = props;\n\treturn (\n\t\t<h3 {...others}>\n\t\t\t{greeting} {name}\n\t\t</h3>\n\t);\n}\n```\n\nСохранить реактивность мы можем с помощью `splitProps`:\n\n```jsx\nexport default function Greeting(props) {\n\tconst [local, others] = splitProps(props, ['greeting', 'name']);\n\treturn (\n\t\t<h3 {...others}>\n\t\t\t{local.greeting} {local.name}\n\t\t</h3>\n\t);\n}\n```\n\nТеперь кнопка работает как положено.\n";
var props_split = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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