times components

Die Times -Komponentenbibliothek

Zweck

Heimat der react der Times.

Entwicklerumgebung

Wir benötigen macOS mit node.js (für eine bestimmte Version bitte paket.json -Einschränkungen), Garn (neuestes)

Sie können ohne diese Anforderungen versuchen, aber Sie wären selbst.

Unsere Komponenten betrachten

Gehen Sie zu http://components.thetimes.co.uk

Erste Schritte

1. Führen Sie yarn install

2. Komponenten können in einem Storybook ausgeführt werden

• Storybook
  1. yarn storybook
  2. Gehen Sie zu http: // localhost: 9001

Schema

Siehe Utils -Paket zum Aktualisieren des Schemas.

Debuggen

Die Komponenten in diesem Projekt können durch die Entwickler -Tools Ihres Browsers debuggen. Diese Schritte nehmen die Verwendung von Chrom Devtools aus.

Um unser Web -Storybook zu debuggen:

1. yarn storybook
2. Navigieren Sie zu http: // localhost: 9001
3. Devtools öffnen
4. Klicken Sie auf Quellen
5. Erweitern Sie im Netzwerk -Registerkarte "Netzwerk" im Bereich des linken Ablaufs Top => Storybook-Preview-frame => WebPack: // => . => Pakete

Jede dieser Quelldateien kann direkt debuggen werden.

Link Times Components mit dem Renderprojekt

Befolgen Sie hier diese Schritte

Sie sehen auch die Option, eine Kanarische Version in der Pipeline durchzuführen, mit der eine Testversion Ihrer Änderungen veröffentlicht wird, die Sie in Render importieren können.

Sehen Sie sich Ihre Änderungen im Render mit RNW.js -Dateien an

Neben der Verknüpfung der Times -Komponenten und der gemeinsamen Render -Repos können Sie Änderungen an Times -Komponenten anzeigen, die über die RNW.js -Dateien rendern.

1. Führen Sie in Zeitenkomponenten nach Ihrer Änderung yarn bundle in das Paket aus, in dem Sie gearbeitet haben. Wenn Sie im ts-components -Paket gearbeitet haben, müssen Sie zuerst yarn build und dann yarn bundle ausführen.
2. Das Ausführen des Befehls erstellt eine rnw.js -Datei im Stamm des Ordners. Überprüfen Sie die Datei, um festzustellen, ob Ihre Änderungen durchlaufen sind.
3. Kopieren Sie den Inhalt der Datei rnw.js und fügen Sie sie in die zugehörige Datei in Renders node_modules ein. Wenn Sie beispielsweise die RNW.js-Datei im article-skeleton -Paket in Zeitenkomponenten gebündelt haben, würden Sie den Inhalt in node_modules/@times-components/article-skeleton/rnw.js einfügen.
4. Führen Sie Render aus und Sie sollten Ihre Änderungen sehen.

Debuggen der Tests

Tests verwenden derzeit Scherz zum Ausführen. Wenn Sie also einen Test debuggen möchten, folgen Sie folgenden Schritten:

1. (Finden Sie Ihren Testbefehl) jest --config="./packages/provider/__tests__/jest.config.js" . Je nachdem, aus welchem ​​Verzeichnis wir die Tests starten, kann das Verzeichnis --config unterschiedlich sein. Mein CurrenRenct-Verzeichnis befindet sich in der Repo-Wurzel: times-components .

2. Sehen Sie sich Ihren Testbefehl aus dem package.json für das spespeciffic -Paket an, das Sie auschecken möchten.

Hinweis: Wenn Sie weltweit keinen Scherz installiert haben, können Sie es lokal aus dem node_modules/.bin/jest verwenden

3. (Starten Sie Tests im Debug-Modus) Wir müssen denselben Befehl starten, aber im Debug-Modus wie SO: node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand

Hinweis: --runInBand ist ein jest , das alle Tests im aktuellen Prozess seriell ausführt. Wenn wir dieses Flag nicht hinzufügen, ist nur der Knotenprozess, der jest gestartet hat, debuggierbar.

4. (Debug -Anweisungen hinzufügen) Normale Wir würden Breakpoints hinzufügen, aber wenn das Ferndebugging nicht immer möglich ist, da die Dateien, auf die wir die Haltepunkte einsetzen müssen, sind nicht immer vom jest geladen. Um den Debugger zu stoppen, wo wir es wollen, müssen wir debugger; Anweisungen anstelle von Haltepunkten im Code und übertragen Sie es bei Bedarf erneut.

5. (Anhängen an Web Socket) Sobald wir die Tests im Debug -Modus gestartet haben, müssen wir uns daran befinden:

• (Empfohlen) Verwenden Sie Chrome Remote -Debugg für Knoten:

  1. Öffnen Sie chrome://inspect
  2. Open dedicated DevTools for Node Knotenschaltfläche
  3. Wenn Sie die Tests mit dem oben genannten Befehl gestartet haben, sollte er automatisch eine Verbindung herstellen. Wenn sie jedoch nicht zur Connection des Popup-Fensters wechseln und die Verbindung localhost:9229 oder was auch immer Ihr Port ist
  4. Der Debugger sollte in der ersten Zeile wegen des Flaggens --inspect-brk anhalten und sobald Sie die Wiedergabetaste (Lebenslaufausführung) drücken, sollte es auf Ihrem debugger; Stellungnahme

  Hinweis: Sobald es gestoppt wird, sehen Sie möglicherweise, dass der gesamte Code in einer Zeile gebündelt ist. Es gibt eine einfache Lösung dafür: Am unteren Rand des Debug -Fensters in der Nähe der Line: 1 Column: 1 Beschriftungen sollten Sie eine {} -Taste sehen, mit der Sie Ihren Code befinden, und Sie können weiterhin ordnungsgemäß debuggen.

• (Verwenden Sie VSCODE) Die Konfiguration sollte dem in der Nähe aussehen:

 ...
    "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
      }
  ]

Beitragen

Siehe den Beitrag.md für eine umfassende Aufschlüsselung des Projekts.

yarn commit wird Dateien begehen (wie git commit ) und dem Mitwirkenden beim Hinzufügen einer geeigneten Commit -Nachricht mit konventionellem Changelog helfen