ngneat / svg-icon

👻 A lightweight library that makes it easier to use SVG icons in your Angular Application
https://netbasal.com
MIT License
257 stars 35 forks source link

Strictly-type generated files #84

Closed csutorasr closed 1 year ago

csutorasr commented 2 years ago

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Icon types are not generated.

Expected behavior

Having the ability to get the names from the objects.

Minimal reproduction of the problem with instructions

const icons = [app1Icon, app2Icon];

type IconNames = (typeof icons[number])['name'];

IconNames is a string instead of array of const strings ('icon1' | 'icon2').

What is the motivation / use case for changing the behavior?

Using a wrapper component you can strictly type the icons. This means intellisense help, also.

To achieve this you need to wrap the original component.

Solution:

Strictly-type the name in the generated files:

const icon: {data: string; name: 'icontype'} = {
  data: '...',
  name: 'icontype',
}
csutorasr commented 2 years ago

Suggested changes:

Add the type to the generated AST. https://github.com/ngneat/svg-icon/blob/4ac9f23016d7b40d57c90a9879ff3cc3fc07c267/svg-generator/ast.ts#L14

Add documentation to the Readme.MD how to add strictly typed components.

NetanelBasal commented 2 years ago

You're welcome to submit a PR

NetanelBasal commented 1 year ago

The keys now fully typed in v5 using the generator