updated packages

.update_backup/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "enrecipes",
+  "version": "1.0.0",
+  "description": "A native application built with NativeScript-Vue",
+  "author": "Vishnu Raghav <apps@vishnuraghav.com>",
+  "license": "GPL",
+  "dependencies": {
+    "@nativescript-community/gesturehandler": "^0.1.39",
+    "@nativescript-community/perms": "^2.1.5",
+    "@nativescript-community/ui-collectionview": "^4.0.29",
+    "@nativescript-community/ui-drawer": "^0.0.24",
+    "@nativescript-community/ui-material-activityindicator": "^5.2.10",
+    "@nativescript-community/ui-material-button": "^5.2.10",
+    "@nativescript-community/ui-material-floatingactionbutton": "^5.2.10",
+    "@nativescript-community/ui-material-progress": "^5.2.10",
+    "@nativescript-community/ui-material-snackbar": "^5.2.10",
+    "@nativescript/core": "7.3.0",
+    "@nativescript/localize": "^5.0.4",
+    "@nativescript/social-share": "^2.0.4",
+    "@nativescript/theme": "^3.0.1",
+    "@nativescript/zip": "^5.0.0",
+    "@nstudio/nativescript-checkbox": "^2.0.4",
+    "@triniwiz/nativescript-accelerometer": "^4.0.3",
+    "@triniwiz/nativescript-couchbase": "^1.2.2",
+    "nativescript-feedback": "^2.0.0",
+    "nativescript-imagecropper": "^4.0.1",
+    "nativescript-intl": "^4.0.2",
+    "nativescript-plugin-filepicker": "^1.0.0",
+    "nativescript-toast": "^2.0.0",
+    "nativescript-vibrate": "^4.0.1",
+    "nativescript-vue": "^2.8.4",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@nativescript/android": "7.0.1",
+    "@nativescript/webpack": "^3.0.8",
+    "@types/node": "^14.14.20",
+    "babel-loader": "^8.2.2",
+    "nativescript-vue-template-compiler": "^2.8.3",
+    "node-sass": "^4.14.1",
+    "vue-loader": "^15.9.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vishnuraghavb/EnRecipes.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vishnuraghavb/EnRecipes/issues"
+  },
+  "homepage": "https://enrecipes.vercel.app/",
+  "main": "main"
+}

.update_backup/webpack.config.js

@@ -0,0 +1,357 @@
+const { join, relative, resolve, sep } = require('path');
+
+const webpack = require('webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const NsVueTemplateCompiler = require('nativescript-vue-template-compiler');
+
+const nsWebpack = require('@nativescript/webpack');
+const nativescriptTarget = require('@nativescript/webpack/nativescript-target');
+const { NativeScriptWorkerPlugin } = require('nativescript-worker-loader/NativeScriptWorkerPlugin');
+const hashSalt = Date.now().toString();
+
+module.exports = (env) => {
+	const platform = env && ((env.android && 'android') || (env.ios && 'ios') || env.platform);
+	if (!platform) {
+		throw new Error('You need to provide a target platform!');
+	}
+
+	const platforms = ['ios', 'android'];
+	const projectRoot = __dirname;
+
+	if (env.platform) {
+		platforms.push(env.platform);
+	}
+
+	// Default destination inside platforms/<platform>/...
+	const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
+
+	const {
+		// The 'appPath' and 'appResourcesPath' values are fetched from
+		// the nsconfig.json configuration file.
+		appPath = 'app',
+		appResourcesPath = 'app/App_Resources',
+
+		// You can provide the following flags when running 'tns run android|ios'
+		snapshot, // --env.snapshot
+		production, // --env.production
+		report, // --env.report
+		hmr, // --env.hmr
+		sourceMap, // --env.sourceMap
+		hiddenSourceMap, // --env.hiddenSourceMap
+		unitTesting, // --env.unitTesting
+		testing, // --env.testing
+		verbose, // --env.verbose
+		ci, // --env.ci
+		snapshotInDocker, // --env.snapshotInDocker
+		skipSnapshotTools, // --env.skipSnapshotTools
+		compileSnapshot, // --env.compileSnapshot
+		appComponents = [],
+		entries = {},
+	} = env;
+
+	const useLibs = compileSnapshot;
+	const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
+	const externals = nsWebpack.getConvertedExternals(env.externals);
+
+	const mode = production ? 'production' : 'development';
+
+	const appFullPath = resolve(projectRoot, appPath);
+	const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
+	let coreModulesPackageName = 'tns-core-modules';
+	const alias = env.alias || {};
+	alias['~/package.json'] = resolve(projectRoot, 'package.json');
+	alias['~'] = appFullPath;
+	alias['@'] = appFullPath;
+	alias['vue'] = 'nativescript-vue';
+
+	if (hasRootLevelScopedModules) {
+		coreModulesPackageName = '@nativescript/core';
+		alias['tns-core-modules'] = coreModulesPackageName;
+	}
+
+	const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
+
+	const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] };
+
+	const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
+	const entryPath = `.${sep}${entryModule}`;
+	Object.assign(entries, { bundle: entryPath }, entries);
+
+	const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some((e) => e.indexOf('@nativescript') > -1);
+	if (platform === 'ios' && !areCoreModulesExternal && !testing) {
+		entries['tns_modules/inspector_modules'] = '@nativescript/core/inspector_modules';
+	}
+	console.log(`Bundling application for entryPath ${entryPath}...`);
+
+	let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
+
+	const itemsToClean = [`${dist}/**/*`];
+	if (platform === 'android') {
+		itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'src', 'main', 'assets', 'snapshots')}`);
+		itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'build', 'configurations', 'nativescript-android-snapshot')}`);
+	}
+
+	// Add your custom Activities, Services and other android app components here.
+	appComponents.push('@nativescript/core/ui/frame', '@nativescript/core/ui/frame/activity');
+
+	nsWebpack.processAppComponents(appComponents, platform);
+	const config = {
+		mode: mode,
+		context: appFullPath,
+		externals,
+		watchOptions: {
+			ignored: [
+				appResourcesFullPath,
+				// Don't watch hidden files
+				'**/.*',
+			],
+		},
+		target: nativescriptTarget,
+		// target: nativeScriptVueTarget,
+		entry: entries,
+		output: {
+			pathinfo: false,
+			path: dist,
+			sourceMapFilename,
+			libraryTarget: 'commonjs2',
+			filename: '[name].js',
+			globalObject: 'global',
+			hashSalt,
+		},
+		resolve: {
+			extensions: ['.vue', '.ts', '.js', '.scss', '.css'],
+			// Resolve {N} system modules from @nativescript/core
+			modules: [resolve(__dirname, `node_modules/${coreModulesPackageName}`), resolve(__dirname, 'node_modules'), `node_modules/${coreModulesPackageName}`, 'node_modules'],
+			alias,
+			// resolve symlinks to symlinked modules
+			symlinks: true,
+		},
+		resolveLoader: {
+			// don't resolve symlinks to symlinked loaders
+			symlinks: false,
+		},
+		node: {
+			// Disable node shims that conflict with NativeScript
+			http: false,
+			timers: false,
+			setImmediate: false,
+			fs: 'empty',
+			__dirname: false,
+		},
+		devtool: hiddenSourceMap ? 'hidden-source-map' : sourceMap ? 'inline-source-map' : 'none',
+		optimization: {
+			runtimeChunk: 'single',
+			noEmitOnErrors: true,
+			splitChunks: {
+				cacheGroups: {
+					vendor: {
+						name: 'vendor',
+						chunks: 'all',
+						test: (module) => {
+							const moduleName = module.nameForCondition ? module.nameForCondition() : '';
+							return /[\\/]node_modules[\\/]/.test(moduleName) || appComponents.some((comp) => comp === moduleName);
+						},
+						enforce: true,
+					},
+				},
+			},
+			minimize: Boolean(production),
+			minimizer: [
+				new TerserPlugin({
+					parallel: true,
+					cache: !ci,
+					sourceMap: isAnySourceMapEnabled,
+					terserOptions: {
+						output: {
+							comments: false,
+							semicolons: !isAnySourceMapEnabled,
+						},
+						compress: {
+							// The Android SBG has problems parsing the output
+							// when these options are enabled
+							collapse_vars: platform !== 'android',
+							sequences: platform !== 'android',
+							// For v8 Compatibility
+							keep_infinity: true, // for V8
+							reduce_funcs: false, // for V8
+							// custom
+							drop_console: production,
+							drop_debugger: true,
+							global_defs: {
+								__UGLIFIED__: true,
+							},
+						},
+						keep_fnames: true,
+						// Required for Element Level CSS, Observable Events, & Android Frame
+						keep_classnames: true,
+					},
+				}),
+			],
+		},
+		module: {
+			rules: [
+				{
+					include: [join(appFullPath, entryPath + '.js'), join(appFullPath, entryPath + '.ts')],
+					use: [
+						// Require all Android app components
+						platform === 'android' && {
+							loader: '@nativescript/webpack/helpers/android-app-components-loader',
+							options: { modules: appComponents },
+						},
+
+						{
+							loader: '@nativescript/webpack/bundle-config-loader',
+							options: {
+								registerPages: true, // applicable only for non-angular apps
+								loadCss: !snapshot, // load the application css if in debug mode
+								unitTesting,
+								appFullPath,
+								projectRoot,
+								ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform),
+							},
+						},
+					].filter((loader) => Boolean(loader)),
+				},
+				{
+					test: /[\/|\\]app\.css$/,
+					use: [
+						'@nativescript/webpack/helpers/style-hot-loader',
+						{
+							loader: '@nativescript/webpack/helpers/css2json-loader',
+							options: { useForImports: true },
+						},
+					],
+				},
+				{
+					test: /[\/|\\]app\.scss$/,
+					use: [
+						'@nativescript/webpack/helpers/style-hot-loader',
+						{
+							loader: '@nativescript/webpack/helpers/css2json-loader',
+							options: { useForImports: true },
+						},
+						'sass-loader',
+					],
+				},
+				{
+					test: /\.css$/,
+					exclude: /[\/|\\]app\.css$/,
+					use: ['@nativescript/webpack/helpers/style-hot-loader', '@nativescript/webpack/helpers/apply-css-loader.js', { loader: 'css-loader', options: { url: false } }],
+				},
+				{
+					test: /\.scss$/,
+					exclude: /[\/|\\]app\.scss$/,
+					use: ['@nativescript/webpack/helpers/style-hot-loader', '@nativescript/webpack/helpers/apply-css-loader.js', { loader: 'css-loader', options: { url: false } }, 'sass-loader'],
+				},
+				{
+					test: /\.js$/,
+					loader: 'babel-loader',
+				},
+				{
+					test: /\.ts$/,
+					loader: 'ts-loader',
+					options: {
+						appendTsSuffixTo: [/\.vue$/],
+						allowTsInNodeModules: true,
+						compilerOptions: {
+							declaration: false,
+						},
+						getCustomTransformers: (program) => ({
+							before: [require('@nativescript/webpack/transformers/ns-transform-native-classes').default],
+						}),
+					},
+				},
+				{
+					test: /\.vue$/,
+					loader: 'vue-loader',
+					options: {
+						compiler: NsVueTemplateCompiler,
+					},
+				},
+			],
+		},
+		plugins: [
+			// ... Vue Loader plugin omitted
+			// make sure to include the plugin!
+			new VueLoaderPlugin(),
+			// Define useful constants like TNS_WEBPACK
+			new webpack.DefinePlugin({
+				'global.TNS_WEBPACK': 'true',
+				'global.isAndroid': platform === 'android',
+				'global.isIOS': platform === 'ios',
+				TNS_ENV: JSON.stringify(mode),
+				process: 'global.process',
+			}),
+			// Remove all files from the out dir.
+			new CleanWebpackPlugin({
+				cleanOnceBeforeBuildPatterns: itemsToClean,
+				verbose: !!verbose,
+			}),
+			// Copy assets
+			new CopyWebpackPlugin([{ from: { glob: 'assets/**', dot: false } }, { from: { glob: 'fonts/**', dot: false } }, { from: { glob: '**/*.jpg', dot: false } }, { from: { glob: '**/*.png', dot: false } }], copyIgnore),
+			new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'),
+			// For instructions on how to set up workers with webpack
+			// check out https://github.com/nativescript/worker-loader
+			new NativeScriptWorkerPlugin(),
+			new nsWebpack.PlatformFSPlugin({
+				platform,
+				platforms,
+			}),
+			// Does IPC communication with the {N} CLI to notify events when running in watch mode.
+			new nsWebpack.WatchStateLoggerPlugin(),
+		],
+	};
+
+	if (unitTesting) {
+		config.module.rules.push(
+			{
+				test: /-page\.js$/,
+				use: '@nativescript/webpack/helpers/script-hot-loader',
+			},
+			{
+				test: /\.(html|xml)$/,
+				use: '@nativescript/webpack/helpers/markup-hot-loader',
+			},
+
+			{ test: /\.(html|xml)$/, use: '@nativescript/webpack/helpers/xml-namespace-loader' }
+		);
+	}
+
+	if (report) {
+		// Generate report files for bundles content
+		config.plugins.push(
+			new BundleAnalyzerPlugin({
+				analyzerMode: 'static',
+				openAnalyzer: false,
+				generateStatsFile: true,
+				reportFilename: resolve(projectRoot, 'report', `report.html`),
+				statsFilename: resolve(projectRoot, 'report', `stats.json`),
+			})
+		);
+	}
+
+	if (snapshot) {
+		config.plugins.push(
+			new nsWebpack.NativeScriptSnapshotPlugin({
+				chunk: 'vendor',
+				requireModules: ['@nativescript/core/bundle-entry-points'],
+				projectRoot,
+				webpackConfig: config,
+				snapshotInDocker,
+				skipSnapshotTools,
+				useLibs,
+			})
+		);
+	}
+
+	if (hmr) {
+		config.plugins.push(new webpack.HotModuleReplacementPlugin());
+	}
+
+	return config;
+};

app/app.scss

@@ -22,13 +22,10 @@ $snacks: #9775fa; // Global SCSS styling
 // @see https://docs.nativescript.org/ui/styling
 .ns-modal,
 Page {
-  font-family: "Orkney-Regular";
+  font-family: "Inter-Medium";
 }
-.orkm {
+.tb {
-  font-family: "Orkney-Medium";
+  font-family: "Inter-Bold";
-}
-.orkb {
-  font-family: "Orkney-Bold";
 }
 .er {
   font-family: "enrecipes";
@@ -99,9 +96,6 @@ Page {
     color: $gray3;
     background: $gray2;
   }
-  .selected {
-    background: $gray2;
-  }
   .activeDay {
     color: $gray1;
     background: $gray9;
@@ -145,7 +139,7 @@ Page {
   .combination,
   .hasPlans,
   .overviewItem,
-  .recipeItem,
+  // .recipeItem,
   .titleContainer {
     background: $gray8;
   }
@@ -167,9 +161,6 @@ Page {
     color: $gray9;
     background: $gray10;
   }
-  .selected {
-    background: $gray6;
-  }
   .activeDay {
     color: $gray9;
     background: $gray2;
@@ -208,7 +199,7 @@ ListPicker {
   width: 25%;
 }
 SearchBar {
-  font-family: "Orkney-Regular";
+  font-family: "Inter-Regular";
   font-size: 14;
   text-field-hint-color: $gray5;
 }
@@ -260,7 +251,8 @@ ActionBar {
     margin: 0;
   }
   .title {
-    padding-left: 12;
+    @extend .tb;
+    padding: 0 0 0 12;
     text-align: left;
     font-size: 18;
   }
@@ -268,10 +260,11 @@ ActionBar {
 // -----------------------------
 // Side Drawer
 .sd {
-  padding: 8;
+  padding: 8 0;
 }
 .sd-item {
   border-radius: 8;
+  margin: 0 8;
   height: 48;
   vertical-alignment: center;
   .er {
@@ -288,9 +281,8 @@ ActionBar {
       ripple-color: transparent;
     }
   }
-  // prettier-ignore
   Label {
-    padding: 2 16 0 0;
+    padding: 0 16 0 0;
     font-size: 14;
     vertical-alignment: center;
     &.er {
@@ -312,12 +304,15 @@ ActionBar {
 }
 .sd-group-header {
   width: 100%;
-  padding: 0 0 0 8;
+  padding: 8 8 8 16;
   MDButton.er {
     margin: 0;
+    width: 32;
+    height: 32;
+    min-width: 0;
   }
   .filterPath {
-    line-height: 6;
+    line-height: 0;
   }
 }
 .noTags {
@@ -397,21 +392,9 @@ CollectionView {
 .recipeContainer {
   padding: 0;
 }
-.firstItem {
-  padding: 12 0 0;
-}
-.lastItem {
-  padding: 0 0 84;
-}
-.odd {
-  padding-left: 12;
-}
-.even {
-  padding-right: 12;
-}
 .layout1 {
   padding: 0;
-  margin: 4 16;
+  margin: 8 16;
   border-radius: 8;
   .imageHolder {
     &.card {
@@ -433,12 +416,12 @@ CollectionView {
     }
     .title {
       margin: 0;
-      padding: 2 0;
+      padding: 0;
     }
     .attrContainer {
-      padding: 0;
+      padding: 2 0 0;
       .attr {
-        padding: 1 8 0 2;
+        padding: 0 8 0 2;
       }
     }
     .tagsContainer {
@@ -457,7 +440,7 @@ CollectionView {
 }
 .layout3 {
   padding: 0;
-  margin: 4 4 16;
+  margin: 8;
   border-radius: 8;
   .imageHolder {
     vertical-alignment: center;
@@ -479,40 +462,49 @@ CollectionView {
     }
     .title {
       margin: 0;
-      padding: 2 0;
+      padding: 0;
     }
   }
   .tagsContainer {
     padding: 4 0 0;
   }
 }
-
+.firstItem {
+  padding: 8 0 0;
+}
+.lastItem {
+  padding-top: 0;
+  padding-right: 0;
+  padding-left: 0;
+  padding-bottom: 84;
+}
+.odd {
+  padding-left: 8;
+}
+.even {
+  padding-right: 8;
+}
+.selected {
+  background: rgba($orange, 0.1);
+}
 .tagsContainer {
   padding: 2 0 0;
   .tag {
     font-size: 10;
-    padding: 1 4;
+    padding: 1 6 2;
     margin: 0 4 0 0;
     line-height: 0;
-    border-radius: 2;
+    border-radius: 8;
   }
 }
 .imageHolder {
   vertical-alignment: center;
   &.card {
-    border-radius: 4 0 0 4;
-    // prettier-ignore
-    Image {
-      border-radius: 4 0 0 4;
-    }
-  }
-}
-.swipe-item {
-  margin: 0 8;
-  background: $red;
-  color: #fff;
-  height: 104;
     border-radius: 8;
+    Image {
+      border-radius: 8;
+    }
+  }
 }
 // -----------------------------
 // SETTINGS
@@ -521,10 +513,7 @@ CollectionView {
   padding: 8;
 }
 .group-info {
-  padding: 16 16 16 35;
+  padding: 16 16 16 64;
-  margin: 16 27;
-  border-left-width: 2;
-  border-color: $red;
   line-height: 6;
 }
 
@@ -616,8 +605,8 @@ CollectionView {
     padding: 0;
     margin: 12 12 0;
     .tag {
-      padding: 2 6;
+      padding: 0 6 2;
-      margin: 0 8 8 0;
+      margin: 2 8 8 0;
     }
   }
   .overviewContainer {
@@ -646,6 +635,7 @@ CollectionView {
     border-radius: 99;
     border-width: 2;
     border-color: $gray5;
+    line-height: 0;
   }
   .instruction {
     font-size: 14;
@@ -701,6 +691,7 @@ MDFloatingActionButton {
 // -----------------------------
 // EDIT RECIPE
 .sectionTitle {
+  @extend .tb;
   font-size: 18;
 }
 .text-btn {
@@ -804,7 +795,6 @@ MDButton.x {
     background: $gray9;
   }
   .dialogHeader {
-    border-radius: 4 4 0 0;
     padding: 24;
   }
   .dialogIcon {
@@ -812,6 +802,7 @@ MDButton.x {
     vertical-alignment: center;
   }
   .dialogTitle {
+    @extend .tb;
     line-height: 6;
     padding: 0 0 0 18;
     font-size: 18;

app/components/App.vue

@@ -16,7 +16,7 @@
             columns="auto, *, auto"
             v-for="(item, index) in topmenu"
             :key="index"
-            class="sd-item orkm mdr"
+            class="sd-item mdr"
             :class="{
               selected: currentComponent === item.component,
             }"
@@ -32,7 +32,7 @@
             />
           </GridLayout>
           <GridLayout
-            class="sd-group-header orkm"
+            class="sd-group-header"
             rows="auto"
             columns="*, auto"
             v-if="cuisinesWithRecipes.length"
@@ -58,7 +58,7 @@
               <GridLayout
                 v-for="(item, index) in getRecipeList"
                 :key="index"
-                class="sd-item orkm mdr"
+                class="sd-item mdr"
                 :class="{
                   selected: selectedTag == item,
                 }"
@@ -87,7 +87,8 @@
           <GridLayout
             rows="48"
             columns="auto, *"
-            class="sd-item orkm mdr"
+            class="sd-item mdr"
+            marginTop="8"
             :class="{
               selected: currentComponent == 'MealPlanner',
             }"
@@ -100,7 +101,7 @@
           <!-- <GridLayout
             rows="48"
             columns="auto, *"
-            class="sd-item orkm mdr"
+            class="sd-item tb mdr"
             :class="{
               selected: currentComponent == 'GroceryList',
             }"
@@ -112,7 +113,7 @@
           <GridLayout
             rows="48"
             columns="auto, *"
-            class="sd-item orkm mdr"
+            class="sd-item tb mdr"
             :class="{
               selected: currentComponent == 'GroceryList',
             }"
@@ -122,7 +123,7 @@
             <Label col="2" :text="'Price List' | L" />
           </GridLayout> -->
           <GridLayout
-            class="sd-item orkm mdr"
+            class="sd-item mdr"
             :class="{
               selected: currentComponent == 'Settings',
             }"

app/components/EditRecipe.vue

@@ -10,7 +10,7 @@
           col="0"
           @tap="navigateBack"
         />
-        <Label class="title orkm" :text="`${title}` | L" col="1" />
+        <Label class="title tb" :text="`${title}` | L" col="1" />
         <MDButton
           variant="text"
           v-if="hasChanges && !saving"
@@ -219,7 +219,7 @@
           </GridLayout>
           <MDButton
             variant="text"
-            class="text-btn orkm"
+            class="text-btn tb"
             :text="`+ ${$options.filters.L('aIngBtn')}`"
             @tap="addIngredient()"
           />
@@ -247,7 +247,7 @@
           </GridLayout>
           <MDButton
             variant="text"
-            class="text-btn orkm"
+            class="text-btn tb"
             :text="`+ ${$options.filters.L('aStpBtn')}`"
             @tap="addInstruction"
           />
@@ -275,7 +275,7 @@
           </GridLayout>
           <MDButton
             variant="text"
-            class="text-btn orkm"
+            class="text-btn tb"
             :text="`+ ${$options.filters.L('aNoBtn')}`"
             @tap="addNote"
           />
@@ -303,7 +303,7 @@
           </GridLayout>
           <MDButton
             variant="text"
-            class="text-btn orkm"
+            class="text-btn tb"
             :text="`+ ${$options.filters.L('addCmbBtn')}`"
             @tap="showCombinations"
           />

app/components/EnRecipes.vue

@@ -31,13 +31,13 @@
         />
         <Label
           v-if="selectMode"
-          class="title orkm"
+          class="title tb"
           :text="`${selection.length} ${$options.filters.L('sltd')}`"
           col="1"
         />
         <Label
           v-else
-          class="title orkm"
+          class="title tb"
           :text="`${currentComponent}` | L"
           col="1"
         />
@@ -73,8 +73,8 @@
             <!-- elevation="1" -->
             <GridLayout
               class="recipeItem layout1 mdr"
-              rows="104"
+              rows="96"
-              columns="104, *"
+              columns="96, *"
               ref="recipe"
               @longPress="
                 selectMode
@@ -87,15 +87,15 @@
                   : viewRecipe(recipe.id)
               "
             >
-              <GridLayout class="imageHolder card" rows="104" columns="104">
+              <GridLayout class="imageHolder card" rows="96" columns="96">
                 <Image
                   row="0"
                   col="0"
                   v-if="recipe.imageSrc"
                   :src="recipe.imageSrc"
                   stretch="aspectFill"
-                  decodeWidth="104"
+                  decodeWidth="96"
-                  decodeHeight="104"
+                  decodeHeight="96"
                   loadMode="async"
                 />
                 <Label
@@ -115,7 +115,7 @@
                   )} • ${$options.filters.L(recipe.category)}`"
                   class="category"
                 />
-                <Label :text="recipe.title" class="orkm title" />
+                <Label :text="recipe.title" class="tb title" />
                 <GridLayout columns="*" rows="auto, auto">
                   <StackLayout
                     class="attrContainer"
@@ -178,7 +178,7 @@
                   )} • ${$options.filters.L(recipe.category)}`"
                   class="category"
                 />
-                <Label :text="recipe.title" class="orkm title" />
+                <Label :text="recipe.title" class="tb title" />
                 <StackLayout
                   class="tagsContainer"
                   v-if="recipe.tags.length"
@@ -243,7 +243,7 @@
                   )} • ${$options.filters.L(recipe.category)}`"
                   class="category"
                 />
-                <Label :text="recipe.title" class="orkm title" />
+                <Label :text="recipe.title" class="tb title" />
                 <StackLayout
                   class="tagsContainer"
                   orientation="horizontal"
@@ -270,7 +270,7 @@
           @tap="addRecipe"
         >
           <Label class="er icon" :text="icon.plusc" />
-          <Label class="title orkm" :text="'strAdd' | L" textWrap="true" />
+          <Label class="title tb" :text="'strAdd' | L" textWrap="true" />
           <StackLayout orientation="horizontal" horizontalAlignment="center">
             <Label :text="'plsAdd' | L" textWrap="true" />
           </StackLayout>
@@ -281,7 +281,7 @@
           v-if="!filteredRecipes.length && filterTrylater && !searchQuery"
         >
           <Label class="er icon" :text="icon.try" textWrap="true" />
-          <Label class="title orkm" :text="'aD' | L" textWrap="true" />
+          <Label class="title tb" :text="'aD' | L" textWrap="true" />
           <Label :text="'tLInfo' | L" textWrap="true" />
         </StackLayout>
         <StackLayout
@@ -290,7 +290,7 @@
           v-if="!filteredRecipes.length && filterFavourites && !searchQuery"
         >
           <Label class="er icon" :text="icon.fav" textWrap="true" />
-          <Label class="title orkm" :text="'noFavs' | L" textWrap="true" />
+          <Label class="title tb" :text="'noFavs' | L" textWrap="true" />
           <Label :text="'fsList' | L" textWrap="true" />
         </StackLayout>
         <StackLayout
@@ -300,14 +300,14 @@
         >
           <Label class="er icon" :text="icon.noresult" textWrap="true" />
           <Label
-            class="title orkm"
+            class="title tb"
             :text="`${noResultFor}` | L"
             textWrap="true"
           />
           <MDButton
             v-if="filterFavourites || filterTrylater || selectedCuisine"
             variant="text"
-            class="searchAll orkm"
+            class="searchAll tb"
             :text="'trySer' | L"
             @tap="searchAll"
           />
@@ -342,7 +342,7 @@ import { time } from "tns-core-modules/profiling";
 import {
   startAccelerometerUpdates,
   stopAccelerometerUpdates,
-} from "nativescript-accelerometer";
+} from "@triniwiz/nativescript-accelerometer";
 import { Vibrate } from "nativescript-vibrate";
 let vibrator = new Vibrate();
 import { mapActions, mapState } from "vuex";
@@ -460,7 +460,7 @@ export default {
       return Screen.mainScreen.widthDIPs;
     },
     imgWidth() {
-      return Screen.mainScreen.widthDIPs / 2 - 20;
+      return Screen.mainScreen.widthDIPs / 2 - 16;
     },
   },
   methods: {
@@ -735,13 +735,11 @@ export default {
 
     // DATA HANDLERS
     addToSelection(args, id) {
-      // console.log(args, id);
       this.showFAB = false;
       if (!this.selectMode) this.hijackLocalBackEvent();
       this.selectMode = true;
       this.$emit("selectModeOn", false);
       let item = args.object;
-      console.log(item.className);
       let classes = item.className;
       if (classes.includes("selected")) {
         item.className = classes.replace(/selected/g, "");

app/components/GroceryList.vue

@@ -10,7 +10,7 @@
           @tap="$navigateBack()"
           col="0"
         />
-        <Label class="title orkm" :text="'grocery' | L" col="1" />
+        <Label class="title tb" :text="'grocery' | L" col="1" />
         <MDButton
           class="er left"
           variant="text"

app/components/MealPlanner.vue

@@ -10,7 +10,7 @@
           @tap="$navigateBack()"
           col="0"
         />
-        <Label class="title orkm" :text="'planner' | L" col="1" />
+        <Label class="title tb" :text="'planner' | L" col="1" />
         <MDButton
           class="er"
           variant="text"
@@ -68,7 +68,7 @@
           />
           <Label
             @loaded="centerLabel"
-            class="day orkm"
+            class="day tb"
             :class="{
               today: isToday(d),
               activeDay: isActive(d),
@@ -93,7 +93,7 @@
               <Label
                 col="0"
                 @tap="edit = true"
-                class="periodLabel orkm"
+                class="periodLabel tb"
                 :text="mealType | L"
               />
               <MDButton

app/components/Settings.vue

@@ -10,7 +10,7 @@
           @tap="$navigateBack()"
           col="0"
         />
-        <Label class="title orkm" :text="'Settings' | L" col="1" />
+        <Label class="title tb" :text="'Settings' | L" col="1" />
       </GridLayout>
     </ActionBar>
     <GridLayout rows="*" columns="*" class="main-container">

app/components/Settings/About.vue

@@ -10,7 +10,7 @@
           @tap="$navigateBack()"
           col="0"
         />
-        <Label class="title orkm" :text="'About' | L" col="1" />
+        <Label class="title tb" :text="'About' | L" col="1" />
       </GridLayout>
     </ActionBar>
     <GridLayout rows="auto, *" columns="*" class="main-container">
@@ -20,8 +20,8 @@
           src="res://ic_launcher_foreground"
           stretch="none"
         />
-        <Label class="app-name orkb" :text="'EnRecipes' | L" textWrap="true" />
+        <Label class="app-name tb" :text="'EnRecipes' | L" textWrap="true" />
-        <Label :text="getVersion" class="app-version orkm" textWrap="true" />
+        <Label :text="getVersion" class="app-version tb" textWrap="true" />
 
         <Label class="app-info" :text="'appInfo' | L" textWrap="true" />
       </StackLayout>

app/components/Settings/Database.vue

@@ -10,7 +10,7 @@
           @tap="$navigateBack()"
           col="0"
         />
-        <Label class="title orkm" :text="'db' | L" col="1" />
+        <Label class="title tb" :text="'db' | L" col="1" />
       </GridLayout>
     </ActionBar>
     <StackLayout class="main-container">

app/components/Settings/Help.vue

@@ -10,7 +10,7 @@
           @tap="$navigateBack()"
           col="0"
         />
-        <Label class="title orkm" :text="'help' | L" col="1" />
+        <Label class="title tb" :text="'help' | L" col="1" />
       </GridLayout>
     </ActionBar>
     <GridLayout rows="*" columns="*" class="main-container">

app/components/Settings/Interface.vue

@@ -10,7 +10,7 @@
           @tap="$navigateBack()"
           col="0"
         />
-        <Label class="title orkm" :text="'intf' | L" col="1" />
+        <Label class="title tb" :text="'intf' | L" col="1" />
       </GridLayout>
     </ActionBar>
     <GridLayout rows="*" columns="*" class="main-container">

app/components/Settings/Options.vue

@@ -10,7 +10,7 @@
           @tap="$navigateBack()"
           col="0"
         />
-        <Label class="title orkm" :text="'opts' | L" col="1" />
+        <Label class="title tb" :text="'opts' | L" col="1" />
       </GridLayout>
     </ActionBar>
     <StackLayout class="main-container">

app/components/Settings/Reset.vue

@@ -10,7 +10,7 @@
           @tap="$navigateBack()"
           col="0"
         />
-        <Label class="title orkm" :text="'rest' | L" col="1" />
+        <Label class="title tb" :text="'rest' | L" col="1" />
       </GridLayout>
     </ActionBar>
     <GridLayout rows="auto, *" columns="*" class="main-container">

app/components/ViewRecipe.vue

@@ -102,7 +102,7 @@
                   )} • ${$options.filters.L(recipe.category)}`"
                 />
                 <Label
-                  class="title orkm"
+                  class="title tb"
                   :text="recipe.title"
                   textWrap="true"
                 />
@@ -271,7 +271,7 @@
             >
               <StackLayout col="0" row="1" class="emptyState">
                 <Label class="er icon" :text="icon.items" textWrap="true" />
-                <Label class="title orkm" :text="'pAIng' | L" textWrap="true" />
+                <Label class="title tb" :text="'pAIng' | L" textWrap="true" />
               </StackLayout>
             </GridLayout>
             <StackLayout v-else padding="24 16 72">
@@ -290,7 +290,7 @@
               </StackLayout>
               <Label
                 padding="16 0 8"
-                class="title orkm"
+                class="title tb"
                 :text="`${$options.filters.L(
                   'ings'
                 )} (${positiveYieldMultiplier} ${$options.filters.L(
@@ -303,7 +303,7 @@
                 :key="index"
                 class="ingredient"
                 :color="isLightMode ? '#1A1A1A' : '#e0e0e0'"
-                style="font-family: 'Orkney-Regular'"
+                style="font-family: 'Inter-Medium'"
                 :checkPadding="checkPadding"
                 marginLeft="4"
                 @checkedChange="checkChange"
@@ -330,7 +330,7 @@
             >
               <StackLayout col="0" row="1" class="emptyState">
                 <Label class="er icon" :text="icon.steps" textWrap="true" />
-                <Label class="title orkm" :text="'pAIns' | L" textWrap="true" />
+                <Label class="title tb" :text="'pAIns' | L" textWrap="true" />
               </StackLayout>
             </GridLayout>
             <StackLayout v-else padding="28 16 62">
@@ -352,7 +352,7 @@
                 />
                 <Label
                   @loaded="centerLabel"
-                  class="count orkm"
+                  class="count tb"
                   col="0"
                   :text="index + 1"
                 />
@@ -370,7 +370,7 @@
             >
               <StackLayout col="0" row="1" class="emptyState">
                 <Label class="er icon" :text="icon.notes" textWrap="true" />
-                <Label class="title orkm" :text="'pANo' | L" textWrap="true" />
+                <Label class="title tb" :text="'pANo' | L" textWrap="true" />
               </StackLayout>
             </GridLayout>
             <StackLayout v-else padding="16 16 62" @loaded="createNotes">
@@ -387,7 +387,7 @@
             >
               <StackLayout col="0" row="1" class="emptyState">
                 <Label class="er icon" :text="icon.comb" textWrap="true" />
-                <Label class="title orkm" :text="'pACmb' | L" textWrap="true" />
+                <Label class="title tb" :text="'pACmb' | L" textWrap="true" />
               </StackLayout>
             </GridLayout>
             <StackLayout v-else padding="16 0 80">

app/components/modal/ActionDialog.vue

@@ -8,7 +8,7 @@
     >
       <StackLayout row="0" class="dialogHeader" orientation="horizontal">
         <Label class="er dialogIcon" :text="icon[helpIcon]" />
-        <Label class="dialogTitle orkm" :text="`${title}` | L" />
+        <Label class="dialogTitle" :text="`${title}` | L" />
       </StackLayout>
       <ListView
         rowHeight="48"
@@ -21,7 +21,7 @@
           <StackLayout margin="0" padding="0">
             <Label
               class="actionItem mdr"
-              :class="{ orkm: title === 'srt' && sortType === item }"
+              :class="{ tb: title === 'srt' && sortType === item }"
               :color="title === 'srt' && sortType === item ? '#ff5200' : ''"
               :text="`${localized(item)}${
                 title === 'srt' && sortType === item ? '*' : ''
@@ -42,14 +42,14 @@
           variant="text"
           v-if="action"
           col="0"
-          class="action orkm pull-left"
+          class="action tb pull-left"
           :text="`${action}` | L"
           @tap="$modal.close(action)"
         />
         <MDButton
           variant="text"
           col="2"
-          class="action orkm pull-right"
+          class="action tb pull-right"
           :text="'cBtn' | L"
           @tap="$modal.close(false)"
         />

app/components/modal/ActionDialogWithSearch.vue

@@ -9,7 +9,7 @@
       <StackLayout row="0" class="dialogHeader" orientation="horizontal">
         <Label class="er dialogIcon" :text="icon[helpIcon]" />
         <Label
-          class="dialogTitle orkm"
+          class="dialogTitle"
           :text="`${title}` | L"
           textWrap="true"
         />
@@ -60,14 +60,14 @@
           variant="text"
           v-if="action"
           col="0"
-          class="action orkm pull-left"
+          class="action tb pull-left"
           :text="`${action}` | L"
           @tap="$modal.close(action)"
         />
         <MDButton
           variant="text"
           col="2"
-          class="action orkm pull-right"
+          class="action tb pull-right"
           :text="'CANCEL' | L"
           @tap="$modal.close(false)"
         />

app/components/modal/ConfirmDialog.vue

@@ -8,7 +8,7 @@
           :text="icon[helpIcon]"
         />
         <Label
-          class="dialogTitle orkm"
+          class="dialogTitle "
           :text="`${title}` | L"
           textWrap="true"
         />
@@ -24,14 +24,14 @@
           v-if="cancelButtonText"
           variant="text"
           col="1"
-          class="action orkm"
+          class="action tb"
           :text="`${cancelButtonText}` | L"
           @tap="$modal.close(false)"
         />
         <MDButton
           variant="text"
           col="2"
-          class="action orkm"
+          class="action tb"
           :text="`${okButtonText}` | L"
           @tap="$modal.close(true)"
         />

app/components/modal/ListPicker.vue

@@ -3,7 +3,7 @@
     <StackLayout class="dialogContainer" :class="appTheme">
       <StackLayout class="dialogHeader" orientation="horizontal">
         <Label class="er dialogIcon" :text="icon.time" />
-        <Label class="dialogTitle orkm" :text="`${title}` | L" />
+        <Label class="dialogTitle " :text="`${title}` | L" />
       </StackLayout>
       <StackLayout
         class="dialogListPicker"
@@ -27,14 +27,14 @@
         <MDButton
           variant="text"
           col="1"
-          class="action orkm"
+          class="action tb"
           :text="'cBtn' | L"
           @tap="$modal.close(false)"
         />
         <MDButton
           variant="text"
           col="2"
-          class="action orkm"
+          class="action tb"
           :text="`${action}` | L"
           @tap="$modal.close(selectedTime)"
         />

app/components/modal/PromptDialog.vue

@@ -4,7 +4,7 @@
       <StackLayout class="dialogHeader" orientation="horizontal">
         <Label class="er dialogIcon" :text="icon[helpIcon]" />
         <Label
-          class="dialogTitle orkm"
+          class="dialogTitle "
           :text="`${title}` | L"
           textWrap="true"
         />
@@ -22,14 +22,14 @@
         <MDButton
           variant="text"
           col="1"
-          class="action orkm"
+          class="action tb"
           :text="'cBtn' | L"
           @tap="$modal.close(false)"
         />
         <MDButton
           variant="text"
           col="2"
-          class="action orkm"
+          class="action tb"
           :text="`${action}` | L"
           @tap="$modal.close(category)"
         />

app/components/modal/ShareChooser.vue

@@ -6,7 +6,7 @@
           class="er dialogIcon"
           :text="icon[helpIcon]"
         />
-        <Label class="dialogTitle orkm" :text="`${title}` | L" />
+        <Label class="dialogTitle " :text="`${title}` | L" />
       </StackLayout>
       <GridLayout rows="auto, auto, auto" columns="*" class="actionsContainer">
         <GridLayout
@@ -47,7 +47,7 @@
         <MDButton
           variant="text"
           col="1"
-          class="action orkm mdr"
+          class="action tb mdr"
           :text="'cBtn' | L"
           @tap="$modal.close()"
         />

app/resources/Android/app.gradle

@@ -16,9 +16,9 @@
 android {
   defaultConfig {
     versionCode 7
-    versionName '1.3.1'
+    versionName '1.3.2'
     applicationId 'com.vishnuraghav.enrecipes'
-    minSdkVersion 21
+    minSdkVersion 22
     generatedDensities = []
     ndk {
       abiFilters.clear()

app/store.js

@@ -1,14 +1,14 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
-import { Couchbase } from 'nativescript-couchbase-plugin'
+import { CouchBase } from '@triniwiz/nativescript-couchbase'
 import { getFileAccess, File, ApplicationSettings } from '@nativescript/core'
-const EnRecipesDB = new Couchbase('EnRecipes')
+const EnRecipesDB = new CouchBase('EnRecipes')
-const userCuisinesDB = new Couchbase('userCuisines')
+const userCuisinesDB = new CouchBase('userCuisines')
-const userCategoriesDB = new Couchbase('userCategories')
+const userCategoriesDB = new CouchBase('userCategories')
-const userYieldUnitsDB = new Couchbase('userYieldUnits')
+const userYieldUnitsDB = new CouchBase('userYieldUnits')
-const userUnitsDB = new Couchbase('userUnits')
+const userUnitsDB = new CouchBase('userUnits')
-const mealPlansDB = new Couchbase('mealPlans')
+const mealPlansDB = new CouchBase('mealPlans')
 const defaultCuisines = [
   'American',
   'Brazilian',

package.json

@@ -5,37 +5,37 @@
   "author": "Vishnu Raghav <apps@vishnuraghav.com>",
   "license": "GPL",
   "dependencies": {
-    "@nativescript-community/gesturehandler": "^0.1.36",
+    "@nativescript-community/gesturehandler": "^0.1.39",
-    "@nativescript-community/perms": "^2.1.4",
+    "@nativescript-community/perms": "^2.1.5",
-    "@nativescript-community/ui-collectionview": "^4.0.24",
+    "@nativescript-community/ui-collectionview": "^4.0.29",
-    "@nativescript-community/ui-drawer": "0.0.22",
+    "@nativescript-community/ui-drawer": "^0.0.24",
-    "@nativescript-community/ui-material-activityindicator": "^5.1.16",
+    "@nativescript-community/ui-material-activityindicator": "^5.2.10",
-    "@nativescript-community/ui-material-button": "^5.1.16",
+    "@nativescript-community/ui-material-button": "^5.2.10",
-    "@nativescript-community/ui-material-floatingactionbutton": "^5.1.16",
+    "@nativescript-community/ui-material-floatingactionbutton": "^5.2.10",
-    "@nativescript-community/ui-material-progress": "^5.1.16",
+    "@nativescript-community/ui-material-progress": "^5.2.10",
-    "@nativescript-community/ui-material-snackbar": "^5.1.16",
+    "@nativescript-community/ui-material-snackbar": "^5.2.10",
-    "@nativescript/core": "~7.0.0",
+    "@nativescript/core": "7.3.0",
-    "@nativescript/localize": "^5.0.2",
+    "@nativescript/localize": "^5.0.4",
-    "@nativescript/social-share": "^2.0.1",
+    "@nativescript/social-share": "^2.0.4",
     "@nativescript/theme": "^3.0.1",
     "@nativescript/zip": "^5.0.0",
     "@nstudio/nativescript-checkbox": "^2.0.4",
-    "nativescript-accelerometer": "^3.0.0",
+    "@triniwiz/nativescript-accelerometer": "^4.0.3",
-    "nativescript-couchbase-plugin": "^0.9.6",
+    "@triniwiz/nativescript-couchbase": "^1.2.2",
     "nativescript-feedback": "^2.0.0",
     "nativescript-imagecropper": "^4.0.1",
     "nativescript-intl": "^4.0.2",
     "nativescript-plugin-filepicker": "^1.0.0",
     "nativescript-toast": "^2.0.0",
     "nativescript-vibrate": "^4.0.1",
-    "nativescript-vue": "^2.8.3",
+    "nativescript-vue": "^2.8.4",
-    "vuex": "^3.6.0"
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@nativescript/android": "7.0.1",
-    "@nativescript/webpack": "^3.0.8",
+    "@nativescript/webpack": "4.1.0",
     "@types/node": "^14.14.20",
     "babel-loader": "^8.2.2",
     "nativescript-vue-template-compiler": "^2.8.3",

webpack.config.js

@@ -1,33 +1,26 @@
-const { join, relative, resolve, sep } = require("path");
+const { join, relative, resolve, sep } = require('path');
 
-const webpack = require("webpack");
+const webpack = require('webpack');
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CopyWebpackPlugin = require("copy-webpack-plugin");
+const CopyWebpackPlugin = require('copy-webpack-plugin');
-const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const TerserPlugin = require("terser-webpack-plugin");
+const TerserPlugin = require('terser-webpack-plugin');
 
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
-const NsVueTemplateCompiler = require("nativescript-vue-template-compiler");
+const NsVueTemplateCompiler = require('nativescript-vue-template-compiler');
 
-const nsWebpack = require("@nativescript/webpack");
+const nsWebpack = require('@nativescript/webpack');
-const nativescriptTarget = require("@nativescript/webpack/nativescript-target");
+const nativescriptTarget = require('@nativescript/webpack/nativescript-target');
-const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
+const { NativeScriptWorkerPlugin } = require('nativescript-worker-loader/NativeScriptWorkerPlugin');
 const hashSalt = Date.now().toString();
 
-module.exports = env => {
+module.exports = (env) => {
-    // Add your custom Activities, Services and other android app components here.
+	const platform = env && ((env.android && 'android') || (env.ios && 'ios') || env.platform);
-    const appComponents = env.appComponents || [];
-    appComponents.push(...[
-        "@nativescript/core/ui/frame",
-        "@nativescript/core/ui/frame/activity",
-    ]);
-
-    const platform = env && (env.android && "android" || env.ios && "ios" || env.platform);
 	if (!platform) {
-        throw new Error("You need to provide a target platform!");
+		throw new Error('You need to provide a target platform!');
 	}
 
-    const platforms = ["ios", "android"];
+	const platforms = ['ios', 'android'];
 	const projectRoot = __dirname;
 
 	if (env.platform) {
@@ -40,8 +33,8 @@ module.exports = env => {
 	const {
 		// The 'appPath' and 'appResourcesPath' values are fetched from
 		// the nsconfig.json configuration file.
-        appPath = "app",
+		appPath = 'app',
-        appResourcesPath = "app/App_Resources",
+		appResourcesPath = 'app/App_Resources',
 
 		// You can provide the following flags when running 'tns run android|ios'
 		snapshot, // --env.snapshot
@@ -53,20 +46,23 @@ module.exports = env => {
 		unitTesting, // --env.unitTesting
 		testing, // --env.testing
 		verbose, // --env.verbose
+		ci, // --env.ci
 		snapshotInDocker, // --env.snapshotInDocker
 		skipSnapshotTools, // --env.skipSnapshotTools
-        compileSnapshot // --env.compileSnapshot
+		compileSnapshot, // --env.compileSnapshot
+		appComponents = [],
+		entries = {},
 	} = env;
 
 	const useLibs = compileSnapshot;
 	const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
 	const externals = nsWebpack.getConvertedExternals(env.externals);
 
-    const mode = production ? "production" : "development"
+	const mode = production ? 'production' : 'development';
 
 	const appFullPath = resolve(projectRoot, appPath);
 	const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
-    let coreModulesPackageName = "tns-core-modules";
+	let coreModulesPackageName = 'tns-core-modules';
 	const alias = env.alias || {};
 	alias['~/package.json'] = resolve(projectRoot, 'package.json');
 	alias['~'] = appFullPath;
@@ -74,8 +70,8 @@ module.exports = env => {
 	alias['vue'] = 'nativescript-vue';
 
 	if (hasRootLevelScopedModules) {
-        coreModulesPackageName = "@nativescript/core";
+		coreModulesPackageName = '@nativescript/core';
-        alias["tns-core-modules"] = coreModulesPackageName;
+		alias['tns-core-modules'] = coreModulesPackageName;
 	}
 
 	const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
@@ -84,23 +80,25 @@ module.exports = env => {
 
 	const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
 	const entryPath = `.${sep}${entryModule}`;
-    const entries = env.entries || {};
+	Object.assign(entries, { bundle: entryPath }, entries);
-    entries.bundle = entryPath;
 
-    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1);
+	const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some((e) => e.indexOf('@nativescript') > -1);
-    if (platform === "ios" && !areCoreModulesExternal && !testing) {
+	if (platform === 'ios' && !areCoreModulesExternal && !testing) {
-        entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules";
+		entries['tns_modules/inspector_modules'] = '@nativescript/core/inspector_modules';
-    };
+	}
 	console.log(`Bundling application for entryPath ${entryPath}...`);
 
 	let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
 
 	const itemsToClean = [`${dist}/**/*`];
-    if (platform === "android") {
+	if (platform === 'android') {
-        itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "src", "main", "assets", "snapshots")}`);
+		itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'src', 'main', 'assets', 'snapshots')}`);
-        itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
+		itemsToClean.push(`${join(projectRoot, 'platforms', 'android', 'app', 'build', 'configurations', 'nativescript-android-snapshot')}`);
 	}
 
+	// Add your custom Activities, Services and other android app components here.
+	appComponents.push('@nativescript/core/ui/frame', '@nativescript/core/ui/frame/activity');
+
 	nsWebpack.processAppComponents(appComponents, platform);
 	const config = {
 		mode: mode,
@@ -110,7 +108,7 @@ module.exports = env => {
 			ignored: [
 				appResourcesFullPath,
 				// Don't watch hidden files
-                "**/.*",
+				'**/.*',
 			],
 		},
 		target: nativescriptTarget,
@@ -120,20 +118,15 @@ module.exports = env => {
 			pathinfo: false,
 			path: dist,
 			sourceMapFilename,
-            libraryTarget: "commonjs2",
+			libraryTarget: 'commonjs2',
-            filename: "[name].js",
+			filename: '[name].js',
-            globalObject: "global",
+			globalObject: 'global',
-            hashSalt
+			hashSalt,
 		},
 		resolve: {
-            extensions: [".vue", ".ts", ".js", ".scss", ".css"],
+			extensions: ['.vue', '.ts', '.js', '.scss', '.css'],
 			// Resolve {N} system modules from @nativescript/core
-            modules: [
+			modules: [resolve(__dirname, `node_modules/${coreModulesPackageName}`), resolve(__dirname, 'node_modules'), `node_modules/${coreModulesPackageName}`, 'node_modules'],
-                resolve(__dirname, `node_modules/${coreModulesPackageName}`),
-                resolve(__dirname, "node_modules"),
-                `node_modules/${coreModulesPackageName}`,
-                "node_modules",
-            ],
 			alias,
 			// resolve symlinks to symlinked modules
 			symlinks: true,
@@ -144,26 +137,24 @@ module.exports = env => {
 		},
 		node: {
 			// Disable node shims that conflict with NativeScript
-            "http": false,
+			http: false,
-            "timers": false,
+			timers: false,
-            "setImmediate": false,
+			setImmediate: false,
-            "fs": "empty",
+			fs: 'empty',
-            "__dirname": false,
+			__dirname: false,
 		},
-        devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
+		devtool: hiddenSourceMap ? 'hidden-source-map' : sourceMap ? 'inline-source-map' : 'none',
 		optimization: {
-            runtimeChunk: "single",
+			runtimeChunk: 'single',
 			noEmitOnErrors: true,
 			splitChunks: {
 				cacheGroups: {
 					vendor: {
-                        name: "vendor",
+						name: 'vendor',
-                        chunks: "all",
+						chunks: 'all',
 						test: (module) => {
 							const moduleName = module.nameForCondition ? module.nameForCondition() : '';
-                            return /[\\/]node_modules[\\/]/.test(moduleName) ||
+							return /[\\/]node_modules[\\/]/.test(moduleName) || appComponents.some((comp) => comp === moduleName);
-                                appComponents.some(comp => comp === moduleName);
-
 						},
 						enforce: true,
 					},
@@ -173,54 +164,66 @@ module.exports = env => {
 			minimizer: [
 				new TerserPlugin({
 					parallel: true,
-                    cache: true,
+					cache: !ci,
 					sourceMap: isAnySourceMapEnabled,
 					terserOptions: {
 						output: {
 							comments: false,
-                            semicolons: !isAnySourceMapEnabled
+							semicolons: !isAnySourceMapEnabled,
 						},
 						compress: {
 							// The Android SBG has problems parsing the output
 							// when these options are enabled
-                            'collapse_vars': platform !== "android",
+							collapse_vars: platform !== 'android',
-                            sequences: platform !== "android",
+							sequences: platform !== 'android',
+							// For v8 Compatibility
+							keep_infinity: true, // for V8
+							reduce_funcs: false, // for V8
+							// custom
+							drop_console: production,
+							drop_debugger: true,
+							global_defs: {
+								__UGLIFIED__: true,
+							},
 						},
 						keep_fnames: true,
+						// Required for Element Level CSS, Observable Events, & Android Frame
+						keep_classnames: true,
 					},
 				}),
 			],
 		},
 		module: {
-            rules: [{
+			rules: [
-                include: [join(appFullPath, entryPath + ".js"), join(appFullPath, entryPath + ".ts")],
+				{
+					include: [join(appFullPath, entryPath + '.js'), join(appFullPath, entryPath + '.ts')],
 					use: [
 						// Require all Android app components
-                    platform === "android" && {
+						platform === 'android' && {
-                        loader: "@nativescript/webpack/helpers/android-app-components-loader",
+							loader: '@nativescript/webpack/helpers/android-app-components-loader',
 							options: { modules: appComponents },
 						},
 
 						{
-                        loader: "@nativescript/webpack/bundle-config-loader",
+							loader: '@nativescript/webpack/bundle-config-loader',
 							options: {
 								registerPages: true, // applicable only for non-angular apps
 								loadCss: !snapshot, // load the application css if in debug mode
 								unitTesting,
 								appFullPath,
 								projectRoot,
-                            ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
+								ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform),
 							},
 						},
-                ].filter(loader => Boolean(loader)),
+					].filter((loader) => Boolean(loader)),
 				},
 				{
 					test: /[\/|\\]app\.css$/,
 					use: [
 						'@nativescript/webpack/helpers/style-hot-loader',
 						{
-                        loader: "@nativescript/webpack/helpers/css2json-loader",
+							loader: '@nativescript/webpack/helpers/css2json-loader',
-                        options: { useForImports: true }
+							options: { useForImports: true },
 						},
 					],
 				},
@@ -229,8 +232,8 @@ module.exports = env => {
 					use: [
 						'@nativescript/webpack/helpers/style-hot-loader',
 						{
-                        loader: "@nativescript/webpack/helpers/css2json-loader",
+							loader: '@nativescript/webpack/helpers/css2json-loader',
-                        options: { useForImports: true }
+							options: { useForImports: true },
 						},
 						'sass-loader',
 					],
@@ -238,21 +241,12 @@ module.exports = env => {
 				{
 					test: /\.css$/,
 					exclude: /[\/|\\]app\.css$/,
-                use: [
+					use: ['@nativescript/webpack/helpers/style-hot-loader', '@nativescript/webpack/helpers/apply-css-loader.js', { loader: 'css-loader', options: { url: false } }],
-                    '@nativescript/webpack/helpers/style-hot-loader',
-                    '@nativescript/webpack/helpers/apply-css-loader.js',
-                    { loader: "css-loader", options: { url: false } },
-                ],
 				},
 				{
 					test: /\.scss$/,
 					exclude: /[\/|\\]app\.scss$/,
-                use: [
+					use: ['@nativescript/webpack/helpers/style-hot-loader', '@nativescript/webpack/helpers/apply-css-loader.js', { loader: 'css-loader', options: { url: false } }, 'sass-loader'],
-                    '@nativescript/webpack/helpers/style-hot-loader',
-                    '@nativescript/webpack/helpers/apply-css-loader.js',
-                    { loader: "css-loader", options: { url: false } },
-                    'sass-loader',
-                ],
 				},
 				{
 					test: /\.js$/,
@@ -265,18 +259,16 @@ module.exports = env => {
 						appendTsSuffixTo: [/\.vue$/],
 						allowTsInNodeModules: true,
 						compilerOptions: {
-                        declaration: false
+							declaration: false,
 						},
 						getCustomTransformers: (program) => ({
-                        before: [
+							before: [require('@nativescript/webpack/transformers/ns-transform-native-classes').default],
-                            require("@nativescript/webpack/transformers/ns-transform-native-classes").default
+						}),
-                        ]
-                    })
 					},
 				},
 				{
 					test: /\.vue$/,
-                loader: "vue-loader",
+					loader: 'vue-loader',
 					options: {
 						compiler: NsVueTemplateCompiler,
 					},
@@ -289,26 +281,20 @@ module.exports = env => {
 			new VueLoaderPlugin(),
 			// Define useful constants like TNS_WEBPACK
 			new webpack.DefinePlugin({
-                "global.TNS_WEBPACK": "true",
+				'global.TNS_WEBPACK': 'true',
-                "global.isAndroid": platform === 'android',
+				'global.isAndroid': platform === 'android',
-                "global.isIOS": platform === 'ios',
+				'global.isIOS': platform === 'ios',
-                "TNS_ENV": JSON.stringify(mode),
+				TNS_ENV: JSON.stringify(mode),
-                "process": "global.process"
+				process: 'global.process',
 			}),
 			// Remove all files from the out dir.
 			new CleanWebpackPlugin({
 				cleanOnceBeforeBuildPatterns: itemsToClean,
-              verbose: !!verbose
+				verbose: !!verbose,
 			}),
 			// Copy assets
-            new CopyWebpackPlugin({
+			new CopyWebpackPlugin([{ from: { glob: 'assets/**', dot: false } }, { from: { glob: 'fonts/**', dot: false } }, { from: { glob: '**/*.jpg', dot: false } }, { from: { glob: '**/*.png', dot: false } }], copyIgnore),
-              patterns: [
+			new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'),
-                { from: 'assets/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
-                { from: 'fonts/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
-                { from: '**/*.+(jpg|png)', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } }
-              ],
-            }),
-            new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
 			// For instructions on how to set up workers with webpack
 			// check out https://github.com/nativescript/worker-loader
 			new NativeScriptWorkerPlugin(),
@@ -317,7 +303,7 @@ module.exports = env => {
 				platforms,
 			}),
 			// Does IPC communication with the {N} CLI to notify events when running in watch mode.
-            new nsWebpack.WatchStateLoggerPlugin()
+			new nsWebpack.WatchStateLoggerPlugin(),
 		],
 	};
 
@@ -325,40 +311,42 @@ module.exports = env => {
 		config.module.rules.push(
 			{
 				test: /-page\.js$/,
-                use: "@nativescript/webpack/helpers/script-hot-loader"
+				use: '@nativescript/webpack/helpers/script-hot-loader',
 			},
 			{
 				test: /\.(html|xml)$/,
-                use: "@nativescript/webpack/helpers/markup-hot-loader"
+				use: '@nativescript/webpack/helpers/markup-hot-loader',
 			},
 
-            { test: /\.(html|xml)$/, use: "@nativescript/webpack/helpers/xml-namespace-loader" }
+			{ test: /\.(html|xml)$/, use: '@nativescript/webpack/helpers/xml-namespace-loader' }
 		);
 	}
 
 	if (report) {
 		// Generate report files for bundles content
-        config.plugins.push(new BundleAnalyzerPlugin({
+		config.plugins.push(
-            analyzerMode: "static",
+			new BundleAnalyzerPlugin({
+				analyzerMode: 'static',
 				openAnalyzer: false,
 				generateStatsFile: true,
-            reportFilename: resolve(projectRoot, "report", `report.html`),
+				reportFilename: resolve(projectRoot, 'report', `report.html`),
-            statsFilename: resolve(projectRoot, "report", `stats.json`),
+				statsFilename: resolve(projectRoot, 'report', `stats.json`),
-        }));
+			})
+		);
 	}
 
 	if (snapshot) {
-        config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
+		config.plugins.push(
-            chunk: "vendor",
+			new nsWebpack.NativeScriptSnapshotPlugin({
-            requireModules: [
+				chunk: 'vendor',
-                "@nativescript/core/bundle-entry-points",
+				requireModules: ['@nativescript/core/bundle-entry-points'],
-            ],
 				projectRoot,
 				webpackConfig: config,
 				snapshotInDocker,
 				skipSnapshotTools,
-            useLibs
+				useLibs,
-        }));
+			})
+		);
 	}
 
 	if (hmr) {