From 844688be082208db21ebcc2d9e39e17bba71e96c Mon Sep 17 00:00:00 2001 From: Pritish Budhiraja Date: Fri, 7 Jun 2024 13:24:33 +0530 Subject: [PATCH] refactor: webpack readability and refactoring (#430) --- Hyperswitch-React-Demo-App/webpack.common.js | 10 +- Hyperswitch-React-Demo-App/webpack.dev.js | 13 +- webpack.common.js | 253 +++++++++---------- webpack.dev.js | 33 ++- 4 files changed, 140 insertions(+), 169 deletions(-) diff --git a/Hyperswitch-React-Demo-App/webpack.common.js b/Hyperswitch-React-Demo-App/webpack.common.js index f3d25d3ee..9b0f0039d 100644 --- a/Hyperswitch-React-Demo-App/webpack.common.js +++ b/Hyperswitch-React-Demo-App/webpack.common.js @@ -4,14 +4,14 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CopyPlugin = require("copy-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin"); -const BundleAnalyzerPlugin = - require("webpack-bundle-analyzer").BundleAnalyzerPlugin; +const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); require("dotenv").config({ path: "./.env" }); module.exports = (endpoint, publicPath = "auto") => { - let entries = { + const entries = { app: "./src/index.js", }; + return { mode: "development", devtool: "source-map", @@ -37,9 +37,7 @@ module.exports = (endpoint, publicPath = "auto") => { new CopyPlugin({ patterns: [ { from: "public" }, - { - from: path.resolve(__dirname, "server.js"), - }, + { from: path.resolve(__dirname, "server.js") }, ], }), new HtmlWebpackPlugin({ diff --git a/Hyperswitch-React-Demo-App/webpack.dev.js b/Hyperswitch-React-Demo-App/webpack.dev.js index e950ece5b..3ae483540 100644 --- a/Hyperswitch-React-Demo-App/webpack.dev.js +++ b/Hyperswitch-React-Demo-App/webpack.dev.js @@ -2,7 +2,7 @@ const path = require("path"); const { merge } = require("webpack-merge"); const common = require("./webpack.common.js"); -let devServer = { +const devServer = { contentBase: path.join(__dirname, "dist"), hot: true, port: 9060, @@ -20,10 +20,7 @@ let devServer = { }, }; -module.exports = merge([ - common("/payments"), - { - mode: "development", - devServer: devServer, - }, -]); +module.exports = merge(common("/payments"), { + mode: "development", + devServer, +}); diff --git a/webpack.common.js b/webpack.common.js index ccea631e4..81f350aa7 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -6,158 +6,98 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const CopyPlugin = require("copy-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const TerserPlugin = require("terser-webpack-plugin"); -const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; +const BundleAnalyzerPlugin = + require("webpack-bundle-analyzer").BundleAnalyzerPlugin; const { sentryWebpackPlugin } = require("@sentry/webpack-plugin"); -const sdkEnv = process.env.sdkEnv ?? "local"; -const envSdkUrl = process.env.ENV_SDK_URL ?? ""; -const envBackendUrl = process.env.ENV_BACKEND_URL ?? ""; -const envLoggingUrl = process.env.ENV_LOGGING_URL ?? ""; +const getEnvVariable = (variable, defaultValue) => + process.env[variable] ?? defaultValue; -//git rev-parse --abbrev-ref HEAD -let repoVersion = require("./package.json").version; -let majorVersion = "v" + repoVersion.split(".")[0]; +const sdkEnv = getEnvVariable("sdkEnv", "local"); +const envSdkUrl = getEnvVariable("ENV_SDK_URL", ""); +const envBackendUrl = getEnvVariable("ENV_BACKEND_URL", ""); +const envLoggingUrl = getEnvVariable("ENV_LOGGING_URL", ""); -let repoName = require("./package.json").name; -let repoPublicPath = sdkEnv === "local" ? "" : `/${repoVersion}/${majorVersion}`; +const repoVersion = require("./package.json").version; +const majorVersion = "v" + repoVersion.split(".")[0]; +const repoName = require("./package.json").name; +const repoPublicPath = + sdkEnv === "local" ? "" : `/${repoVersion}/${majorVersion}`; -let sdkUrl; - -if (envSdkUrl.length === 0) { - sdkUrl = - sdkEnv === "prod" - ? "https://checkout.hyperswitch.io" - : sdkEnv === "sandbox" - ? "https://beta.hyperswitch.io" - : sdkEnv === "integ" - ? "https://dev.hyperswitch.io" - : "http://localhost:9050"; -} else { - sdkUrl = envSdkUrl; -} - -let backendEndPoint; -if (envBackendUrl.length === 0) { - backendEndPoint = - sdkEnv === "prod" - ? "https://checkout.hyperswitch.io/api" - : sdkEnv === "sandbox" - ? "https://beta.hyperswitch.io/api" - : sdkEnv === "integ" - ? "https://integ-api.hyperswitch.io" - : "https://beta.hyperswitch.io/api"; -} else { - backendEndPoint = envBackendUrl; -} - -let confirmEndPoint; -if (envBackendUrl.length === 0) { - confirmEndPoint = - sdkEnv === "prod" - ? "https://api.hyperswitch.io" - : sdkEnv === "sandbox" - ? "https://sandbox.hyperswitch.io" - : sdkEnv === "integ" - ? "https://integ-api.hyperswitch.io" - : "https://sandbox.hyperswitch.io"; -} else { - confirmEndPoint = envBackendUrl; -} - -let logEndpoint; -if (envLoggingUrl.length === 0) { - logEndpoint = - sdkEnv === "prod" - ? "https://api.hyperswitch.io/logs/sdk" - : "https://sandbox.hyperswitch.io/logs/sdk"; -} else { - logEndpoint = envLoggingUrl; -} - -// Set this to true to enable logging -let enableLogging = true; +const getSdkUrl = (env, customUrl) => { + if (customUrl) return customUrl; + const urls = { + prod: "https://checkout.hyperswitch.io", + sandbox: "https://beta.hyperswitch.io", + integ: "https://dev.hyperswitch.io", + local: "http://localhost:9050", + }; + return urls[env] || urls.local; +}; -// Choose from DEBUG, INFO, WARNING, ERROR, SILENT -let loggingLevel = "DEBUG"; +const sdkUrl = getSdkUrl(sdkEnv, envSdkUrl); +const backendEndPoint = + envBackendUrl || + `https://${sdkEnv === "prod" ? "checkout" : "beta"}.hyperswitch.io/api`; +const confirmEndPoint = + envBackendUrl || + `https://${sdkEnv === "prod" ? "api" : "sandbox"}.hyperswitch.io`; +const logEndpoint = + envLoggingUrl || + `https://${sdkEnv === "prod" ? "api" : "sandbox"}.hyperswitch.io/logs/sdk`; -// Maximum logs emitted for a particular event, to rate limit logs -let maxLogsPushedPerEventName = 100; +const enableLogging = true; +const loggingLevel = "DEBUG"; +const maxLogsPushedPerEventName = 100; module.exports = (publicPath = "auto") => { - let entries = { + const entries = { app: "./index.js", HyperLoader: "./src/orca-loader/HyperLoader.bs.js", }; - return { - mode: "development", - devtool: "source-map", - output: { - path: - sdkEnv && sdkEnv !== "local" - ? path.resolve(__dirname, "dist", sdkEnv) - : path.resolve(__dirname, "dist"), - clean: true, - publicPath: `${repoPublicPath}/`, - }, - // TODO - Can be commented for faster build in local development - optimization: { - sideEffects: true, - minimize: true, - minimizer: [ - new TerserPlugin({ - terserOptions: { - compress: { - drop_console: false, - }, - }, - }), - // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line - // `...`, - // new CssMinimizerPlugin(), - ], - }, - plugins: [ - new MiniCssExtractPlugin(), - new CopyPlugin({ - patterns: [{ from: "public" }], - }), - new webpack.DefinePlugin({ - repoName: JSON.stringify(repoName), - repoVersion: JSON.stringify(repoVersion), - publicPath: JSON.stringify(repoPublicPath), - sdkUrl: JSON.stringify(sdkUrl), - backendEndPoint: JSON.stringify(backendEndPoint), - confirmEndPoint: JSON.stringify(confirmEndPoint), - logEndpoint: JSON.stringify(logEndpoint), - sentryDSN: JSON.stringify(process.env.SENTRY_DSN), - sentryScriptUrl: JSON.stringify(process.env.SENTRY_SCRIPT_URL), - enableLogging: JSON.stringify(enableLogging), - loggingLevel: JSON.stringify(loggingLevel), - maxLogsPushedPerEventName: JSON.stringify(maxLogsPushedPerEventName), - }), - new HtmlWebpackPlugin({ - inject: false, - template: "./public/build.html", - }), - new HtmlWebpackPlugin({ - inject: false, - template: "./public/build.html", - }), - new HtmlWebpackPlugin({ - // Also generate a test.html - inject: false, - filename: "fullscreenIndex.html", - template: "./public/fullscreenIndexTemplate.html", - }), + const plugins = [ + new MiniCssExtractPlugin(), + new CopyPlugin({ + patterns: [{ from: "public" }], + }), + new webpack.DefinePlugin({ + repoName: JSON.stringify(repoName), + repoVersion: JSON.stringify(repoVersion), + publicPath: JSON.stringify(repoPublicPath), + sdkUrl: JSON.stringify(sdkUrl), + backendEndPoint: JSON.stringify(backendEndPoint), + confirmEndPoint: JSON.stringify(confirmEndPoint), + logEndpoint: JSON.stringify(logEndpoint), + sentryDSN: JSON.stringify(process.env.SENTRY_DSN), + sentryScriptUrl: JSON.stringify(process.env.SENTRY_SCRIPT_URL), + enableLogging: JSON.stringify(enableLogging), + loggingLevel: JSON.stringify(loggingLevel), + maxLogsPushedPerEventName: JSON.stringify(maxLogsPushedPerEventName), + }), + new HtmlWebpackPlugin({ + inject: false, + template: "./public/build.html", + }), + new HtmlWebpackPlugin({ + // Also generate a test.html + inject: false, + filename: "fullscreenIndex.html", + template: "./public/fullscreenIndexTemplate.html", + }), + ]; + + if (process.env.NODE_ENV === "production") { + plugins.push( new BundleAnalyzerPlugin({ analyzerMode: "static", reportFilename: "bundle-report.html", openAnalyzer: false, - }), - // new webpack.HTMLInjectPlugin({ - // publicPath: JSON.stringify(repoVersion), - // }), - // TODO - Can be commented if sentry not needed. + }) + ); + } + + if (process.env.SENTRY_AUTH_TOKEN) { + plugins.push( sentryWebpackPlugin({ org: "sentry", project: "hyperswitch-react-sdk", @@ -169,8 +109,38 @@ module.exports = (publicPath = "auto") => { paths: ["dist"], }, }, - }), - ], + }) + ); + } + + return { + mode: sdkEnv === "local" ? "development" : "production", + devtool: sdkEnv === "local" ? "eval-source-map" : "source-map", + output: { + path: + sdkEnv && sdkEnv !== "local" + ? path.resolve(__dirname, "dist", sdkEnv) + : path.resolve(__dirname, "dist"), + clean: true, + publicPath: `${repoPublicPath}/`, + }, + optimization: + sdkEnv === "local" + ? {} + : { + sideEffects: true, + minimize: true, + minimizer: [ + new TerserPlugin({ + terserOptions: { + compress: { + drop_console: false, + }, + }, + }), + ], + }, + plugins, module: { rules: [ { @@ -188,6 +158,13 @@ module.exports = (publicPath = "auto") => { }, ], }, + { + test: /\.js$/, + exclude: /node_modules/, + use: { + loader: "babel-loader", + }, + }, ], }, entry: entries, diff --git a/webpack.dev.js b/webpack.dev.js index 993c77a9d..2104c3bcf 100644 --- a/webpack.dev.js +++ b/webpack.dev.js @@ -1,19 +1,20 @@ const path = require("path"); -const dotenv = require("dotenv").config(); +require("dotenv").config(); const { merge } = require("webpack-merge"); const common = require("./webpack.common.js"); + const sdkEnv = process.env.sdkEnv ?? "local"; -let backendEndPoint = - sdkEnv === "prod" - ? "https://api.hyperswitch.io/payments" - : sdkEnv === "sandbox" - ? "https://sandbox.hyperswitch.io/payments" - : sdkEnv === "integ" - ? "https://integ-api.hyperswitch.io/payments" - : "https://sandbox.hyperswitch.io/payments"; +const endpointMap = { + prod: "https://api.hyperswitch.io/payments", + sandbox: "https://sandbox.hyperswitch.io/payments", + integ: "https://integ-api.hyperswitch.io/payments", + local: "https://sandbox.hyperswitch.io/payments", // Default or local environment endpoint +}; + +const backendEndPoint = endpointMap[sdkEnv] || endpointMap.local; -let devServer = { +const devServer = { contentBase: path.join(__dirname, "dist"), hot: true, host: "0.0.0.0", @@ -26,6 +27,7 @@ let devServer = { secure: true, pathRewrite: { "^/payments": "" }, }, + // * Uncomment the following if needed for 3DS method proxying // "/3dsmethod": { // target: "https://acs40.sandbox.3dsecure.io", // changeOrigin: true, @@ -37,10 +39,7 @@ let devServer = { }, }; -module.exports = merge([ - common(), - { - mode: "development", - devServer: devServer, - }, -]); +module.exports = merge(common(), { + mode: "development", + devServer, +});