times components

The Times Component Library

Propósito

Home of the Times ' react Components.

Ambiente de desenvolvimento

Exigimos macOS com node.js (para uma versão específica, verifique as restrições do package.json), Yarn (mais recente)

Você pode tentar sem esses requisitos, mas estaria por conta própria.

Visualizando nossos componentes

Vá para http://components.thetimes.co.uk

Começando

1. Executar yarn install

2. Os componentes podem ser vistos em um livro de histórias

• Livro de histórias
  1. yarn storybook
  2. Vá para http: // localhost: 9001

Esquema

Consulte o pacote Utils sobre como atualizar o esquema.

Depuração

Os componentes deste projeto podem ser depurados pelas ferramentas de desenvolvedor do seu navegador. Essas etapas assumem o uso de Chrome Devtools.

Para depurar nosso livro de histórias da web:

1. yarn storybook
2. Navegue para http: // localhost: 9001
3. aberto devtools
4. Clique em fontes
5. Na guia de rede no painel mais à esquerda, expanda o top => storybook-preview-iframe => webpack: // => . => pacotes

Qualquer um desses arquivos de origem pode ser depurado diretamente.

Link Times-Components ao projeto Render

Siga estas etapas aqui

Você também verá a opção de lançar uma liberação de canário no pipeline, que publicará uma versão de teste de suas alterações que você pode importar no renderizar.

Veja suas mudanças na renderização com os arquivos rnw.js

Além de vincular os componentes do Times e renderizar os repositórios, você pode visualizar as alterações feitas nos componentes do Times em renderizar através dos arquivos rnw.js.

1. Nos componentes do Times, depois de fazer suas alterações, execute yarn bundle no pacote em que você estava trabalhando. Se você estava trabalhando no pacote ts-components precisará executar yarn build primeiro e depois yarn bundle .
2. A execução do comando cria um arquivo rnw.js na raiz da pasta. Verifique o arquivo para ver se suas alterações foram lançadas.
3. Copie o conteúdo do arquivo rnw.js e cole -o no arquivo relacionado nos node_modules da renderização. Por exemplo, se você acumulou o arquivo rnw.js no pacote article-skeleton nos componentes do Times, colaria o conteúdo em node_modules/@times-components/article-skeleton/rnw.js .
4. Run render e você verá suas alterações.

Debugando os testes

Os testes estão atualmente usando o JEST para ser executado, por isso, se você quiser depurar qualquer teste, siga estas etapas:

1. (Encontre o seu comando de teste) jest --config="./packages/provider/__tests__/jest.config.js" . Dependendo do diretório, iniciamos os testes, o diretório --config pode diferir. Meu diretório Currenct está na raiz do repo: times-components .

2. Consulte o seu comando de teste no package.json para o pacote específico que você deseja conferir.

NOTA: Se você não tiver JEST instalado globalmente, pode usá -lo localmente do node_modules/.bin/jest

3. (Iniciar testes no modo de depuração) Precisamos iniciar o mesmo comando, mas através do nó enquanto estiver no modo de depuração como assim: node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand

Nota: --runInBand é um sinalizador jest que executa todos os testes em série no processo atual. Se não adicionarmos essa bandeira, apenas o processo do nó que iniciou jest será degível.

4. (Adicionar declarações de depuração) Normaly, adicionaríamos pontos de interrupção, mas quando a depuração remota isso nem sempre é possível, porque os arquivos em que precisamos colocar os pontos de interrupção ainda não estão carregados por jest . Portanto, para fazer o depurador parar onde queremos, precisamos adicionar debugger; Declarações em vez de pontos de interrupção no código e re-transpile, se necessário.

5. (Anexe ao soquete da web) Depois de iniciarmos os testes no modo de depuração, precisamos anexar a ele:

• (Recomendado) Use o Chrome Remote Debug for Node:

  1. Open chrome://inspect na barra de endereço do Chrome
  2. Open dedicated DevTools for Node
  3. Se você iniciou os testes com o comando acima mencionado, ele deve se conectar automaticamente, mas se não for para a guia Connection da janela pop-up e adicionar localhost:9229 ou qualquer que seja sua porta
  4. O depurador deve parar na primeira linha por causa da bandeira --inspect-brk e depois que você pressionar o botão Play (retomar a execução), ele deve parar no seu debugger; declaração

  NOTA: Depois de parar, você poderá ver todo o seu código é empacotado em uma linha. Há uma correção fácil para isso: na parte inferior da janela de depuração perto da Line: 1 Column: 1 etiquetas, você deve ver um botão {} que pretenderá seu código e você ainda poderá depurar corretamente.

• (Use VSCode) A configuração deve parecer perto disso:

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

Contribuindo

Consulte o contribuinte.md para uma extensa quebra do projeto.

yarn commit comprometerá arquivos (igual ao git commit ) e ajudará o colaborador a adicionar uma mensagem de comprometimento adequada em linha com Changelog convencional