Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: webpack readability and refactoring #430

Merged
merged 2 commits into from
Jun 7, 2024
Merged

refactor: webpack readability and refactoring #430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e252662
refactor: webpack readability and refactoring
PritishBudhiraja Jun 7, 2024
072ea81
Merge branch 'main' of github.com:juspay/hyperswitch-web into webpack…
PritishBudhiraja Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions Hyperswitch-React-Demo-App/webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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({
Expand Down
13 changes: 5 additions & 8 deletions Hyperswitch-React-Demo-App/webpack.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -20,10 +20,7 @@ let devServer = {
},
};

module.exports = merge([
common("/payments"),
{
mode: "development",
devServer: devServer,
},
]);
module.exports = merge(common("/payments"), {
mode: "development",
devServer,
});
253 changes: 115 additions & 138 deletions webpack.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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: [
{
Expand All @@ -188,6 +158,13 @@ module.exports = (publicPath = "auto") => {
},
],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
entry: entries,
Expand Down
33 changes: 16 additions & 17 deletions webpack.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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,
Expand All @@ -37,10 +39,7 @@ let devServer = {
},
};

module.exports = merge([
common(),
{
mode: "development",
devServer: devServer,
},
]);
module.exports = merge(common(), {
mode: "development",
devServer,
});
Loading