Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adiciona as const nas declarações dos presets #24

Merged
merged 1 commit into from
Aug 28, 2023
Merged

Adiciona as const nas declarações dos presets #24

merged 1 commit into from
Aug 28, 2023

Conversation

gabrielguilhoto
Copy link
Contributor

@gabrielguilhoto gabrielguilhoto commented Aug 28, 2023 •
edited
Loading

Contexto

Ao tentar usar um preset de tipografia no SGLearner, havia um erro de TypeScript:

Type '{ fontFamily: string; fontSize: number; fontWeight: string; letterSpacing: number; lineHeight: number; }' is not assignable to type 'TextStyle'.
  Types of property 'fontWeight' are incompatible.
    Type 'string' is not assignable to type '"normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined'.

O problema vinha do fato de que os presets estavam escritos de forma que, por exemplo, o fontSize ficava tipado como uma string arbitrária. Isso é incompatível com a lista de valores permitidos para o estilo, e por isso precisaríamos de uma tipagem mais estrita nos presets.

Mudanças

Como explicado no Discourse, nesses casos é possível usar o as const para resolver o problema da tipagem. Então apliquei na definição de todos os presets de tipografia.

Como testar

  • Adicionar a lib do DS com a modificação como dependência do SGLearner
  • Importar algum preset de tipografia e aplicá-lo em alguma tela
  • Ver que o erro de TS citado deixa de acontecer, e que o estilo do preset é aplicado adequadamente

@gabrielguilhoto gabrielguilhoto changed the base branch from master to ts-transpile August 28, 2023 17:12
@gabrielguilhoto gabrielguilhoto marked this pull request as ready for review August 28, 2023 17:44
@gabrielguilhoto gabrielguilhoto mentioned this pull request Aug 28, 2023
Merged
Base automatically changed from ts-transpile to master August 28, 2023 17:48
gabrielguilhoto added a commit that referenced this pull request Aug 28, 2023
@gabrielguilhoto
Configura transpilação de arquivos .ts para .js + .d.ts (#23)
6671827 
# 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 #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
leocpadua7
leocpadua7 approved these changes Aug 28, 2023
View reviewed changes
Copy link
Contributor

@leocpadua7 leocpadua7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Boa!!
Usar o preset assim, funcionou como esperado:

const styles = StyleSheet.create({
  h1: {
    ...DSA_BASIC_HEADING_H1_STYLE,
  },

@gabrielguilhoto gabrielguilhoto merged commit 92afe0e into master Aug 28, 2023
1 check passed
@gabrielguilhoto gabrielguilhoto deleted the as-const branch August 28, 2023 18:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@leocpadua7 leocpadua7 leocpadua7 approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@gabrielguilhoto @leocpadua7