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

Add an Angular wrapper #7860

Closed
2 of 4 tasks
geospatialem opened this issue Sep 21, 2023 · 7 comments
Closed
2 of 4 tasks

Add an Angular wrapper #7860

geospatialem opened this issue Sep 21, 2023 · 7 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. low risk Issues with low risk for consideration in low risk milestones
Milestone
2023 November Pri...

Comments

@geospatialem
Copy link
Member

Check existing issues

Description

Determine feasibility and implement an Angular wrapper, similar to the React wrapper to support users working in the Angular framework.

This came up at DevSummit and UC, where users were asking for integration with their Angular applications.

Acceptance Criteria

Criteria taken from Stencil's docs after installing the @stencil\angular-output-target dependency:

  • Angular component wrappers will be detached from change detection, preventing unnecessary repaints of your web component.
  • Web component events will be converted to RxJS observables to align with Angular's @Output() and will not emit across component boundaries.
  • Optionally, form control web components can be used as control value accessors with Angular's reactive forms or [ngModel].
  • It is not necessary to include the Angular CUSTOM_ELEMENTS_SCHEMA in all modules consuming your Stencil components.

Relevant Info

Additional framework integration support from Stencil's documentation.

Could potentially mitigate the issue identified in #7729 cc: @andygup

Which Component

All components

Example Use Case

No response

Priority impact

p3 - want for upcoming milestone

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)
@geospatialem geospatialem added enhancement Issues tied to a new feature or request. 1 - assigned Issues that are assigned to a sprint and a team member. spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. labels Sep 21, 2023
@github-actions github-actions bot added p3 - want for upcoming milestone Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. labels Sep 21, 2023
@geospatialem geospatialem added the low risk Issues with low risk for consideration in low risk milestones label Sep 21, 2023
@omarkawach
Copy link

Watching.

@benelan benelan added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Oct 17, 2023
@jcfranco jcfranco removed their assignment Oct 23, 2023
@geospatialem geospatialem mentioned this issue Oct 23, 2023
Closed
3 tasks
@benelan benelan mentioned this issue Oct 30, 2023
Merged
@geospatialem
Copy link
Member Author

Additional testing and review will take place later this week, and should be available as part of next. For now moving to the November milestone.

@geospatialem geospatialem removed the spike Issues that need quick investigations for time estimations, prioritization, or a quick assessment. label Oct 30, 2023
@andygup
Copy link
Member

andygup commented Oct 30, 2023

Will the wrapper be aimed at the latest shipping version of Angular? Angular 17 is scheduled for release next week. I did some limited testing on it with @arcgis/core and didn't see any issues (other than the broken data binding).

We'll also need to do some basic sanity testing with Angular Control Flow and @arcgis/core + components.

benelan added a commit that referenced this issue Nov 2, 2023
@benelan @anveshmekala @github-actions
build: add @esri/calcite-components-angular package (#8084)
14518ac 
**Related Issue:** #7860

## Summary

Add a package of angular components that wrap the web component library
following [Stencil's
documentation](https://stenciljs.com/docs/v2/angular).

There were a lot of type related build errors and I ended up adding
three patches:

1. Rebuild the web component library if the CC types aren't generated
correctly as a workaround for
ionic-team/stencil#3239
2. Fix a couple type import paths for event details that were generated
by `@stencil/angular-output-target`. Not sure if this one is an issue on
our end or theirs.
3. A JSDOM types error that [other people also experienced when using
stencil's angular output
target](DefinitelyTyped/DefinitelyTyped#57467 (reply in thread)).

All of the build/CI stuff is working correctly. It was a bit wonky at
first because we need an angular workspace just to build a single
component library.

---------

Co-authored-by: Anveshreddy mekala <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@benelan benelan added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Nov 2, 2023
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Nov 2, 2023

Installed and assigned for verification.

@benelan benelan mentioned this issue Nov 9, 2023
Merged
benelan added a commit that referenced this issue Nov 9, 2023
@benelan
fix(angular): publish from the dist directory (#8151)
d813f14 
**Related Issue:** #7860

## Summary

Angular has an unusual workflow where you need to `cd` into the
library's `dist` directory and run `npm publish` from there. I found
related Lerna issues that culminated in the ability to publish a
particular package from a different directory. This is the doc I found
for the config option:

https://github.com/lerna/lerna/tree/main/libs/commands/publish#publishconfigdirectory

Unfortunately, it didn't end up working, so `v1.10.1-next.3` of the
angular wrapper is broken. I'm not aware of a way to test the results of
`lerna publish` without actually publishing.

I ended up copying the config from the `arcgis-web-components` repo's
angular wrapper once I remembered they use Lerna.
jcfranco pushed a commit that referenced this issue Nov 9, 2023
@benelan @jcfranco
fix(angular): publish from the dist directory (#8151)
5bfa6b6 
**Related Issue:** #7860

## Summary

Angular has an unusual workflow where you need to `cd` into the
library's `dist` directory and run `npm publish` from there. I found
related Lerna issues that culminated in the ability to publish a
particular package from a different directory. This is the doc I found
for the config option:

https://github.com/lerna/lerna/tree/main/libs/commands/publish#publishconfigdirectory

Unfortunately, it didn't end up working, so `v1.10.1-next.3` of the
angular wrapper is broken. I'm not aware of a way to test the results of
`lerna publish` without actually publishing.

I ended up copying the config from the `arcgis-web-components` repo's
angular wrapper once I remembered they use Lerna.
@martinbojnansky
Copy link

Awesome, new typings make the use of the components much easier. When it comes to Angular, it would be great to add support for native reactive forms. It is quite simple to extend the generated directives and I made an example for couple of components. In case you would be interested, I would be keen to contribute and add some tests.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Nov 20, 2023
@geospatialem
Copy link
Member Author

Verified with the calcite-components-examples repo with 1.11.0-next.0.

Side note: @martinbojnansky Thanks for the insights, would you be able to file an enhancement request for a follow-up regarding the native reactive forms? We'd love to have additional contributions and tests added if its of interest in filing, too. 💪🏻

@geospatialem geospatialem mentioned this issue Nov 20, 2023
Merged
geospatialem added a commit that referenced this issue Nov 20, 2023
@geospatialem
chore: add angular package to issue templates (#8225)
820e2eb 
**Related Issue:** #7860

## Summary
Adds the angular package to our issue templates for: a11y, bugs,
enhancements, and refactors.
@martinbojnansky
Copy link

martinbojnansky commented Nov 22, 2023 •
edited
Loading

@geospatialem Great! A request #8249 created.

benelan pushed a commit that referenced this issue Nov 24, 2023
@geospatialem @benelan
chore: add angular package to issue templates (#8225)
91fc52f 
**Related Issue:** #7860

## Summary
Adds the angular package to our issue templates for: a11y, bugs,
enhancements, and refactors.
benelan pushed a commit that referenced this issue Nov 24, 2023
@geospatialem @benelan
chore: add angular package to issue templates (#8225)
4c9c30e 
**Related Issue:** #7860

## Summary
Adds the angular package to our issue templates for: a11y, bugs,
enhancements, and refactors.
benelan pushed a commit that referenced this issue Nov 26, 2023
@geospatialem @benelan
chore: add angular package to issue templates (#8225)
d6ffafe 
**Related Issue:** #7860

## Summary
Adds the angular package to our issue templates for: a11y, bugs,
enhancements, and refactors.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. enhancement Issues tied to a new feature or request. low risk Issues with low risk for consideration in low risk milestones
Projects
None yet
Milestone
2023 November Priorities
Development

No branches or pull requests
6 participants
@jcfranco @andygup @geospatialem @martinbojnansky @benelan @omarkawach