Nervously Proposing Marriage

    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.

    Install

    npm i types-exito

    DownloadsWeekly Downloads

    146

    Version

    1.0.7

    License

    ISC

    Unpacked Size

    530 kB

    Total Files

    728

    Last publish

    Collaborators

    • grupo-exito-ecommerce