\n \n\n```\n\nLa seule balise importante à ne pas omettre est `
`. C'est la balise d'injection du code ReactJS définissant le code HTML Front-End de l'instance Weever.\n\nQuant au point d'entrée JS de Weever `./src/client/launchWeever.js` à définir, le code minimal est celui-ci :\n\n```js\nimport {launchWeever} from \"@mnemotix/weever-core/launchWeever\";\nimport {theme} from \"./theme\";\nimport possibleTypes from \"./gql/possibleTypes.json\";\n\nlaunchWeever({\n possibleTypes,\n theme,\n extensions: []\n});\n```\n\n- `possibleTypes` est un object JS [nécéssaire au client GraphQL Apollo](https://www.apollographql.com/docs/react/data/fragments/#using-fragments-with-unions-and-interfaces) pour résoudre les fragments GQL. Ce fichier doit être généré à chaque changement de définition du schéma GraphQL. Pour cela deux options :\n - Si votre modèle ne spécifie pas celui de base. Copier-coller le fichier [/documentation/possibleTypes.json](documentation/possibleTypes.json) dans `./src/client/gql/possibleTypes.json` fera l'affaire.\n - Sinon, appellez la commande `yarn gql-fragments [chemin de votre définition de modèle]` qui le fera pour vous.\n- `theme` est un objet JS définissant le thème graphique de l'application au [format MUI](https://mui.com/material-ui/customization/theming).\n- `extensions` est la liste des extensions pour surcharger le code FrontEnd de l'application décrit dans Weeever Core. Voir la section `Extensions` dédiée.\n\n#### Lancement\n\nUne fois la préparation terminée. Deux méthodes de lancement.\n\n- Utiliser l'utilitaire [@babel/node](https://babeljs.io/docs/en/babel-node) \n\n```shell\nbabel-node ./src/server/entrypoint.js\n```\n\n- Utiliser la librairie JS [@babel/register](https://babeljs.io/docs/en/babel-register) et créer un fichier de transpilation intermédiaire à la racine du projet `entrypoint.js`\n\n```js\nrequire(\"@babel/register\");\nrequire(\"./src/server/entrypoint\");\n```\n\nPuis lancer la commande :\n\n```shell\nnode ./entrypoint.js\n```\n\n> Note : Tous les fichiers décrits dans la section `Lancement` et `Préparation` sont disponibles dans le dépôt de l'instance [Weever de démo](https://gitlab.com/mnemotix/weever-community/weever-demo) avec plus d'options et de détails (notamment l'intégration de Koncept dans les points d'entrée du fichier de configuration de Webpack)\n\n### Étendre Weever\n\n#### Extensions\n\nComme évoqué dans la section précédente l'utilitaire [@mnemotix/weever-core/launchWeever](src/client/launchWeever.js) peut attendre le paramètre `extensions`.\n\nC'est une liste d'instance d'objet [Extension](https://gitlab.com/mnemotix/synaptix-js/synaptix-ui/-/blob/main/src/extensions/Extension.js).\n\nUn exemple étant le plus parlant, on peut reprendre l'exemple ci-dessus en ajoutant une extension :\n\n```js\nimport {ROUTES} from \"@mnemotix/weever-core\";\nimport {Extension} from \"@synaptix/ui\";\nimport {Route} from \"react-router-dom\";\nimport loadable from \"@loadable/component\";\nimport {launchWeever} from \"@mnemotix/weever-core/launchWeever\";\nimport {theme} from \"./theme\";\nimport possibleTypes from \"./gql/possibleTypes.json\";\n\n// Routes are code splitted to decrease the size of initial laaded JS bundle file\n\nconst InjectedFragment = loadable(() => import(\"./components/InjectedFragment\"));\nconst OverridedComponent = loadable(() => import(\"./components/OverridedComponent\"));\nconst AddedComponent = loadable(() => import(\"./components/AddedComponent\"));\n\nconst extension = new Extension({\n name: \"MyCoolExtension\",\n generateTopRoutes: ({isContributor, isAdmin, isEditor} = {}) => (\n <>\n \n \n \n \n \n \n ),\n fragments: {\n \"Project.Heading.AfterTags\": InjectedComponent,\n },\n settings: {\n \"ProjectsListVisibleColumnNames\": [\"image\", \"title\", \"tags\", \"status\", \"updatedAt\", \"accessPolicy\"]\n }\n});\n\nlaunchWeever({\n possibleTypes,\n theme,\n extensions: [extension]\n});\n```\n\nDans cet exemple, trois types d'extensions sont utilisées.\n\n##### Surchage de haut niveau\n\nLa surchage complète et/ou ajout d'une route de haut niveau se fait dans le paramètre `generateTopRoutes` qui prend une fonction et attend une liste de routes à ajouter au début des [routes déjà existantes](src/client/Weever.js#L148). React Router s'arrêtant sur la première route matchant l'URL demandée, si deux routes avec le même chemin sont définies, la première l'emporte.\n\n##### Surchage d'une portion de composant\n\nLa Surchage d'une portion de composant se fait dans le paramètre `fragments` qui est un object de clés/valeurs. Les clés étant les identifiants des points d'injection dans l'application et les valeurs, le composant React à monter. \n\nDans le code de Weever Core vous pouvez trouver des choses comme dans [src/client/components/routes/Project/Project.js](src/client/components/routes/Project/Project.js#106) :\n\n```js\nuseExtensionFragment(\"Project.Heading.AfterTags\", {projectId: \"...\"});\n```\n\nIl s'agit d'un point d'injection possible défini par l'identifiant `Project.Heading.AfterTags`. \n\nDans l'exemple ci-dessus, le composant `InjectedComponent` est monté sous la forme `` au niveau de ce point d'injection.\n\nLe hook correspondant pour récupérer ce composant est exposé dans @synaptix/ui et s'appelle [useExtensionFragment](https://gitlab.com/mnemotix/synaptix-js/synaptix-ui/-/blob/main/src/extensions/useExtensionFragment.js) :\n\n##### Surchage d'une configuration particulière\n\nD'autres portions de l'application sont pilotées grâce à des configurations simples. Dans l'exemple plus haut la clé `ProjectsListVisibleColumnNames` concerne les [colonnes visibles par défaut](https://gitlab.com/mnemotix/synaptix-js/synaptix-ui/-/blob/main/src/components/base/CollectionView/TableView/Table.js#L141) de la liste des projets.\n\nLe hook correspondant pour récupérer cette valeur est exposé dans @synaptix/ui et s'appelle [useExtensionSettings](https://gitlab.com/mnemotix/synaptix-js/synaptix-ui/-/blob/main/src/extensions/useExtensionSettings.js) :\n\n```js\nuseExtensionSettings(\"ProjectsListVisibleColumnNames\")\n```\n\n\n","readmeFilename":"README.md"}