Chore: Migrating from using the cordova-res package to using the capacitor-assets package for asset generation

.husky/pre-push

@@ -1,3 +1,3 @@
 #!/bin/sh
-command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting .git/hooks/pre-push.\n"; exit 2; }
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'pre-push' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks').\n"; exit 2; }
 git lfs pre-push "$@"

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.22.js"

.yarnrc.yml

@@ -1,20 +1,5 @@
-# Ignore some common warnings https://yarnpkg.com/advanced/error-codes
-logFilters:
-  - code: YN0076
-    level: discard
-  - code: YN0060
-    level: discard
-  - code: YN0002
-    level: discard
+compressionLevel: mixed
 
-nmHoistingLimits: workspaces
-
-nodeLinker: node-modules
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-  - path: .yarn/plugins/@yarnpkg/plugin-postinstall.cjs
-    spec: "https://raw.githubusercontent.com/gravitywelluk/yarn-plugin-postinstall/master/bundles/%40yarnpkg/plugin-postinstall.js"
+enableGlobalCache: false
 
 yarnPath: .yarn/releases/yarn-3.3.1.cjs

android/.project

@@ -16,12 +16,12 @@
 	</natures>
 	<filteredResources>
 		<filter>
-			<id>1622682975140</id>
+			<id>1721320282036</id>
 			<name></name>
 			<type>30</type>
 			<matcher>
 				<id>org.eclipse.core.resources.regexFilterMatcher</id>
-				<arguments>node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+				<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
 			</matcher>
 		</filter>
 	</filteredResources>

android/app/.project

@@ -6,12 +6,12 @@
 	</projects>
 	<buildSpec>
 		<buildCommand>
-			<name>org.eclipse.jdt.core.javabuilder</name>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
 			<arguments>
 			</arguments>
 		</buildCommand>
 		<buildCommand>
-			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<name>org.eclipse.jdt.core.javabuilder</name>
 			<arguments>
 			</arguments>
 		</buildCommand>
@@ -22,12 +22,12 @@
 	</natures>
 	<filteredResources>
 		<filter>
-			<id>1622682975149</id>
+			<id>1721403019000</id>
 			<name></name>
 			<type>30</type>
 			<matcher>
 				<id>org.eclipse.core.resources.regexFilterMatcher</id>
-				<arguments>node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+				<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
 			</matcher>
 		</filter>
 	</filteredResources>

package.json

@@ -91,6 +91,7 @@
     "katex": "^0.16.10",
     "lottie-web": "^5.12.2",
     "marked": "^2.1.3",
+    "marked-smartypants-lite": "^1.0.2",
     "mergexml": "^1.2.3",
     "ng2-nouislider": "^2.0.0",
     "ngx-extended-pdf-viewer": "18.1.9",
@@ -122,6 +123,7 @@
     "@angular/compiler": "~17.2.2",
     "@angular/compiler-cli": "~17.2.2",
     "@angular/language-service": "~17.2.2",
+    "@capacitor/assets": "^3.0.5",
     "@capacitor/cli": "^5.5.1",
     "@compodoc/compodoc": "^1.1.23",
     "@ionic/angular-toolkit": "^10.0.0",

packages/scripts/src/tasks/providers/android.ts

@@ -5,6 +5,8 @@ import { envReplace } from "@idemsInternational/env-replace";
 import { ROOT_DIR } from "../../paths";
 import { Logger, generateVersionCode } from "../../utils";
 import { PATHS } from "shared";
+import { execSync, spawnSync } from "child_process";
+import * as path from "path";
 
 interface IAndroidBuildOptions {
   appId: string;
@@ -78,27 +80,13 @@ const set_splash_image = async (splashAssetPath: string) => {
     });
   }
 
-  const cordovaOptions: Options = {
-    directory: ROOT_DIR,
-    resourcesDirectory: join(ROOT_DIR, "resources"),
-    logstream: process.stdout,
-    platforms: {
-      android: {
-        splash: {
-          sources: [splashAssetPath],
-        },
-      },
-    },
-    skipConfig: true,
-    copy: true,
-    projectConfig: {
-      android: {
-        directory: join(ROOT_DIR, "android"),
-      },
-    },
-  };
+  // we do want it to strip the file name and use the directory
+  // so we can check if the directory exists
+  const splashAssetDirPath = path.dirname(splashAssetPath);
 
-  return await run(cordovaOptions);
+  // if it does not, then otherwise, run the following command
+  const cmd = `npx @capacitor/assets generate --assetPath ${splashAssetDirPath} --android`;
+  execSync(cmd); // command should work, mine (Jody) is not working for some reason
 };
 
 const set_launcher_icon = async (options: {
@@ -118,38 +106,36 @@ const set_launcher_icon = async (options: {
     });
   }
 
-  const includeAdaptiveIcons =
-    fs.existsSync(iconAssetForegroundPath) && fs.existsSync(iconAssetBackgroundPath);
-
-  const cordovaOptions: Options = {
-    directory: ROOT_DIR,
-    resourcesDirectory: join(ROOT_DIR, "resources"),
-    logstream: process.stdout,
-    platforms: {
-      android: includeAdaptiveIcons
-        ? {
-            "adaptive-icon": {
-              icon: { sources: iconSources },
-              foreground: { sources: [iconAssetForegroundPath] },
-              background: { sources: [iconAssetBackgroundPath] },
-            },
-          }
-        : { icon: { sources: iconSources } },
-    },
-    skipConfig: true,
-    copy: true,
-    projectConfig: {
-      android: {
-        directory: join(ROOT_DIR, "android"),
-      },
-    },
-  };
+  // all paths for the icons have the same diretory
+  const iconAssetDirPath = path.dirname(iconAssetPath);
+  const cmd = `npx @capacitor/assets generate --assetPath ${iconAssetDirPath} --android`;
+  execSync(cmd);
+
+  console.log(cmd);
+};
+
+const set_icons_and_splash_images = async (options: { assetPath: string }) => {
+  const { assetPath } = options;
+
+  const iconAndSplashSources = [];
+  if (fs.existsSync(assetPath)) {
+    iconAndSplashSources.push(assetPath);
+  } else {
+    return Logger.error({
+      msg1: "Icon and splash source assets not found",
+      msg2: `A source .png file is required to be used as a fall back for when the device's android version does not support adaptive icons. No asset was found at the path supplied in the deployment config: ${assetPath}.`,
+    });
+  }
 
-  return await run(cordovaOptions);
+  // all paths for the icons have the same diretory
+  const assetDirPath = path.dirname(assetPath);
+  const cmd = `npx @capacitor/assets generate --assetPath ${assetDirPath} --android`;
+  execSync(cmd);
 };
 
 export default {
   configure,
   set_launcher_icon,
   set_splash_image,
+  set_icons_and_splash_images,
 };

packages/scripts/src/tasks/providers/ios.ts

@@ -45,6 +45,25 @@ const configure = async ({ appId, appName, versionName }: IiOSBuildOptions) => {
   });
 };
 
+const set_icons_and_splash_images = async (options: { assetPath: string }) => {
+  const { assetPath } = options;
+
+  const iconAndSplashSources = [];
+  if (fs.existsSync(assetPath)) {
+    iconAndSplashSources.push(assetPath);
+  } else {
+    return Logger.error({
+      msg1: "Icon and splash source assets not found",
+      msg2: `A source .png file is required to be used as a fall back for when the device's android version does not support adaptive icons. No asset was found at the path supplied in the deployment config: ${assetPath}.`,
+    });
+  }
+
+  // all paths for the icons have the same diretory
+  const assetDirPath = path.dirname(assetPath);
+  const cmd = `npx @capacitor/assets generate --assetPath ${assetDirPath} --ios`;
+  execSync(cmd);
+};
+
 /**
  * iOS app ID (aka "bundle ID") only supports alphanumeric characters (A–Z, a–z, and 0–9), hyphens (-), and periods (.),
  * see https://developer.apple.com/documentation/bundleresources/information_property_list/cfbundleidentifier#discussion

packages/workflows/src/android.workflows.ts

@@ -22,6 +22,8 @@ const childWorkflows: IDeploymentWorkflows = {
   // Generate Android assets from source images (splash.png, icon.png and, optionally, icon-foreground.png and icon-background.png)
   // Icon images must be at least 1024×1024px, splash image must be at least 2732×2732px
   // Further specifications provided here: https://www.npmjs.com/package/cordova-res
+  // Cordova-res is considered legacy, so we now are migrating to using capacitor-assets instead
+  // Further specification here: https://capacitorjs.com/docs/guides/splash-screens-and-icons
   set_splash_image: {
     label: "Generate splash screen image from splash.png asset and copy to relevant folders",
     steps: [
@@ -47,6 +49,17 @@ const childWorkflows: IDeploymentWorkflows = {
       },
     ],
   },
+  set_icons_and_splash_images: {
+    label:
+      "Generate app launcher icon and splash screen image from icon.png and splash.png assets respectively. Copy generated files to relevant folders",
+    steps: [
+      {
+        name: "set_icons_and_splash_images",
+        function: async ({ tasks, config }) =>
+          tasks.android.set_icons_and_splash_images({ assetPath: config.android.icon_asset_path }),
+      },
+    ],
+  },
 };
 
 /** Default workflows made available to all deployments */
@@ -71,6 +84,14 @@ const defaultWorkflows: IDeploymentWorkflows = {
         function: async ({ tasks, workflow }) =>
           await tasks.workflow.runWorkflow({ name: "android set_launcher_icon", parent: workflow }),
       },
+      {
+        name: "Set Icons and Splash Images",
+        function: async ({ tasks, workflow }) =>
+          await tasks.workflow.runWorkflow({
+            name: "android set_icons_and_splash_images",
+            parent: workflow,
+          }),
+      },
     ],
     children: childWorkflows,
   },

packages/workflows/src/ios.workflows.ts

@@ -19,6 +19,20 @@ const childWorkflows: IDeploymentWorkflows = {
       },
     ],
   },
+  // Generate iOS assets from source images (splash.png, icon.png and, optionally, icon-foreground.png and icon-background.png)
+  // Icon images must be at least 1024×1024px, splash image must be at least 2732×2732px
+  // Further specification here: https://capacitorjs.com/docs/guides/splash-screens-and-icons
+  set_icons_and_splash_images: {
+    label:
+      "Generate app launcher icon and splash screen image from icon.png and splash.png assets respectively. Copy generated files to relevant folders",
+    steps: [
+      {
+        name: "set_icons_and_splash_images",
+        function: async ({ tasks, config }) =>
+          tasks.ios.set_icons_and_splash_images({ assetPath: config.android.icon_asset_path }),
+      },
+    ],
+  },
 };
 
 /** Default workflows made available to all deployments */
@@ -32,6 +46,14 @@ const defaultWorkflows: IDeploymentWorkflows = {
         function: async ({ tasks, workflow }) =>
           await tasks.workflow.runWorkflow({ name: "ios configure", parent: workflow }),
       },
+      {
+        name: "Set Icons and Splash Images",
+        function: async ({ tasks, workflow }) =>
+          await tasks.workflow.runWorkflow({
+            name: "ios set_icons_and_splash_images",
+            parent: workflow,
+          }),
+      },
     ],
     children: childWorkflows,
   },