diff --git a/.eslintrc.js b/.eslintrc.js index 800f9a4f..3c48baa8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,14 +1,17 @@ module.exports = { root: true, - parser: 'babel-eslint', parserOptions: { + parser: 'babel-eslint', sourceType: 'module' }, // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style - extends: 'standard', + extends: [ + 'standard', + 'plugin:vue/recommended' + ], // required to lint *.vue files plugins: [ - 'html' + 'vue' ], // add your custom rules here rules: { @@ -17,6 +20,7 @@ module.exports = { // allow async-await 'generator-star-spacing': 0, // allow debugger during development - 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 + 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, + 'vue/require-prop-types': 0 } } diff --git a/build/utils.js b/build/utils.js index 5b90db14..3beee774 100644 --- a/build/utils.js +++ b/build/utils.js @@ -1,61 +1,64 @@ var path = require('path') var config = require('../config') -var ExtractTextPlugin = require('extract-text-webpack-plugin') +var sass = require('sass') +var MiniCssExtractPlugin = require('mini-css-extract-plugin') exports.assetsPath = function (_path) { var assetsSubDirectory = process.env.NODE_ENV === 'production' - ? config.build.assetsSubDirectory - : config.dev.assetsSubDirectory + ? config.build.assetsSubDirectory + : config.dev.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path) } exports.cssLoaders = function (options) { options = options || {} - // generate loader string to be used with extract text plugin - function generateLoaders (loaders) { - var sourceLoader = loaders.map(function (loader) { - var extraParamChar - if (/\?/.test(loader)) { - loader = loader.replace(/\?/, '-loader?') - extraParamChar = '&' - } else { - loader = loader + '-loader' - extraParamChar = '?' - } - return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') - }).join('!') + function generateLoaders (loaders) { // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { - return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) + return [MiniCssExtractPlugin.loader].concat(loaders) } else { - return ['vue-style-loader', sourceLoader].join('!') + return ['vue-style-loader'].concat(loaders) } } // http://vuejs.github.io/vue-loader/configurations/extract-css.html - return { - css: generateLoaders(['css']), - postcss: generateLoaders(['css']), - less: generateLoaders(['css', 'less']), - sass: generateLoaders(['css', 'sass?indentedSyntax']), - scss: generateLoaders(['css', 'sass']), - stylus: generateLoaders(['css', 'stylus']), - styl: generateLoaders(['css', 'stylus']) - } + return [ + { + test: /\.(post)?css$/, + use: generateLoaders(['css-loader']), + }, + { + test: /\.less$/, + use: generateLoaders(['css-loader', 'less-loader']), + }, + { + test: /\.sass$/, + use: generateLoaders([ + 'css-loader', + { + loader: 'sass-loader', + options: { + indentedSyntax: true + } + } + ]) + }, + { + test: /\.scss$/, + use: generateLoaders(['css-loader', 'sass-loader']) + }, + { + test: /\.styl(us)?$/, + use: generateLoaders(['css-loader', 'stylus-loader']), + }, + ] } // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function (options) { - var output = [] - var loaders = exports.cssLoaders(options) - for (var extension in loaders) { - var loader = loaders[extension] - output.push({ - test: new RegExp('\\.' + extension + '$'), - loader: loader - }) - } + var output = exports.cssLoaders(options) + console.log(output) return output } diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index e07bb7a2..6f6e785b 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -21,8 +21,10 @@ module.exports = { filename: '[name].js' }, resolve: { - extensions: ['', '.js', '.vue'], - fallback: [path.join(__dirname, '../node_modules')], + extensions: ['.js', '.vue'], + modules: [ + path.join(__dirname, '../node_modules') + ], alias: { 'vue$': 'vue/dist/vue.runtime.common', 'src': path.resolve(__dirname, '../src'), @@ -30,67 +32,53 @@ module.exports = { 'components': path.resolve(__dirname, '../src/components') } }, - resolveLoader: { - fallback: [path.join(__dirname, '../node_modules')] - }, module: { noParse: /node_modules\/localforage\/dist\/localforage.js/, - preLoaders: [ + rules: [ { - test: /\.vue$/, - loader: 'eslint', + enforce: 'pre', + test: /\.(js|vue)$/, include: projectRoot, - exclude: /node_modules/ + exclude: /node_modules/, + use: { + loader: 'eslint-loader', + options: { + formatter: require('eslint-friendly-formatter'), + sourceMap: config.build.productionSourceMap, + extract: true + } + } }, - { - test: /\.js$/, - loader: 'eslint', - include: projectRoot, - exclude: /node_modules/ - } - ], - loaders: [ { test: /\.vue$/, - loader: 'vue' + use: 'vue-loader' }, { test: /\.jsx?$/, - loader: 'babel', include: projectRoot, - exclude: /node_modules\/(?!tributejs)/ - }, - { - test: /\.json$/, - loader: 'json' + exclude: /node_modules\/(?!tributejs)/, + use: 'babel-loader' }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, - loader: 'url', - query: { - limit: 10000, - name: utils.assetsPath('img/[name].[hash:7].[ext]') + use: { + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('img/[name].[hash:7].[ext]') + } } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, - loader: 'url', - query: { - limit: 10000, - name: utils.assetsPath('fonts/[name].[hash:7].[ext]') + use: { + loader: 'url-loader', + options: { + limit: 10000, + name: utils.assetsPath('fonts/[name].[hash:7].[ext]') + } } - } - ] - }, - eslint: { - formatter: require('eslint-friendly-formatter') - }, - vue: { - loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), - postcss: [ - require('autoprefixer')({ - browsers: ['last 2 versions'] - }) + }, ] }, plugins: [ diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index 9f34619c..80b87ae8 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -12,7 +12,7 @@ Object.keys(baseWebpackConfig.entry).forEach(function (name) { module.exports = merge(baseWebpackConfig, { module: { - loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) + rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // eval-source-map is faster for development devtool: '#eval-source-map', @@ -23,9 +23,7 @@ module.exports = merge(baseWebpackConfig, { 'DEV_OVERRIDES': JSON.stringify(config.dev.settings) }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage - new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), - new webpack.NoErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index 9699f221..85ea1bee 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -4,7 +4,7 @@ var utils = require('./utils') var webpack = require('webpack') var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') -var ExtractTextPlugin = require('extract-text-webpack-plugin') +var MiniCssExtractPlugin = require('mini-css-extract-plugin') var HtmlWebpackPlugin = require('html-webpack-plugin') var env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') @@ -13,24 +13,22 @@ var env = process.env.NODE_ENV === 'testing' let commitHash = require('child_process') .execSync('git rev-parse --short HEAD') .toString(); + console.log(commitHash) var webpackConfig = merge(baseWebpackConfig, { module: { - loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) + rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, + optimization: { + minimize: true + }, output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') }, - vue: { - loaders: utils.cssLoaders({ - sourceMap: config.build.productionSourceMap, - extract: true - }) - }, plugins: [ // http://vuejs.github.io/vue-loader/workflow/production.html new webpack.DefinePlugin({ @@ -38,14 +36,10 @@ var webpackConfig = merge(baseWebpackConfig, { 'COMMIT_HASH': JSON.stringify(commitHash), 'DEV_OVERRIDES': JSON.stringify(undefined) }), - new webpack.optimize.UglifyJsPlugin({ - compress: { - warnings: false - } - }), - new webpack.optimize.OccurenceOrderPlugin(), // extract css into its own file - new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), + new MiniCssExtractPlugin({ + filename: utils.assetsPath('css/[name].[contenthash].css') + }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin @@ -67,25 +61,11 @@ var webpackConfig = merge(baseWebpackConfig, { chunksSortMode: 'dependency' }), // split vendor js into its own file - new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - minChunks: function (module, count) { - // any required modules inside node_modules are extracted to vendor - return ( - module.resource && - /\.js$/.test(module.resource) && - module.resource.indexOf( - path.join(__dirname, '../node_modules') - ) === 0 - ) - } - }), // extract webpack runtime and module manifest to its own file in order to // prevent vendor hash from being updated whenever app bundle is updated - new webpack.optimize.CommonsChunkPlugin({ - name: 'manifest', - chunks: ['vendor'] - }) + // new webpack.optimize.SplitChunksPlugin({ + // name: ['app', 'vendor'] + // }), ] }) diff --git a/package.json b/package.json index 03228133..a9024d7e 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "unit:watch": "karma start test/unit/karma.conf.js --single-run=false", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", - "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" + "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs", + "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs" }, "dependencies": { "babel-plugin-add-module-exports": "^0.2.1", @@ -21,11 +22,9 @@ "diff": "^3.0.1", "karma-mocha-reporter": "^2.2.1", "localforage": "^1.5.0", - "node-sass": "^3.10.1", "object-path": "^0.11.3", "phoenix": "^1.3.0", "sanitize-html": "^1.13.0", - "sass-loader": "^4.0.2", "vue": "^2.5.13", "vue-chat-scroll": "^1.2.1", "vue-compose": "^0.7.1", @@ -44,7 +43,7 @@ "babel-core": "^6.0.0", "babel-eslint": "^7.0.0", "babel-helper-vue-jsx-merge-props": "^2.0.3", - "babel-loader": "^6.0.0", + "babel-loader": "^7.0.0", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.0.0", "babel-plugin-transform-vue-jsx": "3", @@ -57,20 +56,21 @@ "chromedriver": "^2.21.2", "connect-history-api-fallback": "^1.1.0", "cross-spawn": "^4.0.2", - "css-loader": "^0.25.0", - "eslint": "^3.7.1", - "eslint-config-standard": "^6.1.0", + "css-loader": "^0.28.0", + "eslint": "^5.16.0", + "eslint-config-standard": "^12.0.0", "eslint-friendly-formatter": "^2.0.5", - "eslint-loader": "^1.5.0", - "eslint-plugin-html": "^1.5.5", - "eslint-plugin-promise": "^2.0.1", - "eslint-plugin-standard": "^2.0.1", + "eslint-loader": "^2.1.0", + "eslint-plugin-import": "^2.13.0", + "eslint-plugin-node": "^7.0.0", + "eslint-plugin-promise": "^4.0.0", + "eslint-plugin-standard": "^4.0.0", + "eslint-plugin-vue": "^5.2.2", "eventsource-polyfill": "^0.9.6", "express": "^4.13.3", - "extract-text-webpack-plugin": "^1.0.1", - "file-loader": "^0.9.0", + "file-loader": "^3.0.1", "function-bind": "^1.0.2", - "html-webpack-plugin": "^2.8.1", + "html-webpack-plugin": "^3.0.0", "http-proxy-middleware": "^0.17.2", "inject-loader": "^2.0.1", "iso-639-1": "^2.0.3", @@ -83,26 +83,29 @@ "karma-sinon-chai": "^1.2.0", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.26", - "karma-webpack": "^1.7.0", + "karma-webpack": "git://github.com/webpack-contrib/karma-webpack.git#v4.0.0-rc.3", "lodash": "^4.16.4", "lolex": "^1.4.0", + "mini-css-extract-plugin": "^0.5.0", "mocha": "^3.1.0", "nightwatch": "^0.9.8", "opn": "^4.0.2", "ora": "^0.3.0", "phantomjs-prebuilt": "^2.1.3", "raw-loader": "^0.5.1", + "sass": "^1.17.3", + "sass-loader": "git://github.com/webpack-contrib/sass-loader", "selenium-server": "2.53.1", "semver": "^5.3.0", - "serviceworker-webpack-plugin": "0.2.3", + "serviceworker-webpack-plugin": "^1.0.0", "shelljs": "^0.7.4", "sinon": "^1.17.3", "sinon-chai": "^2.8.0", - "url-loader": "^0.5.7", - "vue-loader": "^11.1.0", - "vue-style-loader": "^2.0.0", - "webpack": "^1.13.2", - "webpack-dev-middleware": "^1.8.3", + "url-loader": "^1.1.2", + "vue-loader": "^14.0.0", + "vue-style-loader": "^4.0.0", + "webpack": "^4.0.0", + "webpack-dev-middleware": "^3.6.0", "webpack-hot-middleware": "^2.12.2", "webpack-merge": "^0.14.1" }, diff --git a/src/App.vue b/src/App.vue index 3b8623ad..e1f6b4a5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,51 +1,112 @@ diff --git a/src/boot/routes.js b/src/boot/routes.js index 7e54a98b..3538c1e6 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -24,8 +24,8 @@ export default (store) => { path: '/', redirect: _to => { return (store.state.users.currentUser - ? store.state.instance.redirectRootLogin - : store.state.instance.redirectRootNoLogin) || '/main/all' + ? store.state.instance.redirectRootLogin + : store.state.instance.redirectRootNoLogin) || '/main/all' } }, { name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline }, diff --git a/src/components/about/about.vue b/src/components/about/about.vue index 13dec87c..62ae16ea 100644 --- a/src/components/about/about.vue +++ b/src/components/about/about.vue @@ -1,8 +1,8 @@ diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 3b7f08dc..e93921fe 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -51,7 +51,7 @@ const Attachment = { } }, methods: { - linkClicked ({target}) { + linkClicked ({ target }) { if (target.tagName === 'A') { window.open(target.href, '_blank') } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index c58bebd3..12ed9158 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,54 +1,104 @@