From 67afcd44701d3f641d9303c049dfc245ff71b7a3 Mon Sep 17 00:00:00 2001
From: Wendy Hsu <prudepixie@users.noreply.github.com>
Date: Tue, 24 May 2022 15:34:51 -0700
Subject: [PATCH] Add benchmark github actions workflow, run and report
 tachometer results  (#5991)

* pass local branch name from github actions  (#6019)

* better null check

Co-authored-by: Wendy <wendy@Wendys-MacBook-Pro-Microsoft.local>
---
 .github/workflows/ci-benchmarks.yml           |  90 +++++
 ...-9a607d76-22aa-4cdd-bd1a-4b186cb44969.json |   7 +
 package.json                                  | 332 ++++++++--------
 packages/utilities/fast-benchmarks/.gitignore |   1 -
 .../benchmarks/fast-element/render/index.html |   2 -
 .../benchmarks/fast-element/render/index.ts   |  78 +---
 .../fast-element/render/index2.html           |   2 -
 .../benchmarks/fast-element/render/index2.ts  |  31 +-
 .../benchmarks/fast-element/render/shared.ts  |  42 --
 .../benchmarks/fast-element/test/index.ts     |  47 ---
 .../benchmarks/fast-element/test/index2.ts    |  55 ---
 .../utilities/fast-benchmarks/package.json    |  23 +-
 .../fast-element_localTest-create10k.json     | 372 ++++++++++++++++++
 .../results/fast-element_test-create10k.json  | 372 ++++++++++++++++++
 .../results/fast-element_test-update10th.json | 372 ++++++++++++++++++
 .../results/fast-element_test.json            |   0
 .../fast-benchmarks/scripts/index.js          |  25 +-
 .../fast-benchmarks/scripts/template.js       |  29 +-
 .../web-components/fast-element/package.json  | 201 +++++-----
 yarn.lock                                     | 159 ++++----
 20 files changed, 1654 insertions(+), 586 deletions(-)
 create mode 100644 .github/workflows/ci-benchmarks.yml
 create mode 100644 change/fast-benchmarks-9a607d76-22aa-4cdd-bd1a-4b186cb44969.json
 delete mode 100644 packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index.html
 delete mode 100644 packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index2.html
 delete mode 100644 packages/utilities/fast-benchmarks/benchmarks/fast-element/render/shared.ts
 delete mode 100644 packages/utilities/fast-benchmarks/benchmarks/fast-element/test/index.ts
 delete mode 100644 packages/utilities/fast-benchmarks/benchmarks/fast-element/test/index2.ts
 create mode 100644 packages/utilities/fast-benchmarks/results/fast-element_localTest-create10k.json
 create mode 100644 packages/utilities/fast-benchmarks/results/fast-element_test-create10k.json
 create mode 100644 packages/utilities/fast-benchmarks/results/fast-element_test-update10th.json
 create mode 100644 packages/utilities/fast-benchmarks/results/fast-element_test.json

diff --git a/.github/workflows/ci-benchmarks.yml b/.github/workflows/ci-benchmarks.yml
new file mode 100644
index 00000000000..1cdc3f90389
--- /dev/null
+++ b/.github/workflows/ci-benchmarks.yml
@@ -0,0 +1,90 @@
+name: Fast Element benchmark jobs
+
+on: [pull_request]
+
+jobs:
+    setup:
+      name: Setup Tachometer Reporting
+      runs-on: ubuntu-latest
+      steps:
+        - name: Initialize tachometer comment
+          uses: andrewiggins/tachometer-reporter-action@v2
+          with:
+              initialize: true
+    render_create10k:
+      name: Run render create10k benchmark
+      needs: [setup]
+      runs-on: ubuntu-latest
+      steps:
+        - uses: actions/checkout@v3
+        - uses: actions/setup-node@v1
+          with:
+              node-version: "16.x"
+        - name: Run tachometer and generate results file
+          run: |
+              cd packages/utilities/fast-benchmarks
+              yarn install
+              yarn run benchmark --library=fast-element --benchmark=render --versions latest local --localBenchFile=index2 --branchName=${GITHUB_HEAD_REF} --operations=create10k
+        # Upload this benchmarks results
+        - name: Upload results
+          uses: actions/upload-artifact@v2
+          with:
+              name: results
+              path: packages/utilities/fast-benchmarks/results/fast-element_render-create10k.json
+    render_update10th:
+      name: Run render update 10th benchmark
+      needs: [setup]
+      runs-on: ubuntu-latest
+      steps:
+        - uses: actions/checkout@v3
+        - uses: actions/setup-node@v1
+          with:
+              node-version: "16.x"
+        - name: Run tachometer and generate results file
+          run: |
+              cd packages/utilities/fast-benchmarks
+              yarn install
+              yarn run benchmark --library=fast-element --benchmark=render --versions latest local --localBenchFile=index2 --branchName=${GITHUB_HEAD_REF} --operations=update10th
+        # Upload this benchmarks results
+        - name: Upload results
+          uses: actions/upload-artifact@v2
+          with:
+              name: results
+              path: packages/utilities/fast-benchmarks/results/fast-element_render-update10th.json
+    render_createDelete5x:
+      name: Run render create and delete 5 times benchmark
+      needs: [setup]
+      runs-on: ubuntu-latest
+      steps:
+        - uses: actions/checkout@v3
+        - uses: actions/setup-node@v1
+          with:
+              node-version: "16.x"
+        - name: Run tachometer and generate results file
+          run: |
+              cd packages/utilities/fast-benchmarks
+              yarn install
+              yarn run benchmark --library=fast-element --benchmark=render --versions latest local --localBenchFile=index2 --branchName=${GITHUB_HEAD_REF} --operations=createDelete5x
+        # Upload this benchmarks results
+        - name: Upload results
+          uses: actions/upload-artifact@v2
+          with:
+              name: results
+              path: packages/utilities/fast-benchmarks/results/fast-element_render-createDelete5x.json
+    report_results:
+      name: Report Results
+      needs: [render_create10k, render_update10th, render_createDelete5x]
+      runs-on: ubuntu-latest
+      steps:
+          # Download the results artifact
+          - uses: actions/download-artifact@v2
+            with:
+                name: results
+                path: packages/utilities/fast-benchmarks/results
+
+          # Read all the results and post comment
+          - name: Report Tachometer Result
+            uses: andrewiggins/tachometer-reporter-action@v2
+            with:
+                name: results
+                path: packages/utilities/fast-benchmarks/results/*.json
diff --git a/change/fast-benchmarks-9a607d76-22aa-4cdd-bd1a-4b186cb44969.json b/change/fast-benchmarks-9a607d76-22aa-4cdd-bd1a-4b186cb44969.json
new file mode 100644
index 00000000000..e52cc329136
--- /dev/null
+++ b/change/fast-benchmarks-9a607d76-22aa-4cdd-bd1a-4b186cb44969.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "run workflow on any push",
+  "packageName": "fast-benchmarks",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
index 4fa881d9cd3..5aa0891a256 100644
--- a/package.json
+++ b/package.json
@@ -1,171 +1,171 @@
 {
-  "name": "@microsoft/fast",
-  "description": "An unopinionated system of components, development tools, and utilities used à la carte or as a suite to build enterprise-grade websites and applications.",
-  "version": "1.8.0",
-  "author": {
-    "name": "Microsoft",
-    "url": "https://discord.gg/FcSNfg4"
-  },
-  "license": "MIT",
-  "private": true,
-  "workspaces": {
-    "packages": [
-      "packages/**/*",
-      "sites/fast-color-explorer",
-      "sites/fast-component-explorer",
-      "sites/site-utilities",
-      "sites/fast-website",
-      "sites/website",
-      "examples/design-system-tutorial"
-    ],
-    "nohoist": [
-      "**/@types/chai",
-      "**/@types/jest",
-      "**/@types/karma",
-      "**/@types/mocha",
-      "**/@types/node",
-      "**/chai",
-      "**/html-minifier-terser",
-      "**/react-syntax-highlighter"
-    ]
-  },
-  "engines": {
-    "yarn": ">=1.13 <2"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Microsoft/fast/issues/new/choose"
-  },
-  "scripts": {
-    "bump": "beachball bump",
-    "change": "beachball change",
-    "checkchange": "beachball check  --scope \"!sites/*\" --changehint \"Run 'yarn change' to generate a change file\"",
-    "check": "beachball check ",
-    "publish": "beachball publish",
-    "publish-ci": "beachball publish -y --access public",
-    "integration-tests:alpha": "node build/testing/sauce-labs/test-browsers.js alpha",
-    "integration-tests:beta": "node build/testing/sauce-labs/test-browsers.js beta",
-    "integration-tests:release": "node build/testing/sauce-labs/test-browsers.js release",
-    "prepare": "lerna run prepare",
-    "test:diff:error": "echo \"Untracked files exist, try running yarn prepare to identify the culprit.\" && exit 1",
-    "test:diff": "git update-index --refresh && git diff-index --quiet HEAD -- || yarn test:diff:error",
-    "test:validation": "yarn test:diff",
-    "test": "yarn eslint \"/**/*.{ts}\" ",
-    "unit-tests": "jest --maxWorkers=4",
-    "coverage": "yarn jest --coverage",
-    "unit-tests:watch": "jest --watch",
-    "watch": "tsc -p ./tsconfig.json -w --preserveWatchOutput",
-    "format:check": "lerna run prettier:diff",
-    "format": "lerna run prettier"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "jest": {
-    "collectCoverage": true,
-    "collectCoverageFrom": [
-      "build/helpers/*.ts"
-    ],
-    "coverageReporters": [
-      "json",
-      [
-        "lcov",
-        {
-          "projectRoot": "."
+    "name": "@microsoft/fast",
+    "description": "An unopinionated system of components, development tools, and utilities used à la carte or as a suite to build enterprise-grade websites and applications.",
+    "version": "1.8.0",
+    "author": {
+        "name": "Microsoft",
+        "url": "https://discord.gg/FcSNfg4"
+    },
+    "license": "MIT",
+    "private": true,
+    "workspaces": {
+        "packages": [
+            "packages/**/*",
+            "sites/fast-color-explorer",
+            "sites/fast-component-explorer",
+            "sites/site-utilities",
+            "sites/fast-website",
+            "sites/website",
+            "examples/design-system-tutorial"
+        ],
+        "nohoist": [
+            "**/@types/chai",
+            "**/@types/jest",
+            "**/@types/karma",
+            "**/@types/mocha",
+            "**/@types/node",
+            "**/chai",
+            "**/html-minifier-terser",
+            "**/react-syntax-highlighter"
+        ]
+    },
+    "engines": {
+        "yarn": ">=1.13 <2"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Microsoft/fast.git"
+    },
+    "bugs": {
+        "url": "https://github.com/Microsoft/fast/issues/new/choose"
+    },
+    "scripts": {
+        "bump": "beachball bump",
+        "change": "beachball change",
+        "checkchange": "beachball check  --scope \"!sites/*\" --changehint \"Run 'yarn change' to generate a change file\"",
+        "check": "beachball check ",
+        "publish": "beachball publish",
+        "publish-ci": "beachball publish -y --access public",
+        "integration-tests:alpha": "node build/testing/sauce-labs/test-browsers.js alpha",
+        "integration-tests:beta": "node build/testing/sauce-labs/test-browsers.js beta",
+        "integration-tests:release": "node build/testing/sauce-labs/test-browsers.js release",
+        "prepare": "lerna run prepare",
+        "test:diff:error": "echo \"Untracked files exist, try running yarn prepare to identify the culprit.\" && exit 1",
+        "test:diff": "git update-index --refresh && git diff-index --quiet HEAD -- || yarn test:diff:error",
+        "test:validation": "yarn test:diff",
+        "test": "yarn eslint \"/**/*.{ts}\" ",
+        "unit-tests": "jest --maxWorkers=4",
+        "coverage": "yarn jest --coverage",
+        "unit-tests:watch": "jest --watch",
+        "watch": "tsc -p ./tsconfig.json -w --preserveWatchOutput",
+        "format:check": "lerna run prettier:diff",
+        "format": "lerna run prettier"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "npm run benchmark"
         }
-      ]
-    ],
-    "coverageThreshold": {
-      "global": {
-        "statements": 100,
-        "branches": 100,
-        "functions": 100,
-        "lines": 100
-      }
     },
-    "testURL": "http://localhost",
-    "transform": {
-      "^.+\\.ts?$": "ts-jest",
-      "^.+\\.js?$": "babel-jest"
+    "jest": {
+        "collectCoverage": true,
+        "collectCoverageFrom": [
+            "build/helpers/*.ts"
+        ],
+        "coverageReporters": [
+            "json",
+            [
+                "lcov",
+                {
+                    "projectRoot": "."
+                }
+            ]
+        ],
+        "coverageThreshold": {
+            "global": {
+                "statements": 100,
+                "branches": 100,
+                "functions": 100,
+                "lines": 100
+            }
+        },
+        "testURL": "http://localhost",
+        "transform": {
+            "^.+\\.ts?$": "ts-jest",
+            "^.+\\.js?$": "babel-jest"
+        },
+        "transformIgnorePatterns": [
+            "!<rootDir>/node_modules/lodash-es",
+            "node_modules/jss-*",
+            "node_modules/css-vendor"
+        ],
+        "testPathIgnorePatterns": [
+            "packages/",
+            "build/helpers/__tests__/*",
+            "build/helpers/"
+        ],
+        "testRegex": "/__tests__/.*\\.(test|spec)\\.(js|ts|tsx)$",
+        "moduleFileExtensions": [
+            "ts",
+            "js"
+        ]
+    },
+    "lint-staged": {
+        "*.{ts,tsx,js,html}": [
+            "prettier --write"
+        ]
+    },
+    "resolutions": {
+        "@types/react": "*",
+        "browserslist": "^4.16.5",
+        "clean-css": "^4.2.3",
+        "css-select": "^4.2.1",
+        "dns-packet": "^1.3.4",
+        "favicons/colors": "1.4.0",
+        "glob-parent": "^5.1.2",
+        "immer": "^9.0.6",
+        "is-svg": "^4.2.2",
+        "jimp": "^0.16.1",
+        "jpeg-js": "^0.4.3",
+        "js-yaml": "^3.13.1",
+        "karma/colors": "1.4.0",
+        "lodash": "^4.17.21",
+        "nanoid": "^3.1.31",
+        "node-notifier": "^9.0.0",
+        "trim-newlines": "^4.0.2",
+        "trim": "^0.0.3",
+        "typescript": "^3.9.0",
+        "ua-parser-js": "^0.7.28",
+        "ws": "^7.4.6",
+        "xmlhttprequest-ssl": "^1.6.2"
     },
-    "transformIgnorePatterns": [
-      "!<rootDir>/node_modules/lodash-es",
-      "node_modules/jss-*",
-      "node_modules/css-vendor"
-    ],
-    "testPathIgnorePatterns": [
-      "packages/",
-      "build/helpers/__tests__/*",
-      "build/helpers/"
-    ],
-    "testRegex": "/__tests__/.*\\.(test|spec)\\.(js|ts|tsx)$",
-    "moduleFileExtensions": [
-      "ts",
-      "js"
-    ]
-  },
-  "lint-staged": {
-    "*.{ts,tsx,js,html}": [
-      "prettier --write"
-    ]
-  },
-  "resolutions": {
-    "@types/react": "*",
-    "browserslist": "^4.16.5",
-    "clean-css": "^4.2.3",
-    "css-select": "^4.2.1",
-    "dns-packet": "^1.3.4",
-    "favicons/colors": "1.4.0",
-    "glob-parent": "^5.1.2",
-    "immer": "^9.0.6",
-    "is-svg": "^4.2.2",
-    "jimp": "^0.16.1",
-    "jpeg-js": "^0.4.3",
-    "js-yaml": "^3.13.1",
-    "karma/colors": "1.4.0",
-    "lodash": "^4.17.21",
-    "nanoid": "^3.1.31",
-    "node-notifier": "^9.0.0",
-    "trim-newlines": "^4.0.2",
-    "trim": "^0.0.3",
-    "typescript": "^3.9.0",
-    "ua-parser-js": "^0.7.28",
-    "ws": "^7.4.6",
-    "xmlhttprequest-ssl": "^1.6.2"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/preset-env": "^7.12.13",
-    "@octokit/rest": "^18.0.6",
-    "@types/jest": "^25.2.1",
-    "@types/lodash-es": "^4.17.4",
-    "@types/node": "^15.0.1",
-    "beachball": "^1.53.1",
-    "chalk": "^2.4.2",
-    "copyfiles": "^2.4.1",
-    "docusaurus-init": "^1.11.0",
-    "dotenv": "^6.0.0",
-    "eyes.selenium": "3.6.2",
-    "glob": "^7.1.2",
-    "husky": "^4.2.5",
-    "jest": "^25.4.0",
-    "lerna": "^3.20.2",
-    "lint-staged": "^10.1.2",
-    "markdown-it": "^12.3.2",
-    "prettier": "2.0.2",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^25.4.0",
-    "ts-node": "^8.8.2",
-    "typescript": "^3.9.0",
-    "yargs": "^16.2.0"
-  },
-  "dependencies": {
-    "saucelabs": "^1.5.0",
-    "selenium-webdriver": "^3.6.0"
-  }
+    "devDependencies": {
+        "@babel/core": "^7.12.13",
+        "@babel/preset-env": "^7.12.13",
+        "@octokit/rest": "^18.0.6",
+        "@types/jest": "^25.2.1",
+        "@types/lodash-es": "^4.17.4",
+        "@types/node": "^15.0.1",
+        "beachball": "^1.53.1",
+        "chalk": "^2.4.2",
+        "copyfiles": "^2.4.1",
+        "docusaurus-init": "^1.11.0",
+        "dotenv": "^6.0.0",
+        "eyes.selenium": "3.6.2",
+        "glob": "^7.1.2",
+        "husky": "^4.2.5",
+        "jest": "^25.4.0",
+        "lerna": "^3.20.2",
+        "lint-staged": "^10.1.2",
+        "markdown-it": "^12.3.2",
+        "prettier": "2.0.2",
+        "rimraf": "^3.0.2",
+        "ts-jest": "^25.4.0",
+        "ts-node": "^8.8.2",
+        "typescript": "^3.9.0",
+        "yargs": "^16.2.0"
+    },
+    "dependencies": {
+        "saucelabs": "^1.5.0",
+        "selenium-webdriver": "^3.6.0"
+    }
 }
diff --git a/packages/utilities/fast-benchmarks/.gitignore b/packages/utilities/fast-benchmarks/.gitignore
index 91fccea4af1..00f18cfa9eb 100644
--- a/packages/utilities/fast-benchmarks/.gitignore
+++ b/packages/utilities/fast-benchmarks/.gitignore
@@ -1,4 +1,3 @@
 tsconfig.tsbuildinfo
 node_modules
 dist
-yarn.lock
diff --git a/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index.html b/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index.html
deleted file mode 100644
index 621e1c3896c..00000000000
--- a/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!DOCTYPE html>
-<script type="module" src="index.js"></script>
diff --git a/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index.ts b/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index.ts
index 540896b1853..fe252cb59f1 100644
--- a/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index.ts
+++ b/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index.ts
@@ -7,77 +7,41 @@ import {
     observable,
     repeat,
 } from "@microsoft/fast-element";
+import { data, RandomItem } from "../../../utils/index.js";
 
-import { _random, adjectives, colours, nouns } from "../../../utils/index.js";
-import runBenchmark from "./shared.js";
-
-const itemCount = 250;
-let id = 0;
-
-export class RandomItem {
-    @observable label: string;
-
-    constructor(public readonly id: number) {
-        this.label =
-            adjectives[_random(adjectives.length)] +
-            " " +
-            colours[_random(colours.length)] +
-            " " +
-            nouns[_random(nouns.length)];
-    }
-}
-
-function generateData(count: number) {
-    const data = [];
-
-    for (let i = 0; i < count; i++) {
-        data.push(new RandomItem(++id));
-    }
-
-    return data;
-}
-const data: RandomItem[] = generateData(itemCount);
-
-const xItemTemplate = html<XItem>`
-    <div @click="${x => x.onClick}" class="item">
-        ${x => x.value}
-    </div>
-`;
-
-const styles = css`
-    .item {
-        display: flex;
-    }
-`;
 @customElement({
     name: "x-item",
-    template: xItemTemplate,
-    styles,
+    template: html<XItem>`
+        <div @click="${x => x.onClick}" class="item">
+            ${(x: XItem) => x.value}
+        </div>
+    `,
+    styles: css`
+        .item {
+            display: flex;
+        }
+    `,
 })
 class XItem extends FASTElement {
     @attr value: string | undefined;
-
     onClick(e: MouseEvent) {
         console.log(e.type);
     }
 }
 
-const xAppTemplate = html<XApp>`
-    <div id="container">
-        ${repeat(
-            x => x.items,
-            html`
-                <x-item :value="${x => x.label}"></x-item>
-            `
-        )}
-    </div>
-`;
 @customElement({
     name: "x-app",
-    template: xAppTemplate,
+    template: html<XApp>`
+        <div>
+            ${repeat(
+                x => x.items,
+                html`
+                    <x-item :value="${(x: RandomItem) => x.label}"></x-item>
+                `
+            )}
+        </div>
+    `,
 })
 class XApp extends FASTElement {
     @observable items: RandomItem[] = data;
 }
-
-runBenchmark();
diff --git a/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index2.html b/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index2.html
deleted file mode 100644
index e26799bda90..00000000000
--- a/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index2.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!DOCTYPE html>
-<script type="module" src="index2.js"></script>
diff --git a/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index2.ts b/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index2.ts
index dd651ae95b5..ed715e3eec1 100644
--- a/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index2.ts
+++ b/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/index2.ts
@@ -8,34 +8,7 @@ import {
     oneTime,
     repeat,
 } from "@microsoft/fast-element";
-import { _random, adjectives, colours, nouns } from "../../../utils/index.js";
-import runBenchmark from "./shared.js";
-
-const itemCount = 250;
-let id = 0;
-export class RandomItem {
-    label: string;
-
-    constructor(public readonly id: number) {
-        this.label =
-            adjectives[_random(adjectives.length)] +
-            " " +
-            colours[_random(colours.length)] +
-            " " +
-            nouns[_random(nouns.length)];
-    }
-}
-
-function generateData(count: number) {
-    const data = [];
-
-    for (let i = 0; i < count; i++) {
-        data.push(new RandomItem(++id));
-    }
-
-    return data;
-}
-const data: RandomItem[] = generateData(itemCount);
+import { data, RandomItem } from "../../../utils/index.js";
 
 const xItemTemplate = html<XItem>`
     <div @click="${x => x.onClick}" class="item">
@@ -80,5 +53,3 @@ const xAppTemplate = html<XApp>`
 class XApp extends FASTElement {
     items: RandomItem[] = data;
 }
-
-runBenchmark();
diff --git a/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/shared.ts b/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/shared.ts
deleted file mode 100644
index bc774c5545a..00000000000
--- a/packages/utilities/fast-benchmarks/benchmarks/fast-element/render/shared.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-function measureMemory() {
-    if (window && performance && performance.memory) {
-        // Report results in MBs\
-        window.usedJSHeapSize = performance.memory.usedJSHeapSize / 1e6;
-    } else {
-        window.usedJSHeapSize = 0;
-    }
-}
-
-//support older browsesrs or if we're not using modules
-export default async () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-
-    const create = () => {
-        const el = document.createElement("x-app");
-        return container.appendChild(el);
-    };
-    const destroy = () => {
-        container.innerHTML = "";
-    };
-    const getTestStartName = (name: string) => `${name}-start`;
-    const updateComplete = () => new Promise(r => requestAnimationFrame(r));
-
-    const render = async () => {
-        // can change to main dir file name
-        const test = "render";
-        const start = getTestStartName(test);
-        performance.mark(start);
-        create();
-        await updateComplete();
-        performance.measure(test, start);
-        destroy();
-    };
-    await render();
-    measureMemory();
-
-    // Log
-    performance
-        .getEntriesByType("measure")
-        .forEach(m => console.log(`${m.name}: ${m.duration.toFixed(3)}ms`));
-};
diff --git a/packages/utilities/fast-benchmarks/benchmarks/fast-element/test/index.ts b/packages/utilities/fast-benchmarks/benchmarks/fast-element/test/index.ts
deleted file mode 100644
index 5b13d2e7a5e..00000000000
--- a/packages/utilities/fast-benchmarks/benchmarks/fast-element/test/index.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import {
-    attr,
-    css,
-    customElement,
-    FASTElement,
-    html,
-    observable,
-    repeat,
-} from "@microsoft/fast-element";
-import { data, RandomItem } from "../../../utils/index.js";
-
-@customElement({
-    name: "x-item",
-    template: html<XItem>`
-        <div @click="${x => x.onClick}" class="item">
-            ${x => x.value}
-        </div>
-    `,
-    styles: css`
-        .item {
-            display: flex;
-        }
-    `,
-})
-class XItem extends FASTElement {
-    @attr value: string | undefined;
-    onClick(e: MouseEvent) {
-        console.log(e.type);
-    }
-}
-
-@customElement({
-    name: "x-app",
-    template: html<XApp>`
-        <div>
-            ${repeat(
-                x => x.items,
-                html`
-                    <x-item :value="${x => x.label}"></x-item>
-                `
-            )}
-        </div>
-    `,
-})
-class XApp extends FASTElement {
-    @observable items: RandomItem[] = data;
-}
diff --git a/packages/utilities/fast-benchmarks/benchmarks/fast-element/test/index2.ts b/packages/utilities/fast-benchmarks/benchmarks/fast-element/test/index2.ts
deleted file mode 100644
index ed715e3eec1..00000000000
--- a/packages/utilities/fast-benchmarks/benchmarks/fast-element/test/index2.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
-    attr,
-    bind,
-    css,
-    customElement,
-    FASTElement,
-    html,
-    oneTime,
-    repeat,
-} from "@microsoft/fast-element";
-import { data, RandomItem } from "../../../utils/index.js";
-
-const xItemTemplate = html<XItem>`
-    <div @click="${x => x.onClick}" class="item">
-        ${x => x.value}
-    </div>
-`;
-
-const styles = css`
-    .item {
-        display: flex;
-    }
-`;
-@customElement({
-    name: "x-item",
-    template: xItemTemplate,
-    styles,
-})
-class XItem extends FASTElement {
-    @attr value: string | undefined;
-
-    onClick(e: MouseEvent) {
-        console.log(e.type);
-    }
-}
-
-const xAppTemplate = html<XApp>`
-    <div id="test-container">
-        ${repeat(
-            x => x.items,
-            html<RandomItem>`
-                <x-item
-                    :value="${bind((x: { label: string }) => x.label, oneTime)}"
-                ></x-item>
-            `
-        )}
-    </div>
-`;
-@customElement({
-    name: "x-app",
-    template: xAppTemplate,
-})
-class XApp extends FASTElement {
-    items: RandomItem[] = data;
-}
diff --git a/packages/utilities/fast-benchmarks/package.json b/packages/utilities/fast-benchmarks/package.json
index 9a29d7157f1..b2bf4195827 100644
--- a/packages/utilities/fast-benchmarks/package.json
+++ b/packages/utilities/fast-benchmarks/package.json
@@ -1,20 +1,23 @@
 {
-    "name": "fast-benchmarks",
+    "name": "@microsoft/fast-benchmarks",
     "version": "1.0.0",
-    "description": "",
+    "description": "utility library benchmarking for FAST libraries",
     "type": "module",
+    "private": true,
+    "author": {
+        "name": "Microsoft",
+        "url": "https://discord.gg/FcSNfg4"
+    },
+    "license": "MIT",
     "scripts": {
-        "build": "tsc && tsc --build",
         "benchmark": "node scripts/index.js",
+        "build": "tsc && tsc -p tsconfig.json",
         "help": "node ./scripts/index.js --help",
-        "benchmark:methods:append": "tach --config benchmarks/methods/append/tachometer.json",
-        "debug": "tach --config benchmarks/methods/append/tachometer.json --manual"
+        "debug:binding": "tach --config fast-element/binding/tachometer.json --manual",
+        "benchmark:fast-element:render": "yarn run benchmark --library=fast-element --benchmark=render --versions local latest --localBenchFile=index2"
     },
-    "author": "Microsoft",
-    "license": "ISC",
     "dependencies": {
-        "@microsoft/fast-element": "^1.9.0",
-        "@microsoft/fast-foundation": "^2.45.0",
+        "@microsoft/fast-element": "^1.10.0",
         "tachometer": "^0.5.10"
     },
     "devDependencies": {
@@ -22,6 +25,6 @@
         "chromedriver": "^101.0.0",
         "commander": "^9.2.0",
         "cross-spawn": "^7.0.3",
-        "typescript": "^4.3.5"
+        "typescript": "^4.6.2"
     }
 }
diff --git a/packages/utilities/fast-benchmarks/results/fast-element_localTest-create10k.json b/packages/utilities/fast-benchmarks/results/fast-element_localTest-create10k.json
new file mode 100644
index 00000000000..3dc267d1eb0
--- /dev/null
+++ b/packages/utilities/fast-benchmarks/results/fast-element_localTest-create10k.json
@@ -0,0 +1,372 @@
+{
+  "benchmarks": [
+    {
+      "name": "localTest-create10k [create10k]",
+      "bytesSent": 124156,
+      "version": "local",
+      "measurement": {
+        "name": "create10k",
+        "mode": "performance",
+        "entryName": "create10k"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 656.2061180565081,
+        "high": 665.9272152887461
+      },
+      "differences": [
+        null,
+        {
+          "absolute": {
+            "low": 642.1506750083594,
+            "high": 651.8717786702281
+          },
+          "percentChange": {
+            "low": 4568.648008087548,
+            "high": 4637.911651537858
+          }
+        },
+        {
+          "absolute": {
+            "low": -5.490759052563835,
+            "high": 36.484092396228576
+          },
+          "percentChange": {
+            "low": -0.9244285146995573,
+            "high": 5.725353796795471
+          }
+        },
+        {
+          "absolute": {
+            "low": 642.1655132091593,
+            "high": 651.8866148694282
+          },
+          "percentChange": {
+            "low": 4573.597207488145,
+            "high": 4642.902695489103
+          }
+        }
+      ],
+      "samples": [
+        681,
+        649.8000000119209,
+        679.1999999880791,
+        665.5,
+        654.6000000238419,
+        660.8000000119209,
+        678,
+        668.0999999642372,
+        655.1999999880791,
+        683.1999999880791,
+        688.1000000238419,
+        656.3000000119209,
+        654.1000000238419,
+        675.6000000238419,
+        663.1000000238419,
+        647.8999999761581,
+        654.8000000119209,
+        661.8000000119209,
+        642.8999999761581,
+        656.0999999642372,
+        654.5,
+        643.7000000476837,
+        651.1000000238419,
+        673.9000000357628,
+        665.6000000238419,
+        646.6999999880791,
+        675.1000000238419,
+        647.5,
+        653.4000000357628,
+        644.3999999761581
+      ]
+    },
+    {
+      "name": "localTest-create10k [usedJSHeapSize]",
+      "bytesSent": 124156,
+      "version": "local",
+      "measurement": {
+        "name": "usedJSHeapSize",
+        "mode": "expression",
+        "expression": "window.usedJSHeapSize"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 14.049849525352856,
+        "high": 14.061030141313816
+      },
+      "differences": [
+        {
+          "absolute": {
+            "low": -651.8717786702281,
+            "high": -642.1506750083594
+          },
+          "percentChange": {
+            "low": -97.8894798914553,
+            "high": -97.85816840426678
+          }
+        },
+        null,
+        {
+          "absolute": {
+            "low": -651.9313948128939,
+            "high": -611.0977255220288
+          },
+          "percentChange": {
+            "low": -97.89164822784461,
+            "high": -97.75392395385029
+          }
+        },
+        {
+          "absolute": {
+            "low": 0.007572614132296841,
+            "high": 0.022101785867711363
+          },
+          "percentChange": {
+            "low": 0.05391137816005071,
+            "high": 0.1574356756306405
+          }
+        }
+      ],
+      "samples": [
+        14.042323,
+        14.066664,
+        14.063874,
+        14.035961,
+        14.026999,
+        14.046914,
+        14.067111,
+        14.074182,
+        14.037626,
+        14.039938,
+        14.027129,
+        14.063121,
+        14.062894,
+        14.027526,
+        14.059491,
+        14.050642,
+        14.069321,
+        14.066356,
+        14.049903,
+        14.07867,
+        14.047201,
+        14.068638,
+        14.061324,
+        14.059864,
+        14.070647,
+        14.064498,
+        14.043131,
+        14.05132,
+        14.067982,
+        14.071945
+      ]
+    },
+    {
+      "name": "localTest-create10k [create10k]",
+      "bytesSent": 119298,
+      "version": "1.8.0",
+      "measurement": {
+        "name": "create10k",
+        "mode": "performance",
+        "entryName": "create10k"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 625.1531661206998,
+        "high": 665.9868338808897
+      },
+      "differences": [
+        {
+          "absolute": {
+            "low": -36.484092396228576,
+            "high": 5.490759052563835
+          },
+          "percentChange": {
+            "low": -5.515025855381156,
+            "high": 0.8266434415975789
+          }
+        },
+        {
+          "absolute": {
+            "low": 611.0977255220288,
+            "high": 651.9313948128939
+          },
+          "percentChange": {
+            "low": 4347.755168459803,
+            "high": 4638.296746753635
+          }
+        },
+        null,
+        {
+          "absolute": {
+            "low": 611.1125629602851,
+            "high": 651.9462317746376
+          },
+          "percentChange": {
+            "low": 4352.458831010695,
+            "high": 4643.300309243986
+          }
+        }
+      ],
+      "samples": [
+        663.6999999880791,
+        634.5,
+        636.0999999642372,
+        635,
+        631.8000000119209,
+        628.1999999880791,
+        641.5,
+        636.8999999761581,
+        633.5,
+        629.0999999642372,
+        650,
+        634.5,
+        631.5,
+        634.1999999880791,
+        636.8999999761581,
+        618.1000000238419,
+        626.7999999523163,
+        628.1000000238419,
+        647.3000000119209,
+        628.2000000476837,
+        842.9000000357628,
+        611.3000000119209,
+        630.1000000238419,
+        623.3999999761581,
+        619.5,
+        629.6000000238419,
+        650.5,
+        840.3999999761581,
+        608.8000000119209,
+        604.7000000476837
+      ]
+    },
+    {
+      "name": "localTest-create10k [usedJSHeapSize]",
+      "bytesSent": 119298,
+      "version": "1.8.0",
+      "measurement": {
+        "name": "usedJSHeapSize",
+        "mode": "expression",
+        "expression": "window.usedJSHeapSize"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 14.035963380752078,
+        "high": 14.045241885914587
+      },
+      "differences": [
+        {
+          "absolute": {
+            "low": -651.8866148694282,
+            "high": -642.1655132091593
+          },
+          "percentChange": {
+            "low": -97.89170072733121,
+            "high": -97.86043643486924
+          }
+        },
+        {
+          "absolute": {
+            "low": -0.022101785867711363,
+            "high": -0.007572614132296841
+          },
+          "percentChange": {
+            "low": -0.1572148999541157,
+            "high": -0.05390905171073043
+          }
+        },
+        {
+          "absolute": {
+            "low": -651.9462317746376,
+            "high": -611.1125629602851
+          },
+          "percentChange": {
+            "low": -97.89387216033809,
+            "high": -97.75629664139802
+          }
+        },
+        null
+      ],
+      "samples": [
+        14.029456,
+        14.012073,
+        14.050417,
+        14.03265,
+        14.032775,
+        14.031108,
+        14.051811,
+        14.049096,
+        14.052766,
+        14.056264,
+        14.055737,
+        14.038716,
+        14.04397,
+        14.056429,
+        14.036335,
+        14.025586,
+        14.044231,
+        14.047976,
+        14.048912,
+        14.044429,
+        14.036702,
+        14.037932,
+        14.049999,
+        14.032336,
+        14.029085,
+        14.052773,
+        14.051911,
+        14.0107,
+        14.049156,
+        14.026748
+      ]
+    }
+  ]
+}
diff --git a/packages/utilities/fast-benchmarks/results/fast-element_test-create10k.json b/packages/utilities/fast-benchmarks/results/fast-element_test-create10k.json
new file mode 100644
index 00000000000..2aed0a16567
--- /dev/null
+++ b/packages/utilities/fast-benchmarks/results/fast-element_test-create10k.json
@@ -0,0 +1,372 @@
+{
+  "benchmarks": [
+    {
+      "name": "test-create10k [create10k]",
+      "bytesSent": 124198,
+      "version": "local",
+      "measurement": {
+        "name": "create10k",
+        "mode": "performance",
+        "entryName": "create10k"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 691.8333398520921,
+        "high": 771.2333268205351
+      },
+      "differences": [
+        null,
+        {
+          "absolute": {
+            "low": 678.7146793783161,
+            "high": 758.1146676276444
+          },
+          "percentChange": {
+            "low": 5173.643476091094,
+            "high": 5778.91848725143
+          }
+        },
+        {
+          "absolute": {
+            "low": -18.61151618486457,
+            "high": 75.6915161959908
+          },
+          "percentChange": {
+            "low": -2.727858578302136,
+            "high": 10.847423488069314
+          }
+        },
+        {
+          "absolute": {
+            "low": 677.7947677250614,
+            "high": 757.1947552808991
+          },
+          "percentChange": {
+            "low": 4828.083501574366,
+            "high": 5393.679367485478
+          }
+        }
+      ],
+      "samples": [
+        685.2000000178814,
+        818.7999999821186,
+        671.9000000059605,
+        655.3000000119209,
+        692,
+        691.9000000059605,
+        724.4000000059605,
+        734,
+        660.3000000119209,
+        670.6999999880791,
+        658.1000000238419,
+        674.0999999940395,
+        687.4000000059605,
+        1036.199999988079,
+        786.4000000059605,
+        664.1999999880791,
+        671.5,
+        828.5999999940395,
+        1036.4000000059605,
+        697.1000000238419,
+        973.0999999940395,
+        701.6999999880791,
+        705.2000000178814,
+        688.4000000059605,
+        659.5,
+        688.3000000119209,
+        663.2000000178814,
+        668.0999999940395,
+        748.9000000059605,
+        705.0999999940395
+      ]
+    },
+    {
+      "name": "test-create10k [usedJSHeapSize]",
+      "bytesSent": 124198,
+      "version": "local",
+      "measurement": {
+        "name": "usedJSHeapSize",
+        "mode": "expression",
+        "expression": "window.usedJSHeapSize"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 13.111528834508677,
+        "high": 13.12579083215799
+      },
+      "differences": [
+        {
+          "absolute": {
+            "low": -758.1146676276444,
+            "high": -678.7146793783161
+          },
+          "percentChange": {
+            "low": -98.3040171056254,
+            "high": -98.10936305478289
+          }
+        },
+        null,
+        {
+          "absolute": {
+            "low": -715.314328511982,
+            "high": -664.4350184828522
+          },
+          "percentChange": {
+            "low": -98.20142345139806,
+            "high": -98.0663477460391
+          }
+        },
+        {
+          "absolute": {
+            "low": -0.9285242421084373,
+            "high": -0.9112997578915628
+          },
+          "percentChange": {
+            "low": -6.612858425326359,
+            "high": -6.4926342262231564
+          }
+        }
+      ],
+      "samples": [
+        13.148228,
+        13.091369,
+        13.097894,
+        13.137766,
+        13.125482,
+        13.100921,
+        13.112651,
+        13.093336,
+        13.095618,
+        13.121165,
+        13.130238,
+        13.137988,
+        13.140261,
+        13.113644,
+        13.1192,
+        13.092297,
+        13.116812,
+        13.119206,
+        13.127519,
+        13.131751,
+        13.093651,
+        13.115322,
+        13.145602,
+        13.108529,
+        13.116198,
+        13.148076,
+        13.150396,
+        13.086266,
+        13.110458,
+        13.131951
+      ]
+    },
+    {
+      "name": "test-create10k [create10k]",
+      "bytesSent": 119449,
+      "version": "latest",
+      "measurement": {
+        "name": "create10k",
+        "mode": "performance",
+        "entryName": "create10k"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 677.5536793156319,
+        "high": 728.432987345869
+      },
+      "differences": [
+        {
+          "absolute": {
+            "low": -75.6915161959908,
+            "high": 18.61151618486457
+          },
+          "percentChange": {
+            "low": -10.169741465770347,
+            "high": 2.3669528011990786
+          }
+        },
+        {
+          "absolute": {
+            "low": 664.4350184828522,
+            "high": 715.314328511982
+          },
+          "percentChange": {
+            "low": 5064.786785221676,
+            "high": 5452.66975777836
+          }
+        },
+        null,
+        {
+          "absolute": {
+            "low": 663.5151070239675,
+            "high": 714.3944159708668
+          },
+          "percentChange": {
+            "low": 4726.363664900851,
+            "high": 5088.805138261244
+          }
+        }
+      ],
+      "samples": [
+        727,
+        741.1999999880791,
+        630.7999999821186,
+        623.8000000119209,
+        627.3000000119209,
+        673.7999999821186,
+        702.3999999761581,
+        828,
+        673.6000000238419,
+        640.4000000059605,
+        633.4000000059605,
+        758.5999999940395,
+        725.8999999761581,
+        685,
+        647.1999999880791,
+        679,
+        709.5,
+        890.5,
+        699.8000000119209,
+        738.5,
+        863.5999999940395,
+        678.3000000119209,
+        645.5999999940395,
+        643.5,
+        687.4000000059605,
+        673,
+        638.2999999821186,
+        736.5,
+        776.3999999761581,
+        711.5
+      ]
+    },
+    {
+      "name": "test-create10k [usedJSHeapSize]",
+      "bytesSent": 119449,
+      "version": "latest",
+      "measurement": {
+        "name": "usedJSHeapSize",
+        "mode": "expression",
+        "expression": "window.usedJSHeapSize"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 14.033742799279086,
+        "high": 14.043400867387582
+      },
+      "differences": [
+        {
+          "absolute": {
+            "low": -757.1947552808991,
+            "high": -677.7947677250614
+          },
+          "percentChange": {
+            "low": -98.18508757130529,
+            "high": -97.97679017408537
+          }
+        },
+        {
+          "absolute": {
+            "low": 0.9112997578915628,
+            "high": 0.9285242421084373
+          },
+          "percentChange": {
+            "low": 6.94340257847656,
+            "high": 7.081078758597009
+          }
+        },
+        {
+          "absolute": {
+            "low": -714.3944159708668,
+            "high": -663.5151070239675
+          },
+          "percentChange": {
+            "low": -98.0752980476484,
+            "high": -97.93076028385263
+          }
+        },
+        null
+      ],
+      "samples": [
+        14.047063,
+        14.034039,
+        14.051821,
+        14.050805,
+        14.028706,
+        14.049825,
+        14.02926,
+        14.03012,
+        14.043592,
+        14.049007,
+        14.054683,
+        14.049226,
+        14.026627,
+        14.049366,
+        14.038457,
+        14.04839,
+        14.05167,
+        14.014669,
+        14.031913,
+        14.015803,
+        14.014254,
+        14.045236,
+        14.029236,
+        14.04986,
+        14.036269,
+        14.057826,
+        14.024936,
+        14.030998,
+        14.022511,
+        14.050987
+      ]
+    }
+  ]
+}
diff --git a/packages/utilities/fast-benchmarks/results/fast-element_test-update10th.json b/packages/utilities/fast-benchmarks/results/fast-element_test-update10th.json
new file mode 100644
index 00000000000..faa8774a6bc
--- /dev/null
+++ b/packages/utilities/fast-benchmarks/results/fast-element_test-update10th.json
@@ -0,0 +1,372 @@
+{
+  "benchmarks": [
+    {
+      "name": "test-update10th [update10th]",
+      "bytesSent": 117574,
+      "version": "1.6.0",
+      "measurement": {
+        "name": "update10th",
+        "mode": "performance",
+        "entryName": "update10th"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 418.5574936082805,
+        "high": 467.8758397210792
+      },
+      "differences": [
+        null,
+        {
+          "absolute": {
+            "low": 404.5068586127215,
+            "high": 453.8252053833049
+          },
+          "percentChange": {
+            "low": 2878.920000977545,
+            "high": 3229.929060711528
+          }
+        },
+        {
+          "absolute": {
+            "low": -38.0130234418856,
+            "high": 36.393023443077716
+          },
+          "percentChange": {
+            "low": -8.552411740112492,
+            "high": 8.187568788003615
+          }
+        },
+        {
+          "absolute": {
+            "low": 404.4982083011005,
+            "high": 453.8165549615926
+          },
+          "percentChange": {
+            "low": 2877.087529446436,
+            "high": 3227.879837156517
+          }
+        }
+      ],
+      "samples": [
+        393.5,
+        402.69999998807907,
+        402.7000000178814,
+        394.09999999403954,
+        408.40000000596046,
+        395.09999999403954,
+        400.7000000178814,
+        538.6999999880791,
+        404,
+        392.59999999403954,
+        438.80000001192093,
+        464.2000000178814,
+        508.19999998807907,
+        434.59999999403954,
+        426.2999999821186,
+        395.89999997615814,
+        426,
+        551.7000000178814,
+        455.80000001192093,
+        455,
+        550.5,
+        432.7999999821186,
+        612.0999999940395,
+        405.5,
+        411.59999999403954,
+        392.19999998807907,
+        401,
+        393.5,
+        612,
+        396.2999999821186
+      ]
+    },
+    {
+      "name": "test-update10th [usedJSHeapSize]",
+      "bytesSent": 117574,
+      "version": "1.6.0",
+      "measurement": {
+        "name": "usedJSHeapSize",
+        "mode": "expression",
+        "expression": "window.usedJSHeapSize"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 14.046607207674546,
+        "high": 14.054662125658789
+      },
+      "differences": [
+        {
+          "absolute": {
+            "low": -453.8252053833049,
+            "high": -404.5068586127215
+          },
+          "percentChange": {
+            "low": -97.00622913543458,
+            "high": -96.65347018390675
+          }
+        },
+        null,
+        {
+          "absolute": {
+            "low": -457.8326318196642,
+            "high": -402.11943217517006
+          },
+          "percentChange": {
+            "low": -97.03415553009407,
+            "high": -96.63710985933523
+          }
+        },
+        {
+          "absolute": {
+            "low": -0.014102530828603747,
+            "high": -0.003198202504725076
+          },
+          "percentChange": {
+            "low": -0.10029675715130996,
+            "high": -0.022758812831874104
+          }
+        }
+      ],
+      "samples": [
+        14.054687,
+        14.066721,
+        14.061316,
+        14.037834,
+        14.038739,
+        14.043633,
+        14.060127,
+        14.039792,
+        14.059118,
+        14.039964,
+        14.054077,
+        14.060214,
+        14.043143,
+        14.05679,
+        14.042428,
+        14.061754,
+        14.034361,
+        14.045844,
+        14.043341,
+        14.026835,
+        14.037937,
+        14.059991,
+        14.058622,
+        14.055476,
+        14.066783,
+        14.053226,
+        14.049112,
+        14.068376,
+        14.0523,
+        14.046499
+      ]
+    },
+    {
+      "name": "test-update10th [update10th]",
+      "bytesSent": 119552,
+      "version": "1.10.1",
+      "measurement": {
+        "name": "update10th",
+        "mode": "performance",
+        "entryName": "update10th"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 416.17006713297826,
+        "high": 471.8832661951893
+      },
+      "differences": [
+        {
+          "absolute": {
+            "low": -36.393023443077716,
+            "high": 38.0130234418856
+          },
+          "percentChange": {
+            "low": -8.217856487110584,
+            "high": 8.58336620744642
+          }
+        },
+        {
+          "absolute": {
+            "low": 402.11943217517006,
+            "high": 457.8326318196642
+          },
+          "percentChange": {
+            "low": 2861.928669063402,
+            "high": 3258.4501209065666
+          }
+        },
+        null,
+        {
+          "absolute": {
+            "low": 402.1107818572308,
+            "high": 457.82398140427017
+          },
+          "percentChange": {
+            "low": 2860.106608202675,
+            "high": 3256.383392694746
+          }
+        }
+      ],
+      "samples": [
+        398,
+        387.09999999403954,
+        390.09999999403954,
+        387.5,
+        389.40000000596046,
+        393.5,
+        477.59999999403954,
+        454.09999999403954,
+        411.69999998807907,
+        398.5,
+        471.59999999403954,
+        406.59999999403954,
+        444.69999998807907,
+        453.40000000596046,
+        470.19999998807907,
+        437.60000002384186,
+        742.4000000059605,
+        490,
+        449.90000000596046,
+        597.5999999940395,
+        498,
+        527.1999999880791,
+        398.19999998807907,
+        398.59999999403954,
+        424.09999999403954,
+        397.09999999403954,
+        401.59999999403954,
+        413.59999999403954,
+        402.40000000596046,
+        408.5
+      ]
+    },
+    {
+      "name": "test-update10th [usedJSHeapSize]",
+      "bytesSent": 119552,
+      "version": "1.10.1",
+      "measurement": {
+        "name": "usedJSHeapSize",
+        "mode": "expression",
+        "expression": "window.usedJSHeapSize"
+      },
+      "browser": {
+        "name": "chrome",
+        "headless": true,
+        "windowSize": {
+          "width": 1024,
+          "height": 768
+        },
+        "addArguments": [
+          "--js-flags=--expose-gc",
+          "--enable-precise-memory-info"
+        ],
+        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4951.64 Safari/537.36"
+      },
+      "mean": {
+        "low": 14.055610027467281,
+        "high": 14.062960039199382
+      },
+      "differences": [
+        {
+          "absolute": {
+            "low": -453.8165549615926,
+            "high": -404.4982083011005
+          },
+          "percentChange": {
+            "low": -97.0043856060924,
+            "high": -96.65141026497308
+          }
+        },
+        {
+          "absolute": {
+            "low": 0.003198202504725076,
+            "high": 0.014102530828603747
+          },
+          "percentChange": {
+            "low": 0.02274894137609521,
+            "high": 0.10038238858704586
+          }
+        },
+        {
+          "absolute": {
+            "low": -457.82398140427017,
+            "high": -402.1107818572308
+          },
+          "percentChange": {
+            "low": -97.03232923909158,
+            "high": -96.63503982278979
+          }
+        },
+        null
+      ],
+      "samples": [
+        14.067407,
+        14.068533,
+        14.064939,
+        14.072032,
+        14.052961,
+        14.041445,
+        14.048059,
+        14.069951,
+        14.059963,
+        14.060732,
+        14.061753,
+        14.0451,
+        14.039854,
+        14.044865,
+        14.058013,
+        14.063448,
+        14.068704,
+        14.047315,
+        14.069702,
+        14.047309,
+        14.061824,
+        14.06535,
+        14.05915,
+        14.045282,
+        14.065971,
+        14.070905,
+        14.06687,
+        14.062969,
+        14.060151,
+        14.067994
+      ]
+    }
+  ]
+}
diff --git a/packages/utilities/fast-benchmarks/results/fast-element_test.json b/packages/utilities/fast-benchmarks/results/fast-element_test.json
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/utilities/fast-benchmarks/scripts/index.js b/packages/utilities/fast-benchmarks/scripts/index.js
index 6a03783a37e..b95ddc71769 100644
--- a/packages/utilities/fast-benchmarks/scripts/index.js
+++ b/packages/utilities/fast-benchmarks/scripts/index.js
@@ -24,6 +24,10 @@ program
         "-o, --operations [versions...]",
         "specify the operations you want the benchmarks to run, if none are passed all available operations will be run"
     )
+    .option(
+        "-bn, --branchName <name>",
+        "specify the local git branch name you want to reference, this must be a branch that has been pushed to git"
+    )
     .parse(process.argv);
 
 const options = program.opts();
@@ -76,17 +80,24 @@ async function buildBenchmark(configPath) {
  * @param {string} configPath
  * @returns {Promise}
  */
-async function runBenchmark(configPaths) {
+async function runBenchmark(configPaths, pathNames) {
     const promises = [];
     for (let i = 0; i < configPaths.length; i++) {
         const configPath = configPaths[i];
+        const pathName = pathNames[i];
+
         const res = new Promise((resolve, reject) => {
-            const args = ["tach", "--config", configPath];
+            const args = [
+                "tach",
+                "--config",
+                configPath,
+                `--json-file=results/${pathName}.json`,
+            ];
             const child = spawn("npx", args, { stdio: "inherit" });
             child.on("close", code => {
                 if (code !== 0) {
                     reject({
-                        command: `npx tach --config ${configPath}`,
+                        command: `npx tach --config ${configPath} --json-file=results/${pathName}.json`,
                     });
                     return;
                 }
@@ -111,10 +122,14 @@ async function runBenchmark(configPaths) {
 const run = async () => {
     try {
         await checkNpmRegistryIsAvailable();
-        const { tsConfigPath, tachoConfigPaths } = await generateTemplates(options);
+        const { tsConfigPath, tachoConfigPaths, pathNames } = await generateTemplates(
+            options
+        );
         await buildBenchmark(tsConfigPath);
-        await runBenchmark(tachoConfigPaths);
+
+        await runBenchmark(tachoConfigPaths, pathNames);
     } catch (error) {
+        console.error("ERRROR", error);
         return error;
     }
 };
diff --git a/packages/utilities/fast-benchmarks/scripts/template.js b/packages/utilities/fast-benchmarks/scripts/template.js
index a635539fd00..09652b11855 100644
--- a/packages/utilities/fast-benchmarks/scripts/template.js
+++ b/packages/utilities/fast-benchmarks/scripts/template.js
@@ -84,7 +84,7 @@ async function generateHtmlTemplates(
             const operationProps = { names: [], htmlPaths: [] };
 
             // handle if specific operations are passed in
-            if (operations?.length > 0) {
+            if (operations) {
                 const fileNames = files.map(f => getTestName(f));
                 const match = operations.some(f => fileNames.includes(f));
                 if (!match) {
@@ -245,7 +245,7 @@ async function generateBenchmarks(
                 };
             }
 
-            if (methods.length > 0) {
+            if (methods) {
                 methods.forEach(method => {
                     const fullUrl = `${url}?method=${method}`;
 
@@ -263,7 +263,6 @@ async function generateBenchmarks(
         });
         tachoData[operation] = benchmarks;
     });
-
     return tachoData;
 }
 
@@ -287,6 +286,7 @@ async function generateConfig(fileName, benchmarksHash) {
         };
 
         const pathsPromises = [];
+        const pathNames = [];
         for (const benchmark in benchmarksHash) {
             const config = {
                 $schema: TACH_SCHEMA,
@@ -294,17 +294,14 @@ async function generateConfig(fileName, benchmarksHash) {
                 benchmarks: benchmarksHash[benchmark],
             };
 
-            const path = await writeConfig(
-                `${fileName}-${benchmark}` + ".config",
-                config,
-                ".json",
-                "dist"
-            );
+            const name = `${fileName}-${benchmark}`;
+            const path = await writeConfig(`${name}.config`, config, ".json", "dist");
 
+            pathNames.push(name);
             pathsPromises.push(path);
         }
         /** @type {ConfigFile[]} promises resolves to array of config file paths*/
-        return await Promise.all(pathsPromises);
+        return [await Promise.all(pathsPromises), pathNames];
     } catch (error) {
         console.log(errMessage(error));
     }
@@ -324,11 +321,13 @@ export async function generateTemplates(options) {
     try {
         const tsConfigPath = await generateTsConfig(options);
         const fileName = `${options.library}_${options.benchmark}`;
-
         //special handling if 'local' version was passed in as an option
         const localProps = { branchName: "", operationProps: {} };
         if (options.versions.includes(LOCAL)) {
-            localProps.branchName = await getLocalGitBranchName();
+            localProps.branchName = options.branchName
+                ? options.branchName
+                : await getLocalGitBranchName();
+
             // check if user passed in localBenchFile for different implementation of local
             if (options.localBenchFile)
                 localProps.operationProps = await generateHtmlTemplates(
@@ -344,10 +343,14 @@ export async function generateTemplates(options) {
             operationProps,
             localProps
         );
-        const tachoConfigPaths = await generateConfig(fileName, benchmarksHash);
+        const [tachoConfigPaths, pathNames] = await generateConfig(
+            fileName,
+            benchmarksHash
+        );
         return {
             tsConfigPath,
             tachoConfigPaths,
+            pathNames,
         };
     } catch (error) {
         console.log(errMessage(error));
diff --git a/packages/web-components/fast-element/package.json b/packages/web-components/fast-element/package.json
index dc0711af102..89337052345 100644
--- a/packages/web-components/fast-element/package.json
+++ b/packages/web-components/fast-element/package.json
@@ -1,90 +1,113 @@
 {
-  "name": "@microsoft/fast-element",
-  "description": "A library for constructing Web Components",
-  "version": "1.9.0",
-  "author": {
-    "name": "Microsoft",
-    "url": "https://discord.gg/FcSNfg4"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Microsoft/fast.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Microsoft/fast/issues/new/choose"
-  },
-  "main": "dist/esm/index.js",
-  "type": "module",
-  "types": "dist/fast-element.d.ts",
-  "unpkg": "dist/fast-element.min.js",
-  "sideEffects": [
-    "./dist/esm/debug.js",
-    "./dist/esm/polyfills.js"
-  ],
-  "scripts": {
-    "clean:dist": "node ../../../build/clean.js dist",
-    "doc": "api-extractor run --local",
-    "doc:ci": "api-extractor run",
-    "build": "yarn build:tsc && yarn build:rollup && yarn doc",
-    "build:rollup": "rollup -c",
-    "build:tsc": "tsc -p ./tsconfig.json",
-    "dev": "tsc -p ./tsconfig.json -w",
-    "tdd": "yarn dev & yarn test-chrome:watch",
-    "prepare": "yarn clean:dist && yarn build",
-    "prettier": "prettier --config ../../../.prettierrc --write \"**/*.ts\"",
-    "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different",
-    "eslint": "eslint . --ext .ts",
-    "eslint:fix": "eslint . --ext .ts --fix",
-    "test": "yarn eslint && yarn test-chrome:verbose && yarn doc:ci",
-    "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
-    "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
-    "test-chrome": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage",
-    "test-chrome:verbose": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
-    "test-chrome:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
-    "test-chrome:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging",
-    "test-chrome:verbose:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha",
-    "test-chrome:verbose:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging --reporter=mocha",
-    "test-firefox": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage",
-    "test-firefox:verbose": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
-  },
-  "devDependencies": {
-    "@microsoft/api-extractor": "7.19.4",
-    "@types/chai": "^4.2.11",
-    "@types/karma": "^5.0.0",
-    "@types/mocha": "^7.0.2",
-    "@types/webpack-env": "^1.15.2",
-    "chai": "^4.2.0",
-    "esm": "^3.2.25",
-    "ignore-loader": "^0.1.2",
-    "istanbul": "^0.4.5",
-    "istanbul-instrumenter-loader": "^3.0.1",
-    "jsdom": "^16.2.2",
-    "jsdom-global": "3.0.2",
-    "karma": "^5.0.4",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage": "^2.0.2",
-    "karma-coverage-istanbul-reporter": "^3.0.0",
-    "karma-firefox-launcher": "^2.1.0",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-source-map-support": "^1.4.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.2",
-    "mocha": "^7.1.2",
-    "prettier": "2.0.2",
-    "rollup": "^2.7.6",
-    "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-transform-tagged-template": "^0.0.3",
-    "rollup-plugin-typescript2": "^0.27.0",
-    "source-map": "^0.7.3",
-    "source-map-loader": "^0.2.4",
-    "ts-loader": "^7.0.2",
-    "ts-node": "^8.9.1",
-    "tsconfig-paths": "^3.9.0",
-    "tslib": "^1.11.1",
-    "typescript": "^3.9.0",
-    "webpack": "^4.44.0"
-  }
-}
+    "name": "@microsoft/fast-element",
+    "description": "A library for constructing Web Components",
+    "version": "1.10.1",
+    "author": {
+      "name": "Microsoft",
+      "url": "https://discord.gg/FcSNfg4"
+    },
+    "homepage": "https://www.fast.design/",
+    "license": "MIT",
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/Microsoft/fast.git",
+      "directory": "packages/web-components/fast-element"
+    },
+    "bugs": {
+      "url": "https://github.com/Microsoft/fast/issues/new/choose"
+    },
+    "type": "module",
+    "main": "dist/esm/index.js",
+    "types": "dist/fast-element.d.ts",
+    "exports": {
+      ".": {
+        "types": "./dist/fast-element.d.ts",
+        "production": "./dist/esm/index.js",
+        "development": "./dist/esm/index.debug.js",
+        "default": "./dist/esm/index.js"
+      },
+      "./polyfills.js": {
+        "types": "./dist/dts/polyfills.d.ts",
+        "default": "./dist/esm/polyfills.js"
+      },
+      "./debug.js": {
+        "types": "./dist/dts/debug.d.ts",
+        "default": "./dist/esm/debug.js"
+      },
+      "./splice-strategies.js": {
+        "types": "./dist/dts/observation/splice-strategies.d.ts",
+        "default": "./dist/esm/observation/splice-strategies.js"
+      }
+    },
+    "unpkg": "dist/fast-element.min.js",
+    "sideEffects": [
+      "./dist/esm/debug.js",
+      "./dist/esm/polyfills.js"
+    ],
+    "scripts": {
+      "clean:dist": "node ../../../build/clean.js dist",
+      "doc": "api-extractor run --local",
+      "doc:ci": "api-extractor run",
+      "build": "yarn build:tsc && yarn build:rollup && yarn doc",
+      "build:rollup": "rollup -c",
+      "build:tsc": "tsc -p ./tsconfig.json",
+      "dev": "tsc -p ./tsconfig.json -w",
+      "tdd": "yarn dev & yarn test-chrome:watch",
+      "prepare": "yarn clean:dist && yarn build",
+      "prettier": "prettier --config ../../../.prettierrc --write \"**/*.ts\"",
+      "prettier:diff": "prettier --config ../../../.prettierrc \"**/*.ts\" --list-different",
+      "eslint": "eslint . --ext .ts",
+      "eslint:fix": "eslint . --ext .ts --fix",
+      "test": "yarn eslint && yarn test-chrome:verbose && yarn doc:ci",
+      "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
+      "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'",
+      "test-chrome": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage",
+      "test-chrome:verbose": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --single-run --coverage --reporter=mocha",
+      "test-chrome:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js",
+      "test-chrome:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging",
+      "test-chrome:verbose:watch": "karma start karma.conf.cjs --browsers=ChromeHeadlessOpt --coverage --watch-extensions js --reporter=mocha",
+      "test-chrome:verbose:debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging --reporter=mocha",
+      "test-firefox": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage",
+      "test-firefox:verbose": "karma start karma.conf.cjs --browsers=FirefoxHeadless --single-run --coverage --reporter=mocha"
+    },
+    "devDependencies": {
+      "@microsoft/api-extractor": "7.23.1",
+      "@types/chai": "^4.2.11",
+      "@types/chai-spies": "^1.0.3",
+      "@types/karma": "^5.0.0",
+      "@types/mocha": "^7.0.2",
+      "@types/webpack-env": "^1.15.2",
+      "chai": "^4.2.0",
+      "chai-spies": "^1.0.0",
+      "esm": "^3.2.25",
+      "ignore-loader": "^0.1.2",
+      "istanbul": "^0.4.5",
+      "istanbul-instrumenter-loader": "^3.0.1",
+      "jsdom": "^16.2.2",
+      "jsdom-global": "3.0.2",
+      "karma": "^5.0.4",
+      "karma-chrome-launcher": "^3.1.0",
+      "karma-coverage": "^2.0.2",
+      "karma-coverage-istanbul-reporter": "^3.0.0",
+      "karma-firefox-launcher": "^2.1.0",
+      "karma-mocha": "^2.0.1",
+      "karma-mocha-reporter": "^2.2.5",
+      "karma-source-map-support": "^1.4.0",
+      "karma-sourcemap-loader": "^0.3.7",
+      "karma-webpack": "^4.0.2",
+      "mocha": "^7.1.2",
+      "prettier": "2.0.2",
+      "rollup": "^2.71.1",
+      "rollup-plugin-filesize": "^9.1.2",
+      "rollup-plugin-terser": "^7.0.2",
+      "@rollup/plugin-typescript": "^8.3.2",
+      "source-map": "^0.7.3",
+      "source-map-loader": "^0.2.4",
+      "ts-loader": "^7.0.2",
+      "ts-node": "^8.9.1",
+      "tsconfig-paths": "^3.9.0",
+      "tslib": "^2.4.0",
+      "typescript": "4.7.0-beta",
+      "webpack": "^4.44.0"
+    }
+  }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 8bd5c8ebe8d..0394d3cf388 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3517,14 +3517,14 @@
     js-yaml "~3.13.1"
     resolve "~1.17.0"
 
-"@microsoft/api-extractor-model@7.15.3":
-  version "7.15.3"
-  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.15.3.tgz#cf76deeeb2733d974da678f530c2dbaceb18a065"
-  integrity sha512-NkSjolmSI7NGvbdz0Y7kjQfdpD+j9E5CwXTxEyjDqxd10MI7GXV8DnAsQ57GFJcgHKgTjf2aUnYfMJ9w3aMicw==
+"@microsoft/api-extractor-model@7.17.2":
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor-model/-/api-extractor-model-7.17.2.tgz#033b39a7bac4f3eee3e5ffd406d2af61cedc727e"
+  integrity sha512-fYfCeBeLm7jnZligC64qHiH4/vzswFLDfyPpX+uKO36OI2kIeMHrYG0zaezmuinKvE4vg1dAz38zZeDbPvBKGg==
   dependencies:
-    "@microsoft/tsdoc" "0.13.2"
-    "@microsoft/tsdoc-config" "~0.15.2"
-    "@rushstack/node-core-library" "3.45.0"
+    "@microsoft/tsdoc" "0.14.1"
+    "@microsoft/tsdoc-config" "~0.16.1"
+    "@rushstack/node-core-library" "3.45.4"
 
 "@microsoft/api-extractor-model@7.8.0":
   version "7.8.0"
@@ -3542,23 +3542,23 @@
     "@microsoft/tsdoc" "0.12.19"
     "@rushstack/node-core-library" "3.24.1"
 
-"@microsoft/api-extractor@7.19.4":
-  version "7.19.4"
-  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.19.4.tgz#95d43d410a1dfb28a02062c4693bcb9c52afe9eb"
-  integrity sha512-iehC6YA3DGJvxTUaK7HUtQmP6hAQU07+Q/OR8TG4dVR6KpqCi9UPEVk8AgCvQkiK+6FbVEFQTx0qLuYk4EeuHg==
-  dependencies:
-    "@microsoft/api-extractor-model" "7.15.3"
-    "@microsoft/tsdoc" "0.13.2"
-    "@microsoft/tsdoc-config" "~0.15.2"
-    "@rushstack/node-core-library" "3.45.0"
-    "@rushstack/rig-package" "0.3.7"
-    "@rushstack/ts-command-line" "4.10.6"
+"@microsoft/api-extractor@7.23.1":
+  version "7.23.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/api-extractor/-/api-extractor-7.23.1.tgz#483e339cc73669c709ff215a76eb0e6d9a31de5b"
+  integrity sha512-J5cTjbMzSZPRZT4AKvFI1KmLGHVhV6bHnFcPo3Og9cN9QmknzpKg5BxvpBecEdFKNZxUpUrBkps2xOQ4Fjc6zg==
+  dependencies:
+    "@microsoft/api-extractor-model" "7.17.2"
+    "@microsoft/tsdoc" "0.14.1"
+    "@microsoft/tsdoc-config" "~0.16.1"
+    "@rushstack/node-core-library" "3.45.4"
+    "@rushstack/rig-package" "0.3.11"
+    "@rushstack/ts-command-line" "4.10.10"
     colors "~1.2.1"
     lodash "~4.17.15"
     resolve "~1.17.0"
     semver "~7.3.0"
     source-map "~0.6.1"
-    typescript "~4.5.2"
+    typescript "~4.6.3"
 
 "@microsoft/api-extractor@7.8.1":
   version "7.8.1"
@@ -3633,21 +3633,6 @@
     "@microsoft/fast-jss-utilities" "^4.8.0"
     "@microsoft/fast-web-utilities" "^4.6.0"
 
-"@microsoft/fast-element@^1.10.0":
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.10.0.tgz#a14d498e98a8fc6a80efab0013577db0f7ba4aae"
-  integrity sha512-z68APaW2CehGoL3iktXl9H/Pkn0PB6HLsG1sN0/2fS0XpBFjT3+teWdmTEs92FmSXdOeE2MzSy8nvPmJ9sy3xQ==
-
-"@microsoft/fast-foundation@^2.45.0":
-  version "2.45.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.45.0.tgz#49b859f4a74827e9754bce1bbb8e12bc80bc48ef"
-  integrity sha512-j8qQ6yW64pCH9seijG9HoOP9i5n9e3xZMOOczgAdOqurxUaEAqmxp1Rbf7MH89kA87LO5MygP22PKWFDtHD1+g==
-  dependencies:
-    "@microsoft/fast-element" "^1.10.0"
-    "@microsoft/fast-web-utilities" "^5.4.0"
-    tabbable "^5.2.0"
-    tslib "^1.13.0"
-
 "@microsoft/fast-jss-manager-react@^4.8.0":
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/@microsoft/fast-jss-manager-react/-/fast-jss-manager-react-4.8.0.tgz#0694b18e9250a26a443ad0d6ab5938bbca2147ca"
@@ -3739,13 +3724,6 @@
   dependencies:
     exenv-es6 "^1.0.0"
 
-"@microsoft/fast-web-utilities@^5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-5.4.0.tgz#bb9bc548ae39224c550d2637d1d33fd9ffc6db79"
-  integrity sha512-bXgwsqbj2vNs34rTPdeSomiKG/Enotill+2ImOoF7MOU+GasQGpL1ksEUYSou616327Rh9wVMqRE6EGiSSMFwQ==
-  dependencies:
-    exenv-es6 "^1.1.1"
-
 "@microsoft/tsdoc-config@^0.13.4":
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/@microsoft/tsdoc-config/-/tsdoc-config-0.13.9.tgz#d8c8e8ab79ca11dc14838090c463905ae4c1a22d"
@@ -3756,12 +3734,12 @@
     jju "~1.4.0"
     resolve "~1.19.0"
 
-"@microsoft/tsdoc-config@~0.15.2":
-  version "0.15.2"
-  resolved "https://registry.yarnpkg.com/@microsoft/tsdoc-config/-/tsdoc-config-0.15.2.tgz#eb353c93f3b62ab74bdc9ab6f4a82bcf80140f14"
-  integrity sha512-mK19b2wJHSdNf8znXSMYVShAHktVr/ib0Ck2FA3lsVBSEhSI/TfXT7DJQkAYgcztTuwazGcg58ZjYdk0hTCVrA==
+"@microsoft/tsdoc-config@~0.16.1":
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/tsdoc-config/-/tsdoc-config-0.16.1.tgz#4de11976c1202854c4618f364bf499b4be33e657"
+  integrity sha512-2RqkwiD4uN6MLnHFljqBlZIXlt/SaUT6cuogU1w2ARw4nKuuppSmR0+s+NC+7kXBQykd9zzu0P4HtBpZT5zBpQ==
   dependencies:
-    "@microsoft/tsdoc" "0.13.2"
+    "@microsoft/tsdoc" "0.14.1"
     ajv "~6.12.6"
     jju "~1.4.0"
     resolve "~1.19.0"
@@ -3776,10 +3754,10 @@
   resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz#30728e34ebc90351dd3aff4e18d038eed2c3e098"
   integrity sha512-Mfmij13RUTmHEMi9vRUhMXD7rnGR2VvxeNYtaGtaJ4redwwjT4UXYJ+nzmVJF7hhd4pn/Fx5sncDKxMVFJSWPg==
 
-"@microsoft/tsdoc@0.13.2":
-  version "0.13.2"
-  resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.13.2.tgz#3b0efb6d3903bd49edb073696f60e90df08efb26"
-  integrity sha512-WrHvO8PDL8wd8T2+zBGKrMwVL5IyzR3ryWUsl0PXgEV0QHup4mTLi0QcATefGI6Gx9Anu7vthPyyyLpY0EpiQg==
+"@microsoft/tsdoc@0.14.1":
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.14.1.tgz#155ef21065427901994e765da8a0ba0eaae8b8bd"
+  integrity sha512-6Wci+Tp3CgPt/B9B0a3J4s3yMgLNSku6w5TV6mN+61C71UqsRBv2FUibBf3tPGlNxebgPHMEUzKpb1ggE8KCKw==
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -4184,6 +4162,14 @@
     is-module "^1.0.0"
     resolve "^1.19.0"
 
+"@rollup/plugin-typescript@^8.3.2":
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-8.3.2.tgz#e1b719e2ed3e752bbc092001656c48378f2d15f0"
+  integrity sha512-MtgyR5LNHZr3GyN0tM7gNO9D0CS+Y+vflS4v/PHmrX17JCkHUYKvQ5jN5o3cz1YKllM3duXUqu3yOHwMPUxhDg==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    resolve "^1.17.0"
+
 "@rollup/pluginutils@^3.0.8", "@rollup/pluginutils@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.1.0.tgz#706b4524ee6dc8b103b3c995533e5ad680c02b9b"
@@ -4219,10 +4205,10 @@
     timsort "~0.3.0"
     z-schema "~3.18.3"
 
-"@rushstack/node-core-library@3.45.0":
-  version "3.45.0"
-  resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.45.0.tgz#8c86b39271b6d84260b1e70db87e1e265b54f620"
-  integrity sha512-YMuIJl19vQT1+g/OU9mLY6T5ZBT9uDlmeXExDQACpGuxTJW+LHNbk/lRX+eCApQI2eLBlaL4U68r3kZlqwbdmw==
+"@rushstack/node-core-library@3.45.4":
+  version "3.45.4"
+  resolved "https://registry.yarnpkg.com/@rushstack/node-core-library/-/node-core-library-3.45.4.tgz#a5e1246c462940d16a5acc667c1ffe460b514087"
+  integrity sha512-FMoEQWjK7nWAO2uFgV1eVpVhY9ZDGOdIIomi9zTej64cKJ+8/Nvu+ny0xKaUDEjw/ALftN2D2ml7L0RDpW/Z9g==
   dependencies:
     "@types/node" "12.20.24"
     colors "~1.2.1"
@@ -4234,18 +4220,18 @@
     timsort "~0.3.0"
     z-schema "~5.0.2"
 
-"@rushstack/rig-package@0.3.7":
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/@rushstack/rig-package/-/rig-package-0.3.7.tgz#3fa564b1d129d28689dd4309502792b15e84bf81"
-  integrity sha512-pzMsTSeTC8IiZ6EJLr53gGMvhT4oLWH+hxD7907cHyWuIUlEXFtu/2pK25vUQT13nKp5DJCWxXyYoGRk/h6rtA==
+"@rushstack/rig-package@0.3.11":
+  version "0.3.11"
+  resolved "https://registry.yarnpkg.com/@rushstack/rig-package/-/rig-package-0.3.11.tgz#92a05929822610e8b42f2ad330d9ea20afae5165"
+  integrity sha512-uI1/g5oQPtyrT9nStoyX/xgZSLa2b+srRFaDk3r1eqC7zA5th4/bvTGl2QfV3C9NcP+coSqmk5mFJkUfH6i3Lw==
   dependencies:
     resolve "~1.17.0"
     strip-json-comments "~3.1.1"
 
-"@rushstack/ts-command-line@4.10.6":
-  version "4.10.6"
-  resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.10.6.tgz#5669e481e4339ceb4e1428183eb0937d3bc3841b"
-  integrity sha512-Y3GkUag39sTIlukDg9mUp8MCHrrlJ27POrBNRQGc/uF+VVgX8M7zMzHch5zP6O1QVquWgD7Engdpn2piPYaS/g==
+"@rushstack/ts-command-line@4.10.10":
+  version "4.10.10"
+  resolved "https://registry.yarnpkg.com/@rushstack/ts-command-line/-/ts-command-line-4.10.10.tgz#69da17b03ce57795b67ea2aabf7c976c81816078"
+  integrity sha512-F+MH7InPDXqX40qvvcEsnvPpmg566SBpfFqj2fcCh8RjM6AyOoWlXc8zx7giBD3ZN85NVAEjZAgrcLU0z+R2yg==
   dependencies:
     "@types/argparse" "1.0.38"
     argparse "~1.0.9"
@@ -5082,7 +5068,7 @@
     "@types/node" "*"
     "@types/responselike" "*"
 
-"@types/chai-spies@^1.0.1":
+"@types/chai-spies@^1.0.1", "@types/chai-spies@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@types/chai-spies/-/chai-spies-1.0.3.tgz#a52dc61af3853ec9b80965040811d15dfd401542"
   integrity sha512-RBZjhVuK7vrg4rWMt04UF5zHYwfHnpk5mIWu3nQvU3AKGDixXzSjZ6v0zke6pBcaJqMv3IBZ5ibLWPMRDL0sLw==
@@ -14265,9 +14251,9 @@ immediate@~3.0.5:
   integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
 
 immer@8.0.1, immer@^9.0.6, immer@^9.0.7:
-  version "9.0.12"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.12.tgz#2d33ddf3ee1d247deab9d707ca472c8c942a0f20"
-  integrity sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==
+  version "9.0.14"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.14.tgz#e05b83b63999d26382bb71676c9d827831248a48"
+  integrity sha512-ubBeqQutOSLIFCUBN03jGeOS6a3DoYlSYwYJTa+gSKEZKU5redJIqkIdZ3JVv/4RZpfcXdAWH5zCNLWPRv2WDw==
 
 import-fresh@^2.0.0:
   version "2.0.0"
@@ -22469,6 +22455,16 @@ rollup-plugin-terser@^5.3.0:
     serialize-javascript "^4.0.0"
     terser "^4.6.2"
 
+rollup-plugin-terser@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d"
+  integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    jest-worker "^26.2.1"
+    serialize-javascript "^4.0.0"
+    terser "^5.0.0"
+
 rollup-plugin-transform-tagged-template@^0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/rollup-plugin-transform-tagged-template/-/rollup-plugin-transform-tagged-template-0.0.3.tgz#b18df7931dbc43984a1c81ee2edcc266a9f6844e"
@@ -22511,6 +22507,13 @@ rollup@^2.7.6:
   optionalDependencies:
     fsevents "~2.3.1"
 
+rollup@^2.71.1:
+  version "2.74.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.74.1.tgz#4fba0ff1c312cc4ee82691b154eee69a0d01929f"
+  integrity sha512-K2zW7kV8Voua5eGkbnBtWYfMIhYhT9Pel2uhBk2WO5eMee161nPze/XRfvEQPFYz7KgrCCnmh2Wy0AMFLGGmMA==
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 rst-selector-parser@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
@@ -23411,6 +23414,13 @@ source-map@~0.2.0:
   dependencies:
     amdefine ">=0.0.4"
 
+source-map@~0.8.0-beta.0:
+  version "0.8.0-beta.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
+  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
+  dependencies:
+    whatwg-url "^7.0.0"
+
 sourcemap-codec@^1.4.4:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -24380,6 +24390,16 @@ terser@^4.1.2, terser@^4.6.2, terser@^4.6.3, terser@^4.8.0:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
+terser@^5.0.0:
+  version "5.13.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.13.1.tgz#66332cdc5a01b04a224c9fad449fc1a18eaa1799"
+  integrity sha512-hn4WKOfwnwbYfe48NgrQjqNOH9jzLqRcIfbYytOXCOv46LBfWr9bDS17MQqOi+BWGD0sJK3Sj5NC/gJjiojaoA==
+  dependencies:
+    acorn "^8.5.0"
+    commander "^2.20.0"
+    source-map "~0.8.0-beta.0"
+    source-map-support "~0.5.20"
+
 terser@^5.10.0, terser@^5.3.4, terser@^5.6.0, terser@^5.7.2:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.10.0.tgz#b86390809c0389105eb0a0b62397563096ddafcc"
@@ -24831,6 +24851,11 @@ tslib@^1.11.1, tslib@^1.13.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tsscmp@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"
@@ -24944,7 +24969,7 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^3.8.3, typescript@^3.9.0, typescript@^4.3.5, typescript@~3.7.2, "typescript@~3.9.0 || ~4.3.5", typescript@~4.3.2, typescript@~4.5.2:
+typescript@4.7.0-beta, typescript@^3.8.3, typescript@^3.9.0, typescript@^4.6.2, typescript@~3.7.2, "typescript@~3.9.0 || ~4.3.5", typescript@~4.3.2, typescript@~4.6.3:
   version "3.9.7"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
   integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==