1.64 (#100)

* fix: missing await on calls

* chore: bump version

* feat: pwa support

* chore: cleanup roadmap

* chore: update roadmap

* chore: pwa roadmap

* chore: roadmap

* fix: Peer dependency checks when the dependency uses `&&` in its version range

* chore: update roadmap

* feat: option to migrate to Capacitor 6 beta 2

* chore: bump version

CHANGELOG.md

@@ -1,5 +1,11 @@
 ## Changelog
 
+### Version 1.64
+
+- Add support for PWA target for Angular Applications
+- Fix peer dependency checks when the dependency uses `&&` in its version range
+- Option to migrate to the Capacitor 6 beta (2)
+
 ### Version 1.63
 
 - Fix peer dependencies when migrating Angular or Capacitor

package.json

@@ -2,7 +2,7 @@
   "name": "ionic",
   "displayName": "Ionic",
   "description": "Official extension for Ionic and Capacitor development",
-  "version": "1.63.0",
+  "version": "1.64.0",
   "icon": "media/ionic.png",
   "publisher": "Ionic",
   "keywords": [

roadmap.md

@@ -1,11 +1,24 @@
 # Roadmap
 
-- TODO: add pwa integration
+## PWA
+
+- PWA support for React/Vue
+- When display name is changed look for `manifest.webmanifest` and change name/shortname
+- When PWA support is added set the `name`/`shortname`
+- PWA settings page needs `theme_color` and `background_color`
+- When setting `theme_color` set in index.html `<meta name="theme-color" content="#F61067">`
+- Favicon generator - check `@capacitor/assets` will generate it
+- PWA splash screens?
+
+## Capacitor 6
+
+- Detect and migrate
 - Fix: The bundledWebRuntime configuration option has been deprecated. Can be safely deleted.
+- Enable beta with "Experimental Features" option
+
 - Generate twitter and og metatags
 - Generate social and favicon
 - Avoid sharp and @capacitor/assets
-- Show the root package for projects - ie scripts etc
 - Angular projects that use IonicModule (eg `import { IonicModule } from '@ionic/angular';`) and `@ionic/angular/standalone` or `import { send } from 'ionicons/icons';` will break. Check code for it?
 - Customers dont really understand the upgrade process in packages/plugins - looking in the "plugins" windows:
 - Need to recommend upgrading minor versions of Capacitor on a regular basis (eg monthly)
@@ -27,9 +40,6 @@
 }
 Check `main.ts` for `provideIonicAngular` and apply this if missing
 
-## 1.60
-
-- As --force is used with Angular migrations there may be peer dependency errors that need resolution afterwards. Need a peer dep resolver.
 - Update docs on capacitorjs.com
 - Recommendation for experimental migration to Angular standalone components
 - Recommendation for experimental migration to Angular built-in control flow syntax
@@ -43,15 +53,12 @@ Check `main.ts` for `provideIonicAngular` and apply this if missing
 
 ## Plugin Explorer
 
-- (feat) Add Capacitor plugin to the starters
-
-* (feat) Add PWA to targets
-* (feat) Add Electron to targets
-* (feat) Add "Enterprise Ready" and "Capacitor Core" to filters of plugin explorer (per Max)
-* On hover over rating show: star count, forks, watchers, issues and link to explanation of rating.
-* When searching for a package show spinner
-* Dynamically rate packages based on npm/github when searched for
-* 3 dots for packages should plugin explorer info for the package
+- (feat) Add Electron to targets ??
+- (feat) Add "Enterprise Ready" and "Capacitor Core" to filters of plugin explorer (per Max)
+- On hover over rating show: star count, forks, watchers, issues and link to explanation of rating.
+- When searching for a package show spinner
+- Dynamically rate packages based on npm/github when searched for
+- 3 dots for packages should plugin explorer info for the package
 
 ## Rules
 
@@ -216,3 +223,16 @@ Alterantive visual web views:
 - Export
 
 - Remove "check for minor updates"
+
+## PWA Helper
+
+Help user to install a PWA using a tooltip
+
+- Chrome browser: show link to install app icon and instructions
+- Safari: show share button and "Add to dock"
+- Windows, iOS, Android
+
+- Parameters:
+  - Time used: (seconds). How long does the user need to use the app before the install option appears. Default 5 mins
+  - Messaging: allow message displayed to be customized (eg language)
+- Script tag to include in index.html or npm package

src/analyze-size.ts

@@ -26,7 +26,7 @@ export async function analyzeSize(queueFunction: QueueFunction, project: Project
       if (project.repoType == MonoRepoType.nx) {
         args = '--configuration=production';
       }
-      const cmd = ionicBuild(project, args);
+      const cmd = await ionicBuild(project, args);
       const bumpSize = !isWindows() ? 'export NODE_OPTIONS="--max-old-space-size=8192" && ' : '';
       try {
         await run2(project, `${bumpSize}${cmd}`, undefined);

src/capacitor-migrate.ts

@@ -5,7 +5,7 @@ import { exists, isLess, isVersionGreaterOrEqual } from './analyzer';
 import { clearOutput, showOutput, write, writeError, writeIonic, writeWarning } from './logging';
 import { npmInstall, npmUninstall, npmUpdate } from './node-commands';
 import { inspectProject, Project } from './project';
-import { getRunOutput, getStringFrom, plural, pluralize, run, setAllStringIn, showProgress } from './utilities';
+import { doDoes, getRunOutput, getStringFrom, plural, pluralize, run, setAllStringIn, showProgress } from './utilities';
 import { capacitorSync } from './capacitor-sync';
 import { ActionResult } from './command-name';
 import { ionicState } from './ionic-tree-provider';
@@ -18,21 +18,41 @@ import { removeNodeModules } from './advanced-actions';
 import { window } from 'vscode';
 import { QueueFunction } from './tip';
 
-export async function migrateCapacitor5(
+export interface CapacitorMigrationOptions {
+  coreVersion: string;
+  versionTitle: string;
+  versionFull: string;
+  changesLink: string;
+  migrateInfo: string;
+  androidStudioMin: string;
+  androidStudioName: string;
+  androidStudioReason: string;
+  minJavaVersion: number;
+  minPlugins: MinPlugin[];
+}
+
+export interface MinPlugin {
+  dep: string;
+  version: string;
+}
+
+export async function migrateCapacitor(
   queueFunction: QueueFunction,
   project: Project,
   currentVersion: string,
+  options: CapacitorMigrationOptions,
 ): Promise<ActionResult> {
-  const coreVersion = '5';
-  const versionTitle = '5';
-  const versionFull = '5.0.0';
-  const changesLink = 'https://capacitorjs.com/docs/updating/5-0';
+  const coreVersion = options.coreVersion;
+  const versionTitle = options.versionTitle;
+  const versionFull = options.versionFull;
+  const changesLink = options.changesLink;
+
   // Android Studio Flamingo is Build #AI-222.4459.24.2221.9862592, built on March 31, 2023
   const openStudio = 'Open Android Studio';
   if (exists('@capacitor/android')) {
-    if (!checkAndroidStudio('222.4459.24')) {
+    if (!checkAndroidStudio(options.androidStudioMin)) {
       const res = await window.showInformationMessage(
-        `Android Studio Flamingo (2022.2.1) is the minimum version needed for Capacitor ${versionTitle} (It comes with Java 17 and Gradle 8). Choose Android Studio > Check for Updates.`,
+        `${options.androidStudioName} is the minimum version needed for Capacitor ${versionTitle} ${options.androidStudioReason}. Choose Android Studio > Check for Updates.`,
         openStudio,
         'Continue...',
       );
@@ -53,7 +73,7 @@ export async function migrateCapacitor5(
     const version = await checkJDK(project);
     if (version < 17) {
       const result = await window.showInformationMessage(
-        `Your version of Java is ${version} but version 17 is the minimum required. Please check your JAVA_HOME path and ensure it is using JDK Version 17. You may need to restart VS Code after making this change.`,
+        `Your version of Java is ${version} but version ${options.minJavaVersion} is the minimum required. Please check your JAVA_HOME path and ensure it is using JDK Version ${options.minJavaVersion}. You may need to restart VS Code after making this change.`,
         'OK',
         'Continue',
       );
@@ -69,16 +89,15 @@ export async function migrateCapacitor5(
   let report: PeerReport;
   await showProgress(`Checking plugins in your project...`, async () => {
     await inspectProject(ionicState.rootFolder, ionicState.context, undefined);
-    report = await checkPeerDependencies(project.folder, [{ name: '@capacitor/core', version: versionFull }], []);
+    report = await checkPeerDependencies(
+      project.folder,
+      [{ name: '@capacitor/core', version: versionFull }],
+      ['@capacitor/'],
+    );
   });
 
   // Set of minimum versions for dependencies
-  const minVersions = [
-    { dep: '@ionic-enterprise/identity-vault', version: '5.10.1' },
-    { dep: '@ionic-enterprise/google-pay', version: '2.0.0' },
-    { dep: '@ionic-enterprise/apple-pay', version: '2.0.0' },
-    { dep: '@ionic-enterprise/zebra-scanner', version: '2.0.0' },
-  ];
+  const minVersions = options.minPlugins;
 
   for (const minVersion of minVersions) {
     if (exists(minVersion.dep) && isLess(minVersion.dep, minVersion.version)) {
@@ -102,7 +121,9 @@ export async function migrateCapacitor5(
       `There ${plural('are', report.incompatible.length)} ${pluralize(
         'plugin',
         report.incompatible.length,
-      )} in your project that does not work with Capacitor ${versionTitle}. Filing an issue with the author is recommended.`,
+      )} in your project that ${doDoes(
+        report.incompatible.length,
+      )} not work with Capacitor ${versionTitle}. Filing an issue with the author is recommended.`,
       `Continue`,
       'Exit',
     );
@@ -111,11 +132,7 @@ export async function migrateCapacitor5(
     }
   }
 
-  const result = await window.showInformationMessage(
-    `Capacitor ${versionTitle} sets a deployment target of iOS 13 and Android 13 (SDK 33).`,
-    `Migrate to v${versionTitle}`,
-    'Ignore',
-  );
+  const result = await window.showInformationMessage(options.migrateInfo, `Migrate to v${versionTitle}`, 'Ignore');
   if (result == 'Ignore') {
     return ActionResult.Ignore;
   }
@@ -219,7 +236,7 @@ export interface AndroidStudioInfo {
   version: string;
 }
 
-export async function migrateCapacitor(
+export async function migrateCapacitor4(
   queueFunction: QueueFunction,
   project: Project,
   currentVersion: string,

src/capacitor-run.ts

@@ -29,7 +29,7 @@ export async function capacitorRun(project: Project, platform: CapacitorPlatform
   // If the user modified something in the editor then its likely they need to rebuild the app before running
   if (ionicState.projectDirty) {
     writeIonic('Rebuilding as you changed your project...');
-    preop = ionicBuild(project, undefined, platform) + ' && ';
+    preop = (await ionicBuild(project, undefined, platform)) + ' && ';
     rebuilt = true;
   } else {
     preop = preflightNPMCheck(project);

src/peer-dependencies.ts

@@ -2,7 +2,7 @@ import { ionicState } from './ionic-tree-provider';
 import { satisfies, gt } from 'semver';
 import { write, writeError, writeWarning } from './logging';
 import { PackageManager, npmInstall } from './node-commands';
-import { getRunOutput, httpRequest } from './utilities';
+import { getRunOutput, httpRequest, replaceAll } from './utilities';
 import { getPackageVersion } from './analyzer';
 
 export interface PeerReport {
@@ -72,7 +72,7 @@ async function getDependencyConflicts(
         for (const peer of Object.keys(deps.dependencies[key].peerDependencies)) {
           const versionRange = deps.dependencies[key].peerDependencies[peer];
           if (peer == peerDependency.name) {
-            if (!satisfies(peerDependency.version, versionRange)) {
+            if (!satisfies(peerDependency.version, cleanRange(versionRange))) {
               // Migration will update capacitor plugins so leave them out
               let ignore = false;
               for (const ignoreDep of ignoreDeps) {
@@ -112,6 +112,15 @@ async function getNPMInfoFor(dependency: string): Promise<any> {
     return pck;
   }
 }
+
+// The semver satisfies function chokes on "> 1.0.0 && < 2.0.0" and this will return "> 1.0.0 < 2.0.0"
+function cleanRange(range: string): string {
+  if (range.includes('&&')) {
+    return replaceAll(range, '&&', '');
+  }
+  return range;
+}
+
 /**
  * Finds the latest release version of the plugin that is compatible with peer dependencies.
  * If hasPeer is supplied then it will look for a version that passes with that peer and version
@@ -128,11 +137,11 @@ export async function findCompatibleVersion2(dependency: DependencyConflict): Pr
         for (const peerDependency of Object.keys(pck.versions[version].peerDependencies)) {
           const peerVersion = pck.versions[version].peerDependencies[peerDependency];
           const current = getPackageVersion(peerDependency);
-          let meetsNeeds = satisfies(current, peerVersion);
+          let meetsNeeds = satisfies(current.version, cleanRange(peerVersion));
 
           if (dependency.conflict) {
             if (dependency.conflict.name == peerDependency) {
-              meetsNeeds = satisfies(dependency.conflict.version, peerVersion);
+              meetsNeeds = satisfies(dependency.conflict.version, cleanRange(peerVersion));
             } else {
               meetsNeeds = false;
             }
@@ -158,7 +167,7 @@ export async function findCompatibleVersion2(dependency: DependencyConflict): Pr
               }
             } else {
               if (version == latestVersion && !best && current) {
-                writeWarning(`${dependency} requires ${peerDependency} ${peerVersion} but you have ${current}`);
+                writeWarning(`${dependency.name} requires ${peerDependency} ${peerVersion} but you have ${current}`);
                 incompatible = true;
               }
             }

src/plugin-explorer.ts

@@ -178,6 +178,9 @@ export class PluginExplorerPanel {
       title: 'Ionic Enterprise Product Key',
       placeHolder: 'Enter product key',
     });
+    if (productKey == '') {
+      return true;
+    }
     if (!productKey) return false;
     const cmd = `npx ionic enterprise register --key=${productKey}`;
     return await run(this.path, cmd, undefined, [], [], undefined, undefined, undefined, false);

src/project.ts

@@ -207,6 +207,9 @@ export class Project {
       case TipType.Cordova:
         r.setIcon('cordova');
         break;
+      case TipType.Experiment:
+        r.setIcon('beaker');
+        break;
       case TipType.Capacitor:
         r.setIcon('capacitor');
         break;