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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Reatividade",
  "children": [{
    "depth": 2,
    "value": "Introduzindo Primitivos",
    "children": []
  }, {
    "depth": 2,
    "value": "Como funciona",
    "children": []
  }, {
    "depth": 2,
    "value": "Considerações",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    code: "code",
    pre: "pre",
    span: "span",
    h2: "h2",
    ol: "ol",
    li: "li"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "reatividade",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#reatividade",
        children: "#"
      }), "Reatividade"]
    }), "\n", jsx(_components.p, {
      children: "O gerenciamento de dados do Solid é construído a partir de um conjunto de primitivas reativas flexíveis que são responsáveis por todas as atualizações. Ele tem uma abordagem muito semelhante ao MobX ou Vue, exceto que nunca troca sua granularidade por um VDOM. Dependências são rastreadas automaticamente quando você acessa seus valores reativos em seus efeitos e código JSX View."
    }), "\n", jsxs(_components.p, {
      children: ["Os primitivos do Solid vêm na forma de chamadas ", jsx(_components.code, {
        children: "create"
      }), " que geralmente retornam tuplas, onde geralmente o primeiro elemento é um primitivo legível e o segundo é um setter. É comum referir-se apenas à parte legível pelo nome primitivo."]
    }), "\n", jsxs(_components.p, {
      children: ["Aqui está um contador de incremento automático básico que é atualizado com base na configuração do signal de ", 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: "introduzindo-primitivos",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#introduzindo-primitivos",
        children: "#"
      }), "Introduzindo Primitivos"]
    }), "\n", jsx(_components.p, {
      children: "O Solid é composto de 3 primitivas primárias: Signal, Memo e Effect. Em seu núcleo está o padrão Observer, onde Signals (e Memos) são rastreados envolvendo Memos e Effects."
    }), "\n", jsx(_components.p, {
      children: "Os Signals são os primitivos mais simples. Eles contêm valor e funções get e set para que possamos interceptar quando eles são lidos e escritos."
    }), "\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 são funções que envolvem leituras de nosso Signal e são executadas novamente sempre que o valor de um Signal dependente muda. Isso é útil para criar efeitos colaterais, como renderização."
    }), "\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 são valores derivados armazenados em cache. Eles compartilham as propriedades de Signals e Effects. Eles rastreiam seus próprios Signals dependentes, reexecutando apenas quando eles mudam, e eles próprios são Signals rastreáveis."
    }), "\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: "como-funciona",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#como-funciona",
        children: "#"
      }), "Como funciona"]
    }), "\n", jsx(_components.p, {
      children: "Signals são emissores de eventos que contêm uma lista de assinaturas. Eles notificam seus assinantes sempre que seu valor muda."
    }), "\n", jsx(_components.p, {
      children: "As coisas ficam mais interessantes como essas assinaturas acontecem. Solid usa rastreamento automático de dependência. As atualizações acontecem automaticamente conforme os dados mudam."
    }), "\n", jsx(_components.p, {
      children: "O truque é uma pilha global em tempo de execução. Antes que um Effect ou Memo execute (ou reexecute) sua função fornecida pelo desenvolvedor, ele empurra a si mesmo para aquela pilha. Então, qualquer Signal que é lido verifica se há um ouvinte atual na pilha e, se houver, adiciona o ouvinte às suas assinaturas."
    }), "\n", jsx(_components.p, {
      children: "Você pode pensar assim:"
    }), "\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: "Agora, sempre que atualizamos o Signal, sabemos quais Effects devem ser executados novamente. Simples, mas eficaz. A implementação real é muito mais complicada, mas essa é a essência do que está acontecendo."
    }), "\n", jsx(_components.p, {
      children: "Para uma compreensão mais detalhada de como funciona a reatividade, estes são artigos úteis:"
    }), "\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: "considerações",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#considerações",
        children: "#"
      }), "Considerações"]
    }), "\n", jsx(_components.p, {
      children: "Essa abordagem de reatividade é muito poderosa e dinâmica. Ele pode manipular as dependências que mudam rapidamente por meio da execução de diferentes ramificações do código condicional. Ele também funciona por meio de muitos níveis de indireção. Qualquer função executada dentro de um escopo de rastreamento também está sendo rastreada."
    }), "\n", jsx(_components.p, {
      children: "No entanto, existem alguns comportamentos e desvantagens importantes dos quais devemos estar cientes."
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Toda reatividade é rastreada a partir de chamadas de função, seja diretamente ou oculta sob getter/proxy e acionada por acesso de propriedade. Isso significa que o local onde você acessa as propriedades em objetos reativos é importante."
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Componentes e callbacks de chamada de fluxos de controle não rastreiam escopos e são executados apenas uma vez. Isso significa que a desestruturação ou execução de lógica de nível superior em seus componentes não será executada novamente. Você deve acessar esses Signals, Stores e props de dentro de outras primitivas reativas ou do JSX para que essa parte do código seja reavaliada."
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Essa abordagem rastreia apenas de forma síncrona. Se você tiver um setTimeout ou usar uma função assíncrona em seu Effect, o código executado de forma assíncrona após o fato não será rastreado."
        }), "\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-de69fd2f.js.map
