before update 2

.migration_backup/_backup.json

@@ -0,0 +1,12 @@
+{
+	"name": "migration",
+	"paths": [
+		"hooks",
+		"webpack.config.js",
+		"package.json",
+		"package-lock.json",
+		"app/package.json",
+		"package.json",
+		"app/package.json"
+	]
+}

.migration_backup/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "ns",
+  "version": "1.0.0",
+  "description": "A native application built with NativeScript-Vue",
+  "author": "Vishnu Raghav B <design@vishnuraghav.com>",
+  "license": "GPL",
+  "nativescript": {
+    "id": "com.vishnuraghav.enrecipes",
+    "templateVersion": "v2",
+    "tns-android": {
+      "version": "6.5.0"
+    },
+    "tns-ios": {
+      "version": "6.5.0"
+    }
+  },
+  "scripts": {
+    "run": "tns run"
+  },
+  "dependencies": {
+    "@nativescript/theme": "^2.2.1",
+    "nativescript-camera": "^4.5.0",
+    "nativescript-couchbase-plugin": "^0.9.6",
+    "nativescript-datetimepicker": "^1.2.3",
+    "nativescript-mediafilepicker": "^4.0.0",
+    "nativescript-permissions": "^1.3.9",
+    "nativescript-toast": "^2.0.0",
+    "nativescript-ui-listview": "^8.2.0",
+    "nativescript-ui-sidedrawer": "^8.0.1",
+    "nativescript-vue": "^2.6.1",
+    "tns-core-modules": "^6.5.1",
+    "vuex": "^3.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@types/node": "^14.0.27",
+    "babel-loader": "^8.1.0",
+    "nativescript-dev-webpack": "^1.5.1",
+    "nativescript-vue-template-compiler": "^2.6.0",
+    "nativescript-worker-loader": "~0.11.0",
+    "node-sass": "^4.13.1",
+    "vue-loader": "^15.9.1"
+  }
+}

.migration_backup/webpack.config.js

@@ -0,0 +1,353 @@
+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-dev-webpack");
+const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
+const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
+const hashSalt = Date.now().toString();
+
+module.exports = env => {
+    // Add your custom Activities, Services and other android app components here.
+    const appComponents = env.appComponents || [];
+    appComponents.push(...[
+        "tns-core-modules/ui/frame",
+        "tns-core-modules/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!");
+    }
+
+    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
+        verbose, // --env.verbose
+        snapshotInDocker, // --env.snapshotInDocker
+        skipSnapshotTools, // --env.skipSnapshotTools
+        compileSnapshot // --env.compileSnapshot
+    } = 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['~'] = appFullPath;
+    alias['@'] = appFullPath;
+    alias['vue'] = 'nativescript-vue';
+
+    if (hasRootLevelScopedModules) {
+        coreModulesPackageName = "@nativescript/core";
+        alias["tns-core-modules"] = coreModulesPackageName;
+    }
+
+    const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
+
+    const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
+    const entryPath = `.${sep}${entryModule}`;
+    const entries = env.entries || {};
+    entries.bundle = entryPath;
+
+    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
+    if (platform === "ios" && !areCoreModulesExternal) {
+        entries["tns_modules/tns-core-modules/inspector_modules"] = "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")}`);
+    }
+
+    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 tns-core-modules
+            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: true,
+                    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",
+                        },
+                        keep_fnames: true,
+                    },
+                }),
+            ],
+        },
+        module: {
+            rules: [{
+                include: [join(appFullPath, entryPath + ".js"), join(appFullPath, entryPath + ".ts")],
+                use: [
+                    // Require all Android app components
+                    platform === "android" && {
+                        loader: "nativescript-dev-webpack/android-app-components-loader",
+                        options: { modules: appComponents },
+                    },
+
+                    {
+                        loader: "nativescript-dev-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-dev-webpack/style-hot-loader',
+                    {
+                        loader: "nativescript-dev-webpack/css2json-loader",
+                        options: { useForImports: true }
+                    },
+                ],
+            },
+            {
+                test: /[\/|\\]app\.scss$/,
+                use: [
+                    'nativescript-dev-webpack/style-hot-loader',
+                    {
+                        loader: "nativescript-dev-webpack/css2json-loader",
+                        options: { useForImports: true }
+                    },
+                    'sass-loader',
+                ],
+            },
+            {
+                test: /\.css$/,
+                exclude: /[\/|\\]app\.css$/,
+                use: [
+                    'nativescript-dev-webpack/style-hot-loader',
+                    'nativescript-dev-webpack/apply-css-loader.js',
+                    { loader: "css-loader", options: { url: false } },
+                ],
+            },
+            {
+                test: /\.scss$/,
+                exclude: /[\/|\\]app\.scss$/,
+                use: [
+                    'nativescript-dev-webpack/style-hot-loader',
+                    'nativescript-dev-webpack/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
+                    }
+                },
+            },
+            {
+                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",
+                "TNS_ENV": JSON.stringify(mode),
+                "process": "global.process"
+            }),
+            // Remove all files from the out dir.
+            new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
+            // Copy assets to out dir. Add your own globs as needed.
+            new CopyWebpackPlugin([
+                { from: { glob: "fonts/**" } },
+                { from: { glob: "**/*.+(jpg|png)" } },
+                { from: { glob: "assets/**/*" } },
+            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
+            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-dev-webpack/script-hot-loader"
+            },
+            {
+                test: /\.(html|xml)$/,
+                use: "nativescript-dev-webpack/markup-hot-loader"
+            },
+
+            { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/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: [
+                "tns-core-modules/bundle-entry-points",
+            ],
+            projectRoot,
+            webpackConfig: config,
+            snapshotInDocker,
+            skipSnapshotTools,
+            useLibs
+        }));
+    }
+
+    if (hmr) {
+        config.plugins.push(new webpack.HotModuleReplacementPlugin());
+    }
+
+    return config;
+};

.update_backup/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "ns",
+  "version": "1.0.0",
+  "description": "A native application built with NativeScript-Vue",
+  "author": "Vishnu Raghav B <design@vishnuraghav.com>",
+  "license": "GPL",
+  "scripts": {
+    "run": "ns run android"
+  },
+  "dependencies": {
+    "@nativescript/theme": "^2.2.1",
+    "nativescript-camera": "^4.5.0",
+    "nativescript-couchbase-plugin": "^0.9.6",
+    "nativescript-datetimepicker": "^1.2.3",
+    "nativescript-mediafilepicker": "^4.0.0",
+    "nativescript-permissions": "^1.3.9",
+    "nativescript-toast": "^2.0.0",
+    "nativescript-ui-listview": "^8.2.0",
+    "nativescript-ui-sidedrawer": "^8.0.1",
+    "nativescript-vue": "^2.6.1",
+    "vuex": "^3.3.0",
+    "@nativescript/core": "7.0.0",
+    "@nativescript/webpack": "3.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@nativescript/android": "7.0.1",
+    "@types/node": "^14.0.27",
+    "babel-loader": "^8.1.0",
+    "nativescript-vue-template-compiler": "^2.6.0",
+    "node-sass": "^4.13.1",
+    "vue-loader": "^15.9.1"
+  },
+  "main": "main"
+}

.update_backup/webpack.config.js

@@ -0,0 +1,369 @@
+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 => {
+    // Add your custom Activities, Services and other android app components here.
+    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!");
+    }
+
+    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
+        snapshotInDocker, // --env.snapshotInDocker
+        skipSnapshotTools, // --env.skipSnapshotTools
+        compileSnapshot // --env.compileSnapshot
+    } = 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}`;
+    const entries = env.entries || {};
+    entries.bundle = entryPath;
+
+    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1);
+    if (platform === "ios" && !areCoreModulesExternal && !testing) {
+        entries["tns_modules/@nativescript/core/inspector_modules"] = "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")}`);
+    }
+
+    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: true,
+                    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",
+                        },
+                        keep_fnames: 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({
+              patterns: [
+                { 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(),
+            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;
+};

nativescript.config.ts

@@ -0,0 +1,11 @@
+import { NativeScriptConfig } from '@nativescript/core'
+
+export default {
+  id: 'com.vishnuraghav.enrecipes',
+  appResourcesPath: 'app/App_Resources',
+  android: {
+    v8Flags: '--expose_gc',
+    markingMode: 'none',
+  },
+  appPath: 'app',
+} as NativeScriptConfig

package.json

@@ -4,20 +4,11 @@
   "description": "A native application built with NativeScript-Vue",
   "author": "Vishnu Raghav B <design@vishnuraghav.com>",
   "license": "GPL",
-  "nativescript": {
-    "id": "com.vishnuraghav.enrecipes",
-    "templateVersion": "v2",
-    "tns-android": {
-      "version": "6.5.0"
-    },
-    "tns-ios": {
-      "version": "6.5.0"
-    }
-  },
   "scripts": {
-    "run": "tns run"
+    "run": "ns run android"
   },
   "dependencies": {
+    "@nativescript/core": "~7.0.0",
     "@nativescript/theme": "^2.2.1",
     "nativescript-camera": "^4.5.0",
     "nativescript-couchbase-plugin": "^0.9.6",
@@ -28,18 +19,20 @@
     "nativescript-ui-listview": "^8.2.0",
     "nativescript-ui-sidedrawer": "^8.0.1",
     "nativescript-vue": "^2.6.1",
-    "tns-core-modules": "^6.5.1",
+    "tns-core-modules": "^6.5.20",
     "vuex": "^3.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
+    "@nativescript/android": "7.0.1",
+    "@nativescript/webpack": "~3.0.0",
     "@types/node": "^14.0.27",
     "babel-loader": "^8.1.0",
     "nativescript-dev-webpack": "^1.5.1",
     "nativescript-vue-template-compiler": "^2.6.0",
-    "nativescript-worker-loader": "~0.11.0",
     "node-sass": "^4.13.1",
     "vue-loader": "^15.9.1"
-  }
+  },
+  "main": "main"
 }

webpack.config.js

@@ -1,7 +1,7 @@
 const { join, relative, resolve, sep } = require("path");
 
 const webpack = require("webpack");
-const CleanWebpackPlugin = require("clean-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const TerserPlugin = require("terser-webpack-plugin");
@@ -9,8 +9,8 @@ const TerserPlugin = require("terser-webpack-plugin");
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const NsVueTemplateCompiler = require("nativescript-vue-template-compiler");
 
-const nsWebpack = require("nativescript-dev-webpack");
+const nsWebpack = require("@nativescript/webpack");
-const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
+const nativescriptTarget = require("@nativescript/webpack/nativescript-target");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const hashSalt = Date.now().toString();
 
@@ -18,8 +18,8 @@ module.exports = env => {
     // Add your custom Activities, Services and other android app components here.
     const appComponents = env.appComponents || [];
     appComponents.push(...[
-        "tns-core-modules/ui/frame",
+        "@nativescript/core/ui/frame",
-        "tns-core-modules/ui/frame/activity",
+        "@nativescript/core/ui/frame/activity",
     ]);
 
     const platform = env && (env.android && "android" || env.ios && "ios" || env.platform);
@@ -51,6 +51,7 @@ module.exports = env => {
         sourceMap, // --env.sourceMap
         hiddenSourceMap, // --env.hiddenSourceMap
         unitTesting, // --env.unitTesting
+        testing, // --env.testing
         verbose, // --env.verbose
         snapshotInDocker, // --env.snapshotInDocker
         skipSnapshotTools, // --env.skipSnapshotTools
@@ -67,6 +68,7 @@ module.exports = env => {
     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';
@@ -78,14 +80,16 @@ module.exports = env => {
 
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
 
+    const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] };
+
     const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
     const entryPath = `.${sep}${entryModule}`;
     const entries = env.entries || {};
     entries.bundle = entryPath;
 
-    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
+    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1);
-    if (platform === "ios" && !areCoreModulesExternal) {
+    if (platform === "ios" && !areCoreModulesExternal && !testing) {
-        entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
+        entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules";
     };
     console.log(`Bundling application for entryPath ${entryPath}...`);
 
@@ -123,7 +127,7 @@ module.exports = env => {
         },
         resolve: {
             extensions: [".vue", ".ts", ".js", ".scss", ".css"],
-            // Resolve {N} system modules from tns-core-modules
+            // Resolve {N} system modules from @nativescript/core
             modules: [
                 resolve(__dirname, `node_modules/${coreModulesPackageName}`),
                 resolve(__dirname, "node_modules"),
@@ -193,12 +197,12 @@ module.exports = env => {
                 use: [
                     // Require all Android app components
                     platform === "android" && {
-                        loader: "nativescript-dev-webpack/android-app-components-loader",
+                        loader: "@nativescript/webpack/helpers/android-app-components-loader",
                         options: { modules: appComponents },
                     },
 
                     {
-                        loader: "nativescript-dev-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
@@ -213,9 +217,9 @@ module.exports = env => {
             {
                 test: /[\/|\\]app\.css$/,
                 use: [
-                    'nativescript-dev-webpack/style-hot-loader',
+                    '@nativescript/webpack/helpers/style-hot-loader',
                     {
-                        loader: "nativescript-dev-webpack/css2json-loader",
+                        loader: "@nativescript/webpack/helpers/css2json-loader",
                         options: { useForImports: true }
                     },
                 ],
@@ -223,9 +227,9 @@ module.exports = env => {
             {
                 test: /[\/|\\]app\.scss$/,
                 use: [
-                    'nativescript-dev-webpack/style-hot-loader',
+                    '@nativescript/webpack/helpers/style-hot-loader',
                     {
-                        loader: "nativescript-dev-webpack/css2json-loader",
+                        loader: "@nativescript/webpack/helpers/css2json-loader",
                         options: { useForImports: true }
                     },
                     'sass-loader',
@@ -235,8 +239,8 @@ module.exports = env => {
                 test: /\.css$/,
                 exclude: /[\/|\\]app\.css$/,
                 use: [
-                    'nativescript-dev-webpack/style-hot-loader',
+                    '@nativescript/webpack/helpers/style-hot-loader',
-                    'nativescript-dev-webpack/apply-css-loader.js',
+                    '@nativescript/webpack/helpers/apply-css-loader.js',
                     { loader: "css-loader", options: { url: false } },
                 ],
             },
@@ -244,8 +248,8 @@ module.exports = env => {
                 test: /\.scss$/,
                 exclude: /[\/|\\]app\.scss$/,
                 use: [
-                    'nativescript-dev-webpack/style-hot-loader',
+                    '@nativescript/webpack/helpers/style-hot-loader',
-                    'nativescript-dev-webpack/apply-css-loader.js',
+                    '@nativescript/webpack/helpers/apply-css-loader.js',
                     { loader: "css-loader", options: { url: false } },
                     'sass-loader',
                 ],
@@ -262,7 +266,12 @@ module.exports = env => {
                     allowTsInNodeModules: true,
                     compilerOptions: {
                         declaration: false
-                    }
+                    },
+                    getCustomTransformers: (program) => ({
+                        before: [
+                            require("@nativescript/webpack/transformers/ns-transform-native-classes").default
+                        ]
+                    })
                 },
             },
             {
@@ -281,17 +290,24 @@ module.exports = env => {
             // 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(itemsToClean, { verbose: !!verbose }),
+            new CleanWebpackPlugin({ 
-            // Copy assets to out dir. Add your own globs as needed.
+              cleanOnceBeforeBuildPatterns: itemsToClean,
-            new CopyWebpackPlugin([
+              verbose: !!verbose
-                { from: { glob: "fonts/**" } },
+            }),
-                { from: { glob: "**/*.+(jpg|png)" } },
+            // Copy assets
-                { from: { glob: "assets/**/*" } },
+            new CopyWebpackPlugin({
-            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
+              patterns: [
+                { 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
@@ -309,14 +325,14 @@ module.exports = env => {
         config.module.rules.push(
             {
                 test: /-page\.js$/,
-                use: "nativescript-dev-webpack/script-hot-loader"
+                use: "@nativescript/webpack/helpers/script-hot-loader"
             },
             {
                 test: /\.(html|xml)$/,
-                use: "nativescript-dev-webpack/markup-hot-loader"
+                use: "@nativescript/webpack/helpers/markup-hot-loader"
             },
 
-            { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" }
+            { test: /\.(html|xml)$/, use: "@nativescript/webpack/helpers/xml-namespace-loader" }
         );
     }
 
@@ -335,7 +351,7 @@ module.exports = env => {
         config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
             chunk: "vendor",
             requireModules: [
-                "tns-core-modules/bundle-entry-points",
+                "@nativescript/core/bundle-entry-points",
             ],
             projectRoot,
             webpackConfig: config,