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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Réactivité",
  "children": [{
    "depth": 2,
    "value": "Introduction aux primitives",
    "children": []
  }, {
    "depth": 2,
    "value": "Comment ça marche",
    "children": []
  }, {
    "depth": 2,
    "value": "Considérations",
    "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: "réactivité",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#réactivité",
        children: "#"
      }), "Réactivité"]
    }), "\n", jsx(_components.p, {
      children: "La gestion des données avec Solid est construite avec une collection de primitives réactives flexibles qui sont responsables de toutes les mises à jour. L'approche est très similaire à MobX ou Vue sauf qu'elle ne sacrifie jamais la granularité pour un VDOM."
    }), "\n", jsxs(_components.p, {
      children: ["Les primitives de Solid sont sous la forme d'appel de ", jsx(_components.code, {
        children: "create"
      }), " qui vont souvent retourner des tuples, où généralement le premier élément est une primitive de lecture et la seconde d'écriture. Il est commun de référer seulement à la partie lisible par le nom de la primitive."]
    }), "\n", jsxs(_components.p, {
      children: ["Ci-dessous un exemple basique d'un compteur auto-incrémenter qui se met à jour après modification du signal ", 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\""
        }), ";\r\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\""
        }), ";\r\n\r\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "App"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\r\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"
        }), "),\r\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"
        }), ");\r\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));\r\n\r\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"
            }), ">"]
          })]
        }), ";\r\n};\r\n\r\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: "introduction-aux-primitives",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#introduction-aux-primitives",
        children: "#"
      }), "Introduction aux primitives"]
    }), "\n", jsx(_components.p, {
      children: "Solid est construit sur 3 principales primitives, Signal, Mémo et Effet. Au cœur de ces primitives, nous utilisons le pattern Observer."
    }), "\n", jsx(_components.p, {
      children: "Les Signaux sont les primitives les plus basiques. Elles contiennent des valeurs et des fonctions de lecture et écriture que nous pouvons intercepter quand elles sont lues et réécrites."
    }), "\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: "Les Effets sont des fonctions qui enrobe les fonctions de lecture de nos signaux et se réexécuté quand la valeur d'un Signal dépendant change. Ceci est utile lorsque l'on veut créer des effets secondaires, comme le rendu."
    }), "\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: "Enfin, les Mémos sont des valeurs dérivées mises en cache. Ils partagent des propriétés avec les Signaux et les Effets. Ils vont surveiller leurs propres Signaux dépendants, se réexécuter seulement quand ceux-ci changent et sont des Signaux surveillés."
    }), "\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: "comment-ça-marche",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#comment-ça-marche",
        children: "#"
      }), "Comment ça marche"]
    }), "\n", jsx(_components.p, {
      children: "Les Signaux sont des émetteurs d'évènement qui possèdent une liste d'abonnés. Ils notifient ses abonnés lorsque leurs valeurs changent."
    }), "\n", jsx(_components.p, {
      children: "Ce qui est intéressant, c'est de savoir comment ces abonnements se font. Solid utilise un système automatique de surveillance de dépendance. Les mises à jour se font automatiquement lorsque la donnée change."
    }), "\n", jsx(_components.p, {
      children: "L'astuce est une pile globale à l'exécution. Avant qu'un Effet ou Mémo s'exécute (ou réexécute) sa fonction fournie par le développeur, il va s'ajouter lui-même à la pile. Puis tous les Signaux qui sont lus vont vérifier s’il y a un écouteur actuellement dans la pile et si c'est le cas, il va ajouter cet écouteur dans ses abonnés."
    }), "\n", jsx(_components.p, {
      children: "Vous pouvez le conceptualiser comme ceci :"
    }), "\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"
        }), ") {\r\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"
        }), "();\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "read"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => {\r\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " listener = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getCurrentListener"
        }), "();\r\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (listener) subscribers.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "add"
        }), "(listener);\r\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " value;\r\n  };\r\n\r\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"
        }), ") => {\r\n    value = nextValue;\r\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"
        }), "();\r\n  };\r\n\r\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " [read, write];\r\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Maintenant quand le Signal se met à jour, nous savons quels Effets se réexécutent. Simple, mais efficace. La vraie implémentation est plus compliquée, mais c'est le cœur de ce qu'il se passe."
    }), "\n", jsx(_components.p, {
      children: "Pour plus de détails au sujet de la Réactivité et de son fonctionnent, ces articles vous seront utiles :"
    }), "\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: "considérations",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#considérations",
        children: "#"
      }), "Considérations"]
    }), "\n", jsx(_components.p, {
      children: "Cette approche à la réactivité est très puissante et dynamique. Elle permet de gérer des dépendances changeantes à la volée en exécutant différentes branches de code conditionnel. Cela fonctionne aussi sur plusieurs niveaux d'indirection. N'importe quelle fonction exécutée à l'intérieur d'une portée surveillée est aussi surveillée."
    }), "\n", jsx(_components.p, {
      children: "Cependant, il existe des comportements clés et des compromis dont nous devons être conscients."
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Toute réactivité est surveillée par des appels de fonction que ce soit directement ou cacher derrière un getter/proxy et déclenchée par l'accès à une propriété. Cela veut dire que d'où vous accédez aux propriétés dans un objet réactif est important."
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Composants et fonction de rappel du contrôle du flux ne sont pas des portées surveillées et sont seulement exécutés une seule fois. Cela signifie que la déstructuration ou exécuter de la logique dans vos composants ne va pas se réexécuter. Vous devez accéder aux Signaux, Stores et props depuis d'autres primitives ou du JSX pour cette partie du code pour réévaluer."
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "Cette approche va seulement surveiller de manière synchrone. Si vous avez un setTimeout ou utilisez une fonction asynchrone dans votre Effet, le code qui s'exécute de manière asynchrone après les faits ne sera pas surveillé."
        }), "\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-82959a1b.js.map
