Merge pull request #193 from element-hq/quenting/inline-avatar-mask

Inline the avatar mark to remove the react-dom/server dependency
element-hq · Jun 20, 2024 · 3b82efe · 3b82efe
2 parents 1633220 + 66b8fea
commit 3b82efe
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
     "jsdom": "^22.1.0",
     "prettier": "3.0.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^5.0.1",
     "serve": "^14.2.1",
@@ -117,17 +117,12 @@
     "@fontsource/inconsolata": "^5",
     "@fontsource/inter": "^5",
     "@types/react": "*",
-    "@types/react-dom": "*",
     "@vector-im/compound-design-tokens": ">=1.0.0 <2.0.0",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18"
   },
   "peerDependenciesMeta": {
     "@types/react": {
       "optional": true
-    },
-    "@types/react-dom": {
-      "optional": true
     }
   },
   "resolutions": {

diff --git a/src/components/Avatar/AvatarStack.tsx b/src/components/Avatar/AvatarStack.tsx
@@ -16,10 +16,8 @@ limitations under the License.
 
 import classnames from "classnames";
 import React, { useEffect } from "react";
-import { renderToStaticMarkup } from "react-dom/server";
 import styles from "./Avatar.module.css";
-
-import AvatarClipPath from "./avatar-clip.mask.svg";
+import clipMask from "./avatar-clip.mask.svg?raw";
 
 type AvatarStackProps = {
   className?: string;
@@ -51,9 +49,11 @@ export const AvatarStack: React.FC<
    */
   useEffect(() => {
     if (AvatarStackUsageCount === 0) {
-      const svgMask = renderToStaticMarkup(
-        <AvatarClipPath id={AVATAR_MASK_ID} className={styles["clip-path"]} />,
-      );
+      const svgMask = `
+        <div aria-hidden="true" id="${AVATAR_MASK_ID}" class="${styles["clip-path"]}">
+          ${clipMask}
+        </div>
+      `;
       document.body.insertAdjacentHTML("beforeend", svgMask);
     }
     AvatarStackUsageCount++;

diff --git a/vite.config.ts b/vite.config.ts
@@ -27,8 +27,6 @@ export default defineConfig({
       // It includes all dependencies except @vector-im/compound-design-tokens
       external: [
         "react",
-        "react-dom",
-        "react-dom/server",
         "react/jsx-runtime",
         "react/jsx-dev-runtime",
         "classnames",

diff --git a/yarn.lock b/yarn.lock
@@ -7909,7 +7909,8 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-"prettier-fallback@npm:prettier@^3":
+"prettier-fallback@npm:prettier@^3", prettier@^3.1.1:
+  name prettier-fallback
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
   integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
@@ -7926,11 +7927,6 @@ prettier@3.0.3:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
   integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
 
-prettier@^3.1.1:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.2.5.tgz#e52bc3090586e824964a8813b09aba6233b28368"
-  integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==
-
 pretty-format@^27.0.2:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
@@ -8124,22 +8120,14 @@ react-docgen@^7.0.0:
     resolve "^1.22.1"
     strip-indent "^4.0.0"
 
-"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0":
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
-react-dom@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
-
 react-element-to-jsx-string@^15.0.0:
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6"
@@ -8596,13 +8584,6 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
-  dependencies:
-    loose-envify "^1.1.0"
-
 scheduler@^0.23.2:
   version "0.23.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"