times components

Perpustakaan Komponen Times

Tujuan

Rumah dari komponen react Times.

Lingkungan dev

Kami memerlukan macOS dengan node.js (untuk versi tertentu silakan periksa Paket.json Batasan), Benang (Terbaru)

Anda dapat mencoba tanpa persyaratan ini, tetapi Anda akan sendirian.

Melihat komponen kami

Pergi ke http://components.thetimes.co.uk

Memulai

1. Jalankan yarn install

2. Komponen dapat terlihat berjalan di buku cerita

• buku cerita
  1. yarn storybook
  2. Pergi ke http: // localhost: 9001

Skema

Lihat Paket Utils tentang cara memperbarui skema.

Debugging

Komponen dalam proyek ini dapat didebug melalui alat pengembang browser Anda. Langkah -langkah ini mengasumsikan penggunaan chrome devtools.

Untuk men -debug buku cerita web kami:

1. yarn storybook
2. Arahkan ke http: // localhost: 9001
3. Buka DevTools
4. Klik Sumber
5. Di tab Network di bawah panel paling kiri, EXPAND TOP => STORYBOOK-PREVIEW-IFRAME => WebPack: // => . => paket

File sumber ini dapat didebug secara langsung.

Menghubungkan komponen waktu ke proyek render

Ikuti langkah -langkah ini di sini

Anda juga akan melihat opsi untuk melakukan rilis Canary di dalam pipa, yang akan menerbitkan versi uji perubahan Anda yang dapat Anda impor dalam render.

Lihat perubahan Anda dalam render dengan file RNW.js

Selain menghubungkan komponen Times dan membuat repo bersama -sama, Anda dapat melihat perubahan yang dibuat pada komponen Times dalam render melalui file RNW.js.

1. Dalam waktu komponen, setelah Anda membuat perubahan, jalankan yarn bundle dalam paket tempat Anda bekerja. Jika Anda bekerja di paket ts-components Anda harus menjalankan yarn build terlebih dahulu dan kemudian yarn bundle .
2. Menjalankan perintah membuat file rnw.js di root folder. Periksa file untuk melihat apakah perubahan Anda telah terjadi.
3. Salin konten file rnw.js dan tempel ke file terkait di render node_modules . Misalnya, jika Anda menggabungkan file RNW.JS dalam paket article-skeleton dalam komponen Times, Anda akan menempelkan konten ke dalam node_modules/@times-components/article-skeleton/rnw.js .
4. Jalankan render dan Anda harus melihat perubahan Anda.

Men -debug tes

Tes saat ini menggunakan Jest untuk dijalankan jadi jika Anda ingin men -debug tes mengikuti langkah -langkah ini:

1. (Temukan perintah pengujian Anda) jest --config="./packages/provider/__tests__/jest.config.js" . Bergantung pada direktori mana kami memulai tes, -direktori --config mungkin berbeda. Direktori Currenct saya ada di root repo: times-components .

2. Lihat perintah pengujian Anda dari package.json untuk paket spesifik yang ingin Anda periksa.

Catatan: Jika Anda tidak memiliki Jest yang diinstal secara global, Anda dapat menggunakannya secara lokal dari node_modules/.bin/jest

3. (Mulai tes dalam mode debug) Kita perlu memulai perintah yang sama tetapi melalui node saat dalam mode debug seperti So: node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand

Catatan: --runInBand adalah bendera jest yang menjalankan semua tes secara serial dalam proses saat ini. Jika kami tidak menambahkan bendera ini, hanya proses node yang memulai jest yang akan didebuggable.

4. (Tambahkan pernyataan debug) Normal kami akan menambahkan breakpoint, tetapi ketika debugging jarak jauh itu tidak selalu mungkin, karena file yang perlu kami pakai breakpoint belum dimuat oleh jest . Jadi untuk membuat debugger berhenti di mana kita menginginkannya, kita perlu menambahkan debugger; pernyataan alih-alih breakpoint dalam kode dan transpile kembali jika perlu.

5. (Lampirkan ke soket web) Setelah kami memulai tes dalam mode debug, kita perlu melampirkannya:

• (Disarankan) Gunakan Chrome Remote Debug untuk Node:

  1. Buka chrome://inspect di Bilah Alamat Chrome
  2. Open dedicated DevTools for Node
  3. Jika Anda telah memulai tes dengan perintah yang disebutkan di atas itu harus secara otomatis terhubung, tetapi jika tidak masuk ke tab Connection jendela pop-up dan tambahkan koneksi localhost:9229 atau apa pun port Anda
  4. Debugger harus berhenti pada baris pertama karena bendera --inspect-brk dan begitu Anda menekan tombol Play (resume eksekusi) itu harus berhenti pada debugger; penyataan

  Catatan: Setelah berhenti, Anda mungkin melihat semua kode Anda dibundel dalam satu baris. Ada perbaikan yang mudah untuk itu: di bagian bawah jendela debug di dekat Line: 1 Column: 1 label Anda akan melihat tombol {} yang akan mengimbangi kode Anda dan Anda masih dapat men -debug dengan benar.

• (Gunakan vScode) konfigurasi harus terlihat dekat dengan ini:

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

Berkontribusi

Lihat Kontribusi.MD untuk rincian proyek yang luas.

yarn commit akan melakukan file (sama seperti git commit ), dan akan membantu kontributor dengan menambahkan pesan komit yang sesuai sejajar dengan changelog konvensional