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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Reactividad",
  "children": [{
    "depth": 2,
    "value": "Conoce los Primitivos",
    "children": []
  }, {
    "depth": 2,
    "value": "Cómo funciona",
    "children": []
  }, {
    "depth": 2,
    "value": "Consideraciones",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    code: "code",
    em: "em",
    pre: "pre",
    span: "span",
    h2: "h2",
    ol: "ol",
    li: "li"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "reactividad",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#reactividad",
        children: "#"
      }), "Reactividad"]
    }), "\n", jsx(_components.p, {
      children: "El manejo de datos de Solid está construido con un set de primitivos reactivos y flexibles que son responsables de todas las actualizaciones. Toma un acercamiento muy similar al de MobX o Vue excepto que no sacrifica su granularidad por un DOM Virtual. Las dependencias son rastreadas automáticamente cuando accedes a tus valores reactivos en los Effects y código de Vistas JSX."
    }), "\n", jsxs(_components.p, {
      children: ["Los primitivos de Solid vienen en la forma de llamadas ", jsx(_components.code, {
        children: "create"
      }), " que usualmente retornan ", jsx(_components.em, {
        children: "tuples"
      }), ", donde generalmente el primer elemento es un primitivo que puede leerse y el segundo es un ", jsx(_components.em, {
        children: "setter"
      }), ". Es común referirse únicamente a la parte legible por el nombre del primitivo."]
    }), "\n", jsxs(_components.p, {
      children: ["Aquí te mostramos un contador básico auto-incremental que se actualiza basado en establecer la señal ", jsx(_components.code, {
        children: "count"
      }), "."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { createSignal, onCleanup } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { render } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js/web'"
        }), ";\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "App"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), "),\n  timer = ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "setInterval"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setCount"
        }), "(", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "() + ", jsx(_components.span, {
          className: "hljs-number",
          children: "1"
        }), "), ", jsx(_components.span, {
          className: "hljs-number",
          children: "1000"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onCleanup"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "clearInterval"
        }), "(timer));\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: "div"
            }), ">"]
          }), "{count()}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n};\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "App"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'app'"
        }), "));\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "conoce-los-primitivos",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#conoce-los-primitivos",
        children: "#"
      }), "Conoce los Primitivos"]
    }), "\n", jsx(_components.p, {
      children: "Solid está hecho de 3 primitivos primarios, Signal, Memo y Effect. En su núcleo está el patron Observador donde Signals (y Memos) son rastreados envolviendo Memos y Effects."
    }), "\n", jsx(_components.p, {
      children: "Signals son los primitivos mas simples. Contienen un valor y obtienen y definen funciones para que podamos interceptarlos cuando estos son utilizados."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Effects son funciones que envuelven lecturas de nuestras Signals y se re-ejecutan cuando cambia un valor de la misma. Esto es útil para crear efectos secundarios, como el renderizado."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"The latest count is\""
        }), ", ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "()));\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Finalmente, Memos, son valores derivados en caché. Comparten las propiedades de ambos, Signals y Effects. Rastrean sus propias Signals dependientes, re-ejecutando únicamente cuando estas cambien, además son propiamente, Signals rastreables."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " fullName = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createMemo"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`", jsx(_components.span, {
            className: "hljs-subst",
            children: "${firstName()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${lastName()}"
          }), "`"]
        }), ");\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "cómo-funciona",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#cómo-funciona",
        children: "#"
      }), "Cómo funciona"]
    }), "\n", jsx(_components.p, {
      children: "Signals, son son emisores de eventos que albergan una lista de suscripciones. Estas notifican a sus suscriptores cuando su valor cambia."
    }), "\n", jsx(_components.p, {
      children: "Donde las cosas se vuelven mas interesantes es en la forma en que estas suscripciones pasan. Solid usa rastreo automático de dependencias. Las actualizaciones suceden automáticamente cuando cambia el valor."
    }), "\n", jsxs(_components.p, {
      children: ["El truco es un ", jsx(_components.em, {
        children: "stack"
      }), " global en tiempo de ejecución. Antes de que se ejecute un Memo o un Effect (o se re-ejecute) dicha función, se empuja a si misma al ", jsx(_components.em, {
        children: "stack"
      }), ". Entonces, cualquier señal que es leída checa si hay algún suscriptor en el ", jsx(_components.em, {
        children: "stack"
      }), " y si es así agrega el suscriptor a sus suscripciones."]
    }), "\n", jsx(_components.p, {
      children: "Puedes pensarlo así:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "value"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " subscribers = ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "new"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Set"
        }), "();\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "read"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " listener = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getCurrentListener"
        }), "();\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (listener) subscribers.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "add"
        }), "(listener);\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " value;\n  };\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "write"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "nextValue"
        }), ") => {\n    value = nextValue;\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "for"
        }), " (", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " sub ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "of"
        }), " subscribers) sub.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "run"
        }), "();\n  };\n\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " [read, write];\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Ahora cada que actualizamos la Signal sabemos que Effects re-ejecutar. Simple y aún así, efectivo. La verdadera implementación es mucho mas complicada pero básicamente eso es lo que sucede."
    }), "\n", jsx(_components.p, {
      children: "Para entender mas detalladamente como la Reactividad funciona, estos son unos artículos útiles:"
    }), "\n", jsx(_components.p, {
      children: jsx(_components.a, {
        href: "https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf",
        children: "A Hands-on Introduction to Fine-Grained Reactivity"
      })
    }), "\n", jsx(_components.p, {
      children: jsx(_components.a, {
        href: "https://dev.to/ryansolid/building-a-reactive-library-from-scratch-1i0p",
        children: "Building a Reactive Library from Scratch"
      })
    }), "\n", jsx(_components.p, {
      children: jsx(_components.a, {
        href: "https://indepth.dev/posts/1289/solidjs-reactivity-to-rendering",
        children: "SolidJS: Reactivity to Rendering"
      })
    }), "\n", jsxs(_components.h2, {
      id: "consideraciones",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#consideraciones",
        children: "#"
      }), "Consideraciones"]
    }), "\n", jsx(_components.p, {
      children: "Este enfoque de la reactividad es muy poderoso y dinámico. Puede manejar el cambio de dependencias sobre la marcha mediante la ejecución de diferentes ramas de código condicional. También funciona a través de muchos niveles de indirección. También se realiza un seguimiento de cualquier función ejecutada dentro de un ámbito de seguimiento."
    }), "\n", jsx(_components.p, {
      children: "Sin embargo, hay algunos comportamientos clave y compromisos de las que debemos ser conscientes."
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Toda la reactividad está siendo rastreada por llamadas de función ya sea directamente o escondidas bajo el getter/proxy y disparada por el acceso a la propiedad. Esto significa que donde accedes a las propiedades de objetos reactivos es importante."
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["Los componentes y ", jsx(_components.em, {
            children: "callbacks"
          }), " desde el control de flujo no son ambientes de rastreo y solo se ejecutan una vez. Esto significa que desestructurar o hacer lógica de nivel superior en tus componentes no se re-ejecutará. Debes acceder a estas Signals, Stores, y props desde dentro de otros primitivos reactivos o del JSX para que dicha parte del código se re-evalúe."]
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["Este acercamiento solo rastrea sincrónicamente. Si tienes un ", jsx(_components.code, {
            children: "setTimeout"
          }), " o usas una función asíncrona en tu Effect, el código que se ejecute de forma asíncrona después del hecho no será rastreada."]
        }), "\n"]
      }), "\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=reactivity-1c2a6763.js.map
