From 33256a51ab6bb0fb2e3d29ad98f76cb5a7d448b4 Mon Sep 17 00:00:00 2001 From: Daniel Thompson-Yvetot <35242872+nothingismagick@users.noreply.github.com> Date: Wed, 8 May 2019 10:51:53 +0200 Subject: [PATCH] feat(cordova) debug and bulletproofing --- README.md | 6 ++++-- src/index.js | 42 +++++++++++++++++++++++++++++++----------- src/prompts.js | 12 ++++++++++++ src/utils/index.js | 2 +- 4 files changed, 48 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 7f98bb4..910f401 100644 --- a/README.md +++ b/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: diff --git a/src/index.js b/src/index.js index d168a40..3c0912a 100644 --- a/src/index.js +++ b/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 diff --git a/src/prompts.js b/src/prompts.js index 6b353ce..3bf795f 100644 --- a/src/prompts.js +++ b/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', + } + ] } ] } diff --git a/src/utils/index.js b/src/utils/index.js index 9b0c6d7..b10bf9a 100644 --- a/src/utils/index.js +++ b/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