Add esbuild (#3)

add esbuild & absolute imports

CHANGELOG.md

@@ -7,6 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- [Removed chain id from network slice & added esbuild and absolute imports](https://github.com/multiversx/mx-sdk-dapp-core/pull/3)
 - [Reverted absolute imports](https://github.com/multiversx/mx-sdk-dapp-core/pull/2)
 - [Added network store](https://github.com/multiversx/mx-sdk-dapp-core/pull/1)
 

esbuild.js

@@ -0,0 +1,50 @@
+const esbuild = require('esbuild');
+const glob = require('glob');
+
+/*
+  The reason why we use esbuild instead of tsc is because esbuild can output .mjs files
+*/
+
+const filesToInclude = ['./src/**/*.ts'].join(',');
+
+const allFiles = glob.sync(filesToInclude);
+
+const files = allFiles.filter((file) => {
+  const hasTestFiles = file.includes('/tests/') || file.includes('/stories/');
+  return !hasTestFiles;
+});
+
+const executeBuild = () =>
+  esbuild
+    .build({
+      entryPoints: files,
+      splitting: true,
+      format: 'esm',
+      outdir: 'out',
+      treeShaking: true,
+      minify: true,
+      bundle: true,
+      sourcemap: true,
+      chunkNames: '__chunks__/[name]-[hash]',
+      target: ['es2021'],
+      outExtension: { '.js': '.mjs' },
+      tsconfig: './tsconfig.json',
+      platform: 'node',
+      define: {
+        global: 'global',
+        process: 'process',
+        Buffer: 'Buffer'
+      }
+    })
+    .then(() => {
+      console.log(
+        '\x1b[36m%s\x1b[0m',
+        `[${new Date().toLocaleTimeString()}] sdk-dapp-core build succeeded for esm types`
+      );
+    })
+    .catch((err) => {
+      console.log(11, err);
+      process.exit(1);
+    });
+
+executeBuild();

eslint.config.js

@@ -0,0 +1,89 @@
+[
+  {
+    env: {
+      es2021: true,
+      node: true
+    },
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+      ecmaVersion: 2021,
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true
+      },
+      project: './tsconfig.json'
+    },
+    settings: {
+      'import/parsers': {
+        '@typescript-eslint/parser': ['.ts', '.tsx']
+      },
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+          moduleDirectory: ['node_modules', 'src/']
+        },
+        typescript: {
+          alwaysTryTypes: true
+        }
+      }
+    },
+    extends: [
+      'plugin:@typescript-eslint/recommended',
+      'prettier',
+      'plugin:prettier/recommended'
+    ],
+    plugins: ['prettier', 'import'],
+    rules: {
+      'import/order': [
+        'warn',
+        {
+          groups: ['builtin', 'external', 'internal'],
+          pathGroups: [
+            {
+              pattern: 'react',
+              group: 'external',
+              position: 'before'
+            }
+          ],
+          'newlines-between': 'ignore',
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true
+          }
+        }
+      ],
+      'prettier/prettier': [
+        'error',
+        {
+          endOfLine: 'lf'
+        }
+      ],
+      '@typescript-eslint/indent': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-use-before-define': [
+        'error',
+        { functions: false, classes: false }
+      ],
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_' }
+      ],
+      '@typescript-eslint/no-var-requires': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      'linebreak-style': ['error', 'unix'],
+      quotes: ['error', 'single'],
+      semi: ['error', 'always'],
+      'object-curly-newline': 'off',
+      'arrow-body-style': 'off',
+      'implicit-arrow-linebreak': 'off',
+      'func-names': 'off',
+      curly: ['error', 'all'],
+      'operator-linebreak': 'off',
+      'function-paren-newline': 'off',
+      'no-shadow': 'off',
+      '@typescript-eslint/no-shadow': 'off'
+    }
+  }
+];

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@multiversx/sdk-dapp-core",
-  "version": "0.0.0-alpha.0",
+  "version": "0.0.0-alpha.1",
   "main": "out/index.js",
-  "module": "out/index.js",
+  "module": "out/index.mjs",
   "types": "out/index.d.ts",
   "description": "A library to hold core logic for building TypeScript dApps on the MultiversX blockchain",
   "author": "MultiversX",
@@ -19,9 +19,11 @@
     "url": "git+https://github.com/multiversx/mx-sdk-dapp-core.git"
   },
   "scripts": {
-    "compile": "tsc",
-    "test": "jest",
-    "compile-next": "tsc --p tsconfig.next.json"
+    "compile": "tsc && tsc-alias",
+    "compile-next": "rimraf out && tsc --p tsconfig.next.json && tsc-alias --project tsconfig.next.json",
+    "build-esbuild": "rimraf out && node esbuild.js",
+    "build": "yarn build-esbuild && yarn compile",
+    "test": "jest"
   },
   "publishConfig": {
     "access": "public"
@@ -31,29 +33,39 @@
     "zustand": "^4.4.7"
   },
   "peerDependencies": {
+    "@multiversx/sdk-dapp-utils": "^0.0.1",
     "@multiversx/sdk-core": ">= 12.18.0",
     "axios": ">=1.6.5"
   },
   "devDependencies": {
+    "@multiversx/sdk-dapp-utils": "^0.0.1",
     "@multiversx/sdk-core": ">= 12.18.0",
     "@swc/core": "^1.4.17",
     "@swc/jest": "^0.2.36",
-    "@types/node": "18.19.0",
-    "@typescript-eslint/eslint-plugin": "5.0.0",
-    "@typescript-eslint/parser": "5.14.0",
+    "@types/node": "20.12.8",
+    "@typescript-eslint/eslint-plugin": "7.8.0",
+    "@typescript-eslint/parser": "7.8.0",
     "axios": ">=1.6.5",
-    "eslint": "8.1.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-config-standard": "17.0.0",
-    "eslint-import-resolver-typescript": "2.4.0",
-    "eslint-plugin-import": "2.26.0",
+    "esbuild": "^0.21.1",
+    "eslint": "9.1.1",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-config-standard": "17.1.0",
+    "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "5.0.0",
-    "eslint-plugin-promise": "6.0.0",
-    "jest": "29.6.2",
-    "jest-environment-jsdom": "28.1.3",
-    "prettier": "3.1.0",
-    "ts-jest": "29.1.1",
-    "typescript": "^5.4.2"
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-promise": "6.1.1",
+    "glob": "^10.3.14",
+    "immer": "^10.1.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "lit": "^3.1.3",
+    "prettier": "3.2.5",
+    "protobufjs": "^7.3.0",
+    "react": "^18.3.1",
+    "rimraf": "^5.0.6",
+    "ts-jest": "29.1.2",
+    "tsc-alias": "^1.8.9",
+    "typescript": "^5.4.5"
   }
 }

src/apiCalls/configuration/getNetworkConfigFromApi.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { getCleanApiAddress } from '../../store/slices/network/actions/getCleanApiAddress';
+import { getCleanApiAddress } from 'store/slices/network/actions/getCleanApiAddress';
 import { ApiNetworkConfigType } from '../../types/network.types';
 import { NETWORK_CONFIG_ENDPOINT } from '../endpoints';
 

src/apiCalls/configuration/index.ts

@@ -0,0 +1,2 @@
+export * from './getServerConfiguration';
+export * from './getNetworkConfigFromApi';

src/apiCalls/index.ts

@@ -0,0 +1,2 @@
+export * from './configuration';
+export * from './endpoints';

src/constants/index.ts

@@ -0,0 +1,3 @@
+export * from './network';
+export * from './storage';
+export * from './window';

src/constants/storage.ts

@@ -1,7 +1,7 @@
 import { createJSONStorage } from 'zustand/middleware';
 import { safeWindow } from './window';
 
-const persistConfig: {
+export const persistConfig: {
   persistReducersStorageType: 'localStorage' | 'sessionStorage';
 } = {
   persistReducersStorageType: 'localStorage'

src/index.ts

@@ -1 +1,5 @@
 export * from './core';
+export * from './constants';
+export * from './apiCalls';
+export * from './store';
+export * from './types';

src/store/actions/index.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './sharedActions';

src/store/helpers/eventHandlers.ts

@@ -1,14 +1,16 @@
+import { safeWindow } from '../../constants/window';
+
 export function createCustomEvent<T>(eventName: string, eventData: T) {
   const event = new CustomEvent(eventName, { detail: eventData });
-  document.dispatchEvent(event);
+  safeWindow?.document.dispatchEvent(event);
 }
 
 // Function to listen to the custom event
 export function listenToCustomEvent<T>(
   eventName: string,
   callback: (event: CustomEvent<T>) => void
 ) {
-  document.addEventListener(eventName, (evt) => {
+  safeWindow?.document.addEventListener(eventName, (evt) => {
     callback(evt as CustomEvent<T>);
   });
 }

src/store/index.ts

@@ -0,0 +1,2 @@
+export * from './actions';
+export * from './slices';

src/store/slices/account.ts

@@ -33,7 +33,7 @@ const handleLogout = listenToLogout((state: StateType) => {
 });
 
 // vanilla store
-export const store = createStore<StateType>()(
+export const accountStore = createStore<StateType>()(
   devtools(
     persist(
       immer((...a) => ({
@@ -53,7 +53,7 @@ export const store = createStore<StateType>()(
 );
 
 // react store
-export const useStore = getReactStore({
+export const useAccountStore = getReactStore({
   initialState,
-  store
+  store: accountStore
 });

src/store/slices/index.ts

@@ -0,0 +1,2 @@
+export * from './network';
+export * from './account';