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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "FAQ",
  "children": [{
    "depth": 3,
    "value": "1. JSX sans VDOM ? Est-ce que cela n’est pas juste un concept ? J’ai entendu des personnalités comme des auteurs d’autres frameworks dire que c’était impossible.",
    "children": []
  }, {
    "depth": 3,
    "value": "2. Comment se fait-il que Solid soit aussi performant ?",
    "children": []
  }, {
    "depth": 3,
    "value": "3. Est-ce qu’il y a un React-Compat ?",
    "children": []
  }, {
    "depth": 3,
    "value": "4. Pourquoi la déstructuration ne fonctionne pas ? Je comprends que je peux régler le problème en enrobant un composant entier dans une fonction.",
    "children": []
  }, {
    "depth": 3,
    "value": "5. Pouvez-vous ajouter les composants classe ? Je trouve que le cycle de vie sont plus facile à comprendre",
    "children": []
  }, {
    "depth": 3,
    "value": "6. Je déteste vraiment JSX, puis-je utilise un Template DSL ? Ah, je vois que les Tagged Template Literals/HyperScript sont supporté. Peut-être que j’utiliserai cela...",
    "children": []
  }, {
    "depth": 3,
    "value": "7. Quand j'utilise un Signal au lieu d’un Store ? Pourquoi la différence ?",
    "children": []
  }, {
    "depth": 3,
    "value": "8. Pourquoi je ne peux pas assigner une valeur au Store de Solid comme je peux dans Vue, Svelte ou MobX ? Où est la liaison de données bidirectionnelle ?",
    "children": []
  }, {
    "depth": 3,
    "value": "9. Puis-je utiliser le système de réactivité de Solid tout seul ?",
    "children": []
  }, {
    "depth": 3,
    "value": "10. Est-ce que Solid a un équivalent des librairies Next.js ou Material Components que je peux utiliser ?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h3: "h3",
    p: "p",
    ol: "ol",
    li: "li",
    code: "code"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "faq",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#faq",
        children: "#"
      }), "FAQ"]
    }), "\n", jsxs(_components.h3, {
      id: "1-jsx-sans-vdom--est-ce-que-cela-nest-pas-juste-un-concept--jai-entendu-des-personnalités-comme-des-auteurs-dautres-frameworks-dire-que-cétait-impossible",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-jsx-sans-vdom--est-ce-que-cela-nest-pas-juste-un-concept--jai-entendu-des-personnalités-comme-des-auteurs-dautres-frameworks-dire-que-cétait-impossible",
        children: "#"
      }), "1. JSX sans VDOM ? Est-ce que cela n’est pas juste un concept ? J’ai entendu des personnalités comme des auteurs d’autres frameworks dire que c’était impossible."]
    }), "\n", jsx(_components.p, {
      children: "C’est possible quand nous n’utilisons pas le modèle de mise à jour de React. JSX est un Template DSL comme les autres. Juste un qui est plus flexible sur certains points. Insérer du JavaScript de manière arbitraire peut être un vrai challenge dans certains cas, mais n’est pas différent de supporté les opérateurs spread. Donc non, ce n’est pas juste un concept, mais une approche qui a été prouvé d’être l’un des plus performants."
    }), "\n", jsx(_components.p, {
      children: "Le vrai atout vient de l’extensibilité possible. Vous avez le compilateur qui travail pour vous en vous donnant des mises à jour du DOM natifs optimaux, mais vous avez toute la liberté d’une librairie comme React pour écrire des composants en utilisant des techniques de props de rendu et des composants d'ordre supérieur en complément de vos \"hooks\" réactifs. Vous n’aimez pas le flux de contrôle de Solid ? Écrivez-les vous-même."
    }), "\n", jsxs(_components.h3, {
      id: "2-comment-se-fait-il-que-solid-soit-aussi-performant",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-comment-se-fait-il-que-solid-soit-aussi-performant",
        children: "#"
      }), "2. Comment se fait-il que Solid soit aussi performant ?"]
    }), "\n", jsx(_components.p, {
      children: "Nous aurions aimé pouvoir donner une seule raison, mais la réalité est que cela vient surtout d’une combinaison de plusieurs décisions de design importantes :"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsx(_components.li, {
        children: "Réactivité explicite pour que seulement les choses qui ont besoin d’être réactive soit traqué."
      }), "\n", jsx(_components.li, {
        children: "Compile avec la création initiale en tête. Solid utilise un processus heuristique pour réduire la granularité et réduire ainsi le nombre de calculs fait tout en gardant les mises à jour clés flexible et performante."
      }), "\n", jsx(_components.li, {
        children: "Les expressions réactives sont juste des fonctions. Cela permet d'avoir des composants qui \"disparaissent\" avec des évaluations faignante de prop qui retire l’enrobage inutile synchronisation non utilisé."
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Ce sont actuellement ces techniques uniques combinés qui donne à Solid un avantage par rapport à la compétition."
    }), "\n", jsxs(_components.h3, {
      id: "3-est-ce-quil-y-a-un-react-compat-",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-est-ce-quil-y-a-un-react-compat-",
        children: "#"
      }), "3. Est-ce qu’il y a un React-Compat ?"]
    }), "\n", jsx(_components.p, {
      children: "Non. Et il se pourrait qu’il n’y en ait jamais. Bien que l’API soit similaire et les composants peuvent souvent être converti avec des ajustements mineurs, le système de mise à jour est fondamentalement différent. Les composants de React s’exécute encore et encore donc le code en dehors de Hooks fonctionnent très différemment. Les closures et les règles de hook ne sont pas seulement inutile, mais elles peuvent être utilisées d’une manière qui ne fonctionne pas dans notre cas."
    }), "\n", jsx(_components.p, {
      children: "D’autre part, Vue-compat est complètement faisable. Même s’il n’y a pas de plan de l’implémenter actuellement."
    }), "\n", jsxs(_components.h3, {
      id: "4-pourquoi-la-déstructuration-ne-fonctionne-pas--je-comprends-que-je-peux-régler-le-problème-en-enrobant-un-composant-entier-dans-une-fonction",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-pourquoi-la-déstructuration-ne-fonctionne-pas--je-comprends-que-je-peux-régler-le-problème-en-enrobant-un-composant-entier-dans-une-fonction",
        children: "#"
      }), "4. Pourquoi la déstructuration ne fonctionne pas ? Je comprends que je peux régler le problème en enrobant un composant entier dans une fonction."]
    }), "\n", jsx(_components.p, {
      children: "La réactivité s’exécute lors de l’accès d’une propriété sur les objets Prop et Store. Les référencés en dehors de cette association ou d’un calcul réactif ne permet pas de les traqués. La déstructuration est parfaitement supportée à l’intérieur."
    }), "\n", jsx(_components.p, {
      children: "Cependant, enrobé un composant entier dans une fonction n’est pas ce que l’on voudrait faire sans réfléchir. Solid n’a pas de VDOM. Donc n’importe quel changement traqué va réexécuter la fonction entière en recréant tout son contenu. Ne faites pas ça."
    }), "\n", jsxs(_components.h3, {
      id: "5-pouvez-vous-ajouter-les-composants-classe--je-trouve-que-le-cycle-de-vie-sont-plus-facile-à-comprendre",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#5-pouvez-vous-ajouter-les-composants-classe--je-trouve-que-le-cycle-de-vie-sont-plus-facile-à-comprendre",
        children: "#"
      }), "5. Pouvez-vous ajouter les composants classe ? Je trouve que le cycle de vie sont plus facile à comprendre"]
    }), "\n", jsx(_components.p, {
      children: "Nous n’avons aucune intention d’ajouter les composants classe. Le cycle de vie de Solid est lié à la planification de son système réactive et est artificielle. Théoriquement, vous pouvez créer des classes en dehors de ce système, mais l’efficacité de tout le code qui n’est pas une gestion d’évènements est basiquement exécuté dans le constructeur, en incluant une fonction de rendue. Cela représente juste plus de syntaxe pour moins de contrôle."
    }), "\n", jsx(_components.p, {
      children: "Groupez vos données et leurs comportements ensemble plutôt que dans le cycle de vie. C’est une bonne pratiquée du système de réactivité qui a fonctionné depuis plusieurs décennies."
    }), "\n", jsxs(_components.h3, {
      id: "6-je-déteste-vraiment-jsx-puis-je-utilise-un-template-dsl--ah-je-vois-que-les-tagged-template-literalshyperscript-sont-supporté-peut-être-que-jutiliserai-cela",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#6-je-déteste-vraiment-jsx-puis-je-utilise-un-template-dsl--ah-je-vois-que-les-tagged-template-literalshyperscript-sont-supporté-peut-être-que-jutiliserai-cela",
        children: "#"
      }), "6. Je déteste vraiment JSX, puis-je utilise un Template DSL ? Ah, je vois que les Tagged Template Literals/HyperScript sont supporté. Peut-être que j’utiliserai cela..."]
    }), "\n", jsx(_components.p, {
      children: "Stop, arrêtez-vous tout de suite. Nous utilisons JSX de la même manière que Svelte utilise son template, pour créer des instructions de DOM optimales. Les Tagged Template Literals et HyperScript peuvent être impressionnante de leur propre façon, mais sauf si vous avez de vraie raison comme la contrainte de ne pas utiliser de build, les Tagged Template Literals et HyperScript son inférieur en tout point. Des bundles plus grand, des performances plus lentes et un besoin de manuellement enrober les valeurs avec des solutions de contournement."
    }), "\n", jsx(_components.p, {
      children: "C’est bien d’avoir des options, mais le JSX de Solid est vraiment la meilleure solution dans notre cas. Un Template DSL serait super aussi, quoique plus restrictif, mais JSX nous donne tellement sans effort supplémentaire. TypeScript, Parsers existant, coloration syntaxique, TypeScript, Prettier, complétion de code et le meilleur pour la fin, TypeScript."
    }), "\n", jsx(_components.p, {
      children: "Les autres librairies ont ajouté le support pour ses fonctionnalités, mais cela représente un effort considérable et est encore imparfait et un problème constant de maintenance. C’est vraiment prendre une position pragmatique."
    }), "\n", jsxs(_components.h3, {
      id: "7-quand-jutilise-un-signal-au-lieu-dun-store--pourquoi-la-différence-",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#7-quand-jutilise-un-signal-au-lieu-dun-store--pourquoi-la-différence-",
        children: "#"
      }), "7. Quand j'utilise un Signal au lieu d’un Store ? Pourquoi la différence ?"]
    }), "\n", jsx(_components.p, {
      children: "Les Stores enrobent automatiquement les valeurs imbriquées les rendant idéal pour des structures de données imbriquées, et pour des choses comme des modèles. Pour la plupart des autres cas, les Signaux sont légers et font le travail à la perfection."
    }), "\n", jsxs(_components.p, {
      children: ["Autant, nous aurions aimé les fusionner, mais il est impossible de proxy une primitive. Les fonctions sont l’interface la plus simple et n’importe quelle expression réactive (incluant l’accès au state) peuvent être enrobé dans une fonction ce qui fourni un APi universelle. Vous pouvez nommer vos signaux et vos états comme bon vous semble et ils resteront minimales. La dernière chose que nous voulons est de vous forcer à écrire ", jsx(_components.code, {
        children: ".get()"
      }), ", ", jsx(_components.code, {
        children: ".set()"
      }), " ou encore pire ", jsx(_components.code, {
        children: ".value"
      }), ". Au moins, le premier peut être alias pour être plus bref, alors que le dernier est juste la forme le moins compact d’appeler une fonction."]
    }), "\n", jsxs(_components.h3, {
      id: "8-pourquoi-je-ne-peux-pas-assigner-une-valeur-au-store-de-solid-comme-je-peux-dans-vue-svelte-ou-mobx--où-est-la-liaison-de-données-bidirectionnelle-",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#8-pourquoi-je-ne-peux-pas-assigner-une-valeur-au-store-de-solid-comme-je-peux-dans-vue-svelte-ou-mobx--où-est-la-liaison-de-données-bidirectionnelle-",
        children: "#"
      }), "8. Pourquoi je ne peux pas assigner une valeur au Store de Solid comme je peux dans Vue, Svelte ou MobX ? Où est la liaison de données bidirectionnelle ?"]
    }), "\n", jsx(_components.p, {
      children: "La réactivité est un outil très puissant, mais aussi très dangereux. MobX le sait et introduit un mode Strict et les Actions pour limiter où/quand la mise à jour se fait. Solid gère ce problème avec un arbre entier de données de composant, cela devient apparent que nous pouvons tirer quelques leçons de React. Vous n’avez pas besoin de vraiment être immuable tant que vous fournissez une façon d’avoir le même contrat."
    }), "\n", jsx(_components.p, {
      children: "Être capable de donner la possibilité de mettre à jour le state est beaucoup plus important que de décider de passer un state. Donc, être capable de les séparer est important et seulement possible si la lecture est immuable. Nous n’avons aussi pas besoin de payer le coût de l’immuabilité si nous pouvons encore mise à jour de manière précise. Heureusement, il existe des tonnes d’options venant d’anciennes solutions comme ImmutableJS et Immer. Ironiquement, Solid agit globalement comme un Immer inversé avec ses mutables en interne et son interface immuable."
    }), "\n", jsxs(_components.h3, {
      id: "9-puis-je-utiliser-le-système-de-réactivité-de-solid-tout-seul-",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#9-puis-je-utiliser-le-système-de-réactivité-de-solid-tout-seul-",
        children: "#"
      }), "9. Puis-je utiliser le système de réactivité de Solid tout seul ?"]
    }), "\n", jsxs(_components.p, {
      children: ["Bien sûr. Bien que nous n’avons pas exporté un package séparé, il est totalement possible d’installer Solid sans le compilateur et juste utiliser les primitives réactives. Un des avantages de la réactivité granulaire est que ce n’est pas dépendant d’une librairie. Pour cela, presque toutes les librairies réactives fonctionne de la même cette manière. C’est cela qui a inspiré ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), " et sa librairie sous-jacente, ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions",
        children: "librairie DOM Expressions"
      }), ", de faire un rendu purement basé sur le système de réactivité."]
    }), "\n", jsxs(_components.p, {
      children: ["Pour lister quelques essaies: ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/mobxjs/mobx",
        children: "MobX"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/knockout/knockout",
        children: "Knockout"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/sveltejs/svelte",
        children: "Svelte"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/adamhaile/S",
        children: "S.js"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/Riim/cellx",
        children: "CellX"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/ds300/derivablejs",
        children: "Derivable"
      }), ", ", jsx(_components.a, {
        href: "https://github.com/luwes/sinuous",
        children: "Sinuous"
      }), ", et même récemment ", jsx(_components.a, {
        href: "https://github.com/vuejs/vue",
        children: "Vue"
      }), ". Bien plus est requise dans une librairie réactive que de le marquer dans le moteur de rendu comme, ", jsx(_components.a, {
        href: "https://github.com/Polymer/lit-html",
        children: "lit-html"
      }), " par exemple."]
    }), "\n", jsxs(_components.h3, {
      id: "10-est-ce-que-solid-a-un-équivalent-des-librairies-nextjs-ou-material-components-que-je-peux-utiliser-",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#10-est-ce-que-solid-a-un-équivalent-des-librairies-nextjs-ou-material-components-que-je-peux-utiliser-",
        children: "#"
      }), "10. Est-ce que Solid a un équivalent des librairies Next.js ou Material Components que je peux utiliser ?"]
    }), "\n", jsxs(_components.p, {
      children: ["Pas à ce que l’on sache. Si vous êtes intéressé d’en construire une, nous sommes disponibles sur notre ", jsx(_components.a, {
        href: "https://discord.com/invite/solidjs",
        children: "Discord"
      }), " pour vous aider. Nous avons les fondamentaux et avons juste besoin de les construire."]
    })]
  });
}
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=faq-13a1d33a.js.map
