test build

app/components/modal/ActionDialog.vue

@@ -46,15 +46,34 @@
   </Page>
 </template>
 
-<script>
+<script lang="ts">
 import { Screen } from "@nativescript/core";
 import { localize } from "@nativescript/localize";
 import { mapState, mapActions } from "vuex";
 import ConfirmDialog from "./ConfirmDialog.vue";
 
+interface IData {
+  newList: unknown[];
+  stretch: boolean;
+  listHeight: number;
+}
+
 export default {
-  props: ["title", "list", "action"],
+  props: {
-  data() {
+    title: {
+      type: String,
+      required: true,
+    },
+    list: {
+      type: Array,
+      required: true,
+    },
+    action: {
+      type: String,
+      required: false,
+    },
+  },
+  data(): IData {
     return {
       newList: this.list,
       stretch: false,
@@ -66,14 +85,13 @@ export default {
   },
   methods: {
     ...mapActions(["removeListItemAction"]),
-    localized(item) {
+    localized(item: string): string {
-      if (this.title !== "lang") return localize(item);
+      return this.title !== "lang" ? localize(item) : item;
-      else return item;
     },
-    tapAction(item) {
+    tapAction(item: string): void {
       this.$modal.close(item);
     },
-    deletionConfirmation(type, description) {
+    deletionConfirmation(description: string): void {
       return this.$showModal(ConfirmDialog, {
         props: {
           title: "conf",
@@ -83,14 +101,12 @@ export default {
         },
       });
     },
-    removeItem(item) {
+    removeItem(item: string): void {
       let vm = this;
-
+      function removeListItem(listName: string, desc: string): void {
-      function removeListItem(type, listName, desc) {
         vm.deletionConfirmation(
-          type,
           `${localize(desc)} "${localize(item)}"\n\n${localize("rmLIInfo")}`
-        ).then((action) => {
+        ).then((action: boolean) => {
           if (action != null && action)
             vm.removeListItemAction({
               item,
@@ -100,20 +116,20 @@ export default {
       }
       switch (this.title) {
         case "cui":
-          removeListItem("cuisine", "cuisines", "rmCuiInfo");
+          removeListItem("cuisines", "rmCuiInfo");
           break;
         case "cat":
-          removeListItem("category", "categories", "rmCatInfo");
+          removeListItem("categories", "rmCatInfo");
           break;
         case "yieldU":
-          removeListItem("yield unit", "yieldUnits", "rmYUInfo");
+          removeListItem("yieldUnits", "rmYUInfo");
           break;
         case "Unit":
-          removeListItem("unit", "units", "rmUInfo");
+          removeListItem("units", "rmUInfo");
           break;
       }
     },
-    touch({ object, action }) {
+    touch({ object, action }): void {
       object.className = action.match(/down|move/)
         ? "listItem fade"
         : "listItem";

app/components/modal/ConfirmDialog.vue

@@ -31,10 +31,27 @@
   </Page>
 </template>
 
-<script>
+<script lang="ts">
 import { mapState } from "vuex";
 export default {
-  props: ["title", "description", "cancelButtonText", "okButtonText"],
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    cancelButtonText: {
+      type: String,
+      required: true,
+    },
+    okButtonText: {
+      type: String,
+      required: true,
+    },
+  },
   computed: {
     ...mapState(["icon", "appTheme"]),
   },

app/main.ts

@@ -9,7 +9,7 @@ on(launchEvent, (args) => {
   }
 })
 import Vue from 'nativescript-vue'
-import EnRecipes from './components/EnRecipes'
+import EnRecipes from './components/EnRecipes.vue'
 import store from './store'
 
 import CollectionView from '@nativescript-community/ui-collectionview/vue'

app/store.ts

@@ -1,13 +1,8 @@
-import Vue from 'vue'
+import Vue from 'nativescript-vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 import { CouchBase } from '@triniwiz/nativescript-couchbase'
-import {
+import { getFileAccess, File, ApplicationSettings } from '@nativescript/core'
-  Application,
-  getFileAccess,
-  File,
-  ApplicationSettings,
-} from '@nativescript/core'
 const EnRecipesDB = new CouchBase('EnRecipes')
 const userCuisinesDB = new CouchBase('userCuisines')
 const userCategoriesDB = new CouchBase('userCategories')

package-lock.json

@@ -27,7 +27,8 @@
         "@types/node": "^14.14.37",
         "nativescript-vue-template-compiler": "~2.9.0",
         "sass": "^1.32.8",
-        "typescript": "^4.2.4"
+        "typescript": "^4.2.4",
+        "vue": "^2.6.12"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1843,9 +1844,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.3.715",
+      "version": "1.3.716",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.715.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.716.tgz",
-      "integrity": "sha512-VCWxo9RqTYhcCsHtG+l0TEOS6H5QmO1JyVCQB9nv8fllmAzj1VcCYH3qBCXP75/En6FeoepefnogLPE+5W7OiQ==",
+      "integrity": "sha512-yUWKAfpJH5ovgwIlNbBHioedAWolzTVl6tmMaXP1RmCMyYv+U+ukvo9gwA10mLW0eFbyW4n/oC4UIN12gTMn/w==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -2991,8 +2992,7 @@
     "node_modules/nativescript-vue": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/nativescript-vue/-/nativescript-vue-2.9.0.tgz",
-      "integrity": "sha512-bu7ifi/953805c6dwEsiPgkPadEdsCqAZVgqe0ir7kBpdEkiodVuDtEb8F8n9c36ka8zqWw9GBx+STCe19hg2Q==",
+      "integrity": "sha512-bu7ifi/953805c6dwEsiPgkPadEdsCqAZVgqe0ir7kBpdEkiodVuDtEb8F8n9c36ka8zqWw9GBx+STCe19hg2Q=="
-      "license": "MIT"
     },
     "node_modules/nativescript-vue-template-compiler": {
       "version": "2.9.0",
@@ -4303,6 +4303,12 @@
       "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
       "dev": true
     },
+    "node_modules/vue": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
+      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==",
+      "dev": true
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -6235,9 +6241,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.715",
+      "version": "1.3.716",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.715.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.716.tgz",
-      "integrity": "sha512-VCWxo9RqTYhcCsHtG+l0TEOS6H5QmO1JyVCQB9nv8fllmAzj1VcCYH3qBCXP75/En6FeoepefnogLPE+5W7OiQ==",
+      "integrity": "sha512-yUWKAfpJH5ovgwIlNbBHioedAWolzTVl6tmMaXP1RmCMyYv+U+ukvo9gwA10mLW0eFbyW4n/oC4UIN12gTMn/w==",
       "dev": true
     },
     "emoji-regex": {
@@ -8063,6 +8069,12 @@
       "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
       "dev": true
     },
+    "vue": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
+      "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==",
+      "dev": true
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "enrecipes",
-  "main": "./app/main.js",
+  "main": "./app/main.ts",
   "version": "1.0.0",
   "description": "A native application built with NativeScript-Vue",
   "homepage": "https://enrecipes.vercel.app/",
@@ -36,6 +36,7 @@
     "@types/node": "^14.14.37",
     "nativescript-vue-template-compiler": "~2.9.0",
     "sass": "^1.32.8",
-    "typescript": "^4.2.4"
+    "typescript": "^4.2.4",
+    "vue": "^2.6.12"
   }
 }

webpack.config.js

@@ -1,5 +1,4 @@
 const webpack = require('@nativescript/webpack')
-const TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = (env) => {
   webpack.init(env)