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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Pour commencer",
  "children": [{
    "depth": 2,
    "value": "Essayer Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Comprendre Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Penser Solid",
    "children": [{
      "depth": 3,
      "value": "1. Données déclaratives",
      "children": []
    }, {
      "depth": 3,
      "value": "2. Disparition de composants",
      "children": []
    }, {
      "depth": 3,
      "value": "3. Séparation Lecture/Écriture",
      "children": []
    }, {
      "depth": 3,
      "value": "4. Privilégier la simplicité à la facilité",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Web Components",
    "children": []
  }, {
    "depth": 2,
    "value": "Rendu côté serveur",
    "children": []
  }, {
    "depth": 2,
    "value": "Pas de Compilation ?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h2: "h2",
    p: "p",
    pre: "pre",
    code: "code",
    span: "span",
    h3: "h3",
    hr: "hr"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "pour-commencer",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pour-commencer",
        children: "#"
      }), "Pour commencer"]
    }), "\n", jsxs(_components.h2, {
      id: "essayer-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#essayer-solid",
        children: "#"
      }), "Essayer Solid"]
    }), "\n", jsxs(_components.p, {
      children: ["La manière la plus simple de commencer avec Solid est d'essayer en ligne. Notre REPL sur ", jsx(_components.a, {
        href: "https://playground.solidjs.com",
        children: "https://playground.solidjs.com"
      }), " est la meilleure façon d'expérimenter, ainsi que sur ", jsx(_components.a, {
        href: "https://codesandbox.io/",
        children: "https://codesandbox.io/"
      }), " où vous pouvez modifier ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md",
        children: "nos différents exemples"
      }), ".\nSinon, vous pouvez utiliser simplement notre template ", jsx(_components.a, {
        href: "https://vitejs.dev/",
        children: "vite"
      }), " en lançant ces commandes dans votre terminal :"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/js mon-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " mon-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# ou yarn ou pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# ou yarn ou pnpm"
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Ou avec TypeScript:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/ts mon-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " mon-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# ou yarn ou pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# ou yarn ou pnpm"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "comprendre-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#comprendre-solid",
        children: "#"
      }), "Comprendre Solid"]
    }), "\n", jsx(_components.p, {
      children: "Solid est fondamentalement construit autour de petites pièces composables qui servent à créer les fondations de nos applications. Ces pièces sont principalement des fonctions qui sont utilisées pour beaucoup d'APIs de niveau superficiel. Heureusement, vous n'avez pas besoin de connaître la majorité pour commencer."
    }), "\n", jsx(_components.p, {
      children: "Les deux principaux piliers de ces fondations sont les Composants et les Primitives Réactives."
    }), "\n", jsx(_components.p, {
      children: "Les Composants sont des fonctions qui acceptent des props en tant qu'objet et retournent des éléments JSX incluant des éléments natifs du DOM et d'autres composants. Ils peuvent s'écrire en tant qu'élément JSX en utilisant le PascalCase:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\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"
            }), ">"]
          }), "Hello {props.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n}\n\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComponent"
        }), " name=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Solid\""
        }), " />;\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Les Composants sont légers dans le sens où ils ne possèdent pas eux-mêmes d'état (not stateful) et n'ont pas d'instances. À la place, ils servent de fonctions de construction (factory) pour les éléments du DOM et des primitives réactives."
    }), "\n", jsx(_components.p, {
      children: "La réactivité de précision (fined-grained reactivity) est construite sur 3 primitives simples : Signaux, Mémos et Effets. Ensemble, ils forment un système de synchronisation automatiquement suivi qui s'assure que votre vue reste à jour. Le calcul de la réactivité prend forme de simple expression enrober dans des fonctions qui s'exécutent de manière synchrone."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [first, setFirst] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"JSON\""
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [last, setLast] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Bourne\""
        }), ");\n\n", 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"
        }), "(", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`", jsx(_components.span, {
            className: "hljs-subst",
            children: "${first()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${last()}"
          }), "`"]
        }), "));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Vous pouvez en apprendre plus sur ", jsx(_components.a, {
        href: "https://www.solidjs.com/docs/latest#reactivity",
        children: "le système de réactivité de Solid"
      }), " et ", jsx(_components.a, {
        href: "https://www.solidjs.com/docs/latest#rendering",
        children: "le système de rendu de Solid"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "penser-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#penser-solid",
        children: "#"
      }), "Penser Solid"]
    }), "\n", jsx(_components.p, {
      children: "Le design de Solid a été créé avec certaines opinions sur les principes et les valeurs qui nous aident à construire de meilleurs sites internet et applications. Il est plus simple d'apprendre et d'utiliser Solid quand vous connaissez la philosophie derrière son design."
    }), "\n", jsxs(_components.h3, {
      id: "1-données-déclaratives",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-données-déclaratives",
        children: "#"
      }), "1. Données déclaratives"]
    }), "\n", jsx(_components.p, {
      children: "Les \"données déclaratives\" est le concept de lier la description des données au comportement de leurs déclarations. Cela permet de facilement grouper le comportement des données dans un seul endroit."
    }), "\n", jsxs(_components.h3, {
      id: "2-disparition-de-composants",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-disparition-de-composants",
        children: "#"
      }), "2. Disparition de composants"]
    }), "\n", jsx(_components.p, {
      children: "Il est déjà difficile de structurer vos composants sans prendre en compte les mises à jour de ceux-ci. Le système de mise à jour de Solid est complètement indépendant des composants. Les Composants sont des fonctions qui sont appelées une fois et ensuite cessent d'exister. Les Composants n'existent que dans l'unique but d'organiser votre code, ni plus, ni moins."
    }), "\n", jsxs(_components.h3, {
      id: "3-séparation-lectureécriture",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-séparation-lectureécriture",
        children: "#"
      }), "3. Séparation Lecture/Écriture"]
    }), "\n", jsx(_components.p, {
      children: "Le contrôle précis et la prévisibilité créent de meilleurs systèmes. Nous n'avons pas besoin d'immutabilité stricte pour forcer un flux unidirectionnel, juste de la possibilité de prendre une décision consciente de savoir quelle pièce peut écrire et laquelle ne peut pas."
    }), "\n", jsxs(_components.h3, {
      id: "4-privilégier-la-simplicité-à-la-facilité",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-privilégier-la-simplicité-à-la-facilité",
        children: "#"
      }), "4. Privilégier la simplicité à la facilité"]
    }), "\n", jsx(_components.p, {
      children: "Une leçon que nous apprenons à la dure avec un système de réactivité détaillé. Les conventions explicites et constantes même si elles demandent plus d'efforts en valent la peine. Le but est de fournir un minimum d'outils pour servir à la base sur la quel construire."
    }), "\n", jsx(_components.hr, {}), "\n", jsxs(_components.h2, {
      id: "web-components",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#web-components",
        children: "#"
      }), "Web Components"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid est né d'un désire de mettre les Web Components en tant qu'acteur principal. Au fur et à mesure du temps, le design de Solid a évolué et ses objectifs ont changé. Cependant, Solid reste une bonne alternative pour les auteurs de Web Components. ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid-element",
        children: "Solid Element"
      }), " permets d'écrire et d'enrober des fonctions Composants en Solid pour produire des Web Components petits et performants. Au sain d'une application en Solid, Solid Element est capable d'utiliser l'API de Contexte et les Portails sont supportés dans le Shadow DOM avec l'isolation de style."]
    }), "\n", jsxs(_components.h2, {
      id: "rendu-côté-serveur",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rendu-côté-serveur",
        children: "#"
      }), "Rendu côté serveur"]
    }), "\n", jsx(_components.p, {
      children: "Solid propose une solution dynamique de rendu côté serveur qui permet une vraie expérience isomorphe. Avec l'utilisation de la primitive \"Resource\", les requêtes asynchrones sont facilement faites et, plus importantes, automatiquement sérialisées et synchronisées entre le client et le navigateur."
    }), "\n", jsxs(_components.p, {
      children: ["Comme Solid supporte le fonctionnement asynchrone et le stream rendering côté serveur, vous pouvez écrire votre code d'une seule manière et l'exécuter côté serveur. Ce qui veut dire que des fonctionnalités comme ", jsx(_components.a, {
        href: "https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense",
        children: "render-as-you-fetch"
      }), " et le fractionnement de code vont fonctionner sans effort avec Solid."]
    }), "\n", jsxs(_components.p, {
      children: ["Pour plus d'information, n'hésitez pas à lire le ", jsx(_components.a, {
        href: "https://www.solidjs.com/docs/latest/guides/server#server-side-rendering",
        children: "guide serveur"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "pas-de-compilation-",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pas-de-compilation-",
        children: "#"
      }), "Pas de Compilation ?"]
    }), "\n", jsx(_components.p, {
      children: "Vous n'aimez pas JSX ? Cela ne vous gêne pas de faire du travail manuel pour enrober vos expressions, d'avoir de moins bonne performance et des paquets plus gros ? Il est possible de créer des applications Solid en utilisant des Tagged Template Literals ou HyperScript dans un environnement non compilé."
    }), "\n", jsxs(_components.p, {
      children: ["Vous pouvez les exécuter directement depuis le navigateur en utilisant ", jsx(_components.a, {
        href: "https://www.skypack.dev/",
        children: "Skypack"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-html",
        children: [jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n    ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), " ", jsx(_components.span, {
            className: "hljs-attr",
            children: "type"
          }), "=", jsx(_components.span, {
            className: "hljs-string",
            children: "\"module\""
          }), ">"]
        }), jsxs(_components.span, {
          className: "javascript",
          children: ["\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " {\n        createSignal,\n        onCleanup,\n      } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/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: "\"https://cdn.skypack.dev/solid-js/web\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " html ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/html\""
          }), ";\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        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " html`", jsx(_components.span, {
            className: "xml",
            children: jsxs(_components.span, {
              className: "hljs-tag",
              children: ["<", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            })
          }), jsx(_components.span, {
            className: "hljs-subst",
            children: "${count}"
          }), jsxs(_components.span, {
            className: "xml",
            children: [jsxs(_components.span, {
              className: "hljs-tag",
              children: ["</", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            }), "`"]
          }), ";\n      };\n      ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "render"
          }), "(", jsx(_components.span, {
            className: "hljs-title class_",
            children: "App"
          }), ", ", jsx(_components.span, {
            className: "hljs-variable language_",
            children: "document"
          }), ".", jsx(_components.span, {
            className: "hljs-property",
            children: "body"
          }), ");\n    "]
        }), jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["N'oubliez pas, vous aurez quand même besoin de la librairie utilisée pour l'expression du DOM pour que cela fonctionne avec TypeScript. Vous pouvez utiliser les Tagged Template Literals avec ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions",
        children: "Lit DOM Expressions"
      }), " ou HyperScript avec ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions",
        children: "Hyper DOM Expressions"
      }), "."]
    })]
  });
}
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=getting-started-8d703f43.js.map
