From 24f4f84eb68112ffad87a39851f4470241a2e2e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Mon, 22 Jan 2018 14:19:02 +0100 Subject: [PATCH 1/4] Move to webpack MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- .gitignore | 2 + Makefile | 8 +- js/.bowerrc | 3 - js/Gruntfile.js | 124 ------------------------ js/app/App.js | 19 ++-- js/app/Config.js | 11 ++- js/app/Run.js | 1 + js/bower.json | 29 ------ js/controller/AppController.js | 6 +- js/controller/BoardController.js | 1 + js/controller/CardController.js | 3 +- js/controller/ListController.js | 5 +- js/directive/appPopoverMenuUtils.js | 1 + js/directive/appnavigationentryutils.js | 1 + js/directive/autofocusoninsert.js | 1 + js/directive/avatar.js | 1 + js/directive/contactsmenudelete.js | 1 + js/directive/datepicker.js | 1 + js/directive/elastic.js | 1 + js/directive/search.js | 1 + js/directive/timepicker.js | 1 + js/filters/boardFilterAcl.js | 1 + js/filters/cardFilter.js | 1 + js/filters/cardSearchFilter.js | 1 + js/filters/dateFilters.js | 1 + js/filters/iconWhiteFilter.js | 1 + js/filters/lightenColorFilter.js | 1 + js/filters/orderObjectBy.js | 1 + js/filters/textColorFilter.js | 1 + js/filters/withoutAssignedUsers.js | 1 + js/init.js | 25 +++++ js/package.json | 29 ++++-- js/service/ApiService.js | 1 + js/service/BoardService.js | 2 +- js/service/CardService.js | 1 + js/service/LabelService.js | 1 + js/service/StackService.js | 1 + js/service/StatusService.js | 1 + js/webpack.config.js | 54 +++++++++++ js/webpack.dev.config.js | 6 ++ js/webpack.prod.config.js | 13 +++ krankerl.toml | 4 + templates/main.php | 34 +------ 43 files changed, 184 insertions(+), 218 deletions(-) delete mode 100644 js/.bowerrc delete mode 100644 js/Gruntfile.js delete mode 100644 js/bower.json create mode 100644 js/init.js create mode 100644 js/webpack.config.js create mode 100644 js/webpack.dev.config.js create mode 100644 js/webpack.prod.config.js diff --git a/.gitignore b/.gitignore index 61bb0314a..b4f3abf8f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,11 @@ js/node_modules/* js/vendor/ js/public/ +js/build/ js/package-lock.json build/ css/style.css +css/vendor.css tests/integration/vendor/ tests/integration/composer.lock vendor/ diff --git a/Makefile b/Makefile index e398722f7..680fb2b77 100644 --- a/Makefile +++ b/Makefile @@ -19,19 +19,17 @@ clean-build: clean-dist: rm -rf js/node_modules - rm -rf js/vendor install-deps: - cd js && npm install --deps - cd js && ./node_modules/.bin/bower install + cd js && npm install build: build-js build-js: install-deps - cd js && ./node_modules/.bin/grunt build + cd js && ./node_modules/.bin/webpack --config webpack.prod.config.js watch: - cd js && ./node_modules/.bin/grunt watch + cd js && ./node_modules/.bin/webpack --config webpack.dev.config.js --watch # appstore: clean install-deps appstore: clean-build build diff --git a/js/.bowerrc b/js/.bowerrc deleted file mode 100644 index 8f98a0360..000000000 --- a/js/.bowerrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "directory": "vendor" -} diff --git a/js/Gruntfile.js b/js/Gruntfile.js deleted file mode 100644 index bb9034ef0..000000000 --- a/js/Gruntfile.js +++ /dev/null @@ -1,124 +0,0 @@ -/* - * @copyright Copyright (c) 2016 Julius Härtl - * - * @author Julius Härtl - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - */ - -/* global module */ - -module.exports = function(grunt) { - 'use strict'; - - grunt.loadNpmTasks('grunt-contrib-concat'); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.loadNpmTasks('grunt-wrap'); - grunt.loadNpmTasks('grunt-karma'); - grunt.loadNpmTasks('grunt-phpunit'); - - grunt.initConfig({ - - meta: { - pkg: grunt.file.readJSON('package.json'), - version: '<%= meta.pkg.version %>', - configJS: 'config/', - buildJS: [ - 'app/**/*.js', - 'controller/**/*.js', - 'filters/**/*.js', - 'directive/**/*.js', - 'service/**/*.js' - ], - productionJS: 'public/', - testsJS: '../tests/js/' - }, - - concat: { - options: { - stripBanners: true - }, - dist: { - src: ['<%= meta.buildJS %>'], - dest: '<%= meta.productionJS %>app.js' - } - }, - - wrap: { - app: { - src: ['<%= meta.productionJS %>app.js'], - dest: '<%= meta.productionJS %>app.js', - option: { - wrapper: [ - '(function(angular, $, oc_requesttoken, undefined){\n\n\'use strict\';\n\n', - '\n})(angular, jQuery, oc_requesttoken);' - ] - } - } - }, - - jshint: { - files: [ - 'Gruntfile.js', - '<%= meta.buildJS %>**/*.js', - '<%= meta.testsJS %>**/*.js' - ], - options: { - jshintrc: '.jshintrc', - reporter: require('jshint-stylish') - } - }, - - watch: { - concat: { - files: ['<%=meta.buildJS%>'], - options: { - livereload: true - }, - tasks: ['build'] - } - }, - - phpunit: { - classes: { - dir: '../tests/unit' - }, - options: { - bootstrap: '../tests/bootstrap.php', - colors: true - } - }, - - karma: { - unit: { - configFile: '<%= meta.testsJS %>config/karma.js' - }, - continuous: { - configFile: '<%= meta.testsJS %>config/karma.js', - browsers: ['Firefox'], - singleRun: true, - reporters: ['progress'] - } - }, - }); - - // make tasks available under simpler commands - grunt.registerTask('build', ['jshint', 'concat', 'wrap']); - grunt.registerTask('js-unit', ['karma:continuous']); - -}; diff --git a/js/app/App.js b/js/app/App.js index f5d0afc4f..f973bfef8 100644 --- a/js/app/App.js +++ b/js/app/App.js @@ -41,13 +41,18 @@ angular.module('markdown', []) }; }]); +import uirouter from '@uirouter/angularjs'; +import ngsanitize from 'angular-sanitize'; +import angularuiselect from 'ui-select'; +import ngsortable from 'ng-sortable'; +import md from 'angular-markdown-it'; +import nganimate from 'angular-animate'; + var app = angular.module('Deck', [ - 'ngRoute', - 'ngSanitize', - 'ui.router', - 'ui.select', - 'as.sortable', - 'mdMarkdownIt', - 'ngAnimate' + ngsanitize, + uirouter, + angularuiselect, + ngsortable, md, nganimate ]); +export default app; diff --git a/js/app/Config.js b/js/app/Config.js index 78178e727..8f3c7fa3d 100644 --- a/js/app/Config.js +++ b/js/app/Config.js @@ -22,18 +22,21 @@ /* global app oc_requesttoken markdownitLinkTarget */ -app.config(function ($provide, $routeProvider, $interpolateProvider, $httpProvider, $urlRouterProvider, $stateProvider, $compileProvider, markdownItConverterProvider) { +import app from './App.js'; +import md from 'angular-markdown-it'; +import markdownitLinkTarget from 'markdown-it-link-target'; + +app.config(function ($provide, $interpolateProvider, $httpProvider, $urlRouterProvider, $stateProvider, $compileProvider, markdownItConverterProvider) { 'use strict'; $httpProvider.defaults.headers.common.requesttoken = oc_requesttoken; $compileProvider.debugInfoEnabled(true); - markdownItConverterProvider.config({ + markdownItConverterProvider.use(markdownitLinkTarget, { breaks: true, linkify: true, xhtmlOut: true }); - markdownItConverterProvider.use(markdownitLinkTarget); $urlRouterProvider.otherwise('/'); @@ -77,4 +80,4 @@ app.config(function ($provide, $routeProvider, $interpolateProvider, $httpProvid } }); -}); \ No newline at end of file +}); diff --git a/js/app/Run.js b/js/app/Run.js index 87e342475..4a7377a44 100644 --- a/js/app/Run.js +++ b/js/app/Run.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from './App.js'; /* global Snap */ app.run(function ($document, $rootScope, $transitions, BoardService) { diff --git a/js/bower.json b/js/bower.json deleted file mode 100644 index d728e90e8..000000000 --- a/js/bower.json +++ /dev/null @@ -1,29 +0,0 @@ -{ - "name": "deck", - "version": "0.0.1", - "dependencies": { - "angular": "~1.6.1", - "angular-route": "~1.6.1", - "angular-mocks": "~1.6.1", - "angular-sanitize": "~1.6.1", - "angular-animate": "~1.6.1", - "ng-sortable": "1.3.8", - "jquery": "3.2.x", - "es6-shim": "~0.*", - "js-url": "~2.*", - "angular-ui-select": "~0.19.6", - "angular-markdown-it": "~0.6.1", - "angular-ui-router": "~1.0.0", - "markdown-it-link-target": "~1.0.1", - "jquery-timepicker": "883bb2cd94" - }, - "license": "AGPL-3.0", - "private": true, - "ignore": [ - "'**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ] -} diff --git a/js/controller/AppController.js b/js/controller/AppController.js index 235c152a6..742e40f15 100644 --- a/js/controller/AppController.js +++ b/js/controller/AppController.js @@ -20,11 +20,13 @@ * */ +import app from '../app/App.js'; + /** global: OC */ -app.controller('AppController', function ($scope, $location, $http, $route, $log, $rootScope) { +app.controller('AppController', function ($scope, $location, $http, $log, $rootScope) { $rootScope.sidebar = { show: false }; $scope.sidebar = $rootScope.sidebar; $scope.user = oc_current_user; -}); \ No newline at end of file +}); diff --git a/js/controller/BoardController.js b/js/controller/BoardController.js index e3d4f91ec..657d742e3 100644 --- a/js/controller/BoardController.js +++ b/js/controller/BoardController.js @@ -20,6 +20,7 @@ * */ +import app from '../app/App.js'; /* global oc_defaults OC */ app.controller('BoardController', function ($rootScope, $scope, $stateParams, StatusService, BoardService, StackService, CardService, LabelService, $state, $transitions, $filter) { diff --git a/js/controller/CardController.js b/js/controller/CardController.js index 0a7e9a5d7..3845d3344 100644 --- a/js/controller/CardController.js +++ b/js/controller/CardController.js @@ -21,6 +21,7 @@ */ /* global app moment */ +import app from '../app/App.js'; app.controller('CardController', function ($scope, $rootScope, $routeParams, $location, $stateParams, $interval, $timeout, $filter, BoardService, CardService, StackService, StatusService) { $scope.sidebar = $rootScope.sidebar; @@ -184,4 +185,4 @@ app.controller('CardController', function ($scope, $rootScope, $routeParams, $lo }; }; -}); \ No newline at end of file +}); diff --git a/js/controller/ListController.js b/js/controller/ListController.js index a1e42c1e6..f3c0baefd 100644 --- a/js/controller/ListController.js +++ b/js/controller/ListController.js @@ -22,7 +22,7 @@ /* global app angular */ -app.controller('ListController', function ($scope, $location, $filter, BoardService, $element, $timeout, $stateParams, $state, StatusService) { +var ListController = function ($scope, $location, $filter, BoardService, $element, $timeout, $stateParams, $state, StatusService) { function calculateNewColor() { var boards = BoardService.getAll(); @@ -193,5 +193,6 @@ app.controller('ListController', function ($scope, $location, $filter, BoardServ }); }; -}); +}; +export default ListController; diff --git a/js/directive/appPopoverMenuUtils.js b/js/directive/appPopoverMenuUtils.js index 09ffc1c19..37b495919 100644 --- a/js/directive/appPopoverMenuUtils.js +++ b/js/directive/appPopoverMenuUtils.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.directive('appPopoverMenuUtils', function () { 'use strict'; diff --git a/js/directive/appnavigationentryutils.js b/js/directive/appnavigationentryutils.js index 2a44a17c8..ca9d39557 100644 --- a/js/directive/appnavigationentryutils.js +++ b/js/directive/appnavigationentryutils.js @@ -20,6 +20,7 @@ * */ +import app from '../app/App.js'; // OwnCloud Click Handling // https://doc.owncloud.org/server/8.0/developer_manual/app/css.html app.directive('appNavigationEntryUtils', function () { diff --git a/js/directive/autofocusoninsert.js b/js/directive/autofocusoninsert.js index 3b9113d8c..20aedd299 100644 --- a/js/directive/autofocusoninsert.js +++ b/js/directive/autofocusoninsert.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.directive('autofocusOnInsert', function () { 'use strict'; diff --git a/js/directive/avatar.js b/js/directive/avatar.js index 6138a1c1f..79cd41a85 100644 --- a/js/directive/avatar.js +++ b/js/directive/avatar.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.directive('avatar', function() { 'use strict'; diff --git a/js/directive/contactsmenudelete.js b/js/directive/contactsmenudelete.js index b0041b46c..dca0c4bf9 100644 --- a/js/directive/contactsmenudelete.js +++ b/js/directive/contactsmenudelete.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.directive('contactsmenudelete', function() { 'use strict'; diff --git a/js/directive/datepicker.js b/js/directive/datepicker.js index d7024b0a5..1cf19256b 100644 --- a/js/directive/datepicker.js +++ b/js/directive/datepicker.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; /* global app */ /* gloabl t */ diff --git a/js/directive/elastic.js b/js/directive/elastic.js index 19f90cf92..4c3b63a23 100644 --- a/js/directive/elastic.js +++ b/js/directive/elastic.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; // original idea from blockloop: http://stackoverflow.com/a/24090733 app.directive('elastic', [ diff --git a/js/directive/search.js b/js/directive/search.js index c358d7229..5562434bc 100644 --- a/js/directive/search.js +++ b/js/directive/search.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.directive('search', function ($document, $location) { 'use strict'; diff --git a/js/directive/timepicker.js b/js/directive/timepicker.js index 4852a19a5..9c22c9589 100644 --- a/js/directive/timepicker.js +++ b/js/directive/timepicker.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; /* global app */ /* global t */ diff --git a/js/filters/boardFilterAcl.js b/js/filters/boardFilterAcl.js index ceab7be3d..bbb3cf481 100644 --- a/js/filters/boardFilterAcl.js +++ b/js/filters/boardFilterAcl.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.filter('boardFilterAcl', function() { return function(boards) { diff --git a/js/filters/cardFilter.js b/js/filters/cardFilter.js index 6ed63d132..d8be5e5c1 100644 --- a/js/filters/cardFilter.js +++ b/js/filters/cardFilter.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; // usage | cardFilter({ member: 'admin'}) diff --git a/js/filters/cardSearchFilter.js b/js/filters/cardSearchFilter.js index 7556dd5c3..3c8edf13b 100644 --- a/js/filters/cardSearchFilter.js +++ b/js/filters/cardSearchFilter.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.filter('cardSearchFilter', function() { return function(cards, searchString) { diff --git a/js/filters/dateFilters.js b/js/filters/dateFilters.js index 9b32b3fb0..3121c4d50 100644 --- a/js/filters/dateFilters.js +++ b/js/filters/dateFilters.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; /* global app */ /* global OC */ diff --git a/js/filters/iconWhiteFilter.js b/js/filters/iconWhiteFilter.js index 127601d3b..678eea7c9 100644 --- a/js/filters/iconWhiteFilter.js +++ b/js/filters/iconWhiteFilter.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.filter('iconWhiteFilter', function () { return function (hex) { diff --git a/js/filters/lightenColorFilter.js b/js/filters/lightenColorFilter.js index f5cc2aff0..c5e433e2f 100644 --- a/js/filters/lightenColorFilter.js +++ b/js/filters/lightenColorFilter.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.filter('lightenColorFilter', function() { return function (hex) { diff --git a/js/filters/orderObjectBy.js b/js/filters/orderObjectBy.js index a6ebee97e..151b6a1b8 100644 --- a/js/filters/orderObjectBy.js +++ b/js/filters/orderObjectBy.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.filter('orderObjectBy', function(){ return function(input, attribute) { diff --git a/js/filters/textColorFilter.js b/js/filters/textColorFilter.js index b19e625b8..2ac218a8f 100644 --- a/js/filters/textColorFilter.js +++ b/js/filters/textColorFilter.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.filter('textColorFilter', function () { return function (hex) { diff --git a/js/filters/withoutAssignedUsers.js b/js/filters/withoutAssignedUsers.js index ac8056242..49a51de9e 100644 --- a/js/filters/withoutAssignedUsers.js +++ b/js/filters/withoutAssignedUsers.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; /* global app */ /* global angular */ diff --git a/js/init.js b/js/init.js new file mode 100644 index 000000000..027a01d1a --- /dev/null +++ b/js/init.js @@ -0,0 +1,25 @@ +'use strict'; + +// used for building a vendor stylesheet +import 'jquery-timepicker/jquery.timepicker.css'; +import 'ng-sortable/dist/ng-sortable.css'; + + +import angular from 'angular'; + +import app from './app/App.js'; +import './app/Config.js'; +import './app/Run.js'; + + +import ListController from 'controller/ListController.js'; +app.controller('ListController', ListController) + + +// require all the js files from subdirectories +var context = require.context(".", true, /(controller|service|filters|directive)\/(.*)\.js$/); + +context.keys().forEach(function (key) { + context(key); +}); + diff --git a/js/package.json b/js/package.json index 5d30f57e1..5a9861863 100644 --- a/js/package.json +++ b/js/package.json @@ -5,19 +5,30 @@ "directories": { "test": "tests" }, - "dependencies": {}, + "dependencies": { + "@uirouter/angularjs": "^1.0.13", + "angular": "^1.6.8", + "angular-animate": "^1.6.8", + "angular-markdown-it": "^0.6.1", + "angular-sanitize": "^1.6.8", + "jquery": "^3.3.1", + "jquery-timepicker": "^1.3.3", + "markdown-it-link-target": "^1.0.2", + "ng-sortable": "^1.3.8", + "ui-select": "^0.19.8" + }, "devDependencies": { + "babel-core": "^6.26.0", + "babel-loader": "^7.1.2", "bower": "^1.8.0", - "grunt": "^1.0.1", - "grunt-contrib-concat": "^1.0.1", - "grunt-contrib-jshint": "^1.1.0", - "grunt-contrib-watch": "^1.0.0", - "grunt-karma": "^2.0.0", - "grunt-phpunit": "^0.3.6", - "grunt-wrap": "^0.3.0", + "css-loader": "^0.28.9", + "extract-text-webpack-plugin": "^3.0.2", "jshint-stylish": "^2.2.1", "karma": "^1.4.1", - "node-sass": "^4.5.3" + "node-sass": "^4.5.3", + "style-loader": "^0.19.1", + "webpack": "^3.10.0", + "webpack-merge": "^4.1.1" }, "scripts": { "test": "echo \"Warning: no test specified\" && exit 0" diff --git a/js/service/ApiService.js b/js/service/ApiService.js index 1ffaad41a..a2a2da21a 100644 --- a/js/service/ApiService.js +++ b/js/service/ApiService.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; /** global: oc_defaults */ app.factory('ApiService', function ($http, $q) { diff --git a/js/service/BoardService.js b/js/service/BoardService.js index 5192a593e..ba66a69fe 100644 --- a/js/service/BoardService.js +++ b/js/service/BoardService.js @@ -19,7 +19,7 @@ * along with this program. If not, see . * */ - +import app from '../app/App.js'; /* global app OC */ app.factory('BoardService', function (ApiService, $http, $q) { var BoardService = function ($http, ep, $q) { diff --git a/js/service/CardService.js b/js/service/CardService.js index 64997ba9f..fc33e8e06 100644 --- a/js/service/CardService.js +++ b/js/service/CardService.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.factory('CardService', function (ApiService, $http, $q) { var CardService = function ($http, ep, $q) { diff --git a/js/service/LabelService.js b/js/service/LabelService.js index 2d788fcc3..2b6d8175c 100644 --- a/js/service/LabelService.js +++ b/js/service/LabelService.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.factory('LabelService', function (ApiService, $http, $q) { var LabelService = function ($http, ep, $q) { diff --git a/js/service/StackService.js b/js/service/StackService.js index 7f78fcae9..41a8600ed 100644 --- a/js/service/StackService.js +++ b/js/service/StackService.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.factory('StackService', function (ApiService, $http, $q) { var StackService = function ($http, ep, $q) { diff --git a/js/service/StatusService.js b/js/service/StatusService.js index 45ad9d7b7..58a0a7c4f 100644 --- a/js/service/StatusService.js +++ b/js/service/StatusService.js @@ -19,6 +19,7 @@ * along with this program. If not, see . * */ +import app from '../app/App.js'; app.factory('StatusService', function () { // Status Helper diff --git a/js/webpack.config.js b/js/webpack.config.js new file mode 100644 index 000000000..8409a8ab0 --- /dev/null +++ b/js/webpack.config.js @@ -0,0 +1,54 @@ +const path = require('path'); +const webpack = require('webpack'); +const ExtractTextPlugin = require("extract-text-webpack-plugin"); + +module.exports = { + entry: { + deck: './init.js', + }, + output: { + filename: '[name].js', + path: __dirname + '/build' + }, + resolve: { + modules: [path.resolve(__dirname), 'node_modules'], + }, + module: { + loaders: [ + { + test: /\.js$/, + exclude: /node_modules/, + loader: 'babel-loader', + }, + { + test: /\.css$/, + use: ExtractTextPlugin.extract({ + use: { + loader: 'css-loader', + options: { + minimize: true, + } + }, + }) + } + ] + }, + plugins: [ + new webpack.optimize.UglifyJsPlugin({ + test: /(vendor\.js)+/i, + }), + // we do not uglify deck.js since there are no proper dependency annotations + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + filename: 'vendor.js', + minChunks(module, count) { + var context = module.context; + return context && context.indexOf('node_modules') >= 0; + }, + }), + new ExtractTextPlugin({ + filename: "../../css/vendor.css", + allChunks: true + }), + ] +}; diff --git a/js/webpack.dev.config.js b/js/webpack.dev.config.js new file mode 100644 index 000000000..2ee62dc5d --- /dev/null +++ b/js/webpack.dev.config.js @@ -0,0 +1,6 @@ +const merge = require('webpack-merge'); +const baseConfig = require('./webpack.config.js'); + +module.exports = merge(baseConfig, { + devtool: 'eval' +}); diff --git a/js/webpack.prod.config.js b/js/webpack.prod.config.js new file mode 100644 index 000000000..4dfd52663 --- /dev/null +++ b/js/webpack.prod.config.js @@ -0,0 +1,13 @@ +const webpack = require('webpack'); +const merge = require('webpack-merge'); +const baseConfig = require('./webpack.config.js'); + +module.exports = merge(baseConfig, { + plugins: [ + new webpack.DefinePlugin({ + 'process.env': { + 'NODE_ENV': JSON.stringify('production') + } + }), + ] +}); diff --git a/krankerl.toml b/krankerl.toml index 7db33c698..f6ebf8253 100644 --- a/krankerl.toml +++ b/krankerl.toml @@ -4,6 +4,10 @@ exclude = [ ".git", "js/node_modules", "js/tests", + "js/controller", + "js/directive", + "js/filters", + "js/service", "js/bower.json", "js/.bowerrc", "js/.jshintrc", diff --git a/templates/main.php b/templates/main.php index 36f7e0a4b..f90116fcb 100644 --- a/templates/main.php +++ b/templates/main.php @@ -23,39 +23,11 @@ use OCP\Util; -Util::addStyle('deck', '../js/vendor/ng-sortable/dist/ng-sortable.min'); -Util::addStyle('deck', '../js/vendor/jquery-timepicker/jquery.ui.timepicker'); +Util::addStyle('deck', 'vendor'); Util::addStyle('deck', 'style'); -Util::addScript('deck', 'vendor/angular/angular.min'); -Util::addScript('deck', 'vendor/angular-route/angular-route.min'); -Util::addScript('deck', 'vendor/angular-sanitize/angular-sanitize.min'); -Util::addScript('deck', 'vendor/angular-animate/angular-animate.min'); -Util::addScript('deck', 'vendor/angular-ui-router/release/angular-ui-router.min'); -Util::addScript('deck', 'vendor/ng-sortable/dist/ng-sortable.min'); -Util::addScript('deck', 'vendor/angular-ui-select/dist/select.min'); -Util::addScript('deck', 'vendor/markdown-it/dist/markdown-it.min'); -Util::addScript('deck', 'vendor/angular-markdown-it/dist/ng-markdownit.min'); -Util::addScript('deck', 'vendor/markdown-it-link-target/dist/markdown-it-link-target.min'); -Util::addScript('deck', 'vendor/jquery-timepicker/jquery.ui.timepicker'); - -if(!\OC::$server->getConfig()->getSystemValue('debug', false)) { - Util::addScript('deck', 'public/app'); -} else { - // Load seperate JS files when debug mode is enabled - $js = [ - 'app' => ['App', 'Config', 'Run'], - 'controller' => ['AppController', 'BoardController', 'CardController', 'ListController'], - 'directive' => ['appnavigationentryutils', 'appPopoverMenuUtils', 'autofocusoninsert', 'avatar', 'contactsmenudelete', 'elastic', 'search', 'datepicker', 'timepicker'], - 'filters' => ['boardFilterAcl', 'cardFilter', 'cardSearchFilter', 'iconWhiteFilter', 'lightenColorFilter', 'orderObjectBy', 'dateFilters', 'textColorFilter', 'withoutAssignedUsers'], - 'service' => ['ApiService', 'BoardService', 'CardService', 'LabelService', 'StackService', 'StatusService'], - ]; - foreach($js as $folder=>$files) { - foreach ($files as $file) { - Util::addScript('deck', $folder.'/'.$file); - } - } -} +Util::addScript('deck', 'build/vendor'); +Util::addScript('deck', 'build/deck'); ?>
From 4f0c05f536b12c1e921d80341a9768738156b05b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 11 Apr 2018 11:44:19 +0200 Subject: [PATCH 2/4] Fix js build in drone MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- .drone.yml | 4 +--- .eslintrc.yml | 4 +++- run-eslint.sh | 4 +++- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/.drone.yml b/.drone.yml index 7b2d85c51..339ff95bf 100644 --- a/.drone.yml +++ b/.drone.yml @@ -186,9 +186,7 @@ pipeline: image: mhart/alpine-node:6.8.0 commands: - apk add --no-cache git - - cd js - - npm install --deps - - ./node_modules/.bin/bower --allow-root install + - make build-js when: matrix: TESTS: jsbuild diff --git a/.eslintrc.yml b/.eslintrc.yml index a4503b9d8..9674cba54 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -1,6 +1,5 @@ root: true - extends: - eslint:recommended @@ -21,6 +20,9 @@ globals: Clipboard: false oc_defaults: false +parserOptions: + ecmaVersion: 6 + rules: curly: error eqeqeq: ["error", "smart"] diff --git a/run-eslint.sh b/run-eslint.sh index 25804a1ba..536a3ebfc 100755 --- a/run-eslint.sh +++ b/run-eslint.sh @@ -8,9 +8,11 @@ if [ -z "$ESLINT" ]; then fi echo Checking scripts with $ESLINT ... -find -name "*.js" -not -path '*js/node_modules*' \ +find -name "*.js" -path '*js/*' -not -path '*js/node_modules*' \ -not -path '*l10n/*' \ -not -path '*js/vendor*' \ -not -path '*js/tests*' \ -not -path '*js/public*' \ + -not -path '*build/*' \ + -not -path '*tests/*' \ -print0 | xargs -0 $ESLINT From 2cd5606d40dd5c6b59958953b7e5bf383ee83ee2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 11 Apr 2018 12:57:31 +0200 Subject: [PATCH 3/4] Fix jsbuild MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- .drone.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.drone.yml b/.drone.yml index 339ff95bf..17e85bb40 100644 --- a/.drone.yml +++ b/.drone.yml @@ -185,7 +185,7 @@ pipeline: jsbuild: image: mhart/alpine-node:6.8.0 commands: - - apk add --no-cache git + - apk add --no-cache make - make build-js when: matrix: From 6f254510c12333369fa48dc32fc457ec6d222ba2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 11 Apr 2018 13:00:22 +0200 Subject: [PATCH 4/4] Fix eslint errors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- .eslintrc.yml | 1 + js/app/App.js | 8 ++-- js/init.js | 4 +- js/webpack.config.js | 96 ++++++++++++++++++++++---------------------- run-eslint.sh | 1 + 5 files changed, 56 insertions(+), 54 deletions(-) diff --git a/.eslintrc.yml b/.eslintrc.yml index 9674cba54..33498aa63 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -22,6 +22,7 @@ globals: parserOptions: ecmaVersion: 6 + sourceType: "module" rules: curly: error diff --git a/js/app/App.js b/js/app/App.js index f973bfef8..1ac6305c6 100644 --- a/js/app/App.js +++ b/js/app/App.js @@ -49,10 +49,10 @@ import md from 'angular-markdown-it'; import nganimate from 'angular-animate'; var app = angular.module('Deck', [ - ngsanitize, - uirouter, - angularuiselect, - ngsortable, md, nganimate + ngsanitize, + uirouter, + angularuiselect, + ngsortable, md, nganimate ]); export default app; diff --git a/js/init.js b/js/init.js index 027a01d1a..e0ac154ba 100644 --- a/js/init.js +++ b/js/init.js @@ -13,13 +13,13 @@ import './app/Run.js'; import ListController from 'controller/ListController.js'; -app.controller('ListController', ListController) +app.controller('ListController', ListController); // require all the js files from subdirectories var context = require.context(".", true, /(controller|service|filters|directive)\/(.*)\.js$/); context.keys().forEach(function (key) { - context(key); + context(key); }); diff --git a/js/webpack.config.js b/js/webpack.config.js index 8409a8ab0..84495f207 100644 --- a/js/webpack.config.js +++ b/js/webpack.config.js @@ -3,52 +3,52 @@ const webpack = require('webpack'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { - entry: { - deck: './init.js', - }, - output: { - filename: '[name].js', - path: __dirname + '/build' - }, - resolve: { - modules: [path.resolve(__dirname), 'node_modules'], - }, - module: { - loaders: [ - { - test: /\.js$/, - exclude: /node_modules/, - loader: 'babel-loader', - }, - { - test: /\.css$/, - use: ExtractTextPlugin.extract({ - use: { - loader: 'css-loader', - options: { - minimize: true, - } - }, - }) - } - ] - }, - plugins: [ - new webpack.optimize.UglifyJsPlugin({ - test: /(vendor\.js)+/i, - }), - // we do not uglify deck.js since there are no proper dependency annotations - new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - filename: 'vendor.js', - minChunks(module, count) { - var context = module.context; - return context && context.indexOf('node_modules') >= 0; - }, - }), - new ExtractTextPlugin({ - filename: "../../css/vendor.css", - allChunks: true - }), - ] + entry: { + deck: './init.js', + }, + output: { + filename: '[name].js', + path: __dirname + '/build' + }, + resolve: { + modules: [path.resolve(__dirname), 'node_modules'], + }, + module: { + loaders: [ + { + test: /\.js$/, + exclude: /node_modules/, + loader: 'babel-loader', + }, + { + test: /\.css$/, + use: ExtractTextPlugin.extract({ + use: { + loader: 'css-loader', + options: { + minimize: true, + } + }, + }) + } + ] + }, + plugins: [ + new webpack.optimize.UglifyJsPlugin({ + test: /(vendor\.js)+/i, + }), + // we do not uglify deck.js since there are no proper dependency annotations + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + filename: 'vendor.js', + minChunks(module, count) { + var context = module.context; + return context && context.indexOf('node_modules') >= 0; + }, + }), + new ExtractTextPlugin({ + filename: "../../css/vendor.css", + allChunks: true + }), + ] }; diff --git a/run-eslint.sh b/run-eslint.sh index 536a3ebfc..18f757737 100755 --- a/run-eslint.sh +++ b/run-eslint.sh @@ -12,6 +12,7 @@ find -name "*.js" -path '*js/*' -not -path '*js/node_modules*' \ -not -path '*l10n/*' \ -not -path '*js/vendor*' \ -not -path '*js/tests*' \ + -not -path '*js/webpack*' \ -not -path '*js/public*' \ -not -path '*build/*' \ -not -path '*tests/*' \