types-exito

1.0.7 • Public • Published

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
  1. Agregar carpeta de types generada (se debe llamar igual al proyecto y se encuentra en la raíz de /react) al gitignore.

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

yarn add tslint-react-hooks
  1. 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.

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

  2. 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}"
  1. Documentar cambios en manifest y CHANGELOG.

  2. 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.

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i types-exito

      Weekly Downloads

      1

      Version

      1.0.7

      License

      ISC

      Unpacked Size

      530 kB

      Total Files

      728

      Last publish

      Collaborators

      • grupo-exito-ecommerce