times components

La bibliothèque des composants Times

But

Home of the Times's react Composants.

Environnement de développement

Nous avons besoin de macOS avec Node.js (pour une version spécifique, veuillez vérifier Package.json Restrictions), YARN (dernier)

Vous pouvez essayer sans ces exigences, mais vous seriez seul.

Affichage de nos composants

Allez sur http://components.thetimes.co.uk

Commencer

1. yarn install

2. Les composants peuvent être vus courir dans un livre de contes

• livre de contes
  1. yarn storybook
  2. aller sur http: // localhost: 9001

Schéma

Voir le package UTILS sur la façon de mettre à jour le schéma.

Débogage

Les composants de ce projet peuvent être débogués via les outils de développeur de votre navigateur. Ces étapes supposent l'utilisation de chrome devtools.

Pour déboguer notre livre de contes Web:

1. yarn storybook
2. Accédez à http: // localhost: 9001
3. Ouvert Devtools
4. Cliquez sur Sources
5. Dans l'onglet réseau sous le volet le plus à gauche, développez TOP => StoryBook-Preview-Iframe => webPack: // => . => packages

Tous ces fichiers source peuvent être débogués directement.

Lier les composants du temps au projet de rendu

Suivez ces étapes ici

Vous verrez également l'option de faire une version Canari dans le pipeline, qui publiera une version de test de vos modifications que vous pouvez importer dans Render.

Voir vos modifications de rendu avec les fichiers RNW.js

En plus de lier les composants du Times et de rendre ensemble, vous pouvez afficher les modifications apportées aux composantes du Times dans le rendu via les fichiers RNW.js.

1. Dans Times Composants, après avoir apporté vos modifications, exécutez yarn bundle dans le package dans lequel vous travailliez. Si vous travailliez dans le package ts-components vous devrez d'abord exécuter yarn build , puis yarn bundle .
2. L'exécution de la commande crée un fichier rnw.js dans la racine du dossier. Vérifiez le fichier pour voir si vos modifications sont passées.
3. Copiez le contenu du fichier rnw.js et collez-le dans le fichier associé dans node_modules de Render. Par exemple, si vous avez regroupé le fichier rnw.js dans le package d' article-skeleton dans les composants du Times, vous colleriez le contenu dans node_modules/@times-components/article-skeleton/rnw.js .
4. Exécutez le rendu et vous devriez voir vos modifications.

Déboguer les tests

Les tests utilisent actuellement la plaisanterie pour s'exécuter, donc si vous souhaitez déboguer un test, suivez ces étapes:

1. (Recherchez votre commande de test) jest --config="./packages/provider/__tests__/jest.config.js" . Selon le répertoire dont nous commençons les tests, le répertoire --config peut différer. Mon répertoire Currenct est à la racine du repo: times-components .

2. Consultez votre commande de test dans le package.json pour le package spécifique que vous souhaitez consulter.

Remarque: Si vous n'avez pas l'installation de la plaisanterie à l'échelle mondiale, vous pouvez l'utiliser localement à partir de node_modules/.bin/jest

3. (Démarrer les tests en mode de débogage) Nous devons démarrer la même commande mais via Node en mode débogage, comme: node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand

Remarque: --runInBand est un indicateur jest qui exécute tous les tests en série dans le processus actuel. Si nous n'ajoutons pas ce drapeau, seul le processus de nœud qui a commencé jest sera débordonné.

4. (Ajouter des instructions de débogage) Normalement, nous ajoutions des points d'arrêt, mais lorsque le débogage à distance n'est pas toujours possible, car les fichiers dont nous avons besoin pour mettre les points d'arrêt ne sont pas encore chargés par jest . Donc, pour que le débogueur s'arrête là où nous le voulons, nous devons ajouter debugger; Instructions au lieu de points d'arrêt dans le code et rétractations si nécessaire.

5. (Attacher à la prise Web) Une fois que nous avons commencé les tests en mode de débogage, nous devons y attacher:

• (Recommandé) Utilisez Chrome Remote Debug pour le nœud:

  1. Open chrome://inspect dans Chrome Address Bar
  2. Open dedicated DevTools for Node
  3. Si vous avez commencé les tests avec la commande susmentionnée, il devrait se connecter automatiquement, mais s'il ne va pas dans l'onglet Connection de la fenêtre contextuelle et ajoutez la connexion localhost:9229 ou quel que soit votre port
  4. Le débogueur doit s'arrêter sur la première ligne en raison de l'indicateur --inspect-brk et une fois que vous appuyez sur le bouton de lecture (reprendre l'exécution), il doit s'arrêter sur votre debugger; déclaration

  Remarque: une fois qu'il s'arrête, vous pouvez voir que tout votre code est regroupé en une seule ligne. Il y a une solution facile pour cela: en bas de la fenêtre de débogage près de la Line: 1 Column: 1 étiquettes, vous devriez voir un bouton {} quittra votre code et vous pourrez toujours déboguer correctement.

• (Utilisez vScode) la configuration devrait regarder à proximité:

 ...
    "configurations" : [
      {
          "localRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "remoteRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "type" : " node " ,
          "request" : " attach " ,
          "name" : " Attach to Server on 9229 " ,
          "address" : " 127.0.0.1 " ,
          "port" : 9229
      }
  ]

Contributif

Voir le contribution.md pour une répartition approfondie du projet.

yarn commit commetra des fichiers (identiques à git commit ) et aidera le contributeur à ajouter un message de validation approprié en ligne avec le changelog conventionnel