refactor(nxext): refactor packages

.github/workflows/ci.yml

@@ -34,8 +34,8 @@ jobs:
       # Connect your workspace on nx.app and uncomment this to enable task distribution.
       # The "--stop-agents-after" is optional, but allows idle agents to shut down once the "build" targets have been requested
       - run: pnpm install --no-frozen-lockfile
-      - uses: nrwl/nx-set-shas@v4
+      #- uses: nrwl/nx-set-shas@v4
       #- run: pnpm exec nx-cloud start-ci-run --distribute-on="5 linux-medium-js" --stop-agents-after="build"
 
-      - run: pnpm exec nx-cloud record -- nx format:check
-      - run: pnpm exec nx affected -t lint test build
+      #- run: pnpm exec nx-cloud record -- nx format:check
+      - run: pnpm exec nx affected -t lint test build e2e --base=main --head=HEAD

.prettierignore

@@ -7,4 +7,6 @@
 /build
 
 /.nx/cache
+
+
 pnpm-lock.yaml

docs/docs/ionic-angular/generators.md

@@ -70,7 +70,7 @@ Skip formatting files.
 
 #### standalone
 
-Default: `false`
+Default: `true`
 
 Type: `boolean`
 

nx.json

@@ -118,7 +118,6 @@
       "!{projectRoot}/eslint.config.js"
     ]
   },
-  "nxCloudAccessToken": "NTlhMGE3ZTYtYjk5OC00Mzc5LWE2ZTAtNzE4ODEzNDY5MjlmfHJlYWQ=",
   "parallel": 1,
   "pluginsConfig": {
     "@nx/js": {

packages/capacitor/package.json

@@ -1,11 +1,7 @@
 {
   "name": "@nxext/capacitor",
-  "version": "18.0.4",
+  "version": "18.0.0",
   "description": "An Nx plugin for developing cross-platform applications using Capacitor",
-  "author": {
-    "name": "Devin Shoemaker",
-    "email": "[email protected]"
-  },
   "homepage": "https://nxext.github.io/nx-extensions-ionic/docs/capacitor/getting-started.html",
   "repository": {
     "type": "git",
@@ -28,5 +24,7 @@
     "ignore": "^5.3.1",
     "tslib": "^2.3.0"
   },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@nx/web": "^18.3.0"
+  }
 }

packages/capacitor/plugin.ts

@@ -0,0 +1,7 @@
+/*
+export {
+  createNodes,
+  PlaywrightPluginOptions,
+  createDependencies,
+} from './src/plugins/plugin';
+*/

packages/capacitor/src/plugins/plugin.spec.ts

@@ -0,0 +1,5 @@
+xdescribe('Plugin', () => {
+  beforeEach(() => {});
+
+  it('', async () => {});
+});

packages/capacitor/src/utils/versions.ts

@@ -1 +1 @@
-export const capacitorVersion = '^5.0.3';
+export const capacitorVersion = '^6.0.0';

packages/ionic-angular/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nxext/ionic-angular",
-  "version": "18.0.4",
+  "version": "18.0.0",
   "description": "An Nx plugin for developing Ionic React applications and libraries",
   "author": {
-    "name": "Devin Shoemaker",
-    "email": "[email protected]"
+    "name": "Dominik Pieper",
+    "email": "[email protected]"
   },
   "homepage": "https://nxext.github.io/nx-extensions-ionic/docs/ionic-angular/overview.html",
   "repository": {
@@ -25,7 +25,7 @@
   "schematics": "./generators.json",
   "builders": "./executors.json",
   "dependencies": {
-    "@nxext/capacitor": "^18.0.4",
+    "@nxext/capacitor": "18.0.0",
     "@nx/devkit": "18.3.1",
     "@nx/eslint": "18.3.1",
     "@nx/angular": "18.3.1",
@@ -34,5 +34,8 @@
     "typescript": "5.4.5",
     "tslib": "^2.3.0"
   },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@nx/angular": "^18.3.0",
+    "@nx/eslint": "^18.3.0"
+  }
 }

packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.spec.ts.template

@@ -1,21 +1,16 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-  });
-
   it('should create the app', () => {
+    TestBed.overrideComponent(AppComponent, {
+      add: {
+        imports: [RouterTestingModule]
+      }
+    });
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
 });

packages/ionic-angular/src/generators/application/files/base-standalone/src/app/app.component.ts.template

@@ -1,18 +1,11 @@
 import { Component } from '@angular/core';
-import {IonicModule} from '@ionic/angular';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 
 @Component({
-  selector: '<%= prefix %>-root',
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
   standalone: true,
-  imports: [IonicModule],
-  template: `
-    <ion-app>
-      <ion-router-outlet></ion-router-outlet>
-    </ion-app>
-  `,
-  styles: `
-
-  `
+  imports: [IonApp, IonRouterOutlet],
 })
 export class AppComponent {
   constructor() {}

packages/ionic-angular/src/generators/application/files/base-standalone/src/styles.scss.template

@@ -8,3 +8,19 @@
  * For more information on global stylesheets, visit the documentation:
  * https://ionicframework.com/docs/layout/global-stylesheets
  */
+
+/* Core CSS required for Ionic components to work properly */
+@import "@ionic/angular/css/core.css";
+
+/* Basic CSS for apps built with Ionic */
+@import "@ionic/angular/css/normalize.css";
+@import "@ionic/angular/css/structure.css";
+@import "@ionic/angular/css/typography.css";
+@import "@ionic/angular/css/display.css";
+
+/* Optional CSS utils that can be commented out */
+@import "@ionic/angular/css/padding.css";
+@import "@ionic/angular/css/float-elements.css";
+@import "@ionic/angular/css/text-alignment.css";
+@import "@ionic/angular/css/text-transformation.css";
+@import "@ionic/angular/css/flex-utils.css";

packages/ionic-angular/src/generators/application/files/base-standalone/src/theme/variables.scss.template

@@ -234,3 +234,11 @@
     --ion-card-background: #1e1e1e;
   }
 }
+
+html {
+  /*
+   * For more information on dynamic font scaling, visit the documentation:
+   * https://ionicframework.com/docs/layout/dynamic-font-scaling
+   */
+  --ion-dynamic-font: var(--ion-default-dynamic-font);
+}

packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.component.spec.ts.template

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  it('should create the app', () => {
+    TestBed.overrideComponent(AppComponent, {
+      add: {
+        imports: [RouterTestingModule]
+      }
+    });
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+});

packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.component.ts.template

@@ -1,17 +1,12 @@
-import {Component} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {IonicModule} from '@ionic/angular';
+import { Component } from '@angular/core';
+import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
 
 @Component({
   selector: '<%= prefix %>-root',
+  templateUrl: 'app.component.html',
   standalone: true,
-  imports: [CommonModule, IonicModule],
-  template: `
-    <ion-app>
-      <ion-router-outlet></ion-router-outlet>
-    </ion-app>
-  `,
-  styles: ``
+  imports: [IonApp, IonRouterOutlet],
 })
-
-export class AppComponent {}
+export class AppComponent {
+  constructor() {}
+}

packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.config.ts.template

@@ -1,14 +1,13 @@
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig } from '@angular/core';
+import { RouteReuseStrategy, provideRouter } from '@angular/router';
+import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+
 import { appRoutes } from './app.routes';
-import {IonicModule} from '@ionic/angular';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideRouter(appRoutes),
-    importProvidersFrom(
-      IonicModule.forRoot()
-    )
-
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    provideIonicAngular(),
+    provideRouter(appRoutes)
   ],
 };

packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/app.routes.ts.template

@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core';
-import {Routes} from '@angular/router';
+import { Routes } from '@angular/router';
 
 export const appRoutes: Routes = [
   {
     path: '',
-    loadChildren: () => import('./tabs/tabs.routes').then(r => r.routes)
-  }
+    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
+  },
 ];

packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.html.template

@@ -0,0 +1,12 @@
+<div id="container">
+  <strong>{{ name }}</strong>
+  <p>
+    Explore
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      href="https://ionicframework.com/docs/components"
+      >UI Components</a
+    >
+  </p>
+</div>

packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.scss.template

@@ -0,0 +1,27 @@
+#container {
+  text-align: center;
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+#container p {
+  font-size: 16px;
+  line-height: 22px;
+
+  color: #8c8c8c;
+
+  margin: 0;
+}
+
+#container a {
+  text-decoration: none;
+}

packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.spec.ts.template

@@ -1,5 +1,4 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { IonicModule } from '@ionic/angular';
 
 import { ExploreContainerComponent } from './explore-container.component';
 
@@ -8,11 +7,6 @@ describe('ExploreContainerComponent', () => {
   let fixture: ComponentFixture<ExploreContainerComponent>;
 
   beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ExploreContainerComponent],
-      imports: [IonicModule.forRoot()]
-    }).compileComponents();
-
     fixture = TestBed.createComponent(ExploreContainerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/explore-container/explore-container.component.ts.template

@@ -1,50 +1,11 @@
 import { Component, Input } from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
-import {IonicModule} from '@ionic/angular';
 
 @Component({
-  selector: '<%= prefix %>-explore-container',
+  selector: 'app-explore-container',
+  templateUrl: './explore-container.component.html',
+  styleUrls: ['./explore-container.component.scss'],
   standalone: true,
-  imports: [ CommonModule, FormsModule, IonicModule ],
-  template: `
-    <div id="container">
-      <strong>{{ name }}</strong>
-      <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
-    </div>
-  `,
-  styles: `
-    #container {
-      text-align: center;
-
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    #container strong {
-      font-size: 20px;
-      line-height: 26px;
-    }
-
-    #container p {
-      font-size: 16px;
-      line-height: 22px;
-
-      color: #8c8c8c;
-
-      margin: 0;
-    }
-
-    #container a {
-      text-decoration: none;
-    }
-  `
 })
 export class ExploreContainerComponent {
-
   @Input() name?: string;
-
 }

packages/ionic-angular/src/generators/application/files/tabs-standalone/src/app/tab1/tab1.page.html.template

@@ -0,0 +1,17 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Tab 1
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Tab 1</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <app-explore-container name="Tab 1 page"></app-explore-container>
+</ion-content>