Merge branch 'main' into ionic-angular-installation

docs/.vitepress/config.mts

@@ -90,13 +90,17 @@ function sideNavDocs() {
       collapsible: true,
       collapsed: true,
       items: [
+        {
+          text: 'Overview',
+          link: '/docs/capacitor/overview',
+        },
         {
           text: 'Generators',
           link: '/docs/capacitor/generators',
         },
         {
           text: 'Executors',
-          link: '/docs/stencil/executors',
+          link: '/docs/capacitor/executors',
         },
       ],
     },

docs/docs/capacitor/overview.md

@@ -0,0 +1,92 @@
+The `@nxext/capacitor` plugin lets you interact with the Capacitor CLI using Nx targets.
+
+## Install Plugin
+
+```
+# npm
+npm install --save-dev --exact @nxext/capacitor
+
+# yarn
+yarn add --save-dev --exact @nxext/capacitor
+```
+
+## Add Capacitor to Existing Project
+
+First, ensure that the frontend project has been built:
+
+```
+nx build {frontend project name}
+
+nx build mobile-app
+```
+
+Once the plugin has been added to your Nx workspace you can generate a Capacitor project from an existing frontend project:
+
+```
+nx generate @nxext/capacitor:configuration --project {frontend project name}
+
+nx generate @nxext/capacitor:configuration --project mobile-app
+```
+
+Nx will ask you some questions about the application, but you can customize it further by passing these options:
+
+```
+nx generate @nxext/capacitor:configuration [options,...]
+
+Options:
+  --project               The name of the frontend project for Capacitor.
+  --appId                 The app ID for the project. (default: io.ionic.starter)
+  --appName               The application name for the project.
+  --webDir                The directory of your projects built web assets.
+  --skipFormat            Skip formatting files.
+  --dryRun                Runs through and reports activity without writing to disk.
+  --skip-nx-cache         Skip the use of Nx cache.
+  --help                  Show available options for project target.
+```
+
+Finally, you will need to `cd` into your applications directory and install the npm dependencies. (e.g. `npm install`)
+
+## Add Native Platforms
+
+Now that a Capacitor project has been added to your Nx workspace you can begin adding support for native platforms. Currently, Capacitor supports Android and iOS, but other platforms can be added with Capacitor plugins.
+
+```
+nx run {frontend project}:add:ios
+nx run {frontend project}:add:android
+nx run {frontend project}:add --platform {native platform}
+
+nx run my-app:add:android
+nx run my-app:cap --cmd="add android"
+```
+
+## Sync Native Platform
+
+Running the sync command will update the native platform dependencies and copy a build of your frontend project to the Capacitor project:
+
+```
+nx run {frontend project}:sync:ios
+nx run {frontend project}:sync:android
+nx run {frontend project}:sync --platform {native platform}
+
+nx run my-app:sync:android
+nx run my-app:cap --cmd="sync android"
+```
+
+## Open Native Platform
+
+Finally, you can open the native platform in it's respective IDE:
+
+```
+nx run {frontend project}:open:ios
+nx run {frontend project}:open:android
+nx run {frontend project}:open --platform {native platform}
+
+nx run my-app:open:android
+nx run my-app:cap --cmd="open android"
+```
+
+## Adding Capacitor Plugins
+
+Capacitor plugin dependencies must be added to the project-level `package.json`.
+
+To learn more about Capacitor, including the native API's available, please read the [official Capacitor documentation](https://capacitorjs.com/docs).

e2e/ionic-react-e2e/project.json

@@ -4,6 +4,7 @@
   "projectType": "application",
   "sourceRoot": "e2e/ionic-react-e2e/tests",
   "targets": {
+    "e2e": {},
     "lint": {
       "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"]

e2e/ionic-react-e2e/tests/ionic-react.spec.ts

@@ -1,9 +1,7 @@
 import { runNxCommandAsync, uniq } from '@nx/plugin/testing';
-import { createTestProject, installPlugin } from '@nxext/e2e-utils';
+import { createTestProject, installPlugin, stripAnsi } from '@nxext/e2e-utils';
 import { rmSync } from 'fs';
 
-const ansiEscapeCodeRegex = /\x1B\[[0-?]*[ -/]*[@-~]/g;
-
 describe('ionic-react-project e2e', () => {
   let projectDirectory: string;
   const app = uniq('ionic-react');
@@ -13,7 +11,7 @@ describe('ionic-react-project e2e', () => {
     installPlugin(projectDirectory, 'ionic-react');
 
     await runNxCommandAsync(
-      `generate @nx/react:application ${app} --style=css --minimal --e2eTestRunner=none --linter=none --projectNameAndRootFormat=derived --skipFormat=true`
+      `generate @nx/react:application ${app} --style=css --bundler=vite --unitTestRunner=vitest --minimal --e2eTestRunner=none --linter=none --projectNameAndRootFormat=derived --skipFormat=true`
     );
     await runNxCommandAsync(
       `generate @nxext/ionic-react:configuration --project=${app} --appName=test --appId=test --skipFormat=true`
@@ -30,14 +28,14 @@ describe('ionic-react-project e2e', () => {
 
   it('should build successfully', async () => {
     const buildResults = await runNxCommandAsync(`build ${app}`);
-    expect(buildResults.stdout.replace(ansiEscapeCodeRegex, '')).toContain(
+    expect(stripAnsi(buildResults.stdout)).toContain(
       `Successfully ran target build for project ${app}`
     );
   });
 
   it('should run tests successfully', async () => {
     const testResults = await runNxCommandAsync(`test ${app}`);
-    expect(testResults.stdout.replace(ansiEscapeCodeRegex, '')).toContain(
+    expect(stripAnsi(testResults.stdout)).toContain(
       `Successfully ran target test for project ${app}`
     );
   });

nx.json

@@ -116,11 +116,10 @@
     "projects": ["packages/*", "!common"],
     "projectsRelationship": "independent",
     "version": {
+      "conventionalCommits": true,
       "generatorOptions": {
-        "currentVersionResolver": "git-tag",
         "fallbackCurrentVersionResolver": "disk",
-        "updateDependents": "auto",
-        "specifierSource": "conventional-commits"
+        "updateDependents": "auto"
       }
     },
     "changelog": {

packages/capacitor/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 19.1.2 (2024-10-08)
+
+
+### 🩹 Fixes
+
+- **capacitor:** move nx deps to peer deps ([2ed1edc6](https://github.com/nxext/nx-extensions/commit/2ed1edc6))
+
+
+### ❤️  Thank You
+
+- Edouard Bozon @edbzn
+
 ## 19.1.1 (2024-10-07)
 
 

packages/capacitor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nxext/capacitor",
-  "version": "19.1.1",
+  "version": "19.1.2",
   "description": "An Nx plugin for developing cross-platform applications using Capacitor",
   "homepage": "https://nxext.github.io/nx-extensions/docs/capacitor/getting-started.html",
   "repository": {
@@ -18,10 +18,11 @@
   "schematics": "./generators.json",
   "builders": "./executors.json",
   "dependencies": {
-    "@nx/devkit": "^19.0.0",
-    "nx": "^19.0.0",
     "ignore": "^5.3.1",
     "tslib": "^2.3.0"
   },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@nx/devkit": "^19.0.0",
+    "nx": "^19.0.0"
+  }
 }

packages/ionic-angular/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 19.1.2 (2024-10-08)
+
+
+### 🩹 Fixes
+
+- **ionic-angular:** move nx deps to peer deps ([dd64b892](https://github.com/nxext/nx-extensions/commit/dd64b892))
+
+
+### 🧱 Updated Dependencies
+
+- Updated capacitor to 19.1.2
+
+
+### ❤️  Thank You
+
+- Edouard Bozon @edbzn
+
 ## 19.1.1 (2024-10-07)
 
 

packages/ionic-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nxext/ionic-angular",
   "description": "An Nx plugin for developing Ionic Angular applications",
-  "version": "19.1.1",
+  "version": "19.1.2",
   "homepage": "https://nxext.github.io/nx-extensions/docs/ionic-angular/overview.html",
   "repository": {
     "type": "git",
@@ -20,12 +20,13 @@
   "schematics": "./generators.json",
   "builders": "./executors.json",
   "dependencies": {
-    "@nxext/capacitor": "^19.1.1",
-    "@nx/devkit": "^19.0.0",
-    "@nx/angular": "^19.0.0",
+    "@nxext/capacitor": "^19.1.2",
     "tslib": "^2.3.0",
     "typescript": "5.5.4",
     "@phenomnomnominal/tsquery": "~5.0.1"
   },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@nx/devkit": "^19.0.0",
+    "@nx/angular": "^19.0.0"
+  }
 }

packages/ionic-react/CHANGELOG.md

@@ -1,3 +1,22 @@
+## 19.1.2 (2024-10-08)
+
+
+### 🩹 Fixes
+
+- **ionic-react:** fix build target + fix e2e tests ([2c087507](https://github.com/nxext/nx-extensions/commit/2c087507))
+
+- **ionic-react:** move nx deps to peer deps ([e14c576e](https://github.com/nxext/nx-extensions/commit/e14c576e))
+
+
+### 🧱 Updated Dependencies
+
+- Updated capacitor to 19.1.2
+
+
+### ❤️  Thank You
+
+- Edouard Bozon @edbzn
+
 ## 19.1.1 (2024-10-07)
 
 

packages/ionic-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nxext/ionic-react",
-  "version": "19.1.1",
+  "version": "19.1.2",
   "description": "An Nx plugin for developing Ionic React applications and libraries",
   "homepage": "https://nxext.github.io/nx-extensions/docs/ionic-react/overview.html",
   "repository": {
@@ -20,9 +20,10 @@
   "schematics": "./generators.json",
   "builders": "./executors.json",
   "dependencies": {
-    "@nxext/capacitor": "^19.1.1",
-    "@nx/devkit": "^19.0.0",
+    "@nxext/capacitor": "^19.1.2",
     "tslib": "^2.3.0"
   },
-  "peerDependencies": {}
+  "peerDependencies": {
+    "@nx/devkit": "^19.0.0"
+  }
 }

packages/ionic-react/src/generators/configuration/lib/add-dependencies.ts

@@ -3,6 +3,10 @@ import {
   ionicReactRouterVersion,
   ionicReactVersion,
   ionIconsVersion,
+  reactRouterVersion,
+  capacitorPluginsVersion,
+  reactRouterDomTypesVersion,
+  reactRouterTypesVersion,
 } from '../../../utils/versions';
 
 export function addDependencies(host: Tree) {
@@ -12,7 +16,18 @@ export function addDependencies(host: Tree) {
       '@ionic/react': ionicReactVersion,
       '@ionic/react-router': ionicReactRouterVersion,
       ionicons: ionIconsVersion,
+      '@capacitor/haptics': capacitorPluginsVersion,
+      '@capacitor/keyboard': capacitorPluginsVersion,
+      '@capacitor/status-bar': capacitorPluginsVersion,
+      /**
+       * Following deps are overwrite because React Router v6 is not compatible with Ionic React Router
+       */
+      'react-router': reactRouterVersion,
+      'react-router-dom': reactRouterVersion,
     },
-    {}
+    {
+      '@types/react-router': reactRouterTypesVersion,
+      '@types/react-router-dom': reactRouterDomTypesVersion,
+    }
   );
 }

packages/ionic-react/src/utils/versions.ts

@@ -1,3 +1,11 @@
 export const ionicReactVersion = '^8.0.0';
 export const ionicReactRouterVersion = '^8.0.0';
 export const ionIconsVersion = '^7.0.0';
+export const capacitorPluginsVersion = '^6.0.0';
+/**
+ * React Router v6 is not compatible with Ionic React Router, so we force using the v5
+ * See: https://github.com/ionic-team/ionic-framework/issues/24177, https://github.com/ionic-team/ionic-framework/blob/main/packages/react-router/package.json#L46
+ */
+export const reactRouterVersion = '^5.3.4';
+export const reactRouterTypesVersion = '^5.1.20';
+export const reactRouterDomTypesVersion = '^5.3.3';

packages/preact/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nxext/preact",
-  "version": "19.0.1",
+  "version": "0.0.0-e2e",
   "license": "MIT",
   "author": "Jordan Hall",
   "description": "Nx plugin for preact",

packages/solid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nxext/solid",
-  "version": "19.0.1",
+  "version": "0.0.0-e2e",
   "license": "MIT",
   "author": "Dominik Pieper",
   "description": "Nx plugin for solid",

packages/stencil/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 19.0.2 (2024-10-08)
+
+
+### 🩹 Fixes
+
+- **stencil:** support Nx `context.projectsConfigurations` ([#1120](https://github.com/nxext/nx-extensions/pull/1120))
+
+
+### ❤️  Thank You
+
+- francescocaveglia @francescocaveglia
+
 ## 19.0.1 (2024-10-07)
 
 

packages/stencil/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nxext/stencil",
-  "version": "19.0.1",
+  "version": "19.0.2",
   "license": "MIT",
   "author": "Dominik Pieper",
   "description": "Nx plugin for stenciljs",

packages/stencil/src/executors/stencil-runtime/stencil-config.ts

@@ -44,7 +44,8 @@ export async function initializeStencilConfig<
     logger.enableColors(false);
   }
 
-  const projectDir = context.workspace.projects[context.projectName].root;
+  const projectDir =
+    context.projectsConfigurations.projects[context.projectName].root;
   const projectRoot = normalizePath(join(context.root, projectDir));
   const distDir = normalizePath(join(context.root, options.outputPath));
   const configPath = normalizePath(join(context.root, options.configPath));