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 = "Part of what makes Solid so performant is that our components are basically just function calls. The way we propagate updates is that the compiler wraps potentially reactive expressions in object getters. You can picture the compiler to output:\n\n```jsx\n// this JSX\n<MyComp dynamic={mySignal()}>\n  <Child />\n</MyComp>\n\n// to become\nMyComp({\n  get dynamic() { return mySignal() },\n  get children() { return Child() }\n});\n```\nThis means that these props are evaluated lazily. Their access is deferred until where they are used. This retains reactivity without introducing extraneous wrappers or synchronization. However, it means that repeat access can lead to recreating child components or elements.\n\nThe vast majority of the time you will just be inserting props into the JSX so there is no problem. However, when you work with children, you need to be careful to avoid creating the children multiple times.\n\nFor that reason, Solid has the `children` helper. This method both creates a memo around the `children` prop and resolves any nested child reactive references so that you can interact with the children directly.\n\nIn the example, we have a dynamic list and we want to set the items' `color` style property. If we interacted with `props.children` directly, not only would we create the nodes multiple times, but we'd find `props.children` to be a function, the Memo returned from `<For>`.\n\nInstead let's use the `children` helper inside `colored-list.tsx`:\n```jsx\nexport default function ColoredList(props) {\n  const c = children(() => props.children);\n  return <>{c()}</>\n}\n```\nNow to update our elements, let's create an Effect:\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 };
