Create a ESM build for node (#91)

* Create a ESM build for node It fixes the XMLHttpRequest is not defined error when "import"ing library from node. We now have 2 ESM in the dist, one built for node, one build for the browser. Quick reminder on why there are 4 files: browser: archethic.js browser import: archethic-browser.mjs node import: archethic-node.mjs node require: archethic.cjs * Expose Archethic in the archethic.js Add a small example to demonstrate how to use it * Expose Archethic so we do not have to use .default in browser
archethic-foundation · Dec 22, 2022 · bb11acb · bb11acb
1 parent 53c964a
commit bb11acb
Show file tree

Hide file tree

Showing 11 changed files with 309 additions and 27 deletions.
diff --git a/build.js b/build.js
@@ -13,7 +13,11 @@ esbuild.build({
   define: {
     global: 'window'
   },
+  globalName: "archethic",
   inject: ['./esbuild.inject.js'],
+  footer: {
+    js: "Archethic = archethic.default; Archethic.Utils = archethic.Utils; Archethic.Crypto = archethic.Crypto;"
+  }
 }).catch(() => process.exit(1))
 
 esbuild.build({
@@ -33,7 +37,22 @@ esbuild.build({
   bundle: true,
   minify: true,
   sourcemap: true,
-  outfile: 'dist/archethic.mjs',
+  outfile: 'dist/archethic-browser.mjs',
   inject: ['./esbuild.inject.js'],
   format: 'esm'
 }).catch(() => process.exit(1))
+
+esbuild.build({
+  logLevel: "info",
+  entryPoints: ['index.js'],
+  bundle: true,
+  minify: true,
+  sourcemap: true,
+  outfile: 'dist/archethic-node.mjs',
+  inject: ['./esbuild.inject.js'],
+  format: 'esm',
+  platform: "node",
+  banner: {
+    js: "import { createRequire } from 'module';const require = createRequire(import.meta.url);"
+  },
+}).catch(() => process.exit(1))
diff --git a/dist/archethic-browser.mjs b/dist/archethic-browser.mjs
diff --git a/dist/archethic-browser.mjs.map b/dist/archethic-browser.mjs.map
diff --git a/dist/archethic-node.mjs b/dist/archethic-node.mjs
diff --git a/dist/archethic-node.mjs.map b/dist/archethic-node.mjs.map
diff --git a/dist/archethic.cjs b/dist/archethic.cjs
diff --git a/dist/archethic.cjs.map b/dist/archethic.cjs.map
diff --git a/dist/archethic.js b/dist/archethic.js
diff --git a/dist/archethic.js.map b/dist/archethic.js.map
diff --git a/example/browserConnect/index.html b/example/browserConnect/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!-- This example demonstrates how to use the Archethic JavaScript SDK without any build system -->
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Example: AE Browser Connect</title>
+    <!-- Load the SDK -->
+    <script src="../../dist/archethic.js"></script>
+</head>
+
+<body>
+    <h1>Connect to the Archethic via the JavaScript SDK</h1>
+
+    <form action="#" onsubmit="return connect(this);">
+        <label>Endpoint:<input name="endpoint" value="http://localhost:4000" /></label>
+        <button type="submit">Connect</button>
+        <span>
+            Status: <span id="status"></span>
+        </span>
+    </form>
+
+    <script type="text/javascript">
+        function displayStatus(status) {
+            document.getElementById("status").innerText = status
+        }
+
+        displayStatus("DISCONNECTED")
+
+        function connect(form) {
+            displayStatus("CONNECTING")
+
+            endpoint = form.querySelector("input[name=endpoint]").value
+
+            var promiseToConnect = new Archethic(endpoint).connect()
+
+            promiseToConnect
+                .then(() => {
+                    displayStatus("CONNECTED")
+                })
+                .catch((a) => {
+                    displayStatus(`DISCONNECTED (${a.message})`)
+                })
+
+            return false
+        }
+    </script>
+
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "archethic",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "description": "Archethic Javascript SDK",
   "main": "index.js",
-  "module": "dist/archethic.mjs",
+  "module": "dist/archethic-browser.mjs",
   "unpkg": "dist/archethic.js",
   "jsdelivr": "dist/archethic.js",
   "type": "module",
   "exports": {
-    "import": "./dist/archethic.mjs",
+    "import": "./dist/archethic-node.mjs",
     "require": "./dist/archethic.cjs"
   },
   "scripts": {
@@ -59,8 +59,9 @@
     "ws": "^8.5.0"
   },
   "browser": {
+    "archethic": "./dist/archethic-browser.mjs",
     "crypto": "crypto-browserify",
     "stream": "stream-browserify",
     "buffer-xor": "buffer-xor"
   }
-}
+}