Merge pull request #90 from sei-protocol/feature/esm-build

Introduction of ESM Builds

.changeset/new-trees-provide.md

@@ -0,0 +1,7 @@
+---
+'@sei-js/proto': minor
+'@sei-js/react': minor
+'@sei-js/core': minor
+---
+
+Adjusted package exports to include cjs and esm versions of each project, enables tree shaking by correctly exporting entry points for each build type and by declaring packages as side effect free

packages/core/.babelrc.js

@@ -0,0 +1,24 @@
+module.exports = (api) => {
+	const babelEnv = process.env.BABEL_ENV || 'esm';
+
+	api.cache(() => babelEnv);
+
+	const isESM = babelEnv === 'esm';
+
+	const commonjsPresets = [
+		[
+			'@babel/preset-env',
+			{
+				modules: 'commonjs'
+			}
+		],
+		'@babel/preset-typescript'
+	];
+
+	const esmPresets = ['@babel/preset-env', '@babel/preset-typescript'];
+
+	return {
+		presets: isESM ? esmPresets : commonjsPresets,
+		plugins: ['@babel/plugin-transform-runtime']
+	};
+};

packages/core/package.json

@@ -2,26 +2,31 @@
 	"name": "@sei-js/core",
 	"version": "3.0.5",
 	"description": "TypeScript library for front end integrations with Sei",
-	"main": "./dist/index.js",
-	"types": "./dist/index.d.ts",
+	"main": "./dist/cjs/index.js",
+	"module": "./dist/esm/index.js",
+	"sideEffects": false,
+	"types": "./dist/types/index.d.ts",
 	"scripts": {
 		"prebuild": "rimraf dist",
-		"build": "yarn build:types && yarn build:js && yarn build:prettier",
+		"build": "yarn build:types && yarn build:cjs && yarn build:esm && yarn build:prettier",
 		"build:types": "tsc --project tsconfig.declarations.json",
-		"build:js": "babel src --out-dir dist --extensions '.js,.jsx,.ts,.tsx' --source-maps --copy-files",
-		"build:prettier": "prettier --write dist",
+		"build:cjs": "BABEL_ENV=cjs babel src --out-dir dist/cjs --extensions '.js,.jsx,.ts,.tsx' --source-maps --copy-files",
+		"build:esm": "BABEL_ENV=esm babel src --out-dir dist/esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --copy-files",
+		"build:prettier": "prettier --write 'dist/**/*.js'",
 		"test": "jest"
 	},
 	"homepage": "https://github.com/sei-protocol/sei-js#readme",
 	"keywords": [
 		"sei",
 		"javascript",
-		"typescript",
-		"cosmos"
+		"typescript"
 	],
 	"repository": "[email protected]:sei-protocol/sei-js.git",
 	"license": "MIT",
 	"private": false,
+	"publishConfig": {
+		"access": "public"
+	},
 	"dependencies": {
 		"@cosmjs/amino": "^0.29.5",
 		"@cosmjs/cosmwasm-stargate": "^0.29.5",
@@ -36,22 +41,28 @@
 		"@ethersproject/keccak256": "^5.7.0",
 		"@keplr-wallet/types": "^0.11.41",
 		"@sei-js/proto": "^3.0.2",
+		"buffer": "^6.0.3",
 		"crypto-js": "^4.1.1",
+		"elliptic": "^6.5.4",
+		"process": "^0.11.10",
 		"readonly-date": "^1.0.0",
 		"sha.js": "^2.4.11",
-		"xstream": "^11.14.0",
-		"elliptic": "^6.5.4",
-		"buffer": "^6.0.3",
-		"process": "^0.11.10"
+		"xstream": "^11.14.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.22.9",
-		"@babel/plugin-transform-runtime": "^7.22.9",
-		"@babel/preset-env": "^7.22.9",
-		"@babel/preset-react": "^7.22.5",
-		"@babel/preset-typescript": "^7.22.5",
+		"@babel/core": "^7.23.0",
+		"@babel/plugin-transform-runtime": "^7.22.15",
+		"@babel/preset-env": "^7.22.20",
+		"@babel/preset-typescript": "^7.22.15",
 		"@types/crypto-js": "^4.1.1",
 		"@types/elliptic": "^6.4.14",
 		"@types/sha.js": "^2.4.1"
+	},
+	"exports": {
+		".": {
+			"import": "./dist/esm/index.js",
+			"require": "./dist/cjs/index.js",
+			"types": "./dist/types/index.d.ts"
+		}
 	}
 }

packages/core/tsconfig.json

@@ -1,20 +1,17 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "module": "commonjs",
+    "module": "es6",
     "declaration": true,
-    "outDir": "./dist",
+    "outDir": "./dist/types",
     "strict": true,
+    "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
     "noImplicitAny": false,
     "lib": [
-      "ES5",
-      "DOM",
       "ES6",
-      "DOM.Iterable",
-      "ScriptHost",
-      "ES2016.Array.Include"
+      "DOM"
     ]
   },
   "include": ["src"],

packages/proto/.babelrc.js

@@ -1,17 +1,17 @@
-const useESModules = !!process.env.MODULE;
+const useESModules = process.env.BABEL_ENV === 'esm';
 
 module.exports = (api) => {
-  api.cache(() => process.env.MODULE);
-  return {
-    plugins: [
-      ['@babel/transform-runtime', { useESModules }],
-      '@babel/proposal-object-rest-spread',
-      '@babel/proposal-class-properties',
-      '@babel/plugin-proposal-nullish-coalescing-operator',
-      '@babel/plugin-proposal-optional-chaining',
-      '@babel/plugin-proposal-numeric-separator',
-      '@babel/proposal-export-default-from'
-    ],
-    presets: useESModules ? ['@babel/typescript'] : ['@babel/typescript', '@babel/env']
-  };
+	api.cache(() => process.env.BABEL_ENV);
+	return {
+		plugins: [
+			['@babel/transform-runtime', { useESModules }],
+			'@babel/proposal-object-rest-spread',
+			'@babel/proposal-class-properties',
+			'@babel/plugin-proposal-nullish-coalescing-operator',
+			'@babel/plugin-proposal-optional-chaining',
+			'@babel/plugin-proposal-numeric-separator',
+			'@babel/proposal-export-default-from'
+		],
+		presets: useESModules ? ['@babel/typescript'] : ['@babel/typescript', '@babel/env']
+	};
 };

packages/proto/.gitignore

@@ -13,6 +13,7 @@ out
 
 # dist
 main
+esm
 module
 
 # Directory for instrumented libs generated by jscoverage/JSCover
@@ -48,4 +49,4 @@ package-lock.json
 yarn.lock
 
 # others
-.DS_Store
+.DS_Store

packages/proto/package.json

@@ -1,24 +1,28 @@
 {
   "name": "@sei-js/proto",
   "version": "3.0.2",
-  "description": "TypeScript library for Sei protobufs generated using Telescope",
+  "description": "TypeScript library for Sei protobuf files generated using Telescope",
   "author": "besated <[email protected]>",
   "homepage": "https://github.com/sei-protocol/js-proto#readme",
-  "license": "SEE LICENSE IN LICENSE",
-  "main": "main/index.js",
-  "typings": "types/index.d.ts",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "sideEffects": false,
   "directories": {
     "lib": "src",
     "test": "__tests__"
   },
-  "files": [
-    "types",
-    "main"
-  ],
   "scripts": {
-    "build": "cross-env BABEL_ENV=production babel src --out-dir main --delete-dir-on-start --extensions \".tsx,.ts,.js\"",
+    "prebuild": "rimraf dist",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:ts",
+    "build:cjs": "BABEL_ENV=cjs babel src --out-dir dist/cjs --delete-dir-on-start --extensions \".tsx,.ts,.js\"",
+    "build:esm": "BABEL_ENV=esm babel src --out-dir dist/esm --delete-dir-on-start --extensions \".tsx,.ts,.js\"",
     "build:ts": "tsc --project ./tsconfig.json",
-    "buidl": "npm run build && npm run build:ts",
     "codegen": "cross-env NODE_ENV=development babel-node scripts/codegen.js",
     "dev": "cross-env NODE_ENV=development babel-node src/index --extensions \".tsx,.ts,.js\"",
     "watch": "cross-env NODE_ENV=development babel-watch src/index --extensions \".tsx,.ts,.js\"",
@@ -27,9 +31,6 @@
     "test:watch": "jest --watch",
     "test:debug": "node --inspect node_modules/.bin/jest --runInBand"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/sei-protocol/js-proto"
@@ -74,5 +75,12 @@
     "@osmonauts/helpers": "^0.6.0",
     "@osmonauts/lcd": "^0.8.0",
     "protobufjs": "^6.11.2"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
   }
 }