refactor(nxext): refactor packages

.github/workflows/ci.yml

@@ -3,7 +3,7 @@ name: CI
 on:
   push:
     branches:
-      - master
+      - main
   pull_request:
 
 permissions:
@@ -18,24 +18,34 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v3
         with:
           version: 8
-      # Cache node_modules
-      - uses: actions/setup-node@v3
+          run_install: false
+
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
+          check-latest: true
           cache: 'pnpm'
+
       - uses: actions/cache@v4
         with:
           lookup-only: true
           path: '**/node_modules'
           key: pnpm-${{ hashFiles('pnpm-lock.yaml') }}
+
       # 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
+
+      # 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' }}
+
       #- 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

.npmrc

@@ -0,0 +1 @@
+auto-install-peers=true

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

e2e/utils/index.ts

@@ -22,7 +22,7 @@ export function createTestProject() {
   });
 
   execSync(
-    `npx --yes create-nx-workspace@latest ${projectName} --preset empty --nxCloud skip --no-interactive`,
+    `npx --yes create-nx-workspace@latest ${projectName} --preset ts --nxCloud skip --no-interactive`,
     {
       cwd: dirname(projectDirectory),
       stdio: 'inherit',

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

@@ -49,34 +49,36 @@
   "private": true,
   "packageManager": "[email protected]",
   "devDependencies": {
-    "@angular-devkit/core": "17.3.5",
-    "@angular-devkit/schematics": "17.3.4",
+    "@angular-devkit/core": "17.3.8",
+    "@angular-devkit/schematics": "17.3.8",
     "@eslint/eslintrc": "^2.1.1",
     "@eslint/js": "8.49.0",
     "@nuxt/kit": "3.10.3",
-    "@nx/angular": "18.3.1",
-    "@nx/cypress": "18.3.1",
-    "@nx/devkit": "18.3.1",
-    "@nx/eslint": "18.3.1",
-    "@nx/eslint-plugin": "18.3.1",
-    "@nx/jest": "18.3.1",
-    "@nx/js": "18.3.1",
-    "@nx/node": "18.3.1",
-    "@nx/playwright": "18.3.1",
-    "@nx/plugin": "18.3.1",
-    "@nx/react": "18.3.1",
-    "@nx/storybook": "18.3.1",
-    "@nx/vite": "18.3.1",
-    "@nx/web": "18.3.1",
-    "@nx/workspace": "18.3.1",
+    "@nx/angular": "18.3.5",
+    "@nx/cypress": "18.3.5",
+    "@nx/devkit": "18.3.5",
+    "@nx/eslint": "18.3.5",
+    "@nx/webpack": "18.3.5",
+    "@nx/eslint-plugin": "18.3.5",
+    "@nx/jest": "18.3.5",
+    "@nx/js": "18.3.5",
+    "@nx/node": "18.3.5",
+    "@nx/playwright": "18.3.5",
+    "@nx/plugin": "18.3.5",
+    "@nx/react": "18.3.5",
+    "@nx/storybook": "18.3.5",
+    "@nx/vite": "18.3.5",
+    "@nx/web": "18.3.5",
+    "@nx/workspace": "18.3.5",
     "@nxext/svelte": "^18.0.0",
     "@phenomnomnominal/tsquery": "~5.0.1",
-    "@schematics/angular": "17.3.4",
+    "@schematics/angular": "17.3.8",
     "@stencil/core": "3.4.0",
     "@swc-node/register": "1.8.0",
     "@swc/cli": "0.1.62",
-    "@swc/core": "^1.3.85",
-    "@swc/jest": "^0.2.20",
+    "@swc/core": "~1.4.13",
+    "@swc/helpers": "~0.5.2",
+    "@swc/jest": "~0.2.20",
     "@types/glob": "^8.1.0",
     "@types/globrex": "^0.1.2",
     "@types/is-ci": "^3.0.1",
@@ -107,7 +109,7 @@
     "jsonc-parser": "^3.2.1",
     "kill-port": "^2.0.1",
     "lint-staged": "13.2.3",
-    "nx": "18.3.1",
+    "nx": "18.3.5",
     "nx-cloud": "^18.0.0",
     "prettier": "2.7.1",
     "pretty-quick": "^3.1.3",
@@ -128,10 +130,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",
@@ -22,11 +18,12 @@
   "schematics": "./generators.json",
   "builders": "./executors.json",
   "dependencies": {
-    "@nx/devkit": "18.3.1",
-    "nx": "18.3.1",
-    "@nx/web": "18.3.1",
     "ignore": "^5.3.1",
     "tslib": "^2.3.0"
   },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@nx/devkit": ">=18.0.0",
+    "@nx/web": ">=18.0.0",
+    "nx": ">=18.0.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/utils/versions.ts

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

packages/ionic-angular/jest.config.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/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,14 +25,15 @@
   "schematics": "./generators.json",
   "builders": "./executors.json",
   "dependencies": {
-    "@nxext/capacitor": "^18.0.4",
-    "@nx/devkit": "18.3.1",
-    "@nx/eslint": "18.3.1",
-    "@nx/angular": "18.3.1",
-    "@nx/js": "18.3.1",
+    "@nxext/capacitor": "18.0.0",
     "@phenomnomnominal/tsquery": "~5.0.1",
-    "typescript": "5.4.5",
     "tslib": "^2.3.0"
   },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@nx/angular": ">=18.0.0",
+    "@nx/devkit": ">=18.0.0",
+    "@nx/eslint": ">=18.0.0",
+    "@nx/js": ">=18.0.0",
+    "typescript": "*"
+  }
 }

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() {}
+}