From 2840d9ec27b4925d39eb2dfe23d6fda0d163578f Mon Sep 17 00:00:00 2001 From: Yasin Uysal Date: Fri, 13 May 2022 12:07:00 +0300 Subject: [PATCH] string-replace-loader upgraded to last version --- .eslintignore | 9 ++++ config/string.js | 35 ++++++++++++---- package.json | 42 +++++++++---------- postcss.config.js | 14 ++++--- webpack.client.config.js | 89 ++++++++++++++++++++++------------------ webpack.common.config.js | 57 ++++++++++++------------- webpack.server.config.js | 55 ++++++++++++++----------- 7 files changed, 172 insertions(+), 129 deletions(-) create mode 100644 .eslintignore diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..fd3fc4c --- /dev/null +++ b/.eslintignore @@ -0,0 +1,9 @@ +node_modules +src/public +src/tools +webpack.client.config.js +webpack.common.config.js +webpack.server.config.js +babel.config.js +babel.server.config.js +postcss.config.js diff --git a/config/string.js b/config/string.js index d7e5fed..1ac43bb 100644 --- a/config/string.js +++ b/config/string.js @@ -7,9 +7,13 @@ const voltranConfig = require('../voltran.config'); const prometheusFile = voltranConfig.monitoring.prometheus; -function replaceString () { - const data = [ - { search: '__V_COMPONENTS__', replace: normalizeUrl(voltranConfig.routing.components), flags: 'g' }, +function replaceString() { + const data = [ + { + search: '__V_COMPONENTS__', + replace: normalizeUrl(voltranConfig.routing.components), + flags: 'g' + }, { search: '__APP_CONFIG__', replace: normalizeUrl(`${voltranConfig.appConfigFile.output.path}/${voltranConfig.appConfigFile.output.name}.js`), @@ -20,14 +24,29 @@ function replaceString () { replace: normalizeUrl(`${voltranConfig.inputFolder}/assets.json`), flags: 'g' }, - { search: '__V_DICTIONARY__', replace: normalizeUrl(voltranConfig.routing.dictionary), flags: 'g' }, - { search: '@voltran/core', replace: normalizeUrl(path.resolve(__dirname, '../src/index')), flags: 'g' }, - { search: '"__V_styles__"', replace: getStyles() } + { + search: '__V_DICTIONARY__', + replace: normalizeUrl(voltranConfig.routing.dictionary), + flags: 'g' + }, + { + search: '@voltran/core', + replace: normalizeUrl(path.resolve(__dirname, '../src/index')), + flags: 'g' + }, + { + search: '"__V_styles__"', + replace: getStyles() + } ]; - data.push({ search: '__V_PROMETHEUS__', replace: normalizeUrl(prometheusFile ? prometheusFile : '../lib/tools/prom.js'), flags: 'g' }); + data.push({ + search: '__V_PROMETHEUS__', + replace: normalizeUrl(prometheusFile || '../lib/tools/prom.js'), + flags: 'g' + }); - return data; + return data; } module.exports = replaceString; diff --git a/package.json b/package.json index 9160a29..08599cf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "voltranjs", - "version": "1.0.29", + "version": "1.1.0", "main": "src/index.js", "author": "Hepsiburada Technology Team", "bin": { @@ -25,29 +25,31 @@ "@babel/plugin-proposal-optional-chaining": "7.16.7", "@babel/plugin-proposal-throw-expressions": "7.16.7", "@babel/plugin-syntax-dynamic-import": "7.8.3", + "@babel/plugin-syntax-jsx": "^7.12.13", "@babel/plugin-transform-runtime": "7.16.10", - "@babel/preset-env": "7.15.4", - "@babel/preset-react": "7.14.5", + "@babel/preset-env": "7.16.10", + "@babel/preset-react": "7.16.7", + "@babel/runtime": "7.16.7", "@researchgate/react-intersection-observer": "1.0.3", "arg": "^4.1.3", "assets-webpack-plugin": "3.10.0", "async": "^3.2.0", - "autoprefixer": "10.4.2", + "autoprefixer": "9.3.1", "axios": "0.19.0", "babel-core": "7.0.0-bridge.0", - "babel-eslint": "10.0.1", + "babel-eslint": "10.1.0", "classnames": "2.2.6", - "clean-webpack-plugin": "1.0.0", - "cli-color": "^2.0.0", + "clean-webpack-plugin": "4.0.0", + "cli-color": "2.0.2", "compose-middleware": "5.0.1", "compression": "^1.7.4", "cookie-parser": "1.4.3", "copy-webpack-plugin": "4.5.2", - "core-js": "^3.16.3", + "core-js": "3.20.3", "css-loader": "6.5.1", "css-minimizer-webpack-plugin": "3.4.1", "eev": "0.1.5", - "esbuild-loader": "2.18.0", + "esbuild-loader": "2.19.0", "eslint": "6.1.0", "eslint-config-airbnb": "18.0.1", "eslint-config-prettier": "6.3.0", @@ -65,13 +67,11 @@ "mini-css-extract-plugin": "2.5.2", "newrelic": "^6.13.0", "node-sass": "6.0.1", - "optimize-css-assets-webpack-plugin": "5.0.8", - "pixrem": "5.0.0", + "pixrem": "4.0.1", "pleeease-filters": "4.0.0", - "postcss": "8.4.5", - "postcss-inline-svg": "5.0.0", - "postcss-loader": "6.2.1", - "postcss-scss": "4.0.3", + "postcss": "7.0.5", + "postcss-inline-svg": "3.1.1", + "postcss-loader": "3.0.0", "prettier": "1.18.2", "prom-client": "12.0.0", "prop-types": "15.6.2", @@ -85,10 +85,10 @@ "rimraf": "3.0.2", "sass-loader": "12.4.0", "serve-static": "1.14.1", - "source-map-support": "^0.5.19", - "string-replace-loader": "2.3.0", + "source-map-support": "0.5.21", + "string-replace-loader": "3.1.0", "style-loader": "3.3.1", - "styled-components": "^5.1.0", + "styled-components": "5.1.0", "svg-url-loader": "7.1.1", "terser-webpack-plugin": "5.3.1", "webpack": "5.65.0", @@ -100,9 +100,9 @@ "webpack-merge": "5.8.0", "webpack-node-externals": "3.0.0", "whatwg-fetch": "2.0.4", - "xss": "^1.0.8", - - "@babel/plugin-syntax-jsx": "^7.12.13", + "xss": "^1.0.8" + }, + "devDependencies": { "auto-changelog": "^2.2.1", "babel-jest": "^23.6.0", "enzyme": "^3.11.0", diff --git a/postcss.config.js b/postcss.config.js index f55cd0c..e6f0b3e 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -6,10 +6,12 @@ const postCssInlineSvg = require('postcss-inline-svg'); const voltranConfig = require('./voltran.config'); module.exports = { - plugins: [ - postCssInlineSvg({ path: voltranConfig.svgFolder }), - postCssPixrem(), - postCssFilters(), - autoprefixer - ] + plugins() { + return [ + postCssInlineSvg({path: voltranConfig.svgFolder}), + postCssPixrem(), + postCssFilters(), + autoprefixer + ]; + } }; diff --git a/webpack.client.config.js b/webpack.client.config.js index d557173..dc97739 100644 --- a/webpack.client.config.js +++ b/webpack.client.config.js @@ -8,24 +8,24 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const TerserWebpackPlugin = require('terser-webpack-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -const CleanWebpackPlugin = require('clean-webpack-plugin'); -const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); -const { ESBuildMinifyPlugin } = require('esbuild-loader'); +const {CleanWebpackPlugin} = require('clean-webpack-plugin'); +const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); +const {ESBuildMinifyPlugin} = require('esbuild-loader'); require('intersection-observer'); -const { createComponentName } = require('./src/universal/utils/helper.js'); - +const {createComponentName} = require('./src/universal/utils/helper.js'); const packageJson = require(path.resolve(process.cwd(), 'package.json')); const isBuildingForCDN = process.argv.includes('--for-cdn'); const isAnalyze = process.argv.includes('--analyze'); const env = process.env.VOLTRAN_ENV || 'local'; -const voltranConfig = require('./voltran.config'); +const voltranConfig = require('./voltran.config'); const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`; const appConfig = require(appConfigFilePath); const commonConfig = require('./webpack.common.config'); +const postCssConfig = require('./postcss.config'); const babelConfig = require('./babel.server.config'); const voltranClientConfigPath = voltranConfig.webpackConfiguration.client; @@ -85,7 +85,11 @@ if (isDebug) { fs.writeFileSync(appConfigFileTarget, context); - chunks.client.unshift('regenerator-runtime/runtime.js', 'core-js/stable', 'intersection-observer'); + chunks.client.unshift( + 'regenerator-runtime/runtime.js', + 'core-js/stable', + 'intersection-observer', + ); chunks.client.push('webpack-hot-middleware/client'); } @@ -105,7 +109,7 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { publicPath: `${appConfig.mediaUrl}/project/assets/`, filename: voltranConfig.output.client.filename, chunkFilename: voltranConfig.output.client.chunkFilename, - chunkLoadingGlobal: `WP_${voltranConfig.prefix.toUpperCase()}_VLTRN` + chunkLoadingGlobal: `WP_${voltranConfig.prefix.toUpperCase()}_VLTRN`, }, module: { @@ -116,15 +120,15 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { include: [path.resolve(__dirname, 'src'), voltranConfig.inputFolder], options: { loader: 'jsx', - target: 'es2015' + target: 'es2015', } }, { test: /\.js$/, loader: 'string-replace-loader', options: { - multiple: [...replaceString()] - } + multiple: [...replaceString()], + }, }, { test: /\.css$/, @@ -134,7 +138,7 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { loader: 'style-loader', options: { injectType: 'singletonStyleTag', - } + }, } : MiniCssExtractPlugin.loader, { @@ -143,12 +147,13 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { modules: false, importLoaders: 1, sourceMap: isDebug, - } + }, }, { - loader: 'postcss-loader' - } - ] + loader: 'postcss-loader', + options: postCssConfig, + }, + ], }, { test: /\.scss$/, @@ -157,7 +162,7 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { ? { loader: 'style-loader', options: { - injectType: 'singletonStyleTag' + injectType: 'singletonStyleTag', } } : MiniCssExtractPlugin.loader, @@ -168,7 +173,7 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { localIdentName: appConfig.isCssClassNameObfuscationEnabled ? `${voltranConfig.prefix}-[name]-[hash:base64]` : `${voltranConfig.prefix}-[path][name]__[local]`, - localIdentHashSalt: packageJson.name + localIdentHashSalt: packageJson.name, }, importLoaders: 1, sourceMap: isDebug, @@ -176,9 +181,10 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { }, { loader: 'postcss-loader', + options: postCssConfig }, { - loader: 'sass-loader' + loader: 'sass-loader', }, ...(voltranConfig.sassResources ? [ @@ -186,14 +192,14 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { loader: 'sass-resources-loader', options: { sourceMap: false, - resources: voltranConfig.sassResources - } - } + resources: voltranConfig.sassResources, + }, + }, ] - : []) - ] - } - ] + : []), + ], + }, + ], }, optimization: { @@ -201,14 +207,14 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { minimizer: [ new ESBuildMinifyPlugin({ target: 'es2015', - css: true + css: true, }), new TerserWebpackPlugin({ terserOptions: { mangle: { - safari10: true - } - } + safari10: true, + }, + }, }), new CssMinimizerPlugin({}), ] @@ -217,31 +223,32 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { resolve: { alias: { 'react': path.resolve(process.cwd(), 'node_modules/react'), - 'react-dom': path.resolve(process.cwd(), 'node_modules/react-dom') - } + 'react-dom': path.resolve(process.cwd(), 'node_modules/react-dom'), + }, }, plugins: [ ...(isBuildingForCDN ? [] : [ - new CleanWebpackPlugin([distFolderPath], { - verbose: true - }) + new CleanWebpackPlugin({ + verbose: false, + dangerouslyAllowCleanPatternsOutsideProject: true, + }), ]), new webpack.DefinePlugin({ 'process.env': {}, 'process.env.BROWSER': true, __DEV__: isDebug, - GO_PIPELINE_LABEL: JSON.stringify(GO_PIPELINE_LABEL) + GO_PIPELINE_LABEL: JSON.stringify(GO_PIPELINE_LABEL), }), new CopyWebpackPlugin([ { from: voltranConfig.output.client.publicPath, - to: voltranConfig.publicDistFolder - } + to: voltranConfig.publicDistFolder, + }, ]), ...(isDebug @@ -249,14 +256,14 @@ const clientConfig = merge(commonConfig, voltranClientConfig, { : [ new MiniCssExtractPlugin({ filename: '[name].css', - chunkFilename: '[id]-[contenthash].css' - }) + chunkFilename: '[id]-[contenthash].css', + }), ]), new AssetsPlugin({ path: voltranConfig.inputFolder, filename: 'assets.json', - prettyPrint: true + prettyPrint: true, }), ...(isAnalyze ? [new BundleAnalyzerPlugin()] : []) diff --git a/webpack.common.config.js b/webpack.common.config.js index 42b35c3..3ca8e8a 100644 --- a/webpack.common.config.js +++ b/webpack.common.config.js @@ -1,25 +1,25 @@ const path = require('path'); const webpack = require('webpack'); -const { merge } = require('webpack-merge'); -const packageJson = require('./package'); +const {merge} = require('webpack-merge'); +const packageJson = require(path.resolve(process.cwd(), 'package.json')); +const voltranConfig = require('./voltran.config'); const reStyle = /\.(css|less|styl|scss|sass|sss)$/; const reImage = /\.(bmp|gif|jpg|jpeg|png|svg)$/; const staticAssetName = '[name]-[contenthash].[ext]'; -const voltranConfig = require('./voltran.config'); const isDebug = voltranConfig.dev; const voltranCommonConfigPath = voltranConfig.webpackConfiguration.common; -const voltranCommonConfig = voltranCommonConfigPath ? - require(voltranConfig.webpackConfiguration.common) : - ''; +const voltranCommonConfig = voltranCommonConfigPath + ? require(voltranConfig.webpackConfiguration.common) + : ''; const commonConfig = merge(voltranCommonConfig, { mode: isDebug ? 'development' : 'production', output: { - assetModuleFilename: staticAssetName + assetModuleFilename: staticAssetName, }, module: { @@ -42,9 +42,9 @@ const commonConfig = merge(voltranCommonConfig, { use: 'svg-url-loader', parser: { dataUrlCondition: { - maxSize: 4096 // 4kb - } - } + maxSize: 4096, // 4kb + }, + }, }, // Inline lightweight images as Base64 encoded DataUrl string @@ -52,17 +52,17 @@ const commonConfig = merge(voltranCommonConfig, { type: 'asset', parser: { dataUrlCondition: { - maxSize: 4096 // 4kb - } - } - } - ] + maxSize: 4096, // 4kb + }, + }, + }, + ], }, { type: 'asset/resource', - } - ] + }, + ], }, { @@ -70,14 +70,14 @@ const commonConfig = merge(voltranCommonConfig, { type: 'asset', parser: { dataUrlCondition: { - maxSize: 10000 - } - } + maxSize: 10000, + }, + }, }, { test: /\.(ttf|eot|otf|woff|woff2)$/, - type: 'asset/resource' + type: 'asset/resource', } ] }, @@ -91,17 +91,18 @@ const commonConfig = merge(voltranCommonConfig, { plugins: [ new webpack.DefinePlugin({ VOLTRAN_API_VERSION: JSON.stringify(packageJson.version), - 'process.env.GO_PIPELINE_LABEL': JSON.stringify(process.env.GO_PIPELINE_LABEL) - }) + 'process.env.GO_PIPELINE_LABEL': JSON.stringify(process.env.GO_PIPELINE_LABEL), + }), ], - /* resolve: { + resolve: { alias: { - 'styled-components': path.resolve(__dirname, 'node_modules', 'styled-components'), + // 'styled-components': path.resolve(__dirname, 'node_modules', 'styled-components'), + // 'postcss-loader': path.resolve(__dirname, 'node_modules', 'postcss-loader'), }, fallback: { - url: false - } - } */ + url: false, + }, + }, }); module.exports = commonConfig; diff --git a/webpack.server.config.js b/webpack.server.config.js index 904d33b..ab4fc6a 100644 --- a/webpack.server.config.js +++ b/webpack.server.config.js @@ -1,8 +1,8 @@ const path = require('path'); const webpack = require('webpack'); -const { merge } = require('webpack-merge'); +const {merge} = require('webpack-merge'); const nodeExternals = require('webpack-node-externals'); -const CleanWebpackPlugin = require('clean-webpack-plugin'); +const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const env = process.env.VOLTRAN_ENV || 'local'; @@ -12,6 +12,7 @@ const appConfigFilePath = `${voltranConfig.appConfigFile.entry}/${env}.conf.js`; const appConfig = require(appConfigFilePath); // eslint-disable-line import/no-dynamic-require const commonConfig = require('./webpack.common.config'); +const postCssConfig = require('./postcss.config'); const packageJson = require(path.resolve(process.cwd(), 'package.json')); const replaceString = require('./config/string.js'); @@ -36,13 +37,13 @@ const serverConfig = merge(commonConfig, voltranServerConfig, { mode: isDebug ? 'development' : 'production', entry: { - server: [path.resolve(__dirname, isDebug ? 'src/server.js' : 'src/main.js')] + server: [path.resolve(__dirname, isDebug ? 'src/server.js' : 'src/main.js')], }, output: { path: voltranConfig.output.server.path, filename: voltranConfig.output.server.filename, - libraryTarget: 'commonjs2' + libraryTarget: 'commonjs2', }, module: { @@ -53,15 +54,15 @@ const serverConfig = merge(commonConfig, voltranServerConfig, { include: [path.resolve(__dirname, 'src'), voltranConfig.inputFolder], options: { loader: 'jsx', - target: 'es2015' - } + target: 'es2015', + }, }, { test: /\.js$/, loader: 'string-replace-loader', options: { - multiple: [...replaceString()] - } + multiple: [...replaceString()], + }, }, { test: /\.scss$/, @@ -74,45 +75,49 @@ const serverConfig = merge(commonConfig, voltranServerConfig, { ? `${voltranConfig.prefix}-[name]-[hash:base64]` : `${voltranConfig.prefix}-[path][name]__[local]`, localIdentHashSalt: packageJson.name, - exportOnlyLocals: true + exportOnlyLocals: true, }, importLoaders: 1, - sourceMap: isDebug + sourceMap: isDebug, } }, { - loader: 'postcss-loader' + loader: 'postcss-loader', + options: postCssConfig }, { - loader: 'sass-loader' + loader: 'sass-loader', }, ...(voltranConfig.sassResources ? [ - { - loader: 'sass-resources-loader', - options: { - sourceMap: false, - resources: voltranConfig.sassResources - } - } - ] + { + loader: 'sass-resources-loader', + options: { + sourceMap: false, + resources: voltranConfig.sassResources, + }, + }, + ] : []) ] } ] }, - externalsPresets: { node: true }, - externals: [nodeExternals()], + externalsPresets: {node: true}, + externals: [ + nodeExternals(), + ], plugins: [ - new CleanWebpackPlugin([distFolderPath], { - verbose: true + new CleanWebpackPlugin({ + verbose: false, + dangerouslyAllowCleanPatternsOutsideProject: true, }), new webpack.DefinePlugin({ 'process.env.BROWSER': false, - __DEV__: isDebug + __DEV__: isDebug, }), ...(isDebug ? [new webpack.HotModuleReplacementPlugin()] : [])