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 are what we call the object that is passed to our component function on execution that represents all the attributes bound to its JSX. Props objects are readonly and have reactive properties which are wrapped in Object getters. This allows them to have a consistent form regardless of whether the caller used signals, signal expressions, or simple or static values. You simply access them by `props.propName`.\n\nFor this reason it is also very important to not just destructure props objects, as that would lose reactivity if not done within a tracking scope. In general accessing properties on the props object outside of Solid's primitives or JSX can lose reactivity. This applies not just to destructuring, but also to spreads and functions like `Object.assign`.\n\nSolid has a few utilities to help us when working with props. The first is `mergeProps`, which merges potentially reactive objects together (like a nondestructive `Object.assign`) without losing reactivity. The most common case is when setting default props for our components.\n\nIn the example, in `greetings.tsx`, we inlined the defaults in the template, but we could also use `mergeProps` to keep reactive updates even when setting defaults:\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 };
