Configura transpilação de arquivos .ts para .js + .d.ts

[gabrielguilhoto]

Contexto

Ao tentar usar os presets de tipografia no SGLearner, tive um erro de TypeScript que poderia ser resolvido pela adição de um as const na declaração dos presets. No entanto, isso provocava um outro erro:

ERROR in ../node_modules/geekie-design-system/token-presets/basic.ts 30:2
Module parse failed: Unexpected token (30:2)
You may need an appropriate loader to handle this file type.
|   letterSpacing: DSA_LETTER_SPACING_WIDE,
|   lineHeight: DSA_LINE_HEIGHT_XL,
> } as const;

A sintaxe do TypeScript não era reconhecida dentro de um node module. Imagino que seria possível configurar para que fosse, mas aparentemente a prática mais comum é de transpilar os arquivos .ts para arquivos .js + declarações de tipos .d.ts (vide microsoft/TypeScript#12358). Dessa forma também é possível usar a lib em contextos não TS, o que devemos precisar por exemplo no Tamojunto.

Mudanças

Fiz a configuração para que aconteça a transpilação de arquivos .ts para .js + .d.ts. Foi necessário:

• Fazer com que o tsc seja rodado no prepare do package.json, para gerar os arquivos antes de a lib ser usada.
• Determinar onde esses arquivos seriam gerados. O padrão seria de eles ficarem no mesmo local dos arquivos originais, mas isso deixaria o repositório desorganizado, então escolhemos deixá-los na pasta build. Para isso foi necessário renomear a build pré-existente, no PR Renomeia a pasta build/tokens para built-tokens #22. Discussão relacionada: https://geekie.slack.com/archives/C0547M0UDHR/p1692826665431029
• Alterar como era feito o import de tokens e presets. Antes eles eram da forma import { ... } from 'geekie-design-system/tokens', mas a existência da pasta build exigiria que ficassem da forma import { ... } from 'geekie-design-system/build/tokens'. Acredito que esse não seria um bom caminho, pois exporia um detalhe de implementação (a existência da pasta build) para quem usa a lib. Optamos então por mudar os imports para serem na linha import { ... } from 'geekie-design-system'. Esse import na raiz é passível de ser configurado para olhar a pasta build, pelo campo main do package.json.

A mudança do as const em si, para evitar os erros de TS nos usos dos presets, virá num outro PR (o #24).

Como testar

• Rodar yarn tsc e ver que os arquivos .js e .d.ts são gerados na pasta build
• Adicionar a lib com as mudanças num projeto (por exemplo o SGLearner) e ver que é possível importar os tokens e presets

[gabrielguilhoto]

Sem esse export aqui, no arquivo ExampleButton.stories.ts havia o seguinte erro:

Exported variable 'meta' has or is using name 'ButtonProps' from external module "/Users/gabrielguilhoto/repos/geekie-design-system/stories/examples/Button" but cannot be named.ts(4023)

Pelo que entendi, a geração do d.ts do arquivo ExampleButton.stories.ts depende desse export. Olhando o arquivo gerado depois da mudança, ele tem a seguinte linha que justificaria o export:

    component: import("react").FC<import("./Button").ButtonProps>;

Em tese a gente nem precisaria gerar o d.ts desse arquivo pois ele não vai ser consumido por quem importar a lib. Mas acho que é importante o tsc olhar para ele para perceber eventuais erros de TS, e não sei se há uma forma de configurar para que ele verifique esse arquivo mas não faça a transpilação dele.