chore: inject core version into the DOM (#3173)

* chore: inject core version into the DOM * chore: snapshots
twilio-labs · Apr 20, 2023 · e801b77 · e801b77
1 parent d1d3088
commit e801b77
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 9 deletions.
diff --git a/.changeset/thirty-games-protect.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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