feat: update rollup for esm/node

.eslintignore

@@ -1,5 +1,6 @@
 node_modules
 dist
 build
+lib
 coverage
-target
+target

.gitignore

@@ -16,6 +16,7 @@ node_modules/
 # Build and test
 dist/
 build/
+lib/
 coverage/
 
 # JetBrains

.npmignore

@@ -5,3 +5,4 @@ node_modules/
 .yarn
 test/
 src/
+stats.html

api/.gitignore

@@ -0,0 +1,2 @@
+# Bundle stats file
+stats.html

api/package.json

@@ -1,7 +1,16 @@
 {
   "name": "@metaplex/js",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "browser": {
+    "./lib/index.cjs.js": "./lib/index.browser.esm.js",
+    "./lib/index.esm.js": "./lib/index.browser.esm.js"
+  },
+  "files": [
+    "/lib",
+    "/src"
+  ],
   "version": "0.0.1",
   "license": "MIT",
   "description": "Metaplex JavaScript API",
@@ -17,9 +26,9 @@
     "url": "https://github.com/metaplex/js.git"
   },
   "scripts": {
-    "build:dist": "rimraf dist && tsc -p tsconfig.build.json",
-    "build:bundle": "rimraf build && rollup -c rollup.config.js",
-    "dev": "tsc -p tsconfig.build.json --watch",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "build": "rimraf lib && rollup -c && yarn build:types",
+    "dev": "rollup -c --watch",
     "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
     "fix:eslint": "eslint . --format stylish --fix",
     "fix": "yarn fix:eslint && fix:prettier",
@@ -35,8 +44,7 @@
     "borsh": "^0.4.0",
     "bs58": "^4.0.1",
     "buffer": "^6.0.3",
-    "crypto-js": "^4.1.1",
-    "uuid": "^8.3.2"
+    "crypto-hash": "^1.3.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^20.0.0",
@@ -50,8 +58,14 @@
     "rollup": "^2.56.3",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-visualizer": "^5.5.2",
     "ts-jest": "^27.0.5",
     "ts-node": "^10.2.1",
     "typescript": "^4.4.3"
-  }
+  },
+  "browserslist": [
+    "defaults",
+    "not IE 11",
+    "maintained node versions"
+  ]
 }

api/rollup.config.js

@@ -2,62 +2,103 @@ import typescript from 'rollup-plugin-typescript2';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import json from '@rollup/plugin-json';
-// import replace from '@rollup/plugin-replace';
+import { visualizer } from 'rollup-plugin-visualizer';
 import { terser } from 'rollup-plugin-terser';
 
-const plugins = ({ browser = false }) => [
+const plugins = ({ browser }) => [
   typescript({
     tsconfig: 'tsconfig.build.json',
     tsconfigOverride: {
       compilerOptions: {
         declaration: false,
-        declarationMap: false,
         module: 'ES2015',
       },
     },
   }),
   resolve({
     browser,
-    dedupe: ['bn.js', 'buffer'],
+    dedupe: ['bn.js', 'buffer', 'crypto-hash'],
     preferBuiltins: !browser,
   }),
   commonjs(),
   json(),
 ];
-const terserPlugin = terser();
 
-const bundle = {
-  input: 'src/index.ts',
-  output: {
-    format: 'iife',
-    name: 'metaplex',
-    sourcemap: true,
-    globals: {
-      '@solana/web3.js': 'solanaWeb3',
-      '@solana/spl-token': 'splToken',
-      crypto: 'crypto',
-    },
-  },
-  context: 'window',
-  external: ['@solana/web3.js', '@solana/spl-token', 'crypto'],
+const config = ({ browser, format } = { browser: false }) => {
+  const input = 'src/index.ts';
+  const config = {
+    input,
+    plugins: plugins({ browser }),
+    // Default external, can be overrided
+    external: [
+      '@solana/spl-token',
+      '@solana/web3.js',
+      '@types/bs58',
+      'axios',
+      'bn.js',
+      'borsh',
+      'bs58',
+      'buffer',
+      'crypto-hash',
+    ],
+  };
+
+  if (browser) {
+    switch (format) {
+      case 'esm':
+        config.output = {
+          file: 'lib/index.browser.esm.js',
+          format: 'es',
+          sourcemap: true,
+        };
+        break;
+      case 'iife':
+        const base = {
+          format: 'iife',
+          name: 'metaplex',
+          sourcemap: true,
+          globals: {
+            '@solana/web3.js': 'solanaWeb3',
+            '@solana/spl-token': 'splToken',
+          },
+        };
+        config.output = [
+          {
+            ...base,
+            file: 'lib/index.iife.js',
+          },
+          {
+            ...base,
+            file: 'lib/index.iife.min.js',
+            plugins: [terser(), visualizer()],
+          },
+        ];
+        config.context = 'window';
+        config.external = ['@solana/web3.js', '@solana/spl-token'];
+        break;
+      default:
+        throw new Error(`Unknown format: ${format}`);
+    }
+  } else {
+    config.output = [
+      {
+        file: 'lib/index.cjs.js',
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: 'lib/index.esm.js',
+        format: 'es',
+        sourcemap: true,
+      },
+    ];
+  }
+
+  return config;
 };
 
 export default [
-  {
-    ...bundle,
-    output: {
-      ...bundle.output,
-      file: 'build/metaplex.js',
-    },
-    plugins: plugins({ browser: true }),
-  },
-  // Min
-  {
-    ...bundle,
-    output: {
-      ...bundle.output,
-      file: 'build/metaplex.min.js',
-    },
-    plugins: [...plugins({ browser: true }), terserPlugin],
-  },
+  config(), // Node
+  config({ browser: true, format: 'esm' }),
+  config({ browser: true, format: 'iife' }),
 ];

api/src/utils/crypto.ts

@@ -1,6 +1,4 @@
-import sha256 from 'crypto-js/sha256';
+import { sha256 } from 'crypto-hash';
 import { Buffer } from 'buffer';
 
-export async function getFileHash(file: Buffer) {
-  return Buffer.from(sha256(file.toString()).toString());
-}
+export const getFileHash = async (file: Buffer) => Buffer.from(await sha256(file.toString()));

api/tsconfig.build.json

@@ -1,8 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "outDir": "./dist",
-    "module": "commonjs",
+    "outDir": "./lib",
     "target": "es6",
     "declaration": true,
     "removeComments": true,
@@ -12,7 +11,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
-    "skipLibCheck": true
+    "skipLibCheck": true,
   },
   "include": [
     "./src"

examples/browser/index.html → examples/iife/index.html

@@ -8,7 +8,8 @@
     <button id="metadata" type="button">Get metadata</button>
   </div>
   <script crossorigin = "anonymous" src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.min.js"></script>
-  <script crossorigin = "anonymous" src="../../api/build/metaplex.min.js"></script>
+  <script crossorigin = "anonymous" src="https://unpkg.com/@solana/[email protected]/lib/index.iife.min.js"></script>
+  <script src="../../api/lib/index.iife.min.js"></script>
   <script src="./index.js"></script>
 </body>
 </html>

examples/browser/package.json → examples/iife/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "example-browser",
+  "name": "example-iife",
   "version": "0.0.1",
   "license": "MIT",
   "repository": {

examples/web/index.html

@@ -0,0 +1,12 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Example Metaplex</title>
+</head>
+<body>
+  <div style="text-align: center; padding: 240px 0;">
+    <button id="metadata" type="button">Get metadata</button>
+  </div>
+  <script type='module' src="./index.ts"></script>
+</body>
+</html>

examples/web/index.ts

@@ -0,0 +1,15 @@
+import { PublicKey } from '@solana/web3.js';
+import { Metadata, Connection } from '@metaplex/js';
+
+const metadataPubkey = new PublicKey('CZkFeERacU42qjApPyjamS13fNtz7y1wYLu5jyLpN1WL');
+const connection = new Connection('devnet');
+const btn = document.getElementById('metadata');
+
+const run = async () => {
+  btn.addEventListener('click', async () => {
+    const metadata = await Metadata.load(connection, metadataPubkey);
+    console.log(metadata);
+  });
+};
+
+run();

examples/web/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "example-web",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/metaplex/js.git"
+  },
+  "private": true,
+  "scripts": {
+    "start": "parcel index.html --cache-dir build/cache"
+  },
+  "dependencies": {
+    "@metaplex/js": "workspace:^0.0.1",
+    "@solana/spl-token": "^0.1.8",
+    "@solana/web3.js": "^1.24.1"
+  },
+  "devDependencies": {
+    "parcel": "next",
+    "typescript": "^4.4.3"
+  },
+  "browserslist": [
+    "last 2 Chrome versions"
+  ]
+}

package.json

@@ -9,6 +9,11 @@
   ],
   "scripts": {
     "dev": "yarn workspace @metaplex/js run dev",
+    "build": "yarn workspace @metaplex/js run build",
+    "example:web": "yarn workspace example-web run start",
+    "example:iife": "yarn workspace example-iife run start",
+    "example:node": "yarn workspace example-node run start",
+    "clean": "yarn cache clean && rm -rf node_modules",
     "preinstall": "npx only-allow yarn"
   },
   "devDependencies": {

tsconfig.json

@@ -10,5 +10,5 @@
     "allowSyntheticDefaultImports": true,
     "baseUrl": "."
   },
-  "exclude": ["node_modules", "dist", "build"]
+  "exclude": ["node_modules", "dist", "build", "lib"]
 }