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 = "Merging props is not the only operation we can do. Often we use destructuring to use some of the props on the current component but then split off others to pass through to child components.\n\nFor this purpose, Solid has `splitProps`. It takes the props object and one or more arrays of keys that we want to extract into their own props objects. It returns an array of props objects, one per array of specified keys, plus one props object with any remaining keys, similar to the rest parameter. All returned objects preserve reactivity.\n\nOur example doesn't update when we set the name because of lost reactivity when we destructure in `greeting.tsx`:\n```jsx\nexport default function Greeting(props) {\n  const { greeting, name, ...others } = props;\n  return <h3 {...others}>{greeting} {name}</h3>\n}\n```\n\nInstead we can maintain reactivity with `splitProps`:\n```jsx\nexport default function Greeting(props) {\n  const [local, others] = splitProps(props, [\"greeting\", \"name\"]);\n  return <h3 {...others}>{local.greeting} {local.name}</h3>\n}\n```\nNow the button works as expected.\n";
var props_split = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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