From e801b776bc7dc454428a2dd71ac0e5ed21854619 Mon Sep 17 00:00:00 2001
From: Simon Taggart <me@simontaggart.com>
Date: Thu, 20 Apr 2023 15:01:14 -0700
Subject: [PATCH] chore: inject core version into the DOM (#3173)

* chore: inject core version into the DOM

* chore: snapshots
---
 .changeset/thirty-games-protect.md            |  7 ++++
 package.json                                  |  1 +
 .../__snapshots__/avatar.test.tsx.snap        |  4 ++
 .../__snapshots__/index.spec.tsx.snap         |  4 ++
 .../__snapshots__/grid.test.tsx.snap          |  6 +++
 .../paste-core/primitives/box/src/index.tsx   |  4 +-
 .../__snapshots__/siblingBox.test.tsx.snap    |  1 +
 .../__snapshots__/text.spec.tsx.snap          | 42 +++++++++++++++++++
 .../paste-core/primitives/text/src/index.tsx  |  3 ++
 tools/build/esbuild.js                        | 24 +++++++----
 yarn.lock                                     | 21 +++++++++-
 11 files changed, 108 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/thirty-games-protect.md

diff --git a/.changeset/thirty-games-protect.md b/.changeset/thirty-games-protect.md
new file mode 100644
index 0000000000..76686496fb
--- /dev/null
+++ b/.changeset/thirty-games-protect.md
@@ -0,0 +1,7 @@
+---
+'@twilio-paste/box': patch
+'@twilio-paste/text': patch
+'@twilio-paste/core': patch
+---
+
+[Box, Text]: inject the Paste Core version into the DOM for better debugging in consumer applications and remote inspection
diff --git a/package.json b/package.json
index 0be0a9d3b3..83716ed2e3 100644
--- a/package.json
+++ b/package.json
@@ -156,6 +156,7 @@
     "danger": "^10.6.6",
     "dotenv": "^16.0.0",
     "esbuild": "^0.15.18",
+    "esbuild-plugin-version-injector": "^1.1.0",
     "eslint": "^8.29.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-twilio-react": "2.0.0",
diff --git a/packages/paste-core/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap b/packages/paste-core/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap
index 445dd0d148..d13ff72d12 100644
--- a/packages/paste-core/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap
+++ b/packages/paste-core/components/avatar/__tests__/__snapshots__/avatar.test.tsx.snap
@@ -53,11 +53,13 @@ exports[`Avatar image should render responsive css with an image 1`] = `
 
 <div
     class="emotion-0"
+    data-paste-core-version="19.0.1"
     data-paste-element="AVATAR"
   >
     <img
       alt="avatar example"
       class="emotion-1"
+      data-paste-core-version="19.0.1"
       data-paste-element="BOX"
       src="/avatars/avatar2.png"
       title="avatar example"
@@ -126,10 +128,12 @@ exports[`Avatar intials should render responsive css 1`] = `
 
 <div
     class="emotion-0"
+    data-paste-core-version="19.0.1"
     data-paste-element="AVATAR"
   >
     <abbr
       class="emotion-1"
+      data-paste-core-version="19.0.1"
       data-paste-element="TEXT"
       title="Simon Taggart"
     >
diff --git a/packages/paste-core/components/separator/__tests__/__snapshots__/index.spec.tsx.snap b/packages/paste-core/components/separator/__tests__/__snapshots__/index.spec.tsx.snap
index 60698edd40..994c205f34 100644
--- a/packages/paste-core/components/separator/__tests__/__snapshots__/index.spec.tsx.snap
+++ b/packages/paste-core/components/separator/__tests__/__snapshots__/index.spec.tsx.snap
@@ -31,6 +31,7 @@ exports[`Separator Render should set horizontal margins 1`] = `
     <hr
       aria-orientation="horizontal"
       class="emotion-1"
+      data-paste-core-version="19.0.1"
       data-paste-element="SEPARATOR"
     />
   </div>
@@ -82,6 +83,7 @@ exports[`Separator Render should set responsive horizontal margins 1`] = `
     <hr
       aria-orientation="horizontal"
       class="emotion-1"
+      data-paste-core-version="19.0.1"
       data-paste-element="SEPARATOR"
     />
   </div>
@@ -133,6 +135,7 @@ exports[`Separator Render should set responsive vertical margins 1`] = `
     <hr
       aria-orientation="vertical"
       class="emotion-1"
+      data-paste-core-version="19.0.1"
       data-paste-element="SEPARATOR"
     />
   </div>
@@ -170,6 +173,7 @@ exports[`Separator Render should set vertical margins 1`] = `
     <hr
       aria-orientation="vertical"
       class="emotion-1"
+      data-paste-core-version="19.0.1"
       data-paste-element="SEPARATOR"
     />
   </div>
diff --git a/packages/paste-core/layout/grid/__tests__/__snapshots__/grid.test.tsx.snap b/packages/paste-core/layout/grid/__tests__/__snapshots__/grid.test.tsx.snap
index 23ac506887..55da57a971 100644
--- a/packages/paste-core/layout/grid/__tests__/__snapshots__/grid.test.tsx.snap
+++ b/packages/paste-core/layout/grid/__tests__/__snapshots__/grid.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`Grid render should render a Column 1`] = `
 
 <div
     class="emotion-0"
+    data-paste-core-version="19.0.1"
     data-paste-element="COLUMN"
   >
     child
@@ -39,6 +40,7 @@ exports[`Grid render should render a Grid 1`] = `
 
 <div
     class="emotion-0"
+    data-paste-core-version="19.0.1"
     data-paste-element="GRID"
   >
     child
@@ -65,6 +67,7 @@ exports[`Grid render should render a Grid as any HTML element 1`] = `
 
 <section
     class="emotion-0"
+    data-paste-core-version="19.0.1"
     data-paste-element="GRID"
   >
     child
@@ -174,14 +177,17 @@ exports[`Grid render should render responsive css 1`] = `
 
 <div
     class="emotion-0"
+    data-paste-core-version="19.0.1"
     data-paste-element="GRID"
   >
     <div
       class="emotion-1"
+      data-paste-core-version="19.0.1"
       data-paste-element="COLUMN"
     />
     <div
       class="emotion-2"
+      data-paste-core-version="19.0.1"
       data-paste-element="COLUMN"
     />
   </div>
diff --git a/packages/paste-core/primitives/box/src/index.tsx b/packages/paste-core/primitives/box/src/index.tsx
index 87d15b4a75..4ef914b1f7 100644
--- a/packages/paste-core/primitives/box/src/index.tsx
+++ b/packages/paste-core/primitives/box/src/index.tsx
@@ -21,6 +21,8 @@ import {getPseudoStyles, PasteStyleProps, getCustomElementStyles} from './StyleF
 import {customStyleProps} from './CustomStyleProps';
 import {PseudoPropStyles} from './PseudoPropStyles';
 
+const coreVersionNumberPlaceholder: string = '[VI]{{inject}}[/VI]';
+
 // we need size to hit the DOM for <select /> elements
 const stylingPropsWithoutSize = defaultStylingProps.filter((item: string) => item !== 'size');
 
@@ -45,7 +47,7 @@ export const StyledBox = styled('div', {shouldForwardProp})<StyledBoxProps>(
 
 const Box = React.forwardRef<HTMLElement, BoxProps>(({children, element = 'BOX', ...props}, ref) => {
   return (
-    <StyledBox data-paste-element={element} ref={ref} {...props}>
+    <StyledBox data-paste-element={element} data-paste-core-version={coreVersionNumberPlaceholder} ref={ref} {...props}>
       {children}
     </StyledBox>
   );
diff --git a/packages/paste-core/primitives/sibling-box/__tests__/__snapshots__/siblingBox.test.tsx.snap b/packages/paste-core/primitives/sibling-box/__tests__/__snapshots__/siblingBox.test.tsx.snap
index 9ee9610dc6..0d0eff21c0 100644
--- a/packages/paste-core/primitives/sibling-box/__tests__/__snapshots__/siblingBox.test.tsx.snap
+++ b/packages/paste-core/primitives/sibling-box/__tests__/__snapshots__/siblingBox.test.tsx.snap
@@ -100,6 +100,7 @@ input[type=checkbox][aria-invalid=true]+label .emotion-1 {
     <div
       aria-hidden="true"
       class="emotion-1"
+      data-paste-core-version="19.0.1"
       data-paste-element="SIBLING_BOX"
     >
       child
diff --git a/packages/paste-core/primitives/text/__tests__/__snapshots__/text.spec.tsx.snap b/packages/paste-core/primitives/text/__tests__/__snapshots__/text.spec.tsx.snap
index b07c202df3..2c56c86361 100644
--- a/packages/paste-core/primitives/text/__tests__/__snapshots__/text.spec.tsx.snap
+++ b/packages/paste-core/primitives/text/__tests__/__snapshots__/text.spec.tsx.snap
@@ -130,6 +130,7 @@ exports[`Pseudo-class props should generate pseudo-class CSS 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       PseudoBox
@@ -164,6 +165,7 @@ exports[`as should render as a provided HTML element 1`] = `
   >
     <label
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       background single
@@ -198,6 +200,7 @@ exports[`color should set a color property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       color single
@@ -238,6 +241,7 @@ exports[`color should set a responsive color property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       color responsive
@@ -273,6 +277,7 @@ exports[`display should set a display property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       display single
@@ -314,6 +319,7 @@ exports[`display should set a responsive display property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       display responsive
@@ -349,6 +355,7 @@ exports[`fontFamily should set a font family property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       font family single
@@ -390,6 +397,7 @@ exports[`fontFamily should set a responsive font family property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       font family responsive
@@ -424,6 +432,7 @@ exports[`fontSize should set a font size property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       font size single
@@ -464,6 +473,7 @@ exports[`fontSize should set a responsive font size property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       font size responsive
@@ -499,6 +509,7 @@ exports[`fontStyle should set a font style property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       font style single
@@ -540,6 +551,7 @@ exports[`fontStyle should set a responsive font style property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       font style responsive
@@ -575,6 +587,7 @@ exports[`fontWeight should set a font weight property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       font weight single
@@ -616,6 +629,7 @@ exports[`fontWeight should set a responsive font weight property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       font weight responsive
@@ -651,6 +665,7 @@ exports[`letterSpacing should set a letter spacing property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       letter spacing single
@@ -692,6 +707,7 @@ exports[`letterSpacing should set a responsive letter spacing property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       letter spacing responsive
@@ -726,6 +742,7 @@ exports[`lineHeight should set a line height property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       line height single
@@ -766,6 +783,7 @@ exports[`lineHeight should set a responsive line height property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       line height responsive
@@ -800,6 +818,7 @@ exports[`margin should set a margin property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       margin single
@@ -840,6 +859,7 @@ exports[`margin should set a responsive margin property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       margin responsive
@@ -875,6 +895,7 @@ exports[`marginBottom should set a marginBottom property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       marginBottom single
@@ -916,6 +937,7 @@ exports[`marginBottom should set a responsive marginBottom property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       marginBottom responsive
@@ -951,6 +973,7 @@ exports[`marginLeft should set a marginLeft property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       marginLeft single
@@ -992,6 +1015,7 @@ exports[`marginLeft should set a responsive marginLeft property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       marginLeft responsive
@@ -1027,6 +1051,7 @@ exports[`marginRight should set a marginRight property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       marginRight single
@@ -1068,6 +1093,7 @@ exports[`marginRight should set a responsive marginRight property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       marginRight responsive
@@ -1103,6 +1129,7 @@ exports[`marginTop should set a marginTop property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       marginTop single
@@ -1144,6 +1171,7 @@ exports[`marginTop should set a responsive marginTop property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       marginTop responsive
@@ -1178,6 +1206,7 @@ exports[`padding should set a padding property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       padding single
@@ -1218,6 +1247,7 @@ exports[`padding should set a responsive padding property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       padding responsive
@@ -1253,6 +1283,7 @@ exports[`paddingBottom should set a paddingBottom property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       paddingBottom single
@@ -1294,6 +1325,7 @@ exports[`paddingBottom should set a responsive paddingBottom property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       paddingBottom responsive
@@ -1329,6 +1361,7 @@ exports[`paddingLeft should set a paddingLeft property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       paddingLeft single
@@ -1370,6 +1403,7 @@ exports[`paddingLeft should set a responsive paddingLeft property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       paddingLeft responsive
@@ -1405,6 +1439,7 @@ exports[`paddingRight should set a paddingRight property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       paddingRight single
@@ -1446,6 +1481,7 @@ exports[`paddingRight should set a responsive paddingRight property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       paddingRight responsive
@@ -1481,6 +1517,7 @@ exports[`paddingTop should set a paddingTop property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       paddingTop single
@@ -1522,6 +1559,7 @@ exports[`paddingTop should set a responsive paddingTop property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       paddingTop responsive
@@ -1563,6 +1601,7 @@ exports[`textAlign should set a responsive textAlign property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       textAlign responsive
@@ -1598,6 +1637,7 @@ exports[`textAlign should set a textAlign property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       textAlign single
@@ -1641,6 +1681,7 @@ exports[`textDecoration should set a responsive textDecoration property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       textDecoration responsive
@@ -1677,6 +1718,7 @@ exports[`textDecoration should set a textDecoration property 1`] = `
   >
     <span
       class="emotion-1"
+      data-paste-core-version="[VI]{{inject}}[/VI]"
       data-paste-element="TEXT"
     >
       textDecoration single
diff --git a/packages/paste-core/primitives/text/src/index.tsx b/packages/paste-core/primitives/text/src/index.tsx
index d4fe0eeec9..6c0cbe2049 100644
--- a/packages/paste-core/primitives/text/src/index.tsx
+++ b/packages/paste-core/primitives/text/src/index.tsx
@@ -19,6 +19,8 @@ import {getPseudoStyles, PasteStyleProps, getCustomElementStyles} from './StyleF
 import {customStyleProps} from './CustomStyleProps';
 import {PseudoPropStyles} from './PseudoPropStyles';
 
+const coreVersionNumberPlaceholder: string = '[VI]{{inject}}[/VI]';
+
 const shouldForwardProp = createShouldForwardProp([
   ...stylingProps,
   ...Object.keys({...customStyleProps, ...PseudoPropStyles}),
@@ -48,6 +50,7 @@ const Text = React.forwardRef<HTMLElement, TextProps>(
     return (
       <StyledText
         data-paste-element={element}
+        data-paste-core-version={coreVersionNumberPlaceholder}
         ref={ref}
         color={color}
         fontSize={fontSize}
diff --git a/tools/build/esbuild.js b/tools/build/esbuild.js
index 067304d74a..9d2de72749 100644
--- a/tools/build/esbuild.js
+++ b/tools/build/esbuild.js
@@ -1,4 +1,7 @@
+const path = require('path');
 const esbuild = require('esbuild');
+const {esbuildPluginVersionInjector} = require('esbuild-plugin-version-injector');
+
 const {PasteCJSResolverPlugin} = require('./plugins/PasteCJSResolver');
 const {EsmExternalsPlugin} = require('./plugins/EsmExternals');
 
@@ -34,7 +37,8 @@ async function build(packageJson) {
   const config = {
     color: true,
     entryPoints,
-    /** From docs:
+    /**
+     * From docs:
      * The main fields setting is set to main,module. This means tree shaking
      * will likely not happen for packages that provide both module and main
      * since tree shaking works with ECMAScript modules but not with CommonJS
@@ -49,8 +53,10 @@ async function build(packageJson) {
     // Fixes issues related to SSR (website builds)
     platform: 'node',
     bundle: true,
-    // Sets the target environment so the code is changed into a format that
-    // works  with node12 and the listed browsers
+    /**
+     * Sets the target environment so the code is changed into a format that
+     * works  with node12 and the listed browsers
+     */
     target: ['chrome66', 'firefox58', 'safari11', 'edge79', 'node12.19.0'],
     define: {
       'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
@@ -58,6 +64,10 @@ async function build(packageJson) {
     external,
   };
 
+  const versionInjectorConfig = {
+    packageJsonPath: path.join(__dirname, '../../packages/paste-core/core-bundle/package.json'),
+  };
+
   // Minified
   await esbuild
     .build({
@@ -68,7 +78,7 @@ async function build(packageJson) {
       format: 'cjs',
       outfile: outFileCJS,
       // Needed to fix ES6 module import paths for CJS builds
-      plugins: [PasteCJSResolverPlugin],
+      plugins: [PasteCJSResolverPlugin, esbuildPluginVersionInjector(versionInjectorConfig)],
     })
     .catch((error) => {
       console.error(error);
@@ -85,7 +95,7 @@ async function build(packageJson) {
       format: 'esm',
       outfile: outFileESM,
       // Needed to fix a bug with replacing require with import statements https://github.com/evanw/esbuild/issues/566
-      plugins: [EsmExternalsPlugin({externals: external})],
+      plugins: [EsmExternalsPlugin({externals: external}), esbuildPluginVersionInjector(versionInjectorConfig)],
     })
     .catch((error) => {
       console.error(error);
@@ -100,7 +110,7 @@ async function build(packageJson) {
       format: 'cjs',
       outfile: outFileCJS.replace('.js', '.debug.js'),
       // Needed to fix ES6 module import paths for CJS builds
-      plugins: [PasteCJSResolverPlugin],
+      plugins: [PasteCJSResolverPlugin, esbuildPluginVersionInjector(versionInjectorConfig)],
     })
     .catch((error) => {
       console.error(error);
@@ -114,7 +124,7 @@ async function build(packageJson) {
       format: 'esm',
       outfile: outFileESM.replace('.es.js', '.debug.es.js'),
       // Needed to fix a bug with replacing require with import statements https://github.com/evanw/esbuild/issues/566
-      plugins: [EsmExternalsPlugin({externals: external})],
+      plugins: [EsmExternalsPlugin({externals: external}), esbuildPluginVersionInjector(versionInjectorConfig)],
     })
     .catch((error) => {
       console.error(error);
diff --git a/yarn.lock b/yarn.lock
index 65bbb5e41d..5b84a8c0ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7744,6 +7744,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sapphire/result@npm:^2.6.0":
+  version: 2.6.2
+  resolution: "@sapphire/result@npm:2.6.2"
+  dependencies:
+    tslib: ^2.5.0
+  checksum: 8ee850ba29cbf6d862c34084eb316f8b4ac0f12cb3adb1f7d74580b34bff4d4196735f2957bcea0471866f700af2dc0041d9ecabe1622d2f8e2d94d3a868eb0e
+  languageName: node
+  linkType: hard
+
 "@segment/react-tiny-virtual-list@npm:^2.2.1":
   version: 2.2.1
   resolution: "@segment/react-tiny-virtual-list@npm:2.2.1"
@@ -22184,6 +22193,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-plugin-version-injector@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "esbuild-plugin-version-injector@npm:1.1.0"
+  dependencies:
+    "@sapphire/result": ^2.6.0
+  checksum: 441a379eba7979eae9423056097aab7db9ea049967f322a3a65bec8fc361cf352d41425383954d0954a05cb38c3b5c035e8d11e629e78b9d85dae9f7b9360eea
+  languageName: node
+  linkType: hard
+
 "esbuild-register@npm:^3.4.0":
   version: 3.4.2
   resolution: "esbuild-register@npm:3.4.2"
@@ -34555,6 +34573,7 @@ fsevents@^1.2.7:
     danger: ^10.6.6
     dotenv: ^16.0.0
     esbuild: ^0.15.18
+    esbuild-plugin-version-injector: ^1.1.0
     eslint: ^8.29.0
     eslint-config-prettier: 8.5.0
     eslint-config-twilio-react: 2.0.0
@@ -41347,7 +41366,7 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2":
+"tslib@npm:^2, tslib@npm:^2.5.0":
   version: 2.5.0
   resolution: "tslib@npm:2.5.0"
   checksum: ae3ed5f9ce29932d049908ebfdf21b3a003a85653a9a140d614da6b767a93ef94f460e52c3d787f0e4f383546981713f165037dc2274df212ea9f8a4541004e1