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 = "Props-Objekte zusammenzuführen ist nicht die einzige Operation, die wir machen können. Oft nutzen wir Destrukturierung, um manche der Props auf die gegenwärtige Komponente anzuwenden und andere abzuspalten, um sie an die Kind-Komponenten weiterzugeben.\n\nFür diesen Zweck hat Solid `splitProps`. Diese Methode nimmt das Props-Objekt und ein oder mehr Arrays von Eigenschaftsnamen entgegen, die in ihre eigenen Props-Objekte extrahiert werden sollen. Sie gibt ein Array von Props-Objekten zurück, eines pro Array mit Eigenschaftsnamen und ein weiteres mit den übrigen Eigenschaften, ähnlich wie beim Rest-Parameter. Alle zurückgegebenen Props-Objekte bewahren die Reaktivität.\n\nUnser Beispiel aktualisiert sich nicht, wenn wir den Namen ändern, da die Reaktivität durch das Destrukturieren in `greeting.tsx` verloren gegangen ist:\n```jsx\nexport default function Greeting(props) {\n  const { greeting, name, ...others } = props;\n  return <h3 {...others}>{greeting} {name}</h3>\n}\n```\n\nStattdessen können wir die Reaktivität mit `splitProps` beibehalten:\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```\nJetzt funktioniert der Knopf wie erwartet.\n";
var props_split = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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