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();\n\n  return <>\n    <Greeting greeting=\"Hello\" />\n    <Greeting name=\"Jeremy\" />\n    <Greeting name={name()} />\n    <button onClick={() => setName(\"Jarod\")}>Set Name</button>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "greeting",
			content: "import { mergeProps } from \"solid-js\";\n\nexport default function Greeting(props) {\n  return <h3>{props.greeting || \"Hi\"} {props.name || \"John\"}</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();\n\n  return <>\n    <Greeting greeting=\"Hello\" />\n    <Greeting name=\"Jeremy\" />\n    <Greeting name={name()} />\n    <button onClick={() => setName(\"Jarod\")}>Set Name</button>\n  </>;\n}\n\nrender(() => <App />, document.getElementById('app'));"
		},
		{
			name: "greeting",
			content: "import { mergeProps } from \"solid-js\";\n\nexport default function Greeting(props) {\n  const merged = mergeProps({ greeting: \"Hi\", name: \"John\" }, props);\n\n  return <h3>{merged.greeting} {merged.name}</h3>\n}"
		}
	]
};
var markdown = "props とは、実行時にコンポーネント関数に渡されるオブジェクトのことで、JSX にバインドされたすべての属性を表します。props オブジェクトは読み取り専用で、Object ゲッターでラップされたリアクティブなプロパティを持っています。これにより、呼び出し元が Signal や Signal 式を使用しているかどうか、あるいは単純な値や静的な値を使用しているかどうかに関わらず、一貫した形式を持つことができます。`props.propName` でアクセスするだけです。\n\nこのため、追跡スコープ内で行なわないとリアクティビティが失われてしまうので、props オブジェクトを分割代入しないことも非常に重要です。一般的に、Solid のプリミティブや JSX の外側で props オブジェクトのプロパティにアクセスすると、リアクティビティが失われます。これは分割代入だけでなく、スプレッド演算子や `Object.assign` のような関数にも当てはまります。\n\nSolid には、props を扱う際に役立つユーティリティがいくつかあります。1 つ目は `mergeProps` で、潜在的にリアクティブなオブジェクトを、リアクティビティを失うことなく（非破壊的な `Object.assign` のように）マージします。最も一般的なケースは、コンポーネントにデフォルトの props を設定するときです。\n\nこの例の `greetings.tsx` では、テンプレート内にデフォルト値をインライン化しましたが、`mergeProps` を使えばデフォルトを設定している場合もリアクティブな更新を維持できます:\n\n```jsx\nconst merged = mergeProps({ greeting: \"Hi\", name: \"John\" }, props);\n\nreturn <h3>{merged.greeting} {merged.name}</h3>\n```\n";
var props_defaults = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

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