Para configurar cada proyecto

Cuando crees un proyecto de react que vivirá en el mundo de vtex, por favor basa tu proyecto en hello-react-ts y además sigue las siguientes recomendaciones:

1. Cambiar tsconfig del proyecto por el de hello-react-ts.

2. Agregar tsconfig-types (esta en hello-react-ts).

3. Crear index.ts en raíz react (solo si otros proyectos aun no llaman ese index).

4. Agregar index.ts en el vtexigniore (solo si otros proyectos aun no llaman ese index).

*CUIDADO* react/index.ts *CUIDADO*

react/tsconfig-types.json
react/__mocks__
react/__tests__
react/tslint
react/sonar-project.properties

5. Agregar carpeta de types generada (se debe llamar igual al proyecto y se encuentra en la raíz de /react) al gitignore.

6. Agregar .prettierrc, tslint.json, librería para validar regla hooks (todos estos archivos se encuentran en hello-react-ts)

yarn add tslint-react-hooks

7. Corregir carpeta typings, borrar cosas innecesarias y tratar de llevar el siguiente formato:

typings:
│
│   files.d.ts
│   index.d.ts
│   global.d.ts (solo si vas usar declare global)
│
├───libs
│       index.d.ts
│       react-select.d.ts (crear archivos por librería, si hay más de un tipo de dicha librería, sino todo ponerlo en index.d.ts)
│
└───vtex
        index.d.ts
        vtex.store-components.d.ts (crear archivos por componente, si hay más de un tipo de dicho componente, sino todo ponerlo en index.d.ts)

Para trabajar en la carpeta typings

Por favor seguir las siguientes reglas:

• Hay 2 carpetas propuestas libs y vtex y la raíz (podrían ser más pero con argumentos).

• La carpeta libs esta destinada a todos aquellos types relacionado con librerías de terceros que no cuenten con types, la mayor parte dichas librerías ya cuenta con sus propios types en el repositorio original o en el repositorio DefinitelyTyped en github.

• En libs/index.d.ts colocar solo declare module 'nombre-de-tu-librería'; si quieres ser más especifico y definir más types de una librería como por ejemplo algo como esto:

    declare module 'react-select/lib/components/containers' {
      export { ValueContainerProps };
    }

  En este caso es valido crear un nuevo archivo dentro de la carpeta libs con el nombre de tu librería, en el caso del ejemplo anterior crear libs/react-select.d.ts.

• La carpeta vtex esta destinada a todos los types relacionados con los proyectos de vtex, la mayoría se encuentran en vtex-apps githubvtex-apps y en vtex github.

• La idea es que en la carpeta vtex agreguemos solo los types de proyectos que no se encuentren ya tipados en este repositorio, como por ejemplo el proyecto vtex.render-runtime el cual se debe definir manualmente en vtex/index.d.ts como declare module 'vtex.render-runtime'; ya que este es bastante complicado generarle types automáticamente.

• Aplicar la regla #3 igualmente para el archivo vtex/index.d.ts.

8. Realizar link en vtex del proyecto y corregir errores.

9. Agregar script al package.json (yarn get-types) y ejecutarlo.

"get-types": "rm -rf exito.${nombre proyecto} && tsc -p tsconfig-types.json --outDir exito.${nombre proyecto}"

10. Documentar cambios en manifest y CHANGELOG.

11. Instalar librería de tipos.

yarn add -D types-exito

Si tienes alguna duda o mejora con lo propuesto, por favor no dudes en hablarlo con el equipo.