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 = "Solid のパフォーマンスが高い理由のひとつは、コンポーネントが基本的に単なる関数呼び出しであることです。更新情報を伝達する方法は、潜在的にリアクティブな式をコンパイラがオブジェクトゲッターでラップすることです。コンパイラが出力する様子を想像してみてください:\n\n```jsx\n// この JSX が\n<MyComp dynamic={mySignal()}>\n  <Child />\n</MyComp>\n\n// こうなります\nMyComp({\n  get dynamic() { return mySignal() },\n  get children() { return Child() }\n});\n```\nこれは、これらの props が遅延評価されることを意味します。これらのアクセスは、それらが使用されるまで延期されます。これにより、余計なラッパーや同期を導入することなく、リアクティビティを維持できます。しかしこれは、子コンポーネントや要素の場合、繰り返しアクセスすることで再作成につながる可能性があることを意味します。\n\nほとんどの場合、これらを JSX に挿入するだけなので問題はありません。しかし、子要素を操作する必要がある場合には注意が必要です。\n\nそのため、Solid には `children` ヘルパーが用意されています。このメソッドは、子プロセスへのアクセスのための Memo を作成するだけでなく、ネストした子プロセスへのリアクティブな参照を解決し、子プロセスを直接操作できるようにします。\n\nこの例では、動的なリストの `color` スタイルプロパティを設定しています。`props.children` を直接操作してしまうと、ノードを何度も作成しなければならないだけでなく、子要素自体も関数であり、`<For>` から返された Memo であることが分かります。\n\n代わりに、`colored-list.tsx` 内で `children` ヘルパーを使ってみましょう:\n```jsx\nexport default function ColoredList(props) {\n  const c = children(() => props.children);\n  return <>{c()}</>\n}\n```\nそれでは、要素を更新するために、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 };
