refactor(nxext): refactor packages

Author: DominikPieper

.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
       # Cache node_modules
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 18.18
           cache: 'pnpm'
       - uses: actions/cache@v4
         with:
@@ -34,8 +34,13 @@ 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@v3
+          # This line is needed for nx affected to work when CI is running on a PR
+      - run: git branch --track main origin/main
+        if: ${{ github.event_name == 'pull_request' }}
+      #- 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

.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`
 

jest.preset.js

@@ -1,4 +1,5 @@
 const nxPreset = require('@nx/jest/preset').default;
+
 module.exports = {
   ...nxPreset,
   testTimeout: 500000,

nx.json

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

package.json

@@ -58,6 +58,7 @@
     "@nx/cypress": "18.3.1",
     "@nx/devkit": "18.3.1",
     "@nx/eslint": "18.3.1",
+    "@nx/webpack": "18.3.1",
     "@nx/eslint-plugin": "18.3.1",
     "@nx/jest": "18.3.1",
     "@nx/js": "18.3.1",
@@ -100,9 +101,12 @@
     "husky": "^9.0.11",
     "ignore": "^5.3.1",
     "is-ci": "^3.0.1",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-environment-node": "^29.7.0",
+    "jest": "29.4.3",
+    "jest-environment-jsdom": "29.4.3",
+    "jest-environment-node": "^29.4.1",
+    "jest-resolve": "^29.4.1",
+    "jest-runtime": "^29.4.1",
+    "jest-util": "^29.4.1",
     "jsonc-eslint-parser": "^2.3.0",
     "jsonc-parser": "^3.2.1",
     "kill-port": "^2.0.1",
@@ -128,10 +132,10 @@
   },
   "lint-staged": {
     "nx.json": [
-      "yarn format --uncommitted"
+      "pnpm format --uncommitted"
     ],
     "*.{js,json,css,scss,md,ts,html,graphql}": [
-      "yarn format --uncommitted"
+      "pnpm format --uncommitted"
     ]
   },
   "config": {

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/generators/capacitor-project/generator.ts

@@ -26,6 +26,3 @@ export async function capacitorProjectGenerator(
 }
 
 export default capacitorProjectGenerator;
-export const capacitorProjectSchematic = convertNxGenerator(
-  capacitorProjectGenerator
-);

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

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

packages/capacitor/src/plugins/plugin.ts

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

packages/capacitor/src/utils/versions.ts

@@ -4,12 +4,7 @@ module.exports = {
   preset: '../../jest.preset.js',
   globals: {},
   transform: {
-    '^.+\\.[tj]s$': [
-      'ts-jest',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-      },
-    ],
+    '^.+\\.[tj]sx?$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
   coverageDirectory: '../../coverage/packages/ionic-angular',

packages/ionic-angular/jest.config.ts

@@ -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/package.json

@@ -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.spec.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/app/app.component.ts.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/styles.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/base-standalone/src/theme/variables.scss.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.spec.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.component.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.config.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/app.routes.ts.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.html.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;
+}