Upgrade build system

.gitignore

@@ -11,6 +11,7 @@ yalc.lock
 # builds
 build
 dist
+out
 .idea
 .idea/workspace.xml
 .rpt2_cache

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[4.0.0](https://github.com/multiversx/mx-sdk-dapp-form/pull/387)] - 2026-03-11
+
+- [Upgrade build system](https://github.com/multiversx/mx-sdk-dapp-form/pull/385)
+
 ## [[3.2.2](https://github.com/multiversx/mx-sdk-dapp-form/pull/384)] - 2026-03-11
 
 - [Removed unnecessary debugger statement](https://github.com/multiversx/mx-sdk-dapp-form/pull/384)

esbuild-watch.js

@@ -1,16 +1,25 @@
-const executeBuildCommand = require('./executeBuildCommand');
+const esbuild = require('esbuild');
+const { esmConfig } = require('./esbuild.config');
 
-executeBuildCommand()({
-  watch: {
-    onRebuild(error, result) {
-      if (error) {
-        console.error('Watch build failed:', error);
-      } else {
-        console.log(
-          '\x1b[36m%s\x1b[0m',
-          `[${new Date().toLocaleTimeString()}] sdk-dapp-form rebuild succeeded`
-        );
+esbuild
+  .build({
+    ...esmConfig,
+    minify: false,
+    define: {
+      ...esmConfig.define,
+      'process.env.NODE_ENV': '"development"'
+    },
+    watch: {
+      onRebuild(error) {
+        if (error) {
+          console.error('Watch build failed:', error);
+        } else {
+          console.log(
+            '\x1b[36m%s\x1b[0m',
+            `[${new Date().toLocaleTimeString()}] sdk-dapp-form rebuild succeeded`
+          );
+        }
       }
     }
-  }
-});
+  })
+  .catch(() => process.exit(1));

esbuild.config.js

@@ -0,0 +1,76 @@
+const svgrPlugin = require('esbuild-plugin-svgr');
+const glob = require('glob');
+const { replace } = require('esbuild-plugin-replace');
+const plugin = require('node-stdlib-browser/helpers/esbuild/plugin');
+const stdLibBrowser = require('node-stdlib-browser');
+const { nodeExternalsPlugin } = require('esbuild-node-externals');
+const { sassPlugin, postcssModules } = require('esbuild-sass-plugin');
+
+const basedir = 'src';
+
+const files = glob
+  .sync('{./src/**/*.tsx,./src/**/*.ts,./src/**/*.scss}')
+  .filter(
+    (file) =>
+      !file.includes('/tests/') &&
+      !file.includes('/stories/') &&
+      !file.includes('.test.') &&
+      !file.endsWith('.d.ts')
+  );
+
+const commonConfig = {
+  entryPoints: files,
+  bundle: true,
+  sourcemap: true,
+  treeShaking: true,
+  platform: 'node',
+  inject: [require.resolve('node-stdlib-browser/helpers/esbuild/shim')],
+  define: {
+    global: 'global',
+    process: 'process',
+    Buffer: 'Buffer',
+    'process.env.NODE_ENV': '"production"'
+  },
+  plugins: [
+    svgrPlugin(),
+    plugin(stdLibBrowser),
+    nodeExternalsPlugin(),
+    sassPlugin({
+      loadPaths: [`./${basedir}`, 'node_modules'],
+      basedir,
+      transform: postcssModules({
+        basedir,
+        localsConvention: 'dashes',
+        generateScopedName: 'dapp-core-component__[name]__[local]'
+      })
+    }),
+    replace({
+      __sdkDappVersion: process.env.npm_package_version
+    })
+  ]
+};
+
+const esmConfig = {
+  ...commonConfig,
+  minify: true,
+  splitting: true,
+  format: 'esm',
+  outdir: 'out',
+  chunkNames: '__chunks__/[name]-[hash]',
+  target: ['es2021'],
+  outExtension: { '.js': '.mjs' },
+  tsconfig: './tsconfig.esm.json'
+};
+
+const cjsConfig = {
+  ...commonConfig,
+  minify: true,
+  splitting: false,
+  format: 'cjs',
+  outdir: 'out',
+  target: ['es2021'],
+  outExtension: { '.js': '.cjs' },
+  tsconfig: './tsconfig.cjs.json'
+};
+
+module.exports = { commonConfig, esmConfig, cjsConfig };

esbuild.js

@@ -1,7 +1,23 @@
-const executeBuildCommand = require('./executeBuildCommand');
+const esbuild = require('esbuild');
+const { esmConfig, cjsConfig } = require('./esbuild.config');
 
-const cjsBuild = executeBuildCommand('cjs');
-const esmBuild = executeBuildCommand('esm');
+async function build() {
+  try {
+    await esbuild.build(esmConfig);
+    console.log(
+      '\x1b[36m%s\x1b[0m',
+      `[${new Date().toLocaleTimeString()}] sdk-dapp-form ESM build succeeded`
+    );
 
-cjsBuild();
-esmBuild();
+    await esbuild.build(cjsConfig);
+    console.log(
+      '\x1b[36m%s\x1b[0m',
+      `[${new Date().toLocaleTimeString()}] sdk-dapp-form CJS build succeeded`
+    );
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+}
+
+build();

package.json

@@ -1,28 +1,27 @@
 {
   "name": "@multiversx/sdk-dapp-form",
-  "version": "3.2.2",
+  "version": "4.0.0",
   "description": "A library to hold the main logic for a validating a form for transactions on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "GPL-3.0-or-later",
   "repository": "multiversx/mx-sdk-dapp-form",
-  "main": "./__commonjs",
-  "module": "./",
-  "types": "./",
-  "react-native": "./",
   "engines": {
     "node": ">=18"
   },
   "scripts": {
-    "start": "npm watch",
-    "build:esm-types": "tsc --project tsconfig.json",
+    "start": "npm run watch",
+    "clean-out": "rimraf out",
+    "build:esm-types": "tsc --project tsconfig.esm.json",
     "build:cjs-types": "tsc --build tsconfig.cjs.json",
-    "build": "rimraf dist && node esbuild.js && npm run build:esm-types && npm run build:cjs-types && cp package.json dist && cp README.md dist",
-    "publish-package": "npm test && npm run build && cd dist && npm publish",
-    "publish-package-next": "npm test && npm build && cd dist && npm publish --tag next",
+    "compile": "npm run build:esm-types && npm run build:cjs-types",
+    "build-esbuild": "npm run clean-out && node esbuild.js",
+    "build": "npm run build-esbuild && npm run compile",
+    "publish-package": "npm test && npm run build && npm publish",
+    "publish-package-next": "npm test && npm run build && npm publish --tag next",
     "unpublish-verdaccio": "npm unpublish @multiversx/sdk-dapp-form --registry http://localhost:4873",
-    "publish-verdaccio": "npm run build && cd dist  && npm publish --registry http://localhost:4873/",
-    "publish-yalc": "npm build && cd dist && yalc publish --push",
-    "watch": "npm node esbuild-watch.js && npm run build:types -- --watch",
+    "publish-verdaccio": "npm run unpublish-verdaccio && npm run build && npm publish --registry http://localhost:4873/",
+    "publish-yalc": "npm run build && yalc publish --push",
+    "watch": "node esbuild-watch.js",
     "test": "jest",
     "lint": "eslint --fix --ext js,ts,tsx src",
     "pre-pr": "npm run lint && npm run build && npm run test",
@@ -49,6 +48,7 @@
     "bignumber.js": "^9.x",
     "esbuild": "0.14.47",
     "esbuild-node-externals": "1.4.1",
+    "esbuild-plugin-replace": "1.4.0",
     "esbuild-plugin-svgr": "1.0.1",
     "esbuild-sass-plugin": "2.2.6",
     "eslint": "9.15.0",
@@ -84,10 +84,14 @@
     "whatwg-fetch": "3.6.20"
   },
   "files": [
-    "*.js",
-    "**/*.js",
-    "*.d.ts",
-    "**/*.d.ts"
+    "out/**/*",
+    "!**/*.test.*",
+    "!**/*.jest.*",
+    "!**/*.playwright.*",
+    "!**/*.puppeteer.*",
+    "!**/__mocks__/**",
+    "!**/__tests__/**",
+    "!**/*-mock.*"
   ],
   "keywords": [
     "multiversx",