From 9108737d55300d8a4f822ba94335d8b53f04854d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 7 Apr 2019 20:33:11 +0300 Subject: Webpack 4, ESLint with Vue, Node-sass, updated dependencies overall. New linting. --- build/utils.js | 75 +++++++++++++++++++++++---------------------- build/webpack.base.conf.js | 76 +++++++++++++++++++--------------------------- build/webpack.dev.conf.js | 4 +-- build/webpack.prod.conf.js | 44 ++++++++------------------- 4 files changed, 84 insertions(+), 115 deletions(-) (limited to 'build') 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'] + // }), ] }) -- cgit v1.2.3-70-g09d2 From 1387589ac9dbfe1f8d45073d23d30dca46a9c7bd Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 28 Apr 2019 22:03:03 +0300 Subject: fixed build speed --- build/webpack.base.conf.js | 5 +++++ build/webpack.dev.conf.js | 1 + 2 files changed, 6 insertions(+) (limited to 'build') diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 6f6e785b..f8968966 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -20,6 +20,11 @@ module.exports = { publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, filename: '[name].js' }, + optimization: { + splitChunks: { + chunks: 'all' + } + }, resolve: { extensions: ['.js', '.vue'], modules: [ diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js index 80b87ae8..159572ba 100644 --- a/build/webpack.dev.conf.js +++ b/build/webpack.dev.conf.js @@ -14,6 +14,7 @@ module.exports = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, + mode: 'development', // eval-source-map is faster for development devtool: '#eval-source-map', plugins: [ -- cgit v1.2.3-70-g09d2 From addeb852200688170654d9bd687de75bc5d30a85 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 May 2019 21:54:25 +0300 Subject: fix prod build --- .eslintrc.js | 1 + build/webpack.prod.conf.js | 8 ++++-- src/components/login_form/login_form.vue | 29 ++++++++++++++++++++-- .../post_status_form/post_status_form.vue | 2 +- src/components/status/status.vue | 2 +- 5 files changed, 36 insertions(+), 6 deletions(-) (limited to 'build') diff --git a/.eslintrc.js b/.eslintrc.js index 8c95cfb9..b526df67 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -27,6 +27,7 @@ module.exports = { 'vue/use-v-on-exact': 1, 'vue/no-parsing-error': 1, 'vue/require-v-for-key': 1, + 'vue/valid-v-for': 1, 'vue/require-prop-types': 1, 'vue/no-use-v-if-with-v-for': 1, 'indent': 1, diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index 85ea1bee..e7d25bfe 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -17,17 +17,21 @@ let commitHash = require('child_process') console.log(commitHash) var webpackConfig = merge(baseWebpackConfig, { + mode: 'production', module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true }) }, devtool: config.build.productionSourceMap ? '#source-map' : false, optimization: { - minimize: true + minimize: true, + splitChunks: { + chunks: 'all' + } }, output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), - chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') + chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') }, plugins: [ // http://vuejs.github.io/vue-loader/workflow/production.html diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index 27a8e48a..c6be2e00 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -50,6 +50,10 @@ @import '../../_variables.scss'; .login-form { + display: flex; + flex-direction: column; + padding: 0.6em; + .btn { min-height: 28px; width: 10em; @@ -66,9 +70,30 @@ align-items: center; justify-content: space-between; } -} -.login { + .form-group { + display: flex; + flex-direction: column; + padding: 0.3em 0.5em 0.6em; + line-height:24px; + } + + .form-bottom { + display: flex; + padding: 0.5em; + height: 32px; + + button { + width: 10em; + } + + p { + margin: 0.35em; + padding: 0.35em; + display: flex; + } + } + .error { text-align: center; diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index b8b93936..4f014cc5 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -155,7 +155,7 @@ } } -.post-status-form, .login { +.post-status-form { .form-bottom { display: flex; padding: 0.5em; diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 02715253..490e167b 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -627,7 +627,7 @@ a.unmute { flex: 1; } -.timeline > { +.timeline :not(.panel-disabled) > { .status-el:last-child { border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); -- cgit v1.2.3-70-g09d2 From 52475dbf23ee1ccee1c6cbc23cfd7b4af23dd8a9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 21 May 2019 21:22:00 +0300 Subject: Fix pipelines and clean up console output --- build/utils.js | 4 +--- build/webpack.prod.conf.js | 2 -- test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js | 4 ++-- 3 files changed, 3 insertions(+), 7 deletions(-) (limited to 'build') diff --git a/build/utils.js b/build/utils.js index 3beee774..b45ffc16 100644 --- a/build/utils.js +++ b/build/utils.js @@ -58,7 +58,5 @@ exports.cssLoaders = function (options) { // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function (options) { - var output = exports.cssLoaders(options) - console.log(output) - return output + return exports.cssLoaders(options) } diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index e7d25bfe..ed11ebad 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -14,8 +14,6 @@ let commitHash = require('child_process') .execSync('git rev-parse --short HEAD') .toString(); -console.log(commitHash) - var webpackConfig = merge(baseWebpackConfig, { mode: 'production', module: { diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js index bae890f8..3d34c5cc 100644 --- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js +++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js @@ -322,9 +322,9 @@ describe('API Entities normalizer', () => { describe('MastoAPI emoji adder', () => { const emojis = makeMockEmojiMasto() - const imageHtml = 'image' + const imageHtml = 'image' .replace(/"/g, '\'') - const thinkHtml = 'thinking' + const thinkHtml = 'thinking' .replace(/"/g, '\'') it('correctly replaces shortcodes in supplied string', () => { -- cgit v1.2.3-70-g09d2 From 4991e34c49e0998b2846666cf10d194f1567eb4a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 6 Jul 2019 23:42:03 +0300 Subject: fix hot reload always reloading the page --- build/dev-server.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'build') diff --git a/build/dev-server.js b/build/dev-server.js index 9c3d4e00..48574214 100644 --- a/build/dev-server.js +++ b/build/dev-server.js @@ -31,8 +31,13 @@ var hotMiddleware = require('webpack-hot-middleware')(compiler) // force page reload when html-webpack-plugin template changes compiler.plugin('compilation', function (compilation) { compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { - hotMiddleware.publish({ action: 'reload' }) - cb() + // FIXME: This supposed to reload whole page when index.html is changed, + // however now it reloads entire page on every breath, i suppose the order + // of plugins changed or something. It's a minor thing and douesn't hurt + // disabling it, constant reloads hurt much more + + // hotMiddleware.publish({ action: 'reload' }) + // cb() }) }) -- cgit v1.2.3-70-g09d2 From 34d95454b35712e4c1119f02693f2e2e9cda8cc8 Mon Sep 17 00:00:00 2001 From: taehoon Date: Tue, 25 Jun 2019 12:34:30 -0400 Subject: add csp header to dev server --- build/dev-server.js | 3 +++ 1 file changed, 3 insertions(+) (limited to 'build') diff --git a/build/dev-server.js b/build/dev-server.js index 48574214..59dd2c4d 100644 --- a/build/dev-server.js +++ b/build/dev-server.js @@ -24,6 +24,9 @@ var devMiddleware = require('webpack-dev-middleware')(compiler, { stats: { colors: true, chunks: false + }, + headers: { + 'content-security-policy': "base-uri 'self'; frame-ancestors 'none'; img-src 'self' data: https:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; font-src 'self'; manifest-src 'self'; script-src 'self' 'unsafe-eval';" } }) -- cgit v1.2.3-70-g09d2 From 114a36c9be0e36ffdc5f3b14adc7e48381876b6e Mon Sep 17 00:00:00 2001 From: feld Date: Wed, 10 Jul 2019 22:30:32 +0000 Subject: Revert "Merge branch 'csp-header' into 'develop'" This reverts merge request !856 --- build/dev-server.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'build') diff --git a/build/dev-server.js b/build/dev-server.js index 59dd2c4d..48574214 100644 --- a/build/dev-server.js +++ b/build/dev-server.js @@ -24,9 +24,6 @@ var devMiddleware = require('webpack-dev-middleware')(compiler, { stats: { colors: true, chunks: false - }, - headers: { - 'content-security-policy': "base-uri 'self'; frame-ancestors 'none'; img-src 'self' data: https:; media-src 'self' https:; style-src 'self' 'unsafe-inline'; font-src 'self'; manifest-src 'self'; script-src 'self' 'unsafe-eval';" } }) -- cgit v1.2.3-70-g09d2