fix: avoid ssrprovider for react 18

pixiv · Jun 4, 2024 · 52b853d · 52b853d
1 parent e78670e
commit 52b853d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 3 deletions.
diff --git a/docs/src/pages/@charcoal-ui/react/ssr.page.tsx b/docs/src/pages/@charcoal-ui/react/ssr.page.tsx
@@ -16,7 +16,7 @@ export default function InstallPage() {
       </p>
       <h2>SSRProvider</h2>
       <p>
-        SSRを利用する際は<InlineCode>SSRProvider</InlineCode>
+        React 18 以下で SSRを利用する際は<InlineCode>SSRProvider</InlineCode>
         をアプリケーションに適用してください。
       </p>
       <SSRHighlight

diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -170,8 +170,13 @@ __metadata:
 
 "@charcoal-ui/foundation@file:../packages/foundation::locator=charcoal-web-docs%40workspace%3A.":
   version: 3.12.0
+<<<<<<< HEAD
   resolution: "@charcoal-ui/foundation@file:../packages/foundation#../packages/foundation::hash=0f6ac5&locator=charcoal-web-docs%40workspace%3A."
   checksum: 8c7c67696bca731fa84b6b583d2e5bef02ba8695a6090fbdf650b2fd77600c46dbb4e2ec5a221df65085cd074603fb09ff16f81a0760bbf2f2518c17079030cb
+=======
+  resolution: "@charcoal-ui/foundation@file:../packages/foundation#../packages/foundation::hash=4f592c&locator=charcoal-web-docs%40workspace%3A."
+  checksum: f87deed1028e887d7f9a2c507d5403772bde7e41165bb99c8cf376b5a8efa108df13b40b9f14813cfb1e324955cfea5a8740458237b9b526b60b3b865e37cf4c
+>>>>>>> 1e0bd6ad (fix: avoid ssrprovider for react 18)
   languageName: node
   linkType: hard
 
@@ -195,7 +200,11 @@ __metadata:
 
 "@charcoal-ui/react@file:../packages/react::locator=charcoal-web-docs%40workspace%3A.":
   version: 3.12.0
+<<<<<<< HEAD
   resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=4aa969&locator=charcoal-web-docs%40workspace%3A."
+=======
+  resolution: "@charcoal-ui/react@file:../packages/react#../packages/react::hash=4cdd24&locator=charcoal-web-docs%40workspace%3A."
+>>>>>>> 1e0bd6ad (fix: avoid ssrprovider for react 18)
   dependencies:
     "@charcoal-ui/foundation": ^3.12.0
     "@charcoal-ui/icons": ^3.12.0
@@ -221,13 +230,21 @@ __metadata:
   peerDependencies:
     react: ">=17.0.0"
     styled-components: ">=5.1.1"
+<<<<<<< HEAD
   checksum: b102add505337058e1d2f733a7366e504db5997e025f8cf2d6bdf9819d9fb35717a2e490e22db5963415a5b823f716cea2b1e4d45d5b355e6aa27d7c2c726451
+=======
+  checksum: 14278e4698df5a1a7ee94a34c7679a1a162d0c4b84e51fee224e131f1b966d6de400091aaefaa799c0f518a82449d8c0910cde621b4044db799ab751728ae9f1
+>>>>>>> 1e0bd6ad (fix: avoid ssrprovider for react 18)
   languageName: node
   linkType: hard
 
 "@charcoal-ui/styled@file:../packages/styled::locator=charcoal-web-docs%40workspace%3A.":
   version: 3.12.0
+<<<<<<< HEAD
   resolution: "@charcoal-ui/styled@file:../packages/styled#../packages/styled::hash=6e3708&locator=charcoal-web-docs%40workspace%3A."
+=======
+  resolution: "@charcoal-ui/styled@file:../packages/styled#../packages/styled::hash=1e0994&locator=charcoal-web-docs%40workspace%3A."
+>>>>>>> 1e0bd6ad (fix: avoid ssrprovider for react 18)
   dependencies:
     "@charcoal-ui/foundation": ^3.12.0
     "@charcoal-ui/theme": ^3.12.0
@@ -236,7 +253,11 @@ __metadata:
   peerDependencies:
     react: ">=17.0.0"
     styled-components: ">=5.1.1"
+<<<<<<< HEAD
   checksum: ef3e20f6904bbbc7d0ac701af6a741885ae4af3bc84bf1a4e308fb91722a78e2c79249347867dda400410a7ab3788ab0e14f9d4bb802503c810617484079f24a
+=======
+  checksum: af45f58b5727473b5ca1b889c398a38307a1d99ffe8f1766eb3f78b365b008d41e5671fde19cddc84b6c2e3a192bad3ba65396ab71c2ff7e1e8e219ceba9bef6
+>>>>>>> 1e0bd6ad (fix: avoid ssrprovider for react 18)
   languageName: node
   linkType: hard
 
@@ -257,22 +278,38 @@ __metadata:
 
 "@charcoal-ui/theme@file:../packages/theme::locator=charcoal-web-docs%40workspace%3A.":
   version: 3.12.0
+<<<<<<< HEAD
   resolution: "@charcoal-ui/theme@file:../packages/theme#../packages/theme::hash=67be88&locator=charcoal-web-docs%40workspace%3A."
+=======
+  resolution: "@charcoal-ui/theme@file:../packages/theme#../packages/theme::hash=811d71&locator=charcoal-web-docs%40workspace%3A."
+>>>>>>> 1e0bd6ad (fix: avoid ssrprovider for react 18)
   dependencies:
     "@charcoal-ui/foundation": ^3.12.0
     "@charcoal-ui/utils": ^3.12.0
     polished: ^4.1.4
+<<<<<<< HEAD
   checksum: 14347705aa521c0cac884e746a2a8ea0b92daedb3587b7f78c0997769b281c74117dca3c61cbdcbdc25eff7ebe096bb2b0a51a2923c0f494f7c06c9fc3847aa6
+=======
+  checksum: 5aa43f200fd4a112beb3bce587a86a2df3c0c8f1f4644360e7476e5241ffab0920c0905b17f3062b09eded0d39b254c1f100bbc8894dfd7266a619d82c033315
+>>>>>>> 1e0bd6ad (fix: avoid ssrprovider for react 18)
   languageName: node
   linkType: hard
 
 "@charcoal-ui/utils@file:../packages/utils::locator=charcoal-web-docs%40workspace%3A.":
   version: 3.12.0
+<<<<<<< HEAD
   resolution: "@charcoal-ui/utils@file:../packages/utils#../packages/utils::hash=5c00f3&locator=charcoal-web-docs%40workspace%3A."
   dependencies:
     "@charcoal-ui/foundation": ^3.12.0
     polished: ^4.1.4
   checksum: f0bf2b06d40f04feadb40cb2b6e203cbf7653554d2674e5652b85f161a66cf187c52a7da6f1bc2e21db43b9aa1dd356c3d604f2ff3cc24c82b73c104b7b47f5d
+=======
+  resolution: "@charcoal-ui/utils@file:../packages/utils#../packages/utils::hash=2bc48f&locator=charcoal-web-docs%40workspace%3A."
+  dependencies:
+    "@charcoal-ui/foundation": ^3.12.0
+    polished: ^4.1.4
+  checksum: 8197f661cf820f8aa6e784f3f423540c9f0a7f4943c2dc9c19f9bfb8312eeca5d58ee2994ed4739e11420ff2701e1bc65c2e7276df8f5cff775d17d1bce8c47e
+>>>>>>> 1e0bd6ad (fix: avoid ssrprovider for react 18)
   languageName: node
   linkType: hard
 

diff --git a/packages/react/README.md b/packages/react/README.md
@@ -18,7 +18,7 @@ yarn add @charcoal-ui/react
 
 ## Server Side Rendering を行う場合の注意点
 
-SSR を行う場合はアプリケーション全体を`<SSRProvider>`で囲む必要があります。
+React 18 以下で SSR を行う場合はアプリケーション全体を`<SSRProvider>`で囲む必要があります。
 
 ```jsx
 import { SSRProvider } from '@charcoal-ui/react'

diff --git a/packages/react/src/core/SSRProvider.tsx b/packages/react/src/core/SSRProvider.tsx
@@ -1 +1,11 @@
-export { SSRProvider } from '@react-aria/ssr'
+import { SSRProvider as OriginSSRProvider } from '@react-aria/ssr'
+import { version, Fragment } from 'react'
+
+export function isReactVersionOver(minVersion: number): boolean {
+  const reactMajorVersion = parseInt(version.split('.')[0], 10)
+  return Number.isFinite(reactMajorVersion)
+    ? reactMajorVersion >= minVersion
+    : false
+}
+
+export const SSRProvider = isReactVersionOver(18) ? Fragment : OriginSSRProvider