search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.6k stars 1.76k forks source link

TypeScript types are missing for `@carbon/icons` #13143

Open artemkolotilkin opened 1 year ago

artemkolotilkin commented 1 year ago

Since @carbon/icons-angular package is outdated and no longer maintained, I'm trying to use @carbon/icons package in my Angular project. Unfortunately, Angular complains that types are missing. It would be great to have them added.

tay1orjones commented 1 year ago

Thanks for reporting. Types are slowly being added by the community, focusing on the react components first #12513.

Icons haven't really been looked at or discussed yet, but an idea for @carbon/icons-react is up at https://github.com/carbon-design-system/carbon/pull/12034

lewandom commented 9 months ago

I did some research on this + a bit of (mostly unsuccessful) experiments.

What I've been successful with is I've been able to convert the Icon.js file into Icon.tsx and get it properly recognized and transformed by @carbon/icon-build-helpers (with a bit of babel configs tuning) to produce JS code. This means that we at least have some TS source to generate TS definitions for the base Icon type.

The bad news is, @carbon/icon-build-helpers uses rollup virtual plugin, which is not supported by the rollup typescript plugin: https://github.com/rollup/plugins/issues/567. Therefore, we don't get any TS definitions (even for the aforementioned base Icon component) directly out of the build process. Even if we could feed virtual code into rollup typescript plugin, we'd get the definitions for base types only, and not for the generated JS code (or the definitions would be useless).

Based on the above, I see 2 options:

  1. Convert generated code from JS (uses Babel AST to generate) to TS (need to research how we can generate TS code) and write to temporary files instead of virtual memory.
  2. Leave JS generation as it is, and experiment with generating TS definition (.d.ts) files separately, e.g. using TS compiler in a standalone manner for the Icon class and bypassing it completely for the generated code (again need to investigate possible options to generate TS code).

@tay1orjones any suggestions / thoughts?

fronbasal commented 9 months ago

The carbon-icons-angular docs show how to implement @carbon/icons package in Angular (codesandbox link).