test: vue demo N 8

Author: farfromrefug

demo-vue/app.webpack.config.js

@@ -44,7 +44,6 @@ module.exports = (env, params = {}) => {
     const platform = env && ((env.android && 'android') || (env.ios && 'ios'));
     const tsconfig = 'tsconfig.json';
     const projectRoot = params.projectRoot || __dirname;
-    const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
 
     if (!!development) {
@@ -141,12 +140,10 @@ module.exports = (env, params = {}) => {
     // }, {});
     const scssPrepend = `$mdi-fontFamily: ${platform === 'android' ? 'materialdesignicons-webfont' : 'Material Design Icons'};`;
 
-    const css2jsonLoaderRuleIndex = config.module.rules.findIndex(r => r.use && r.use.loader === 'css-loader');
-    const scssLoaderRuleIndex = config.module.rules.findIndex(r => Array.isArray(r.use) && r.use.indexOf('sass-loader') !== -1);
-    config.module.rules.splice(scssLoaderRuleIndex, 1);
+    const scssLoaderRuleIndex = config.module.rules.findIndex((r) => r.test && r.test.toString().indexOf('scss') !== -1);
     config.module.rules.splice(
-        css2jsonLoaderRuleIndex,
-        0,
+        scssLoaderRuleIndex,
+        1,
         {
             test: /\.scss$/,
             exclude: /\.module\.scss$/,
@@ -178,29 +175,6 @@ module.exports = (env, params = {}) => {
             ]
         }
     );
-    const indexOfTsLoaderRule = config.module.rules.findIndex(r => r.loader === 'ts-loader');
-    config.module.rules[indexOfTsLoaderRule].options.transpileOnly = true;
-    // config.module.rules[indexOfTsLoaderRule].use.options.getCustomTransformers = (program) => ({
-    //     before: [nativeClassTransformer],
-    // });
-    // const mjsRule = {
-    //     test: /\.m?js$/,
-    //     use: {
-    //         loader: 'babel-loader',
-    //         options: {
-    //             presets: [
-    //                 [
-    //                     '@babel/preset-env',
-    //                     {
-    //                         useBuiltIns: 'entry',
-    //                         exclude: ['@babel/plugin-transform-regenerator'],
-    //                         modules:'commonjs',
-    //                     },
-    //                 ],
-    //             ],
-    //         },
-    //     },
-    // };
 
     config.module.rules.push({
         // rules to replace mdi icons and not use nativescript-font-icon
@@ -224,38 +198,29 @@ module.exports = (env, params = {}) => {
     });
 
     // // we remove default rules
-    config.plugins = config.plugins.filter(p => ['CopyWebpackPlugin'].indexOf(p.constructor.name) === -1);
+    config.plugins = config.plugins.filter((p) => ['CopyPlugin'].indexOf(p.constructor.name) === -1);
     // we add our rules
-    config.plugins.unshift(
-        new CopyWebpackPlugin([
-                { from: 'fonts/!(ios|android)/**/*', to: 'fonts', flatten: true, noErrorOnMissing: true },
-                { from: 'fonts/*', to: 'fonts', flatten: true, noErrorOnMissing: true },
-                { from: `fonts/${platform}/**/*`, to: 'fonts', flatten: true, noErrorOnMissing: true },
-                {
-                    from: '**/*.+(jpg|png)',
-                    globOptions: {
-                        ignore: [`${relative(appPath, appResourcesFullPath)}/**`]
-                    },
-                    noErrorOnMissing: true
-                },
-                { from: 'assets/**/*', noErrorOnMissing: true },
-                {
-                    from: '../node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf',
-                    to: 'fonts',
-                    noErrorOnMissing: true
-                }
-            ])
-    );
+    const globOptions = { dot: false, ignore: [`**/${relative(appPath, appResourcesFullPath)}/**`] };
+    const context = nsWebpack.Utils.platform.getEntryDirPath();
+    const copyPatterns = [
+        { context, from: 'fonts/!(ios|android)/**/*', to: 'fonts/[name][ext]', noErrorOnMissing: true, globOptions },
+        { context, from: 'fonts/*', to: 'fonts/[name][ext]', noErrorOnMissing: true, globOptions },
+        { context, from: `fonts/${platform}/**/*`, to: 'fonts/[name][ext]', noErrorOnMissing: true, globOptions },
+        { context, from: '**/*.jpg', noErrorOnMissing: true, globOptions },
+        { context, from: '**/*.png', noErrorOnMissing: true, globOptions },
+        { context, from: 'assets/**/*', noErrorOnMissing: true, globOptions },
+        {
+            from: 'node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf',
+            to: 'fonts',
+            globOptions
+        }
+    ];
+    config.plugins.unshift(new CopyWebpackPlugin({ patterns: copyPatterns }));
 
     if (!!production) {
         config.plugins.push(
             new ForkTsCheckerWebpackPlugin({
-                tsconfig: resolve(tsconfig),
-                async: false,
-                useTypescriptIncrementalApi: true,
-                checkSyntacticErrors: true,
-                memoryLimit: 4096,
-                workers: 1
+                tsconfig: resolve(tsconfig)
             })
         );
     }

demo-vue/package.json

@@ -2,10 +2,10 @@
     "description": "NativeScript Material Design Demo for Vue",
     "license": "SEE LICENSE IN LICENSE.md",
     "readme": "README.md",
-    "repository": "http://www.github.com/NativeScript/nativescript-ui-sidedrawer.git",
+    "main": "app/main",
     "dependencies": {
         "@mdi/font": "4.9.95",
-        "@nativescript/core": "8.0.0-alpha.8",
+        "@nativescript/core": "8.0.0",
         "@nativescript-community/text": "1.4.9",
         "@nativescript-community/ui-material-activityindicator": "file:../packages/activityindicator",
         "@nativescript-community/ui-material-bottom-navigation": "file:../packages/bottom-navigation",
@@ -26,17 +26,17 @@
         "@nativescript-community/ui-material-textview": "file:../packages/textview",
         "@nativescript/iqkeyboardmanager": "^2.0.0",
         "@nativescript/theme": "3.0.1",
-        "nativescript-vue": "~2.8.4",
-        "nativescript-vue-template-compiler": "~2.8.4"
+        "nativescript-vue": "~2.9.0",
+        "nativescript-vue-template-compiler": "~2.9.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.13.10",
-        "@nativescript/android": "7.0.1",
-        "@nativescript/types": "7.3.0",
-        "@nativescript/webpack": "4.1.0",
+        "@babel/core": "^7.13.14",
+        "@nativescript/android": "8.0.0",
+        "@nativescript/types": "8.0.0",
+        "@nativescript/webpack": "5.0.0-beta.3",
         "babel-loader": "^8.2.2",
-        "nativescript-vue-template-compiler": "~2.8.4",
-        "sass-loader": "^10.0.2",
+        "nativescript-vue-template-compiler": "~2.9.0",
+        "sass-loader": "^11.0.1",
         "scss-symbols-parser": "^2.0.1",
         "string-replace-loader": "^3.0.1",
         "tns-ios":"6.5.4",
@@ -45,8 +45,8 @@
         "vue-i18n": "^8.24.1",
         "vue-loader": "^15.9.6",
         "vue-property-decorator": "^8.5.1",
-        "webpack": "^4.46.0",
-        "webpack-cli": "^3.3.12"
+        "webpack": "^5.30.0",
+        "webpack-cli": "^4.6.0"
     },
     "scripts": {
         "tslint": "npm i && tslint --config '../tslint.json' 'app/**/*.ts' --exclude '**/node_modules/**'"