Merge pull request #9766 from nextcloud/vue-build-tests

Add vue apps build tests

.drone.yml

@@ -14,6 +14,20 @@ pipeline:
     when:
       matrix:
         TESTS: jsunit
+  vue-build-settings:
+    image: node
+    commands:
+     - ./build/vue-builds.sh ./settings/js/main.js
+    when:
+      matrix:
+        TESTS: vue-builds
+  vue-build-updatenotification:
+    image: node
+    commands:
+     - ./build/vue-builds.sh ./apps/updatenotification/js/merged.js
+    when:
+      matrix:
+        TESTS: vue-builds
   checkers:
     image: nextcloudci/php7.0:php7.0-19
     commands:
@@ -662,6 +676,7 @@ pipeline:
 matrix:
   include:
     - TESTS: checkers
+    - TESTS: vue-builds
     - TESTS: nodb-codecov
       ENABLE_REDIS: true
     - TESTS: db-codecov

.gitignore

@@ -32,8 +32,8 @@
 !/apps/admin_audit
 !/apps/updatenotification
 /apps/updatenotification/build
-/apps/updatenotification/js/merged.js
-/apps/updatenotification/js/merged.js.map
+#/apps/updatenotification/js/merged.js
+#/apps/updatenotification/js/merged.js.map
 /apps/updatenotification/js/*.hot-update.*
 /apps/updatenotification/node_modules
 !/apps/theming

apps/updatenotification/Makefile

@@ -3,14 +3,15 @@ app_name=updatenotification
 project_dir=$(CURDIR)/../$(app_name)
 build_dir=$(CURDIR)/build
 source_dir=$(build_dir)/$(app_name)
-sign_dir=$(build_dir)/sign
 
-all: package
+all: dev-setup build-js-production
 
-dev-setup: clean npm-update build-js
+dev-setup: clean clean-dev npm-init
+
+npm-init:
+	npm install
 
 npm-update:
-	rm -rf node_modules
 	npm update
 
 build-js:
@@ -19,9 +20,17 @@ build-js:
 build-js-production:
 	npm run build
 
+watch-js:
+	npm run watch
+
 clean:
+	rm -f js/merged.js
+	rm -f js/merged.js.map
 	rm -rf $(build_dir)
 
+clean-dev:
+	rm -rf node_modules
+
 package: clean build-js-production
 	mkdir -p $(source_dir)
 	rsync -a \

apps/updatenotification/js-src/app.js

@@ -1,54 +0,0 @@
-/**
- * @copyright (c) 2018 Joas Schilling <coding@schilljs.com>
- *
- * @author Joas Schilling <coding@schilljs.com>
- *
- * This file is licensed under the Affero General Public License version 3 or
- * later. See the COPYING file.
- */
-
-/* global $, define */
-
-define(function (require) {
-	"use strict";
-
-	return {
-
-		/** @type {Vue|null} */
-		vm: null,
-
-		/**
-		 * Initialise the app
-		 */
-		initialise: function() {
-			var data = JSON.parse($('#updatenotification').attr('data-json'));
-			var Vue = require('vue');
-			var vSelect = require('vue-select');
-			Vue.component('v-select', vSelect.VueSelect);
-			Vue.mixin({
-				methods: {
-					t: function(app, text, vars, count, options) {
-						return OC.L10N.translate(app, text, vars, count, options);
-					},
-					n: function(app, textSingular, textPlural, count, vars, options) {
-						return OC.L10N.translatePlural(app, textSingular, textPlural, count, vars, options);
-					}
-				}
-			});
-			this.vm = new Vue(require('./components/root.vue'));
-
-			this.vm.newVersionString = data.newVersionString;
-			this.vm.lastCheckedDate = data.lastChecked;
-			this.vm.isUpdateChecked = data.isUpdateChecked;
-			this.vm.updaterEnabled = data.updaterEnabled;
-			this.vm.downloadLink = data.downloadLink;
-			this.vm.isNewVersionAvailable = data.isNewVersionAvailable;
-			this.vm.updateServerURL = data.updateServerURL;
-			this.vm.currentChannel = data.currentChannel;
-			this.vm.channels = data.channels;
-			this.vm.notifyGroups = data.notifyGroups;
-			this.vm.isDefaultUpdateServerURL = data.isDefaultUpdateServerURL;
-			this.vm.versionIsEol = data.versionIsEol;
-		}
-	};
-});

apps/updatenotification/js-src/components/root.vue

@@ -79,11 +79,13 @@
 </template>
 
 <script>
-	export default {
-		name: "root",
-
-		el: '#updatenotification',
+	import vSelect from 'vue-select';
 
+	export default {
+		name: 'root',
+		components: {
+			vSelect,
+		},
 		data: function () {
 			return {
 				newVersionString: '',
@@ -261,7 +263,23 @@
 				this.hideAvailableUpdates = !this.hideAvailableUpdates;
 			}
 		},
-
+		beforeMount: function() {
+			// Parse server data
+			var data = JSON.parse($('#updatenotification').attr('data-json'));
+
+			this.newVersionString = data.newVersionString;
+			this.lastCheckedDate = data.lastChecked;
+			this.isUpdateChecked = data.isUpdateChecked;
+			this.updaterEnabled = data.updaterEnabled;
+			this.downloadLink = data.downloadLink;
+			this.isNewVersionAvailable = data.isNewVersionAvailable;
+			this.updateServerURL = data.updateServerURL;
+			this.currentChannel = data.currentChannel;
+			this.channels = data.channels;
+			this.notifyGroups = data.notifyGroups;
+			this.isDefaultUpdateServerURL = data.isDefaultUpdateServerURL;
+			this.versionIsEol = data.versionIsEol;
+		},
 		mounted: function () {
 			this._$el = $(this.$el);
 			this._$releaseChannel = this._$el.find('#release-channel');
@@ -271,15 +289,12 @@
 			}.bind(this));
 
 			$.ajax({
-				url: OC.generateUrl('/settings/users/groups'),
+				url: OC.linkToOCS('cloud', 2)+ '/groups',
 				dataType: 'json',
 				success: function(data) {
 					var results = [];
-					$.each(data.data.adminGroups, function(i, group) {
-						results.push({value: group.id, label: group.name});
-					});
-					$.each(data.data.groups, function(i, group) {
-						results.push({value: group.id, label: group.name});
+					$.each(data.ocs.data.groups, function(i, group) {
+						results.push({value: group, label: group});
 					});
 
 					this.availableGroups = results;

apps/updatenotification/js-src/init.js

@@ -19,13 +19,22 @@
  */
 
 /* global define, $ */
+import Vue from 'vue';
+import Root from './components/root'
 
-define(function(require) {
-	'use strict';
+Vue.mixin({
+	methods: {
+		t: function(app, text, vars, count, options) {
+			return OC.L10N.translate(app, text, vars, count, options);
+		},
+		n: function(app, textSingular, textPlural, count, vars, options) {
+			return OC.L10N.translatePlural(app, textSingular, textPlural, count, vars, options);
+		}
+	}
+});
+
+const vm = new Vue({
+	render: h => h(Root)
+}).$mount('#updatenotification');
 
-	var App = require('./app');
 
-	$(function() {
-		App.initialise();
-	});
-});

apps/updatenotification/js-src/webpack.common.js

@@ -0,0 +1,28 @@
+const path = require('path')
+const { VueLoaderPlugin } = require('vue-loader');
+
+module.exports = {
+	entry: './js-src/init.js',
+  output: {
+		path: path.resolve(__dirname, '../js'),
+		publicPath: '/',
+		filename: 'merged.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin()
+  ],
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    },
+    extensions: ['*', '.js', '.vue', '.json']
+  }
+}

apps/updatenotification/js-src/webpack.config.js

@@ -1,56 +0,0 @@
-var path = require('path');
-var webpack = require('webpack');
-
-module.exports = {
-	entry: './js-src/init.js',
-	output: {
-		path: path.resolve(__dirname, '../js'),
-		publicPath: '/',
-		filename: 'merged.js'
-	},
-	module: {
-		rules: [
-			{
-				test: /\.vue$/,
-				loader: 'vue-loader',
-				options: {
-					loaders: {
-					},
-					esModule: false
-					// other vue-loader options go here
-				}
-			}
-		]
-	},
-	resolve: {
-		alias: {
-			'vue-select': 'vue-select/dist/vue-select.js',
-			'vue': process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
-		}
-	},
-	performance: {
-		hints: false
-	},
-	devtool: '#eval-source-map'
-};
-
-if (process.env.NODE_ENV === 'production') {
-	module.exports.devtool = '#source-map';
-	// http://vue-loader.vuejs.org/en/workflow/production.html
-	module.exports.plugins = (module.exports.plugins || []).concat([
-		new webpack.DefinePlugin({
-			'process.env': {
-				NODE_ENV: '"production"'
-			}
-		}),
-		new webpack.optimize.UglifyJsPlugin({
-			sourceMap: true,
-			compress: {
-				warnings: false
-			}
-		}),
-		new webpack.LoaderOptionsPlugin({
-			minimize: true
-		})
-	]);
-}

apps/updatenotification/js-src/webpack.dev.js

@@ -0,0 +1,12 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true,
+    overlay: true
+  },
+  devtool: '#eval-source-map',
+})

apps/updatenotification/js-src/webpack.prod.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: '#source-map'
+})

apps/updatenotification/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notifications",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "This app provides a backend and frontend for the notification API available in Nextcloud.",
   "main": "init.js",
   "directories": {
@@ -8,8 +8,9 @@
     "test": "tests"
   },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack --progress --hot --config js-src/webpack.config.js --watch",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config js-src/webpack.config.js",
+    "dev": "webpack --config js-src/webpack.dev.js",
+    "watch": "webpack --progress --watch --config js-src/webpack.dev.js",
+    "build": "webpack --progress --hide-modules --config js-src/webpack.prod.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -27,11 +28,12 @@
     "vue-select": "^2.4.0"
   },
   "devDependencies": {
-    "cross-env": "^5.1.6",
     "css-loader": "^0.28.11",
-    "file-loader": "^1.1.6",
-    "vue-loader": "^13.7.0",
+    "file-loader": "^1.1.11",
+    "vue-loader": "^15.2.4",
     "vue-template-compiler": "^2.5.16",
-    "webpack": "^3.6.0"
+    "webpack": "^4.11.1",
+    "webpack-cli": "^3.0.3",
+    "webpack-merge": "^4.1.2"
   }
 }

build/vue-builds.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+
+declare -a apps=("./settings/js/main.js" "./apps/updatenotification/js/merged.js")
+root=$(pwd)
+entryFile=$1
+
+if [ ! -f "$entryFile" ]
+then
+	echo "The build file $entryFile does not exists"
+	exit 2
+else
+	backupFile="$entryFile.orig"
+	path=$(dirname "$entryFile")
+
+	# Backup original file
+	echo "Backing up $entryFile to $backupFile"
+	cp $entryFile $backupFile
+
+	# Make the app
+	set -e
+	cd "$path/../"
+	make
+
+	# Reset
+	cd $root
+
+	# Compare build files
+	echo "Comparing $entryFile to the original"
+	if ! diff -q $entryFile $backupFile &>/dev/null
+	then
+		echo "$entryFile build is NOT up-to-date! Please send the proper production build within the pull request"
+		cat $HOME/.npm/_logs/*.log
+		exit 2
+	else
+		echo "$entryFile build is up-to-date"
+	fi
+fi

settings/package.json

@@ -34,10 +34,10 @@
     "babel-preset-stage-3": "^6.24.1",
     "css-loader": "^0.28.11",
     "file-loader": "^1.1.11",
-    "vue-loader": "^14.2.2",
+    "vue-loader": "^15.2.4",
     "vue-template-compiler": "^2.5.16",
-    "webpack": "^4.8.3",
-    "webpack-cli": "^2.1.4",
+    "webpack": "^4.11.1",
+    "webpack-cli": "^3.0.2",
     "webpack-merge": "^4.1.2"
   }
 }

settings/webpack.common.js

@@ -1,10 +1,11 @@
 const path = require('path')
+const { VueLoaderPlugin } = require('vue-loader');
 
 module.exports = {
   entry: './src/main.js',
   output: {
     path: path.resolve(__dirname, './js'),
-    publicPath: '/dist/',
+    publicPath: '/',
     filename: 'main.js'
   },
   module: {
@@ -12,39 +13,30 @@ module.exports = {
       {
         test: /\.css$/,
         use: [
-          'vue-style-loader',
           'css-loader'
         ],
       },
       {
         test: /\.scss$/,
         use: [
-          'vue-style-loader',
-          'css-loader',
+					'css-loader',
+					'sass-loader'
         ],
       },
       {
         test: /\.vue$/,
         loader: 'vue-loader',
-        options: {
-          loaders: {}
-          // other vue-loader options go here
-        }
       },
       {
         test: /\.js$/,
         loader: 'babel-loader',
         exclude: /node_modules/
       },
-      {
-        test: /\.(png|jpg|gif|svg)$/,
-        loader: 'file-loader',
-        options: {
-          name: '[name].[ext]?[hash]'
-        }
-      }
     ]
   },
+  plugins: [
+    new VueLoaderPlugin()
+  ],
   resolve: {
     alias: {
       'vue$': 'vue/dist/vue.esm.js'