build: add @esri/calcite-components-angular package #8084

benelan · 2023-10-30T18:25:57Z

Related Issue: #7860

Summary

Add a package of angular components that wrap the web component library following Stencil's documentation.

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

Rebuild the web component library if the CC types aren't generated correctly as a workaround for bug: re-open of issue #2769 / components.d.ts missing types ionic-team/stencil#3239
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.
A JSDOM types error that other people also experienced when using stencil's angular output target.

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.

I still need to do some testing in an example app, but I don't foresee any issues so the PR is ready for review. I'll add setup steps to the package's README after I walk through them while setting up the example.

jcfranco

This is looking great, @benelan!

I was curious about the projects/component-library/ folders. Is this required for 👇?

All of the build/CI stuff is working correctly. The outputs of lerna version and npm --workspace @esri/calcite-components-angular pack are both correct. It was a bit wonky at first because we need an angular workspace just to build a single component library.

jcfranco · 2023-10-30T20:28:42Z

packages/calcite-components-angular/package.json

+    "clean": "rimraf dist node_modules .turbo .angular projects/component-library/dist"
+  },
+  "dependencies": {
+    "@angular/animations": "^16.2.0",


Can we pin these deps and have renovate handle them?

Applies to all package.json files in this PR.

Nice work @benelan! What's your plan for updating Angular deps, e.g. each Calcite release? Mainly wondering how Calcite, Components and @arcgis/core can stay roughly in sync. For example, Angular 17 is being released next week.

@jcfranco @benelan thoughts on this? Are you going with @latest, for each Calcite release? I don't know how 'renovate' is tied into the process.

Also, will there be a next release of this that I can test on?

Hi @andygup! Yeah renovate will submit a PR to bump the angular dependencies when new versions come out.

And yes, a next release will be deployed automatically once there are "deployable" changes. I'll let you know when one goes out. Like the react wrapper, the angular wrapper's version will always match CC's to prevent confusion.

benelan · 2023-10-30T21:12:34Z

I was curious about the projects/component-library/ folders.

Yup, that's related to using an Angular workspace, which is how the Stencil doc says to do it and how the ArcGIS Web Components monorepo does it.

There may be a way to set this up without using an Angular workspace, but as someone who has never used Angular I wouldn't be the one to do it. I just followed the doc 🤷‍♂️

benelan · 2023-10-30T21:24:53Z

Here is Angular's doc about their workspace file structure: https://angular.io/guide/file-structure

It doesn't seem like there are any other options for developing "shareable libraries", which is what we are doing.

Angular also supports workspaces with multiple projects. This type of development environment is suitable for advanced users who are developing shareable libraries, and for enterprises that use a "monorepo" development style, with a single repository and global configuration for all Angular projects.

Here is the Angular doc about creating libraries: https://angular.io/guide/creating-libraries

And the doc about library file structure: https://angular.io/guide/file-structure#library-project-files

…ype test results

andygup · 2023-10-31T18:33:08Z

There may be a way to set this up without using an Angular workspace

Using an Angular workspace is the recommended, but non-intuitive, way to go.

…wrapper * origin/main: test(input-time-zone): update screenshot tests to use time zones unaffected by DST (#8094) chore: release next fix(accordion-item): update expanded chevron color (#8087)

ref: Esri/calcite-design-system#8084

jcfranco

📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐
📐🎁📐📐📐🎁📐📐🎁🎁📐📐🎁🎁🎁📐📐🎁🎁🎁📐🎁🎁🎁🎁📐🎁📐
📐🎁🎁📐📐🎁📐🎁📐📐🎁📐📐🎁📐📐🎁📐📐📐📐🎁📐📐📐📐🎁📐
📐🎁📐🎁📐🎁📐🎁📐📐🎁📐📐🎁📐📐🎁📐📐📐📐🎁🎁🎁📐📐🎁📐
📐🎁📐📐🎁🎁📐🎁📐📐🎁📐📐🎁📐📐🎁📐📐📐📐🎁📐📐📐📐📐📐
📐🎁📐📐📐🎁📐📐🎁🎁📐📐🎁🎁🎁📐📐🎁🎁🎁📐🎁🎁🎁🎁📐🎁📐
📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐

packages/calcite-components-angular/projects/component-library/README.md

jcfranco · 2023-11-01T18:44:20Z

packages/calcite-components-angular/projects/component-library/package.json

+    "@esri/calcite-components": "1.10.0"
+  },
+  "dependencies": {
+    "tslib": "2.3.0"


Is this needed by Angular or can we update the tsconfig.json target to avoid this dependency?

It is added by the angular cli so I'm pretty sure it's required

…8077) **Related Issue:** #7188 ## Summary - Prevents increasing/decreasing the value in `calcite-input-number` when the pointer is moved away from the increment/decrement buttons . - Emitting pointerUp event also prevents increasing/decreasing of the value.

…wrapper * origin/main: chore: release next fix(input-number): prevent mutating value when pointerUp is emitted. (#8077)

Change the angular example to use the new `@esri/calcite-components-angular` package once it is installed in Esri/calcite-design-system#8084 and published to NPM.

…m the entry point (#8177) **Related Issue:** #8084 ## Summary I ran into build errors related to event detail types when adding the Angular output target to the monorepo. Stencil's auto-generated Angular code expected the types to be exported from the `@esri/calcite-components` entry point, but they were not. Here is one of the error messages: ``` angular-workspace:build: projects/component-library/src/lib/stencil-generated/components.ts:1014:15 - error TS2459: Module '"@esri/calcite-components"' declares 'HandleNudge' locally, but it is not exported. angular-workspace:build: angular-workspace:build: 1014 import type { HandleNudge as ICalciteHandleHandleNudge } from '@esri/calcite-components'; angular-workspace:build: ~~~~~~~~~~~ angular-workspace:build: angular-workspace:build: ../calcite-components/dist/types/components.d.ts:42:24 angular-workspace:build: 42 import { HandleChange, HandleNudge } from "./components/handle/interfaces"; angular-workspace:build: ~~~~~~~~~~~ angular-workspace:build: 'HandleNudge' is declared here. ``` To resolve the errors, I added a prebuild patch to the Angular output target that fixed the import paths for the three event detail types. As a result, a Calcite Components fix/feat that added a new event detail would create an unrelated entry in the Angular changelog. This is because the new event detail would need to be added to the patch, which lived in the Angular package's directory. This came up in: #8123 (comment) This pull request exports the event detail types from the entry point, so the patch can be removed. **When adding a new event detail, it must be exported from [`packages/calcite-components/src/index.ts`](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/index.ts) to prevent build errors.**

…m the entry point (#8177) **Related Issue:** #8084 I ran into build errors related to event detail types when adding the Angular output target to the monorepo. Stencil's auto-generated Angular code expected the types to be exported from the `@esri/calcite-components` entry point, but they were not. Here is one of the error messages: ``` angular-workspace:build: projects/component-library/src/lib/stencil-generated/components.ts:1014:15 - error TS2459: Module '"@esri/calcite-components"' declares 'HandleNudge' locally, but it is not exported. angular-workspace:build: angular-workspace:build: 1014 import type { HandleNudge as ICalciteHandleHandleNudge } from '@esri/calcite-components'; angular-workspace:build: ~~~~~~~~~~~ angular-workspace:build: angular-workspace:build: ../calcite-components/dist/types/components.d.ts:42:24 angular-workspace:build: 42 import { HandleChange, HandleNudge } from "./components/handle/interfaces"; angular-workspace:build: ~~~~~~~~~~~ angular-workspace:build: 'HandleNudge' is declared here. ``` To resolve the errors, I added a prebuild patch to the Angular output target that fixed the import paths for the three event detail types. As a result, a Calcite Components fix/feat that added a new event detail would create an unrelated entry in the Angular changelog. This is because the new event detail would need to be added to the patch, which lived in the Angular package's directory. This came up in: #8123 (comment) This pull request exports the event detail types from the entry point, so the patch can be removed. **When adding a new event detail, it must be exported from [`packages/calcite-components/src/index.ts`](https://github.com/Esri/calcite-design-system/blob/main/packages/calcite-components/src/index.ts) to prevent build errors.**

benelan requested review from jcfranco, driskull, geospatialem and a team as code owners October 30, 2023 18:25

github-actions bot assigned benelan Oct 30, 2023

github-actions bot added the chore Issues with changes that don't modify src or test files. label Oct 30, 2023

jcfranco approved these changes Oct 30, 2023

View reviewed changes

benelan added 9 commits October 30, 2023 14:33

chore: WIP

b28349a

fix: some types issues

0ee76c1

chore: more types stuff

3423fd4

build: rescaffold angular workspace

06e5233

build(angular): add prebuild patch to fix type import paths

93734aa

chore: cleanup

8e9e1a7

ci: prevent lerna from versioning angular workspace

82bf7f8

chore: cleanup

88c4804

chore: cleanup

aab1c68

benelan force-pushed the benelan/7860-angular-wrapper branch from 406311b to aab1c68 Compare October 31, 2023 01:27

benelan added 3 commits October 31, 2023 01:42

chore: fix package-lock

8d2fb3d

build: patch jsdom types error

830c391

ci: prevent github action from displaying error annotations for the t…

d1675d1

…ype test results

benelan added 2 commits October 31, 2023 14:09

Merge remote-tracking branch 'origin/main' into benelan/7860-angular-…

6042d11

…wrapper * origin/main: test(input-time-zone): update screenshot tests to use time zones unaffected by DST (#8094) chore: release next fix(accordion-item): update expanded chevron color (#8087)

chore: more changes

1cd2f52

benelan added a commit to Esri/calcite-components-examples that referenced this pull request Oct 31, 2023

feat(angular): use new @esri/calcite-components-angular package

64330e9

ref: Esri/calcite-design-system#8084

benelan added 4 commits October 31, 2023 15:49

ci: fix packing/publishing weirdness due to angular workspace

cc666f0

ci: set the publish directory via lerna instead of hacky fix

8345e00

docs: add usage info to readme

f14315e

docs: cleanup

684f5fc

benelan added 2 commits October 31, 2023 18:12

chore: cleanup angular workspace readme

43d1906

Merge branch 'main' into benelan/7860-angular-wrapper

66ec549

benelan mentioned this pull request Nov 1, 2023

feat: use new @esri/calcite-components-angular package Esri/calcite-components-examples#270

Merged

jcfranco approved these changes Nov 1, 2023

View reviewed changes

anveshmekala and others added 4 commits November 1, 2023 18:26

chore: release next

439c47c

chore: cleanup

df0445a

Merge remote-tracking branch 'origin/main' into benelan/7860-angular-…

44bf352

…wrapper * origin/main: chore: release next fix(input-number): prevent mutating value when pointerUp is emitted. (#8077)

benelan added the skip visual snapshots Pull requests that do not need visual regression testing. label Nov 2, 2023

benelan merged commit 14518ac into main Nov 2, 2023

benelan deleted the benelan/7860-angular-wrapper branch November 2, 2023 08:06

github-actions bot added this to the 2023 November Priorities milestone Nov 2, 2023

benelan mentioned this pull request Nov 15, 2023

build(angular): remove event detail types patch by exporting them from the entry point #8177

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build: add @esri/calcite-components-angular package #8084

build: add @esri/calcite-components-angular package #8084

benelan commented Oct 30, 2023 •

edited

Loading

jcfranco left a comment

jcfranco Oct 30, 2023

andygup Oct 30, 2023

andygup Oct 31, 2023

benelan Oct 31, 2023

benelan commented Oct 30, 2023

benelan commented Oct 30, 2023 •

edited

Loading

andygup commented Oct 31, 2023

jcfranco left a comment

jcfranco Nov 1, 2023

benelan Nov 2, 2023

build: add @esri/calcite-components-angular package #8084

build: add @esri/calcite-components-angular package #8084

Conversation

benelan commented Oct 30, 2023 • edited Loading

Summary

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Oct 30, 2023

Choose a reason for hiding this comment

andygup Oct 30, 2023

Choose a reason for hiding this comment

andygup Oct 31, 2023

Choose a reason for hiding this comment

benelan Oct 31, 2023

Choose a reason for hiding this comment

benelan commented Oct 30, 2023

benelan commented Oct 30, 2023 • edited Loading

andygup commented Oct 31, 2023

jcfranco left a comment

Choose a reason for hiding this comment

jcfranco Nov 1, 2023

Choose a reason for hiding this comment

benelan Nov 2, 2023

Choose a reason for hiding this comment

benelan commented Oct 30, 2023 •

edited

Loading

benelan commented Oct 30, 2023 •

edited

Loading