[Docs] improve rollup section of the bundling guide

documentation/Bundling.md

@@ -179,16 +179,46 @@ Once this is done, you can use rollup by configuring your project in the way tha
 
 In order to use Azure SDK libraries inside JS, you need to import code from the package you installed earlier. Create `src/index.js` with the following content:
 
+```js
+// src/index.js
+import { SomeClient } from "@azure/some-sdk-package";
+// Now do something interesting with the client
+```
+
+Next we need to configure Rollup to take the above code and turn it into a bundle. Save the following `rollup.config.mjs` file next to your `package.json` file you created earlier:
+
+```js
+// rollup.config.mjs
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+export default {
+  input: "src/main.js",
+  output: {
+    file: "dist/bundle.js",
+    format: "esm",
+    name: "main",
+  },
+  plugins: [nodeResolve({ browser: true })],
+};
+```
+
+We also need to install the plugins we referenced in the above file:
+
+```sh
+npm install --save-dev @rollup/plugin-node-resolve
+```
+
+This configuration should work for most of our SDK packages.  However, if the package that you are using have runtime dependencies that are not available on browsers, you may need a more complex configuration.  For example, bundling `@azure/storage-blob` usage
+
 ```js
 // src/index.js
 const { BlobServiceClient } = require("@azure/storage-blob");
 // Now do something interesting with BlobServiceClient :)
 ```
 
-Next we need to configure Rollup to take the above code and turn it into a bundle. Save the following `rollup.config.js` file next to your `package.json` file you created earlier:
+requires the follow
 
 ```js
-// rollup.config.js
+// rollup.config.mjs
 import resolve from "@rollup/plugin-node-resolve";
 import cjs from "@rollup/plugin-commonjs";
 import json from "@rollup/plugin-json";
@@ -198,7 +228,7 @@ export default {
   input: "src/index.js",
   output: {
     file: "dist/bundle.js",
-    format: "iife",
+    format: "esm",
     name: "main"
   },
   plugins: [
@@ -283,10 +313,10 @@ import { BlobServiceClient } from "@azure/storage-blob";
 // Now do something interesting with BlobServiceClient :)
 ```
 
-Next we need to configure Rollup to take the above code and turn it into a bundle. Save the following `rollup.config.js` file next to your `package.json` file you created earlier:
+Next we need to configure Rollup to take the above code and turn it into a bundle. Save the following `rollup.config.mjs` file next to your `package.json` file you created earlier:
 
 ```js
-// rollup.config.js
+// rollup.config.mjs
 import resolve from "@rollup/plugin-node-resolve";
 import cjs from "@rollup/plugin-commonjs";
 import json from "@rollup/plugin-json";
@@ -297,7 +327,7 @@ export default {
   input: "src/index.ts",
   output: {
     file: "dist/bundle.js",
-    format: "iife",
+    format: "esm",
     name: "main"
   },
   plugins: [

samples/Bundling/parcel/js/index.js

@@ -1,32 +1,31 @@
-const { BlobServiceClient } = require("@azure/storage-blob");
+import { BlobServiceClient } from "@azure/storage-blob";
 
 function getServiceSasUrl() {
-    return document.getElementById("serviceSasUrl").value;
+  return document.getElementById("serviceSasUrl").value;
 }
 
 function showContainerList(containers) {
-    const outputEl = document.getElementById("output");
-    // empty previous output
-    outputEl.textContent = "";
-    for (const container of containers) {
-        const containerDiv = document.createElement("div");
-        containerDiv.textContent = container.name;
-        outputEl.appendChild(containerDiv);
-    }
+  const outputEl = document.getElementById("output");
+  // empty previous output
+  outputEl.textContent = "";
+  for (const container of containers) {
+    const containerDiv = document.createElement("div");
+    containerDiv.textContent = container.name;
+    outputEl.appendChild(containerDiv);
+  }
 }
 
 async function listContainers() {
-    const blobServiceClient = new BlobServiceClient(getServiceSasUrl());
-    let iter = await blobServiceClient.listContainers();
-    const containers = [];
-    for await (const container of iter) {
-        containers.push(container);
-    }
-    showContainerList(containers);
-
+  const blobServiceClient = new BlobServiceClient(getServiceSasUrl());
+  let iter = await blobServiceClient.listContainers();
+  const containers = [];
+  for await (const container of iter) {
+    containers.push(container);
+  }
+  showContainerList(containers);
 }
 
 window.addEventListener("DOMContentLoaded", () => {
-    const listContainersButton = document.getElementById("listContainers");
-    listContainersButton.addEventListener("click", () => listContainers());
-});
+  const listContainersButton = document.getElementById("listContainers");
+  listContainersButton.addEventListener("click", () => listContainers());
+});

samples/Bundling/parcel/js/package.json

@@ -2,7 +2,7 @@
   "name": "storage-example",
   "version": "1.0.0",
   "description": "A small example of using the Azure Storage SDK",
-  "main": "index.js",
+  "source": "storage.html",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -13,8 +13,8 @@
     "last 1 Edge version"
   ],
   "devDependencies": {
-    "@azure/core-lro": "^1.0.0",
-    "@azure/storage-blob": "^12.0.0"
-  },
-  "dependencies": {}
+    "@azure/storage-blob": "^12.26.0",
+    "buffer": "^6.0.3",
+    "process": "^0.11.10"
+  }
 }

samples/Bundling/parcel/js/storage.html

@@ -4,7 +4,7 @@
   <head>
     <meta charset="utf-8">
     <title>Azure SDK Storage Example</title>
-    <script src="./index.js"></script>
+    <script type="module" src="index.js"></script>
   </head>
   <body>
       <h1>Azure SDK Storage Example</h1>

samples/Bundling/parcel/ts/package.json

@@ -2,9 +2,8 @@
   "name": "storage-example",
   "version": "1.0.0",
   "description": "A small example of using the Azure Storage SDK",
-  "main": "index.js",
+  "source": "storage.html",
   "scripts": {
-    "build": "tsc",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "MIT",
@@ -14,9 +13,8 @@
     "last 1 Edge version"
   ],
   "devDependencies": {
-    "@azure/core-lro": "^1.0.0",
-    "@azure/storage-blob": "^12.0.0",
-    "typescript": "^3.6.4"
-  },
-  "dependencies": {}
+    "@azure/storage-blob": "^12.26.0",
+    "buffer": "^6.0.3",
+    "process": "^0.11.10"
+  }
 }

samples/Bundling/parcel/ts/storage.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Azure SDK Storage Example</title>
-    <script src="./index.ts"></script>
+    <script type="module" src="./index.ts"></script>
   </head>
   <body>
       <h1>Azure SDK Storage Example</h1>

samples/Bundling/rollup/js/package.json

@@ -8,11 +8,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@azure/core-lro": "^2.0.0",
-    "@azure/storage-blob": "^12.7.0",
-    "@rollup/plugin-json": "^4.0.0",
-    "@rollup/plugin-commonjs": "^11.0.1",
-    "@rollup/plugin-node-resolve": "^7.0.0",
+    "@azure/storage-blob": "^12.26.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "rollup-plugin-shim": "^1.0.0"
   },
   "dependencies": {}

samples/Bundling/rollup/ts/package.json

@@ -9,14 +9,14 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@azure/core-lro": "^2.0.0",
-    "@azure/storage-blob": "^12.7.0",
-    "@rollup/plugin-json": "^4.0.0",
-    "@rollup/plugin-commonjs": "^11.0.1",
-    "@rollup/plugin-node-resolve": "^7.0.0",
+    "@azure/async-iterator-polyfill": "^1.0.0",
+    "@azure/storage-blob": "^12.26.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "rollup-plugin-shim": "^1.0.0",
-    "rollup-plugin-typescript2": "^0.24.3",
-    "typescript": "^3.6.4"
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.7.2"
   },
   "dependencies": {}
 }

samples/Bundling/rollup/ts/tsconfig.json

@@ -1,10 +1,11 @@
 {
-    "compilerOptions": {
-      "outDir": "./dist/",
-      "noImplicitAny": true,
-      "strict": true,
-      "module": "es6",
-      "moduleResolution": "node",
-      "target": "es6"
-    }
-  }
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "strict": true,
+    "lib": ["ES2022", "DOM"],
+    "module": "ES2022",
+    "moduleResolution": "node",
+    "target": "ES2022"
+  }
+}

samples/Bundling/webpack/js/package.json

@@ -8,8 +8,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@azure/core-lro": "^1.0.0",
-    "@azure/storage-blob": "^12.0.0"
+    "@azure/storage-blob": "^12.26.0"
   },
   "dependencies": {}
 }

samples/Bundling/webpack/js/src/index.js

@@ -1,32 +1,31 @@
-const { BlobServiceClient } = require("@azure/storage-blob");
+import { BlobServiceClient } from "@azure/storage-blob";
 
 function getServiceSasUrl() {
-    return document.getElementById("serviceSasUrl").value;
+  return document.getElementById("serviceSasUrl").value;
 }
 
 function showContainerList(containers) {
-    const outputEl = document.getElementById("output");
-    // empty previous output
-    outputEl.textContent = "";
-    for (const container of containers) {
-        const containerDiv = document.createElement("div");
-        containerDiv.textContent = container.name;
-        outputEl.appendChild(containerDiv);
-    }
+  const outputEl = document.getElementById("output");
+  // empty previous output
+  outputEl.textContent = "";
+  for (const container of containers) {
+    const containerDiv = document.createElement("div");
+    containerDiv.textContent = container.name;
+    outputEl.appendChild(containerDiv);
+  }
 }
 
 async function listContainers() {
-    const blobServiceClient = new BlobServiceClient(getServiceSasUrl());
-    let iter = await blobServiceClient.listContainers();
-    const containers = [];
-    for await (const container of iter) {
-        containers.push(container);
-    }
-    showContainerList(containers);
-
+  const blobServiceClient = new BlobServiceClient(getServiceSasUrl());
+  let iter = await blobServiceClient.listContainers();
+  const containers = [];
+  for await (const container of iter) {
+    containers.push(container);
+  }
+  showContainerList(containers);
 }
 
 window.addEventListener("DOMContentLoaded", () => {
-    const listContainersButton = document.getElementById("listContainers");
-    listContainersButton.addEventListener("click", () => listContainers());
-});
+  const listContainersButton = document.getElementById("listContainers");
+  listContainersButton.addEventListener("click", () => listContainers());
+});

samples/Bundling/webpack/ts/package.json

@@ -9,10 +9,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@azure/core-lro": "^1.0.0",
-    "@azure/storage-blob": "^12.0.0",
-    "ts-loader": "^6.2.1",
-    "typescript": "^3.6.4"
+    "@azure/storage-blob": "^12.26.0",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.7.2"
   },
   "dependencies": {}
 }

samples/Bundling/webpack/ts/tsconfig.json

@@ -1,10 +1,10 @@
 {
-    "compilerOptions": {
-      "outDir": "./dist/",
-      "noImplicitAny": true,
-      "strict": true,
-      "module": "es6",
-      "moduleResolution": "node",
-      "target": "es6"
-    }
-  }
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "strict": true,
+    "module": "ES2022",
+    "moduleResolution": "node",
+    "target": "ES2022"
+  }
+}