feat(cordova) debug and bulletproofing

README.md

@@ -61,14 +61,16 @@ The first time you start Quasar, icon-factory will create the images needed for
 $ quasar dev --mode electron 
 ```
 
-If you change the image, the settings in `quasar.icon-factory.json` or the dev/build mode, this extension will be triggered and build your assets in the appropriate place. Don't forget to check the results and commit them.
+There is an option during the install phase to "always rebuild", which is useful for fine-tuning e.g. background colors, but if you don't remove this flag in quasar.extensions.json, the icon-factory will always run and slow down the dev buildtime.
+
+If you change the image, the settings in `quasar.extensions.json` (like e.g. the background color) or the dev/build mode, this extension will be triggered and rebuild your assets in the appropriate place. Don't forget to check the results and commit them.
 
 
 ### Special notes about Cordova (iOS and Android only)
 
 If you choose to build icons for Cordova, on iOS they WILL have a colored background (because transparency is not allowed), and this is why you are asked for an RGB value during the install phase. (Android allows transparency, btw.) You can change this in the quasar.icon-factory.json, but be sure to use a valid hex code like: `#c0ff33`.
 
-This colored background color will also be used for the splashscreen. If you don't provide one, black will be used. If you haven't already installed the [cordova-plugin-splashscreen](https://github.com/apache/cordova-plugin-splashscreen#readme), the process will exit and remind you to install the plugin first.
+This colored background color will also be used for the splashscreen. If you don't provide one, black will be used. If you haven't already installed the [cordova-plugin-splashscreen](https://github.com/apache/cordova-plugin-splashscreen#readme), the process will remind you to install the plugin first and then continue to build the icons before proceeding to the actual cordova dev or build pipeline.
 
 Splashscreens are obviously a little different depending on whether you are targetting iOS or Android. Please read this document to find out more:
 

src/index.js

@@ -39,15 +39,22 @@ const renderCordovaConfig = async function (api) {
   const android = root.find('platform[@name="android"]')
   const ios = root.find('platform[@name="ios"]')
 
+  const cordovaJson = JSON.parse(readFileSync(api.resolve.cordova('package.json'), 'utf-8'))
+
   // detect if plugin exists / if not exit
   // cordova plugin add cordova-plugin-splashscreen
   const plugins = root.findall('plugin')
 
   if (plugins.find(node => node.attrib.name ===
-    'cordova-plugin-splashscreen')) {
+     'cordova-plugin-splashscreen') ||
+     cordovaJson.cordova.plugins.hasOwnProperty(
+     'cordova-plugin-splashscreen')
+  ) {
 
     // it's there, so wire up for icons and splashes
-    const jobs = settings.options.cordova
+    // fallback to hardwired cordova options in case iconconfig is borked
+    // or doesn't exist yet
+    const jobs = iconConfig.options.cordova || settings.options.cordova
     for (let job in jobs) {
       if (jobs[job].platform === 'android') {
         if (jobs[job].splash === true) {
@@ -98,11 +105,15 @@ const renderCordovaConfig = async function (api) {
     console.log(`
 
 Splashscreens for Cordova require a Cordova plugin. 
+It can't be found in your config.xml
 Please go to the src-cordova folder and run:
 
   $ cordova plugin add cordova-plugin-splashscreen
+  
+Continuing to build your icons.  
 `)
-    process.exit(0)
+    // temporarily turned off
+    // process.exit(0)
   }
 }
 
@@ -130,9 +141,6 @@ const initialize = async function (api, config) {
   if (modeName === 'ssr') {
     modeName = config.ssr.pwa ? 'pwa' : 'spa'
   }
-  if (modeName === 'cordova') {
-    renderCordovaConfig(api)
-  }
 
   let target = ''
   if (useIntermediateFolders) {
@@ -157,12 +165,13 @@ const initialize = async function (api, config) {
    * @returns {undefined}s
    */
   let processImages = async function() {
+
     const options = {
       ...iconConfig.options[modeName],
-      background_color: validateHexRGB(iconConfig.options.background_color) ?
-        iconConfig.options.background_color : '#000000',
-      theme_color: validateHexRGB(iconConfig.options.theme_color) ?
-        iconConfig.options.theme_color : '#ffffff'
+      background_color: validateHexRGB(api.prompts.background_color) ?
+        api.prompts.background_color : '#000000',
+      theme_color: validateHexRGB(api.prompts.theme_color) ?
+        api.prompts.theme_color : '#ffffff'
     }
     await iconfactory[modeName](source, target, minify, options)
     iconConfig.modes[mode].source = hash
@@ -171,6 +180,9 @@ const initialize = async function (api, config) {
     } else {
       iconConfig.targets[modeName] = hash
     }
+    // in case there's been a change
+    iconConfig.options.background_color = api.prompts.background_color
+    iconConfig.options.theme_color = api.prompts.theme_color
     saveConfig(iconConfig)
   }
 
@@ -184,8 +196,16 @@ const initialize = async function (api, config) {
   // that will throw a exception if the file didn't exists,
   // use a try-catch just to check if a file exists
 
-  if (!existsSync(target) || (iconConfig.modes[mode].source !== hash) || (targetHash !== hash)) {
+  if (!existsSync(target) ||
+      (iconConfig.modes[mode].source !== hash) ||
+      (targetHash !== hash) ||
+      (iconConfig.options.background_color !== api.prompts.background_color) ||
+      (iconConfig.options.theme_color !== api.prompts.theme_color) ||
+      (api.prompts.build.find(prompt => prompt === 'rebuild_always'))) {
     await ensureDir(target)
+    if (modeName === 'cordova') {
+      await renderCordovaConfig(api)
+    }
     await processImages()
   }
   // should use this for build and dev actually

src/prompts.js

@@ -97,6 +97,18 @@ Best results with a 1240x1240 png (using transparency): `,
       message: `Please enter a highlight color to use for Duochrome SVGs (no transparency): `,
       default: '#02aa9b',
       validate: validateHexRGB
+    },
+    {
+      name: 'build',
+      type: 'checkbox',
+      required: true,
+      message: 'Construction method:',
+      choices: [
+        {
+          name: 'Always rebuild (useful for fine-tuning)',
+          value: 'rebuild_always',
+        }
+      ]
     }
   ]
 }

src/utils/index.js

@@ -39,7 +39,7 @@ const validatePng = async function (fileName) {
 }
 
 /**
- * make sure the prompted RGB HEX really is correct
+ * make sure the prompted RGB HEX really is valid
  *
  * @param  {String} hex - the answer given by the user while installing the extension
  * @returns {Boolean} true if it is a valid 3 or 6 letter RGB HEX