refactor: webpack readability and refactoring

juspay · Jun 7, 2024 · e252662 · e252662
1 parent 6b4fbb7
commit e252662
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 173 deletions.
diff --git 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,20 +37,17 @@ module.exports = (endpoint, publicPath = "auto") => {
       new CopyPlugin({
         patterns: [
           { from: "public" },
-          {
-            from: path.resolve(__dirname, "server.js"),
-          },
+          { from: path.resolve(__dirname, "server.js") },
         ],
       }),
       new HtmlWebpackPlugin({
         inject: false,
         template: "./public/playgroundIndex.html",
       }),
       new webpack.DefinePlugin({
-        endPoint:
-          typeof endpoint === "string"
-            ? JSON.stringify(endpoint)
-            : JSON.stringify(process.env.SELF_SERVER_URL),
+        endPoint: JSON.stringify(
+          typeof endpoint === "string" ? endpoint : process.env.SELF_SERVER_URL
+        ),
         SCRIPT_SRC: JSON.stringify(process.env.HYPERSWITCH_CLIENT_URL),
       }),
       new BundleAnalyzerPlugin({

diff --git 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
@@ -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,