From 828459acf763ecd70e55176341510d54e992f227 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Thu, 20 Jun 2024 17:06:10 +0200 Subject: [PATCH 1/2] Inline the avatar mask to remove the react-dom/server dependency --- package.json | 9 ++----- src/components/Avatar/AvatarStack.tsx | 20 ++++++++++----- src/components/Avatar/avatar-clip.mask.svg | 30 ---------------------- vite.config.ts | 2 -- yarn.lock | 25 +++--------------- 5 files changed, 19 insertions(+), 67 deletions(-) delete mode 100644 src/components/Avatar/avatar-clip.mask.svg diff --git a/package.json b/package.json index 8ef23ce7..6b4bb9e3 100644 --- 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 index 84ae46cd..e4d6629d 100644 --- a/src/components/Avatar/AvatarStack.tsx +++ b/src/components/Avatar/AvatarStack.tsx @@ -16,11 +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"; - type AvatarStackProps = { className?: string; }; @@ -51,9 +48,20 @@ export const AvatarStack: React.FC< */ useEffect(() => { if (AvatarStackUsageCount === 0) { - const svgMask = renderToStaticMarkup( - , - ); + const svgMask = ` + + + + + + `; document.body.insertAdjacentHTML("beforeend", svgMask); } AvatarStackUsageCount++; diff --git a/src/components/Avatar/avatar-clip.mask.svg b/src/components/Avatar/avatar-clip.mask.svg deleted file mode 100644 index 359a0bfb..00000000 --- a/src/components/Avatar/avatar-clip.mask.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - diff --git a/vite.config.ts b/vite.config.ts index a9c8f64a..7804bc64 100644 --- 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 index ea31af9b..17decc04 100644 --- 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,7 +8120,7 @@ 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== @@ -8132,14 +8128,6 @@ react-docgen@^7.0.0: 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" From 66b8feaf3a593b3cd3b5878432d358bec4196396 Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Thu, 20 Jun 2024 17:35:33 +0200 Subject: [PATCH 2/2] Restore the SVG file --- src/components/Avatar/AvatarStack.tsx | 16 +++--------- src/components/Avatar/avatar-clip.mask.svg | 30 ++++++++++++++++++++++ 2 files changed, 34 insertions(+), 12 deletions(-) create mode 100644 src/components/Avatar/avatar-clip.mask.svg diff --git a/src/components/Avatar/AvatarStack.tsx b/src/components/Avatar/AvatarStack.tsx index e4d6629d..e17684b1 100644 --- a/src/components/Avatar/AvatarStack.tsx +++ b/src/components/Avatar/AvatarStack.tsx @@ -17,6 +17,7 @@ limitations under the License. import classnames from "classnames"; import React, { useEffect } from "react"; import styles from "./Avatar.module.css"; +import clipMask from "./avatar-clip.mask.svg?raw"; type AvatarStackProps = { className?: string; @@ -49,18 +50,9 @@ export const AvatarStack: React.FC< useEffect(() => { if (AvatarStackUsageCount === 0) { const svgMask = ` - - - - - + `; document.body.insertAdjacentHTML("beforeend", svgMask); } diff --git a/src/components/Avatar/avatar-clip.mask.svg b/src/components/Avatar/avatar-clip.mask.svg new file mode 100644 index 00000000..359a0bfb --- /dev/null +++ b/src/components/Avatar/avatar-clip.mask.svg @@ -0,0 +1,30 @@ + + + + + + + +