From 9108737d55300d8a4f822ba94335d8b53f04854d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 7 Apr 2019 20:33:11 +0300 Subject: [PATCH] Webpack 4, ESLint with Vue, Node-sass, updated dependencies overall. New linting. --- .eslintrc.js | 12 +- build/utils.js | 75 +- build/webpack.base.conf.js | 76 +- build/webpack.dev.conf.js | 4 +- build/webpack.prod.conf.js | 44 +- package.json | 45 +- src/App.vue | 113 +- src/boot/routes.js | 4 +- src/components/about/about.vue | 6 +- src/components/attachment/attachment.js | 2 +- src/components/attachment/attachment.vue | 100 +- .../basic_user_card/basic_user_card.vue | 47 +- src/components/block_card/block_card.vue | 14 +- src/components/chat_panel/chat_panel.js | 2 +- src/components/chat_panel/chat_panel.vue | 59 +- src/components/color_input/color_input.vue | 65 +- .../contrast_ratio/contrast_ratio.vue | 52 +- .../conversation-page/conversation-page.vue | 4 +- src/components/conversation/conversation.js | 10 +- src/components/conversation/conversation.vue | 25 +- src/components/delete_button/delete_button.js | 2 +- .../delete_button/delete_button.vue | 7 +- src/components/dm_timeline/dm_timeline.vue | 6 +- src/components/emoji-input/emoji-input.js | 5 +- src/components/emoji-input/emoji-input.vue | 41 +- .../export_import/export_import.vue | 33 +- .../favorite_button/favorite_button.js | 4 +- .../favorite_button/favorite_button.vue | 17 +- .../features_panel/features_panel.vue | 22 +- src/components/follow_card/follow_card.js | 2 +- src/components/follow_card/follow_card.vue | 19 +- .../follow_request_card.vue | 14 +- .../follow_requests/follow_requests.vue | 8 +- src/components/font_control/font_control.vue | 81 +- .../friends_timeline/friends_timeline.vue | 6 +- src/components/gallery/gallery.vue | 19 +- .../image_cropper/image_cropper.vue | 55 +- .../instance_specific_panel.vue | 8 +- .../interface_language_switcher.vue | 52 +- src/components/link-preview/link-preview.vue | 20 +- src/components/login_form/login_form.js | 2 +- src/components/login_form/login_form.vue | 100 +- src/components/media_modal/media_modal.vue | 22 +- src/components/media_upload/media_upload.js | 6 +- src/components/media_upload/media_upload.vue | 30 +- src/components/mentions/mentions.vue | 6 +- src/components/mobile_nav/mobile_nav.vue | 71 +- .../mobile_post_status_modal.vue | 42 +- src/components/mute_card/mute_card.vue | 14 +- src/components/nav_panel/nav_panel.vue | 17 +- src/components/notification/notification.vue | 87 +- .../notifications/notifications.vue | 61 +- .../oauth_callback/oauth_callback.js | 2 +- .../opacity_input/opacity_input.vue | 58 +- .../post_status_form/post_status_form.js | 29 +- .../post_status_form/post_status_form.vue | 260 +- .../public_and_external_timeline.vue | 6 +- .../public_timeline/public_timeline.vue | 6 +- src/components/range_input/range_input.vue | 79 +- src/components/registration/registration.js | 4 +- src/components/registration/registration.vue | 225 +- .../remote_follow/remote_follow.vue | 22 +- .../retweet_button/retweet_button.js | 4 +- .../retweet_button/retweet_button.vue | 23 +- .../scope_selector/scope_selector.js | 8 +- .../scope_selector/scope_selector.vue | 56 +- src/components/settings/settings.vue | 743 +-- .../shadow_control/shadow_control.vue | 303 +- src/components/side_drawer/side_drawer.vue | 92 +- src/components/status/status.js | 8 +- src/components/status/status.vue | 362 +- src/components/still-image/still-image.vue | 18 +- src/components/style_switcher/preview.vue | 163 +- .../style_switcher/style_switcher.vue | 853 ++-- src/components/tab_switcher/tab_switcher.js | 40 +- src/components/tag_timeline/tag_timeline.vue | 9 +- .../terms_of_service_panel.vue | 6 +- src/components/timeline/timeline.js | 2 +- src/components/timeline/timeline.vue | 59 +- src/components/user_avatar/user_avatar.vue | 2 +- src/components/user_card/user_card.js | 18 +- src/components/user_card/user_card.vue | 340 +- src/components/user_finder/user_finder.vue | 37 +- src/components/user_panel/user_panel.vue | 16 +- src/components/user_profile/user_profile.vue | 121 +- src/components/user_search/user_search.js | 2 +- src/components/user_search/user_search.vue | 35 +- src/components/user_settings/user_settings.js | 26 +- .../user_settings/user_settings.vue | 389 +- .../video_attachment/video_attachment.vue | 5 +- src/components/who_to_follow/who_to_follow.js | 2 +- .../who_to_follow/who_to_follow.vue | 8 +- .../who_to_follow_panel.js | 2 +- .../who_to_follow_panel.vue | 19 +- src/hocs/with_list/with_list.js | 10 +- src/hocs/with_load_more/with_load_more.js | 56 +- .../with_subscription/with_subscription.js | 68 +- src/modules/api.js | 10 +- src/modules/chat.js | 4 +- src/modules/config.js | 4 +- src/modules/errors.js | 1 - src/modules/instance.js | 2 +- src/modules/oauth_tokens.js | 4 +- src/modules/statuses.js | 8 +- src/modules/users.js | 24 +- src/services/api/api.service.js | 80 +- .../backend_interactor_service.js | 78 +- src/services/color_convert/color_convert.js | 2 +- src/services/completion/completion.js | 2 +- .../file_size_format/file_size_format.js | 2 +- .../follow_request_fetcher.service.js | 2 +- src/services/new_api/oauth.js | 8 +- src/services/new_api/user_search.js | 6 +- src/services/new_api/utils.js | 4 +- .../notification_utils/notification_utils.js | 2 +- .../notifications_fetcher.service.js | 8 +- .../status_poster/status_poster.service.js | 2 +- src/services/style_setter/style_setter.js | 12 +- .../timeline_fetcher.service.js | 10 +- .../user_highlighter/user_highlighter.js | 2 +- test/unit/specs/modules/statuses.spec.js | 58 +- test/unit/specs/modules/users.spec.js | 4 +- .../entity_normalizer.spec.js | 16 +- .../file_size_format/file_size_format.spec.js | 66 +- .../status_parser/status_parses.spec.js | 4 +- yarn.lock | 4104 ++++++++++++----- 126 files changed, 7369 insertions(+), 3394 deletions(-) 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 @@