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\t<Child />\n</MyComp>;\n\n// превращается в:\nMyComp({\n\tget dynamic() {\n\t\treturn mySignal();\n\t},\n\tget children() {\n\t\treturn Child();\n\t},\n});\n```\n\nЭто означает, что эти пропсы вычисляются лениво — в момент вызова. Это сохраняет реактивность без добавления посторонних оберток или синхронизации. Однако это означает, что повторный доступ может привести к созданию лишних потомков (`children`): компонентов или элементов.\n\nВ подавляющем большинстве случаев вы просто вставляете пропсы в JSX, поэтому проблем нет. Однако, когда вы работаете с потомками, есть опасность создать их по несколько раз.\n\nПоэтому у Solid есть `children` хелпер (`helper`). Этот метод создает `Memo` вокруг свойства `children` и управляет любыми вложенными дочерние реактивными ссылками, так что вы можете напрямую взаимодействовать с дочерними элементами.\n\nВ этом примере у нас есть динамический список, и мы хотим установить свойство стиля элементов `color`. Если бы мы напрямую взаимодействовали с `props.children`, мы не только создавали бы узлы несколько раз, но и обнаружили бы, что` props.children` является функцией, которую `Memo` возвращает из `<For>`.\n\nВместо этого давайте воспользуемся хелпером `children` внутри `color-list.tsx`:\n\n```jsx\nexport default function ColoredList(props) {\n\tconst c = children(() => props.children);\n\treturn <>{c()}</>;\n}\n```\n\nТеперь, чтобы обновить наши элементы, давайте создадим `Эффект`:\n\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 };
