CodeGen: add Angular Element support

[manekinekko]

• add Component codegen
• add spec file codegen (if applicable)
• add HTML codegen
• add styles codegen
• add readme codegen
• add export to stackblitz (or other external editor)
• add unit test
• add entry to the editor menu

See docs: https://angular.io/guide/elements

[MrCube42]

Finally I managed to get a closer look into xLayers 🙌 and took the chance to give this issue a try (although it might be a bit hard for a "good first issue" 💪 ). I started a local WIP-PR to keep track of my changes so far (don't be afraid of commit-format - will adjust when rebasing).

I simply started to follow the existing structure to understand the architecture and some questions arose:

• Should we implement a first ngElement codegen before Ivy or the next changes that will simplify generation of ng elements?
• In which position of the codegen tab should the Angular Element button be placed. Currently I would place it after the 3 majors (ng, react, vue) and right before wc. Any opinions from your side?
• I am not really sure what should be part of the generation (and the codegen README)? Do you already have something in mind?
  • Minimal: Angular Component + Element Module with customElements.define etc
  • Some kind of simpler bundling or building strategies, e.g. using ngx-build-plus (https://github.com/manfredsteyer/ngx-build-plus)
  • Ready to use bundles or HTML snippets (e.g. like shown here https://speakerdeck.com/mrcube42/ngneering-rise-of-a-component-library?slide=63)?
• There are some limitations with Elements, e.g. concerning content projection and the naming of properties when transferred to HTML. Should we mention these somehow or do we may have to take this into account when generating?

[Jefiozie]

Thanks for your honest feedback🙏🏻, I can imagen that some parts of xLayers are hard to understand right away. I will provide some feedback on your comments and also cc: @manekinekko for his ideas around this issue.

In which position of the codegen tab should the Angular Element button be placed. Currently I would place it after the 3 majors (ng, react, vue) and right before wc. Any opinions from your side?

I believe it would be nice if it is next to Angular.

There are some limitations with Elements, e.g. concerning content projection and the naming of properties when transferred to HTML. Should we mention these somehow or do we may have to take this into account when generating?

I think it would be good to mention some of these points in the readme of the generated code. Do you agree on this?

I am not really sure what should be part of the generation (and the codegen README)? Do you already have something in mind?

I think we could go for a minimal setup with some explaining in the Readme. In the next iteration of this generator, we can have a look if we can expand by using specific bundle strategies or extra snippets. However, if you have a other option or think it would be better to apply this, be our guest 🙏🏻

I hope I provided you some extra info to get working on this issue. Let me know if you need some help or some extra information on the parts of the generator. We can help you with understanding some of the core parts.

Also, I wanted to thank you for starting the discussion on this issue and having a look into this.🙏🏻