var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, For } from \"solid-js\";\n\nimport ColoredList from \"./colored-list\";\n\nfunction App() {\n  const [color, setColor] = createSignal(\"purple\");\n\n  return <>\n    <ColoredList color={color()}>\n      <For each={[\"Most\", \"Interesting\", \"Thing\"]}>{item => <div>{item}</div>}</For>\n    </ColoredList>\n    <button onClick={() => setColor(\"teal\")}>Set Color</button>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "colored-list",
			content: "import { createEffect, children } from \"solid-js\";\n\nexport default function ColoredList(props) {\n  return <>{props.children}</>\n}"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from \"solid-js/web\";\nimport { createSignal, For } from \"solid-js\";\n\nimport ColoredList from \"./colored-list\";\n\nfunction App() {\n  const [color, setColor] = createSignal(\"purple\");\n\n  return <>\n    <ColoredList color={color()}>\n      <For each={[\"Most\", \"Interesting\", \"Thing\"]}>{item => <div>{item}</div>}</For>\n    </ColoredList>\n    <button onClick={() => setColor(\"teal\")}>Set Color</button>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "colored-list",
			content: "import { createEffect, children } from \"solid-js\";\n\nexport default function ColoredList(props) {\n  const c = children(() => props.children);\n  createEffect(() => c().forEach(item => item.style.color = props.color));\n  return <>{c()}</>\n}"
		}
	]
};
var markdown = "Ein Teil davon, was Solid so performant macht, ist, dass unsere Komponenten grundsätzlich nur Funktionsaufrufe sind. Die Art, wie wir Aktualisierungen verteilen ist, dass der Compiler potentiell reaktive Ausdrücke in Objekt-Getter steckt. Man kann sich die Compiler-Ausgabe so vorstellen:\n\n```jsx\n// dieses JSX\n<MyComp dynamic={mySignal()}>\n  <Child />\n</MyComp>\n\n// wird zu\nMyComp({\n  get dynamic() { return mySignal() },\n  get children() { return Child() }\n});\n```\nDas heisst, dass diese Props verzögert evaluiert werden können. Mit dem Zugriff wird solange gewartet, bis sie tatsächlich verwendet werden. Das behält die Reaktivität bei, ohne dass fremde Filter oder Synchronisierungen eingeführt werden müssen. Allerdings bedeutet das, dass wiederholter Zugriff dazu führen kann, dass Kind-Komponenten oder -Elemente neu erzeugt werden.\n\nDie meiste Zeit über wirst Du nur Props ins JSX einfügen, so dass sich daraus kein Problem ergibt. Wenn man allerdings mit Kind-Elementen arbeitet, muss man vorsichtig sein, diese nicht mehrmals zu erzeugen.\n\nAus diesem Grund hat Solid den `children`-Helfer. Diese Methode erzeugt ein Memo um das `children`-Prop und löst die reaktiven Referenzen der Kinder auf, so dass man direkt mit Ihnen interagieren kann.\n\nIn diesem Beispiel haben wir eine dynamische Liste und wollen in jedes Kind-Element die `color`-Style-Eigenschaft setzen. Wenn wir direkt mit `props.children` interagieren, würden wir nicht nur die Nodes mehrmals erstellen, sondern könnten auch in `props.children` eine Funktion finden, das Memo, das von `<For>` zurückgegeben wird.\n\nLass uns stattdessen den `children`-Helfer innerhalb `colored-list.tsx` verwenden:\n```jsx\nexport default function ColoredList(props) {\n  const c = children(() => props.children);\n  return <>{c()}</>\n}\n```\nUm unsere Elemente zu aktualisieren, benutzen wir einen Effekt:\n```jsx\ncreateEffect(() => c().forEach(item => item.style.color = props.color));\n```\n";
var props_children = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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