times components

La biblioteca de componentes del Times

Objetivo

Casa de los componentes react del Times.

Entorno

Requerimos macOS con node.js (para una versión específica, verifique las restricciones de paquete.json), hilo (último)

Puede intentarlo sin estos requisitos, pero estaría solo.

Ver nuestros componentes

Vaya a http://components.thetimes.co.uk

Empezando

1. Ejecutar yarn install

2. Los componentes se pueden ver ejecutándose en un libro de cuentos

• libro de cuentos
  1. yarn storybook
  2. Vaya a http: // localhost: 9001

Esquema

Vea el paquete Utils sobre cómo actualizar el esquema.

Depuración

Los componentes de este proyecto se pueden depurar a través de las herramientas de desarrollador de su navegador. Estos pasos asumen el uso de Chrome Devtools.

Para depurar nuestro libro de cuentos web:

1. yarn storybook
2. Navegue a http: // localhost: 9001
3. Abrir DevTools
4. Haga clic en fuentes
5. En la pestaña de red en el panel más izquierdo, expandir Top => Storybook-Preview-Iframe => webpack: // => . => paquetes

Cualquiera de estos archivos de origen se puede depurar directamente.

Link Times-componentes para el proyecto Render

Sigue estos pasos aquí

También verá la opción de hacer una versión canaria en la tubería, que publicará una versión de prueba de sus cambios que puede importar en Render.

Vea sus cambios en Render con archivos rnw.js

Además de vincular los componentes del Times y representar repos juntas, puede ver los cambios realizados a los componentes del Times en renderizar a través de los archivos rnw.js.

1. En Times Component, después de haber realizado sus cambios, ejecute yarn bundle en el paquete en el que trabajaba. Si estaba trabajando en el paquete ts-components primero deberá ejecutar yarn build y luego yarn bundle .
2. Ejecutar el comando crea un archivo rnw.js en la raíz de la carpeta. Verifique el archivo para ver si han llegado sus cambios.
3. Copie el contenido del archivo rnw.js y péguelo en el archivo relacionado en node_modules de Render. Por ejemplo, si incluye el archivo rnw.js en el paquete article-skeleton en componentes de Times, pegaría el contenido en node_modules/@times-components/article-skeleton/rnw.js .
4. Ejecute Render y debería ver sus cambios.

Depuración de las pruebas

Las pruebas están utilizando actualmente la broma para ejecutarse, así que si desea depurar cualquier prueba, siga estos pasos:

1. (Encuentre su comando de prueba) jest --config="./packages/provider/__tests__/jest.config.js" . Dependiendo de qué directorio iniciamos las pruebas, el directorio --config puede diferir. Mi directorio de Currenct está en la raíz de repo: times-components .

2. Consulte su comando de prueba desde el package.json para el paquete SpecifiFic que desea ver.

Nota: Si no tiene un Jest instalado a nivel mundial, puede usarlo localmente desde el node_modules/.bin/jest

3. (Inicie las pruebas en modo de depuración) Necesitamos iniciar el mismo comando pero a través del nodo mientras en modo de depuración como así: node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand

Nota: --runInBand es una bandera jest que ejecuta todas las pruebas en serie en el proceso actual. Si no agregamos este indicador, solo el proceso de nodo que comenzó jest será dependible.

4. (Agregue declaraciones de depuración) Normaly agregaríamos puntos de interrupción, pero cuando la depuración remota no siempre es posible, porque los archivos en los que necesitamos poner los puntos de interrupción aún no están cargados por jest . Entonces, para que el depurador se detenga donde queremos, necesitamos agregar debugger; Declaraciones en lugar de puntos de interrupción en el código y volver a transpilar si es necesario.

5. (Adjuntar al socket web) Una vez que hayamos iniciado las pruebas en modo de depuración, debemos adjuntarlo:

• (Recomendado) Use la depuración remota de Chrome para el nodo:

  1. Abrir chrome://inspect en la barra de direcciones de Chrome
  2. Open dedicated DevTools for Node
  3. Si ha comenzado las pruebas con el comando mencionado anteriormente, debe conectarse automáticamente, pero si no va a la pestaña Connection de la ventana emergente y agregue la conexión localhost:9229 o lo que sea su puerto
  4. El depurador debe detenerse en la primera línea debido a la bandera --inspect-brk y una vez que presione el botón de reproducción (ejecución de reanudación) debe detenerse en su debugger; declaración

  Nota: Una vez que se detiene, puede ver que todo su código está incluido en una línea. Hay una solución fácil para eso: en la parte inferior de la ventana de depuración cerca de la Line: 1 Column: 1 Etiquetas debe ver un botón {} que prettifique su código y aún podrá depurar correctamente.

• (Use VScode) La configuración debe verse cerca de esto:

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

Que contribuye

Vea el contribuyente.md para un desglose extenso del proyecto.

yarn commit se confirmará archivos (igual que git commit ), y ayudará al contribuyente a agregar un mensaje de confirmación adecuado en línea con ChangeLog convencional