noahdarveau/buffer removal (#2598)

* replaced buffer with uint8array-extras

change/@microsoft-teams-js-7805c977-c283-42e2-9e37-bbbf82239930.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Replaced `Buffer` with `uint8array-extras` to allow for `buffer` polyfill removal",
+  "packageName": "@microsoft/teams-js",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -146,7 +146,6 @@
     }
   },
   "dependencies": {
-    "skeleton-buffer": "file:./skeleton-buffer",
     "uuid": "^9.0.1"
   }
 }

packages/teams-js/jest-setup.cjs

@@ -0,0 +1,10 @@
+/* eslint-disable strict-null-checks/all */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+/**
+ * This while TextDecoder is supported in both browser and Node environments, it is not supported in jsdom, which we use for our jest environment.
+ * To resolve this issue, we polyfill TextDecoder with the node implementation prior to rujnning the tests.
+ */
+
+const TextDecoder = require('util').TextDecoder;
+global.TextDecoder = TextDecoder;

packages/teams-js/jest.config.cjs

@@ -7,4 +7,5 @@ module.exports = {
   globals: {
     PACKAGE_VERSION: packageVersion,
   },
+  setupFilesAfterEnv: ['./jest-setup.cjs'],
 };

packages/teams-js/src/internal/uint8array-extras/README.md

@@ -0,0 +1 @@
+This package is a stripped out version of the [uint8arrays-extras](https://www.npmjs.com/package/uint8array-extras) package, containing only the functionality used by teams-js. It is being directly included in the library instead of an NPM package due to a Jest issue preventing its usage, which is solved by transpiling the file ourselves. This package is used to replace the `Buffer` package as this is both treeshakable and browser-compatible, so we no longer need to polyfill `Buffer`, which is quite size intensive. This provides a much more space-efficient method to providing the needed functionality. To update our `uint8array-extras` package if a new version is released, we will need to look at the new version of the package published to npm and manually copy the contents to our package here.

packages/teams-js/src/internal/uint8array-extras/license

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Sindre Sorhus <[email protected]> (https://sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/teams-js/src/internal/uint8array-extras/uint8array-extras.ts

@@ -0,0 +1,82 @@
+const objectToString = Object.prototype.toString;
+const uint8ArrayStringified = '[object Uint8Array]';
+const arrayBufferStringified = '[object ArrayBuffer]';
+
+const cachedDecoders = {
+  utf8: new globalThis.TextDecoder('utf8'),
+};
+
+export type TypedArray =
+  | Int8Array
+  | Uint8Array
+  | Uint8ClampedArray
+  | Int16Array
+  | Uint16Array
+  | Int32Array
+  | Uint32Array
+  | Float32Array
+  | Float64Array
+  | BigInt64Array
+  | BigUint64Array;
+
+function isType(value, typeConstructor, typeStringified): boolean {
+  if (!value) {
+    return false;
+  }
+
+  if (value.constructor === typeConstructor) {
+    return true;
+  }
+
+  return objectToString.call(value) === typeStringified;
+}
+
+export function isUint8Array(value: unknown): value is Uint8Array {
+  return isType(value, Uint8Array, uint8ArrayStringified);
+}
+
+function isArrayBuffer(value): boolean {
+  return isType(value, ArrayBuffer, arrayBufferStringified);
+}
+
+function assertString(value): void {
+  if (typeof value !== 'string') {
+    throw new TypeError(`Expected \`string\`, got \`${typeof value}\``);
+  }
+}
+
+export function base64ToUint8Array(base64String: string): Uint8Array {
+  assertString(base64String);
+  return Uint8Array.from(globalThis.atob(base64UrlToBase64(base64String)), (x) => {
+    const codePoint = x.codePointAt(0);
+    if (codePoint === undefined) {
+      throw new Error('Invalid character encountered');
+    }
+    return codePoint;
+  });
+}
+
+function base64UrlToBase64(base64url: string): string {
+  return base64url.replaceAll('-', '+').replaceAll('_', '/');
+}
+
+export function uint8ArrayToString(array: Uint8Array | ArrayBuffer, encoding = 'utf8'): string {
+  assertUint8ArrayOrArrayBuffer(array);
+  cachedDecoders[encoding] ??= new globalThis.TextDecoder(encoding);
+  return cachedDecoders[encoding].decode(array);
+}
+
+export function base64ToString(base64String: string): string {
+  assertString(base64String);
+  return uint8ArrayToString(base64ToUint8Array(base64String));
+}
+
+export function assertUint8ArrayOrArrayBuffer(value): void {
+  if (!isUint8ArrayOrArrayBuffer(value)) {
+    throw new TypeError(`Expected \`Uint8Array\` or \`ArrayBuffer\`, got \`${typeof value}\``);
+  }
+}
+
+function isUint8ArrayOrArrayBuffer(value): boolean {
+  return isUint8Array(value) || isArrayBuffer(value);
+}

packages/teams-js/src/internal/utils.ts

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/ban-types */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { Buffer } from 'buffer';
 import * as uuid from 'uuid';
 
 import { minAdaptiveCardVersion } from '../public/constants';
 import { AdaptiveCardVersion, SdkError } from '../public/interfaces';
 import * as pages from '../public/pages/pages';
+import { base64ToString } from './uint8array-extras/uint8array-extras';
 
 /**
  * @internal
@@ -348,14 +348,14 @@ export function base64ToBlob(mimeType: string, base64String: string): Promise<Bl
      *      constructor expects binary data.
      */
     if (mimeType.startsWith('image/')) {
-      const byteCharacters = atob(base64String);
+      const byteCharacters = base64ToString(base64String);
       const byteArray = new Uint8Array(byteCharacters.length);
       for (let i = 0; i < byteCharacters.length; i++) {
         byteArray[i] = byteCharacters.charCodeAt(i);
       }
       resolve(new Blob([byteArray], { type: mimeType }));
     }
-    const byteCharacters = Buffer.from(base64String, 'base64').toString();
+    const byteCharacters = base64ToString(base64String);
     resolve(new Blob([byteCharacters], { type: mimeType }));
   });
 }

packages/teams-js/tsconfig.json

@@ -3,8 +3,8 @@
   "compilerOptions": {
     "outDir": "./dist/esm",
     "declarationDir": "./dist/esm/packages/teams-js/dts",
-    "lib": ["DOM", "ES2015", "ES5"],
-    "module": "es6",
+    "lib": ["DOM", "ES2015", "ES5", "ES2021.String"],
+    "module": "ES6",
     "moduleResolution": "node",
     "noResolve": false,
     "noImplicitAny": false,

packages/teams-js/webpack.config.cjs

@@ -34,9 +34,6 @@ module.exports = {
   devtool: 'source-map',
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
-    fallback: {
-      buffer: require.resolve('skeleton-buffer/'),
-    },
   },
   module: {
     rules: [
@@ -75,10 +72,6 @@ module.exports = {
     // https://www.npmjs.com/package/webpack-subresource-integrity
     new SubresourceIntegrityPlugin({ enabled: true }),
 
-    new ProvidePlugin({
-      Buffer: ['skeleton-buffer', 'Buffer'],
-    }),
-
     // Webpackmanifest produces the json file containing asset(JS file) and its corresponding hash values(Example: https://github.com/waysact/webpack-subresource-integrity/blob/main/examples/webpack-assets-manifest/webpack.config.js)
     new WebpackAssetsManifest({
       integrity: true,