feat: upgrade to angular v17

.gitignore

@@ -47,3 +47,5 @@ Thumbs.db
 #
 /stats.html
 build-storybook.log
+
+.nx/cache

.prettierignore

@@ -7,3 +7,5 @@
 /tmp
 /node_modules
 /stats.html
+
+/.nx/cache

apps/app/project.json

@@ -7,7 +7,12 @@
     "build": {
       "dependsOn": ["^build"],
       "executor": "@nx/vite:build",
-      "outputs": ["{options.outputPath}", "dist/apps/app/.nitro", "dist/apps/app/ssr", "dist/apps/app/analog"],
+      "outputs": [
+        "{options.outputPath}",
+        "{workspaceRoot}/dist/apps/app/.nitro",
+        "{workspaceRoot}/dist/apps/app/ssr",
+        "{workspaceRoot}/dist/apps/app/analog"
+      ],
       "options": {
         "configFile": "apps/app/vite.config.ts",
         "outputPath": "dist/apps/app/client"
@@ -51,19 +56,19 @@
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "app:build"
+        "buildTarget": "app:build"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/app/**/*.ts", "apps/app/**/*.html"]
       }
     },
     "test": {
       "executor": "@nx/vite:test",
-      "outputs": ["apps/app/coverage"]
+      "outputs": ["{projectRoot}/coverage"]
     }
   },
   "tags": [],

apps/app/src/app/pages/(examples)/examples/notes/(notes).page.ts

@@ -108,26 +108,28 @@ export default class NotesExamplePageComponent {
   private _notes$ = this._refreshNotes$.pipe(
     switchMap(() => this._trpc.note.list.query()),
     tap((result) =>
-      this.state.mutate((state) => {
-        state.status = 'success';
-        state.notes = result;
-        state.error = null;
-      })
+      this.state.update((state) => ({
+        ...state,
+        status: 'success',
+        notes: result,
+        error: null,
+      }))
     ),
     catchError((err) => {
-      this.state.mutate((state) => {
-        state.notes = [];
-        state.status = 'error';
-        state.error = err;
-      });
+      this.state.update((state) => ({
+        ...state,
+        notes: [],
+        status: 'error',
+        error: err,
+      }));
       return of([]);
     })
   );
 
   public state = signal<{
     status: 'idle' | 'loading' | 'success' | 'error';
     notes: Note[];
-    error: any | null;
+    error: unknown | null;
     updatedFrom: 'initial' | 'create' | 'delete';
     idBeingDeleted?: number;
   }>({

apps/app/src/app/shared/code/code.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Input, ViewEncapsulation } from '@angular/core';
+import { booleanAttribute, Component, inject, Input, ViewEncapsulation } from '@angular/core';
 import {
   BrnTabsComponent,
   BrnTabsContentDirective,
@@ -23,7 +23,6 @@ import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
 import { provideIcons } from '@ng-icons/core';
 import { radixCheck, radixClipboard } from '@ng-icons/radix-icons';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NgIf } from '@angular/common';
 
 declare const Prism: typeof import('prismjs');
@@ -107,9 +106,9 @@ export class CodeComponent {
   protected copied = false;
 
   protected _disableCopy = false;
-  @Input()
-  set disableCopy(value: BooleanInput) {
-    this._disableCopy = coerceBooleanProperty(value);
+  @Input({ transform: booleanAttribute })
+  set disableCopy(value: boolean) {
+    this._disableCopy = value;
   }
 
   private _language: 'ts' | 'sh' = 'ts';

apps/app/src/app/shared/layout/section-sub-heading.component.ts

@@ -1,5 +1,4 @@
-import { Component, Input } from '@angular/core';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { booleanAttribute, Component, Input } from '@angular/core';
 
 @Component({
   selector: 'spartan-section-sub-heading',
@@ -16,8 +15,8 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 })
 export class SectionSubHeadingComponent {
   protected _first = false;
-  @Input()
-  set first(value: BooleanInput) {
-    this._first = coerceBooleanProperty(value);
+  @Input({ transform: booleanAttribute })
+  set first(value: boolean) {
+    this._first = value;
   }
 }

apps/app/src/app/shared/layout/side-nav/side-nav-link.directive.ts

@@ -1,6 +1,5 @@
-import { Directive, inject, Input } from '@angular/core';
+import { booleanAttribute, Directive, inject, Input } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 @Directive({
   selector: '[spartanSideNavLink]',
@@ -24,10 +23,11 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 export class SideNavLinkDirective {
   private _rlActive = inject(RouterLinkActive);
   protected _disabled = false;
-  @Input()
-  set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
+  @Input({ transform: booleanAttribute })
+  set disabled(value: boolean) {
+    this._disabled = value;
   }
+
   constructor() {
     this._rlActive.routerLinkActive = 'font-medium !text-foreground';
   }

apps/app/vite.config.ts

@@ -3,7 +3,7 @@
 import analog from '@analogjs/platform';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig, Plugin, splitVendorChunkPlugin } from 'vite';
-import tsConfigPaths from 'vite-tsconfig-paths';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
 import replace from '@rollup/plugin-replace';
 import * as path from 'path';
 
@@ -94,9 +94,7 @@ export default defineConfig(({ mode }) => {
           serveStatic: false,
         },
       }),
-      tsConfigPaths({
-        root: '../../',
-      }),
+      nxViteTsPaths(),
       visualizer() as Plugin,
       splitVendorChunkPlugin(),
     ],

apps/ui-storybook-e2e/project.json

@@ -18,7 +18,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/ui-storybook-e2e/**/*.{js,ts}"]

libs/nx/package.json

@@ -3,8 +3,7 @@
   "version": "0.0.1-alpha.316",
   "type": "commonjs",
   "dependencies": {
-    "@nx/angular": "^16.3.2",
-    "@nx/devkit": "16.5.5",
+    "@nx/devkit": "17.1.2",
     "enquirer": "2.3.6",
     "semver": "7.5.4"
   },

libs/nx/project.json

@@ -37,7 +37,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["libs/nx/**/*.ts", "libs/nx/package.json", "libs/nx/executors.json"]
@@ -47,14 +47,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "libs/nx/jest.config.ts",
-        "passWithNoTests": true
-      },
-      "configurations": {
-        "ci": {
-          "ci": true,
-          "codeCoverage": true
-        }
+        "jestConfig": "libs/nx/jest.config.ts"
       }
     },
     "release": {

libs/nx/src/generators/ui/libs/ui-avatar-helm/files/lib/hlm-avatar.component.ts.template

@@ -1,13 +1,5 @@
 import { NgIf } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  effect,
-  HostBinding,
-  Input,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Input, signal, ViewEncapsulation } from '@angular/core';
 import { BrnAvatarComponent } from '@spartan-ng/ui-avatar-brain';
 import { hlm } from '@spartan-ng/ui-core';
 import { cva, VariantProps } from 'class-variance-authority';
@@ -28,10 +20,6 @@ const avatarVariants = cva('relative flex shrink-0 overflow-hidden rounded-full'
 
 type AvatarVariants = VariantProps<typeof avatarVariants>;
 
-const generateClasses = (variant: AvatarVariants['variant'], userCls: ClassValue) => {
-  return hlm(avatarVariants({ variant }), userCls);
-};
-
 @Component({
   selector: 'hlm-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -54,20 +42,19 @@ export class HlmAvatarComponent extends BrnAvatarComponent {
   @Input()
   set variant(variant: AvatarVariants['variant']) {
     this._variant.set(variant);
+    this.cls = this.generateClasses();
   }
 
   @Input()
   set class(cls: ClassValue) {
     this.userCls.set(cls);
+    this.cls = this.generateClasses();
   }
 
   @HostBinding('class')
-  protected cls = generateClasses(this._variant(), this.userCls());
+  protected cls = this.generateClasses();
 
-  constructor() {
-    super();
-    effect(() => {
-      this.cls = generateClasses(this._variant(), this.userCls());
-    });
+  private generateClasses() {
+    return hlm(avatarVariants({ variant: this._variant() }), this.userCls());
   }
 }

libs/nx/src/generators/ui/libs/ui-badge-helm/files/lib/hlm-badge.directive.ts.template

@@ -1,8 +1,7 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
 import { cva, VariantProps } from 'class-variance-authority';
 import { hlm } from '@spartan-ng/ui-core';
 import { ClassValue } from 'clsx';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
 const badgeVariants = cva(
   'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
@@ -56,14 +55,15 @@ export class HlmBadgeDirective {
     this._variant = value;
     this._class = this.generateClasses();
   }
+
   private _static: badgeVariants['static'] = false;
-  @Input()
+  @Input({ transform: booleanAttribute })
   get static(): badgeVariants['static'] {
     return this._static;
   }
 
-  set static(value: BooleanInput) {
-    this._static = coerceBooleanProperty(value);
+  set static(value: boolean) {
+    this._static = value;
     this._class = this.generateClasses();
   }
 

libs/nx/src/generators/ui/libs/ui-icon-helm/files/lib/hlm-icon.component.spec.ts.template

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { radixCheck } from '@ng-icons/radix-icons';
@@ -8,6 +8,7 @@ import { HlmIconComponent } from './hlm-icon.component';
 @Component({
   selector: 'hlm-mock',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [HlmIconComponent],
   providers: [provideIcons({ radixCheck })],
   template: `<hlm-icon class="test" ngIconClass="test2" name="radixCheck" [size]="size" color="red" strokeWidth="2" />`,

libs/nx/src/generators/ui/libs/ui-icon-helm/files/lib/hlm-icon.component.ts.template

@@ -2,7 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  effect,
   HostBinding,
   Input,
   signal,
@@ -35,11 +34,6 @@ const iconVariants = cva('inline-flex', {
 
 export type IconSize = DefinedSizes | string;
 
-const generateClasses = (size: IconSize, userCls: ClassValue) => {
-  const variant = isDefinedSize(size) ? size : 'none';
-  return hlm(iconVariants({ variant }), userCls);
-};
-
 const isDefinedSize = (size: IconSize): size is DefinedSizes => {
   return DEFINED_SIZES.includes(size as DefinedSizes);
 };
@@ -70,39 +64,45 @@ export class HlmIconComponent {
   @Input({ required: true })
   set name(value: IconName | string) {
     this._name.set(value);
+    this.cls = this.generateClasses();
   }
 
   @Input()
   set size(value: IconSize) {
     this._size.set(value);
+    this.cls = this.generateClasses();
   }
 
   @Input()
   set color(value: string | undefined) {
     this._color.set(value);
+    this.cls = this.generateClasses();
   }
 
   @Input()
   set strokeWidth(value: string | number | undefined) {
     this._strokeWidth.set(value);
+    this.cls = this.generateClasses();
   }
 
   @Input()
   set ngIconClass(cls: ClassValue) {
     this.ngIconCls.set(cls);
+    this.cls = this.generateClasses();
   }
 
   @Input()
   set class(cls: ClassValue) {
     this.userCls.set(cls);
+    this.cls = this.generateClasses();
   }
 
   @HostBinding('class')
-  protected cls = generateClasses(this._size(), this.userCls());
+  protected cls = this.generateClasses();
 
-  constructor() {
-    effect(() => {
-      this.cls = generateClasses(this._size(), this.userCls());
-    });
+  private generateClasses() {
+    const size: IconSize = this._size();
+    const variant = isDefinedSize(size) ? size : 'none';
+    return hlm(iconVariants({ variant }), this.userCls());
   }
 }