import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["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 static values. You access them by ", jsx(_components.code, {
        children: "props.propName"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["For 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 ", jsx(_components.code, {
        children: "Object.assign"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Solid has a few utilities to help us when working with props. The first is ", jsx(_components.code, {
        children: "mergeProps"
      }), ", which merges potentially reactive objects together (like a nondestructive ", jsx(_components.code, {
        children: "Object.assign"
      }), ") without losing reactivity. The most common case is when setting default props for our components."]
    }), "\n", jsxs(_components.p, {
      children: ["In the example, in ", jsx(_components.code, {
        children: "greetings.tsx"
      }), ", we inlined the defaults in the template, but we could also use ", jsx(_components.code, {
        children: "mergeProps"
      }), " to keep reactive updates even when setting defaults:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " merged = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "greeting"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hi\""
        }), ", ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"John\""
        }), " }, props);\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "h3"
            }), ">"]
          }), "{merged.greeting} {merged.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "h3"
            }), ">"]
          })]
        }), "\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-c49c850d.js.map
