feat: add Vue bundling support (#676)

* added webpack vue support

Author: vtrifonov

apply-css-loader.js

@@ -0,0 +1,18 @@
+module.exports = function(content) {
+    if (this.request.match(/\/app\.(css|scss|less|sass)$/)) {
+        return content;
+    }
+    content += `
+    const application = require("tns-core-modules/application");
+    require("tns-core-modules/ui/styling/style-scope");
+
+    exports.forEach(cssExport => {
+        if (cssExport.length > 1 && cssExport[1]) {
+            // applying the second item of the export as it contains the css contents
+            application.addCss(cssExport[1]);
+        }
+    });
+    `;
+
+    return content;
+}

projectFilesManager.js

@@ -1,7 +1,7 @@
 const path = require("path");
 const fs = require("fs");
 
-const { isTypeScript, isAngular } = require("./projectHelpers");
+const { isTypeScript, isAngular, isVue } = require("./projectHelpers");
 
 function addProjectFiles(projectDir) {
     const projectTemplates = getProjectTemplates(projectDir);
@@ -34,7 +34,7 @@ function compareProjectFiles(projectDir) {
             const newTemplate = fs.readFileSync(newTemplatePath).toString();
             if (newTemplate !== currentTemplate) {
                 const message = `The current project contains a ${path.basename(currentTemplatePath)} file located at ${currentTemplatePath} that differs from the one in the new version of the nativescript-dev-webpack plugin located at ${newTemplatePath}. Some of the plugin features may not work as expected until you manually update the ${path.basename(currentTemplatePath)} file or automatically update it using "./node_modules/.bin/update-ns-webpack --configs" command.`;
-                console.info(`\x1B[33;1m${message}\x1B[0m` );
+                console.info(`\x1B[33;1m${message}\x1B[0m`);
             }
         }
     });
@@ -61,9 +61,11 @@ function getProjectTemplates(projectDir) {
     const TSCONFIG_TNS_NAME = "tsconfig.tns.json";
 
     let templates;
-    if (isAngular({projectDir})) {
+    if (isAngular({ projectDir })) {
         templates = getAngularTemplates(WEBPACK_CONFIG_NAME, TSCONFIG_TNS_NAME);
-    } else if (isTypeScript({projectDir})) {
+    } else if (isVue({ projectDir })) {
+        templates = getVueTemplates(WEBPACK_CONFIG_NAME);
+    } else if (isTypeScript({ projectDir })) {
         templates = getTypeScriptTemplates(WEBPACK_CONFIG_NAME, TSCONFIG_TNS_NAME);
     } else {
         templates = getJavaScriptTemplates(WEBPACK_CONFIG_NAME);
@@ -86,6 +88,12 @@ function getTypeScriptTemplates(webpackConfigName, tsconfigName) {
     };
 }
 
+function getVueTemplates(webpackConfigName) {
+    return {
+        "webpack.vue.js": webpackConfigName
+    };
+}
+
 function getJavaScriptTemplates(webpackConfigName) {
     return {
         "webpack.javascript.js": webpackConfigName,
@@ -114,4 +122,4 @@ module.exports = {
     removeProjectFiles,
     forceUpdateProjectFiles,
     compareProjectFiles,
-};
+};

projectHelpers.js

@@ -15,9 +15,9 @@ const isTypeScript = ({ projectDir, packageJson } = {}) => {
         packageJson.dependencies &&
         packageJson.dependencies.hasOwnProperty("typescript")
     ) || (
-            packageJson.devDependencies &&
-            packageJson.devDependencies.hasOwnProperty("typescript")
-        ) || isAngular({ packageJson });
+        packageJson.devDependencies &&
+        packageJson.devDependencies.hasOwnProperty("typescript")
+    ) || isAngular({ packageJson });
 };
 
 const isAngular = ({ projectDir, packageJson } = {}) => {
@@ -27,6 +27,13 @@ const isAngular = ({ projectDir, packageJson } = {}) => {
         .some(dependency => /^@angular\b/.test(dependency));
 };
 
+const isVue = ({ projectDir, packageJson } = {}) => {
+    packageJson = packageJson || getPackageJson(projectDir);
+
+    return packageJson.dependencies && Object.keys(packageJson.dependencies)
+        .some(dependency => dependency === "nativescript-vue");
+};
+
 const getPackageJson = projectDir => {
     const packageJsonPath = getPackageJsonPath(projectDir);
     return JSON.parse(readFileSync(packageJsonPath, "utf8"));
@@ -84,7 +91,8 @@ module.exports = {
     isAndroid,
     isIos,
     isAngular,
+    isVue,
     isTypeScript,
     writePackageJson,
     convertSlashesInPath
-};
+};

templates/webpack.vue.js

@@ -3,7 +3,6 @@ const { relative, resolve, sep } = require("path");
 const webpack = require("webpack");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 
@@ -47,6 +46,10 @@ module.exports = env => {
             hmr, // --env.hmr
     } = env;
 
+    const externals = (env.externals || []).map((e) => { // --env.externals
+        return new RegExp(e + ".*");
+    });
+
     const mode = production ? "production" : "development"
 
     const appFullPath = resolve(projectRoot, appPath);
@@ -59,6 +62,7 @@ module.exports = env => {
     const config = {
         mode: mode,
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,
@@ -162,28 +166,19 @@ module.exports = env => {
                         },
                     ].filter(loader => Boolean(loader)),
                 },
-
-                // TODO: Removed the rule once https://github.com/vuejs/vue-hot-reload-api/pull/70 is accepted
-                {
-                    test: /vue-hot-reload-api\/dist\/index\.js$/,
-                    use: "../vue-hot-reload-api-patcher"
-                },
-
                 {
                     test: /\.css$/,
                     use: [
                         'nativescript-dev-webpack/style-hot-loader',
-                        'css-hot-loader',
-                        MiniCssExtractPlugin.loader,
+                        'nativescript-dev-webpack/apply-css-loader.js',
                         { loader: "css-loader", options: { minimize: false, url: false } },
                     ],
                 },
                 {
                     test: /\.scss$/,
                     use: [
                         'nativescript-dev-webpack/style-hot-loader',
-                        'css-hot-loader',
-                        MiniCssExtractPlugin.loader,
+                        'nativescript-dev-webpack/apply-css-loader.js',
                         { loader: "css-loader", options: { minimize: false, url: false } },
                         "sass-loader",
                     ],
@@ -203,9 +198,6 @@ module.exports = env => {
         },
         plugins: [
             // ... Vue Loader plugin omitted
-            new MiniCssExtractPlugin({
-                filename: `app.${platform}.css`,
-            }),
             // make sure to include the plugin!
             new VueLoaderPlugin(),
             // Define useful constants like TNS_WEBPACK
@@ -271,4 +263,4 @@ module.exports = env => {
     }
 
     return config;
-};
+};