Add Blockchain browser example

ethereumjs · acolytec3 · Jun 28, 2023 · Jun 28, 2023 · Jun 28, 2023 · Jun 28, 2023
commit 73374c0514ed28044a7a7dbd4eafbd465682664a
diff --git a/packages/blockchain/examples/browser.html b/packages/blockchain/examples/browser.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>EthereumJS Browser Examples</title>
+    <script type="module">
+        import { Blockchain } from '@ethereumjs/blockchain'
+        import { bytesToPrefixedHexString } from '@ethereumjs/util'
+
+        const run = async () => {
+            const blockchain = await Blockchain.create()
+            const head = await blockchain.getIteratorHead()
+            console.log(bytesToPrefixedHexString(head.hash()))
+        }
+
+        run()
+    </script>
+
+</head>
+
+<body style="padding:50px; font-family: Arial, Helvetica, sans-serif;">
+    <h1>Blockchain | @ethereumjs/blockchain</h1>
+    Basic usage of this library in the browser (using <a href="https://github.com/vitejs/vite" target="_blank">Vite</a>)
+
+    <h3>Run the Example</h3>
+    <ol>
+        <li>
+            Go to the library root directory (packages/[LIBRARY_NAME]/)
+        </li>
+        <li>
+            Build "dist" folder with: npm run build
+        </li>
+        <li>
+            Start Vite development server with: npx vite
+        </li>
+        <li>
+            Open the example URL in the browser (http://localhost:5173/examples/browser.html)
+        </li>
+        <li>
+            Open the development console (e.g. Chrome Developer Tools)
+        </li>
+        <li>
+            See example results and play with the code
+        </li>
+    </ol>
+
+    <h3>Interactive CLI</h3>
+    <ol>
+        <li>Open the "Sources -> Page" tab in the Chrome Developer Tools</li>
+        <li>Set a breakpoint within the original "browser.html" file (so not the one generated by Vite)</li>
+        <li>Now you can use and play with the imports dynamically</li>
+    </ol>
+
+</body>
+
+</html>
diff --git a/packages/trie/examples/browser.html b/packages/trie/examples/browser.html
@@ -9,7 +9,7 @@
 
         const trie = new Trie()
 
-        async function test() {
+        const test = async () => {
             await trie.put(utf8ToBytes('test'), utf8ToBytes('one'))
             const value = await trie.get(utf8ToBytes('test'))
             console.log(bytesToUtf8(value)) // 'one'