chore: update to Angular 13 #6455

bdryanovski · 2021-11-08T14:54:36Z

Overview

Update TypeScript to 4.4.4
Update cds/angular to use Angular 13.0.0
Update golden/clr-angular.d.ts
Update @cds/core & @cds/angular ("^5.6.0") used into sub packages to latest version - to resolve some warnings when building.
Migrate files to use Angular 13
Fixing Dev app
Fixing Clarity Schemtics to work Angular 13
Fixing build:icons:zip
Removing build:icons:zip from build steps - zip files no longer part of @clr/icons
Updating development packages to resolve warnings (@typescript-eslint/eslint-plugin & @typescript-eslint/parser)
Updating code to handle ClientRect deprecation
Drop support of Internet Explorer polyfils

This PR includes work based on collaboration with @bbogdanov and @Jinnie

How to test it

# checkout this branch 

$ git clean -fdx;  # make sure that everything is clean (node_modules, dist, golden files)

$ npm install  

$ npm run build:ci

To test the dev app:

$ npm run start

To test website

$ npm run start:website

Testing packages

Setup testing tools

$ npm install --global verdaccio

$ verdaccio

Release packages locally

$ npm run publish:local

Check package information and dependencies

$ npm info @clr/angular --registry http://localhost:4873

Use the new package to create new application

$ npx @angular/cli@13 new demo-app

$ cd demo-app

$ npx @angular/cli@13 add @clr/[email protected] --registry http://localhost:4873

$ npm run start

Performance

$ npm install;

added 4467 packages from 2332 contributors and audited 4015 packages in 105.532s

$ npm run build:ci

265.35s user 25.50s system 139% cpu 3:29.22 total

Known issues

When building, there is a warning that if I'm not wrong, it is already fixed, but it seems not backported. Need investigation.

Recommendation: math.div($clr-baseline-denominator, $browser-default-size)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
18 │ $clr-basefont-size: ($clr-baseline-denominator/$browser-default-size) * 100% !default;
   │                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    projects/angular/src/utils/variables/_variables.global.scss 18:22  @import
    projects/angular/src/utils/variables/_variables.scss 2:9           @import
    projects/angular/src/utils/_mixins.scss 5:9                        @import
    projects/angular/src/utils/_components.clarity.scss 8:9            @import
    projects/angular/src/main.scss 13:9                                root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($clr-baseline-int, $clr-baseline-denominator)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
24 │   $clr-baseline-to-basefontsize-multiplier: $clr-baseline-int/$clr-baseline-denominator;
   │                                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    projects/angular/src/utils/variables/_variables.global.scss 24:45  convertBaselineToBase20()
    projects/angular/src/utils/variables/_variables.global.scss 32:25  @import
    projects/angular/src/utils/variables/_variables.scss 2:9           @import
    projects/angular/src/utils/_mixins.scss 5:9                        @import
    projects/angular/src/utils/_components.clarity.scss 8:9            @import
    projects/angular/src/main.scss 13:9                                root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($size, $clr-baseline-int)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
25 │   @return $size/$clr-baseline-int * $clr-baseline-to-basefontsize-multiplier * 1rem;
   │           ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    projects/angular/src/utils/variables/_variables.global.scss 25:11  convertBaselineToBase20()
    projects/angular/src/utils/variables/_variables.global.scss 32:25  @import
    projects/angular/src/utils/variables/_variables.scss 2:9           @import
    projects/angular/src/utils/_mixins.scss 5:9                        @import
    projects/angular/src/utils/_components.clarity.scss 8:9            @import
    projects/angular/src/main.scss 13:9                                root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($clr-grid-gutter-width, -2)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
8 │   margin-right: ($clr-grid-gutter-width / -2);
  │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    projects/angular/src/layout/grid/mixins/_grid.scss 8:18   clr-make-row()
    projects/angular/src/layout/grid/grid/_grid.scss 7:5      @content
    projects/angular/src/utils/_mixins.scss 16:5              exports()
    projects/angular/src/layout/grid/grid/_grid.scss 5:1      @import
    projects/angular/src/layout/grid/_grid.scss 10:9          @import
    projects/angular/src/utils/_components.clarity.scss 13:9  @import
    projects/angular/src/main.scss 13:9                       root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($clr-grid-gutter-width, -2)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
9 │   margin-left: ($clr-grid-gutter-width / -2);
  │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
    projects/angular/src/layout/grid/mixins/_grid.scss 9:17   clr-make-row()
    projects/angular/src/layout/grid/grid/_grid.scss 7:5      @content
    projects/angular/src/utils/_mixins.scss 16:5              exports()
    projects/angular/src/layout/grid/grid/_grid.scss 5:1      @import
    projects/angular/src/layout/grid/_grid.scss 10:9          @import
    projects/angular/src/utils/_components.clarity.scss 13:9  @import
    projects/angular/src/main.scss 13:9                       root stylesheet

WARNING: 3 repetitive deprecation warnings omitted.

When creating new application with ng new and trying to compile the application this error could be found

Error: node_modules/@cds/core/internal/base/button.base.d.ts:8:5 - error TS2416: Property 'ariaDisabled' in type 'CdsBaseButton' is not assignable to the same property in base type 'LitElement'.
  Type 'string | null' is not assignable to type 'string'.
    Type 'null' is not assignable to type 'string'.

8     ariaDisabled: 'true' | 'false' | null;
      ~~~~~~~~~~~~

The workaround at the moment is editing button.base.d.ts and changing ariaDisabled to not include null as type.

Release

After this PR is merged this package/s could be publish under next tag to NPM as v13-angular.next or v13.next (tag name still underconsideration)

netlify · 2021-11-08T14:54:46Z

✔️ Deploy Preview for zzz-angular-clarity-design-old ready!

🔨 Explore the source changes: fb5d42d

🔍 Inspect the deploy log: https://app.netlify.com/sites/zzz-angular-clarity-design-old/deploys/61a4f1aa9671700007f74a78

😎 Browse the preview: https://deploy-preview-6455--zzz-angular-clarity-design-old.netlify.app

bdryanovski · 2021-11-11T08:13:14Z

This PR is blocked until we resolve the issue related to TS changes in types at lib.dom. This will be fixed into the @cds/core package and after that, we could publish a release candidate

bbogdanov

Womderful!

Jinnie

LGTM

- Update TypeScript to 4.4.4 - Update cds/angular to use Angular 13 - Migrate files to use Angular 13 - Fixing Dev app - Fixing Clarity Schemtics to work Angular 13 - Fixing build:icons:zip - Removing build:icons:zip from build steps - zip files no longer part of @clr/icons - Updating development packages to resolve warnings - Updating code to handle ClientRect deprecation - Drop support of Internet Explorer polyfils Signed-off-by: Bozhidar Dryanovski <[email protected]>

bdryanovski added the @clr/angular label Nov 8, 2021

bdryanovski assigned bdryanovski, Jinnie and bbogdanov Nov 8, 2021

coryrylan mentioned this pull request Nov 8, 2021

fix: support native aria property reflection #6456

Merged

14 tasks

bdryanovski added the BLOCKED: CORE label Nov 11, 2021

bdryanovski marked this pull request as ready for review November 11, 2021 08:13

coryrylan mentioned this pull request Nov 11, 2021

fix: core aria property types #6467

Merged

14 tasks

bbogdanov approved these changes Nov 24, 2021

View reviewed changes

bdryanovski mentioned this pull request Nov 24, 2021

Using sass 1.33+ gives pages of deprecated warnings #6468

Closed

5 tasks

Jinnie approved these changes Nov 29, 2021

View reviewed changes

bdryanovski force-pushed the angular13 branch from 651cf63 to fb5d42d Compare November 29, 2021 15:28

bdryanovski merged commit d91b13c into vmware-archive:angular Nov 29, 2021

bdryanovski deleted the angular13 branch November 29, 2021 17:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: update to Angular 13 #6455

chore: update to Angular 13 #6455

Uh oh!

bdryanovski commented Nov 8, 2021 •

edited

Loading

Uh oh!

netlify bot commented Nov 8, 2021 •

edited

Loading

Uh oh!

bdryanovski commented Nov 11, 2021

Uh oh!

bbogdanov left a comment

Uh oh!

Jinnie left a comment

Uh oh!

Uh oh!

chore: update to Angular 13 #6455

chore: update to Angular 13 #6455

Uh oh!

Conversation

bdryanovski commented Nov 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

How to test it

Testing packages

Performance

Known issues

Release

Uh oh!

netlify bot commented Nov 8, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bdryanovski commented Nov 11, 2021

Uh oh!

bbogdanov left a comment

Choose a reason for hiding this comment

Uh oh!

Jinnie left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bdryanovski commented Nov 8, 2021 •

edited

Loading

netlify bot commented Nov 8, 2021 •

edited

Loading