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",
    blockquote: "blockquote",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "Stores are Solid's answer to nested reactivity. They are proxy objects whose properties can be tracked and can contain other objects which automatically become wrapped in proxies themselves, and so on."
    }), "\n", jsx(_components.p, {
      children: "To keep things light, Solid creates underlying Signals only for properties that are accessed under tracking scopes. And so, all Signals in Stores are created lazily as requested."
    }), "\n", jsxs(_components.p, {
      children: ["The ", jsx(_components.code, {
        children: "createStore"
      }), " call takes the initial value and returns a read/write tuple similar to Signals. The first element is the store proxy which is readonly, and the second is a setter function."]
    }), "\n", jsx(_components.p, {
      children: "The setter function in its most basic form takes an object whose properties will be merged with the current state. It also supports path syntax so that we can do nested updates. In this way we can still maintain control of our reactivity but do pinpoint updates."
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsx(_components.p, {
        children: "Solid's path syntax has many forms and includes some powerful syntax to do iteration and ranges. Refer to the API documentation for a full reference."
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Let's look at how much easier it is to achieve nested reactivity with a Store. We can replace the initialization of our component with this:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [todos, setTodos] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createStore"
        }), "([]);\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "text"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setTodos"
        }), "([...todos, { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "id"
        }), ": ++todoId, text, ", jsx(_components.span, {
          className: "hljs-attr",
          children: "completed"
        }), ": ", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), " }]);\n};\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toggleTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "id"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setTodos"
        }), "(\n    ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "todo"
          }), ") =>"]
        }), " todo.", jsx(_components.span, {
          className: "hljs-property",
          children: "id"
        }), " === id,\n    ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"completed\""
        }), ",\n    ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "completed"
          }), ") =>"]
        }), " !completed\n  );\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "We make use of the Store's path syntax with function setters that allow us to take the previous state and return the new state on nested values."
    }), "\n", jsx(_components.p, {
      children: "And that's it. The rest of the template will already react granularly (check the Console on clicking the checkbox)."
    })]
  });
}
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-6dafaaf9.js.map
