feat: add react 18 to version range

appotry · pull · Mar 18, 2024 · Mar 18, 2024 · Mar 18, 2024 · Mar 18, 2024
commit eb6a23eda6d4c7e66e68c14daebfadd92edf5eb3
diff --git a/example/index.html b/example/index.html
@@ -15,10 +15,10 @@
     <div id="app"></div>
     <script type="module">
       import React from 'react'
-      import ReactDOM from 'react-dom'
+      import ReactDOM from 'react-dom/client'
       import App from './src/App'
 
-      ReactDOM.render(React.createElement(App), document.getElementById('app'))
+      ReactDOM.createRoot(document.getElementById('app') ).render(React.createElement(App))
     </script>
   </body>
 </html>
diff --git a/example/package.json b/example/package.json
@@ -7,14 +7,13 @@
     "start": "vite --host"
   },
   "dependencies": {
-    "@types/react-router-dom": "^5.1.8",
     "griffith": "^1.31.0",
-    "react": "^16.8",
-    "react-dom": "^16.8",
-    "react-router-dom": "^5.3.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
-    "@vitejs/plugin-react-refresh": "^1.3.3",
-    "vite": "^2.3.3"
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.1.6"
   }
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom'
+import {BrowserRouter as Router, Link, Route, Routes} from 'react-router-dom'
 import FMP4Page from './FMP4Page'
 import HLSPage from './HLSPage'
 import IframePage from './IframePage'
@@ -49,23 +49,13 @@ function App() {
     <Router>
       {!nonav && <NavLinks />}
 
-      <Switch>
-        <Route path="/mp4">
-          <MP4Page />
-        </Route>
-        <Route path="/mp4-mse">
-          <FMP4Page />
-        </Route>
-        <Route path="/hls">
-          <HLSPage />
-        </Route>
-        <Route path="/inline">
-          <InlinePage />
-        </Route>
-        <Route path="/iframe">
-          <IframePage />
-        </Route>
-      </Switch>
+      <Routes>
+        <Route path="/mp4" element={<MP4Page />} />
+        <Route path="/mp4-mse" element={<FMP4Page />} />
+        <Route path="/hls" element={<HLSPage />} />
+        <Route path="/inline" element={<InlinePage />} />
+        <Route path="/iframe" element={<IframePage />} />
+      </Routes>
     </Router>
   )
 }

diff --git a/example/src/HLSPage.tsx b/example/src/HLSPage.tsx
@@ -1,7 +1,7 @@
 import Player, {PlayerProps} from 'griffith'
 import React from 'react'
 import {logEvent} from './utils'
-import useQuery from './utils/useQuery'
+import {useSearchParams} from 'react-router-dom'
 
 export const sources = {
   // 注意，这里手动提供了 auto 品质的 source，因此会无视 useAutoQuality 的配置
@@ -29,8 +29,8 @@ const props: PlayerProps = {
 }
 
 const App = () => {
-  const query = useQuery()
-  const autoplay = 'autoplay' in query
+  const [searchParams] = useSearchParams()
+  const autoplay = searchParams.has('autoplay')
 
   return (
     <Player

diff --git a/example/src/MP4Page.tsx b/example/src/MP4Page.tsx
@@ -7,8 +7,8 @@ import Player, {
 import React, {useState, useMemo} from 'react'
 import Logo from './Logo'
 import {logEvent} from './utils'
-import useQuery from './utils/useQuery'
 import {sources as hlsSources} from './HLSPage'
+import {useSearchParams} from 'react-router-dom'
 
 const duration = 182
 
@@ -44,32 +44,34 @@ const props: Omit<PlayerProps, 'sources'> = {
 }
 
 const App = () => {
-  const query = useQuery()
+  const [searchParams] = useSearchParams()
+  const loop = searchParams.has('loop')
+  const hasLogo = searchParams.has('logo')
   const messageContextRef = useMessageContextRef()
   const [isLogoVisible, setIsLogoVisible] = useState(false)
 
   messageContextRef.useEvent(EVENTS.PLAY_COUNT, () => {
     setIsLogoVisible(true)
   })
   messageContextRef.useEvent(EVENTS.ENDED, () => {
-    if ('loop' in query) {
+    if (loop) {
       messageContextRef.dispatchAction(ACTIONS.PLAY)
     }
   })
   const children = useMemo(
-    () => 'logo' in query && isLogoVisible && <Logo />,
-    [isLogoVisible, query]
+    () => hasLogo && isLogoVisible && <Logo />,
+    [isLogoVisible, hasLogo]
   )
-  const sources = 'sd' in query ? {sd: _sources.sd} : _sources
+  const sources = searchParams.has('sd') ? {sd: _sources.sd} : _sources
 
   return (
     <>
       <Player
         {...props}
         // trigger re-mount
-        key={query.key}
-        autoplay={query.autoplay !== '0'}
-        sources={'hls' in query ? hlsSources : sources}
+        key={searchParams.get('key')}
+        autoplay={searchParams.get('autoplay') !== '0'}
+        sources={searchParams.has('hls') ? hlsSources : sources}
         crossOrigin="anonymous"
         localeConfig={{
           'zh-Hans': {

diff --git a/example/src/utils/useQuery.ts b/example/src/utils/useQuery.ts
diff --git a/example/vite.config.js b/example/vite.config.js
@@ -1,5 +1,5 @@
 import {loadConfig, createMatchPath} from 'tsconfig-paths'
-import reactRefresh from '@vitejs/plugin-react-refresh'
+import react from '@vitejs/plugin-react'
 
 const result = loadConfig()
 const matchPath = createMatchPath(result.absoluteBaseUrl, result.paths)
@@ -20,5 +20,5 @@ export default {
       ...packagesAliases,
     },
   },
-  plugins: [reactRefresh()],
+  plugins: [react()],
 }
diff --git a/lerna.json b/lerna.json
@@ -4,6 +4,12 @@
     "example",
     "website"
   ],
+  "ignoreChanges": [
+    "**/__tests__/**",
+    "**/__snapshots__/**",
+    "**/*.mdx",
+    "**/*.md"
+  ],
   "version": "1.31.0",
   "conventionalCommits": true,
   "npmClient": "yarn",

diff --git a/package.json b/package.json
@@ -52,8 +52,7 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/react": "^12.1.0",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^14.2.1",
     "@types/jest": "^27.0.1",
     "@typescript-eslint/eslint-plugin": "^4.31.0",
     "@typescript-eslint/parser": "^4.31.0",
@@ -70,7 +69,9 @@
     "lerna": "^3.13.1",
     "lint-staged": "^8.1.5",
     "prettier": "^2.3.2",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "rollup": "^4.13.0",
     "rollup-plugin-typescript2": "^0.36.0",
     "typescript": "^5.4.2"

diff --git a/packages/griffith-hls/package.json b/packages/griffith-hls/package.json
@@ -20,8 +20,7 @@
     "hls.js-v1": "npm:hls.js@^1"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17",
-    "react-dom": "^16.8 || ^17"
+    "react": "^16.8 || ^17 || ^18"
   },
   "dependencies": {
     "hls.js": "0.7.11"

diff --git a/packages/griffith-mp4/package.json b/packages/griffith-mp4/package.json
@@ -20,8 +20,7 @@
     "read-chunk": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17",
-    "react-dom": "^16.8 || ^17"
+    "react": "^16.8 || ^17 || ^18"
   },
   "dependencies": {
     "griffith-utils": "^1.23.0",

diff --git a/packages/griffith-standalone/package.json b/packages/griffith-standalone/package.json
@@ -15,9 +15,8 @@
     "build": "rollup -c"
   },
   "devDependencies": {
-    "@types/react-dom": "^17.0.9",
     "griffith": "^1.31.0",
-    "react": "^16.8",
-    "react-dom": "^16.8"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/packages/griffith/package.json b/packages/griffith/package.json
@@ -18,8 +18,7 @@
     "build": "rollup -c ../../rollup.config.js"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17",
-    "react-dom": "^16.8 || ^17"
+    "react": "^16.8 || ^17 || ^18"
   },
   "dependencies": {
     "@types/lodash": "^4.14.172",

diff --git a/packages/griffith/src/contexts/__test__/PositionProvider.spec.tsx b/packages/griffith/src/contexts/__test__/PositionProvider.spec.tsx
@@ -24,27 +24,29 @@ test('PositionProvider', async () => {
     return <div ref={ref} />
   }
 
-  await act(async () => {
+  act(() => {
     render(
       <PositionProvider>
         <MyComponent />
       </PositionProvider>
     )
-    expect(ctx).toMatchInlineSnapshot(`
-    Object {
-      "helperImageSrc": null,
-      "isFullWidth": false,
-      "updateVideoSize": [Function],
-    }
-    `)
+  })
+  expect(ctx).toMatchInlineSnapshot(`
+Object {
+  "helperImageSrc": "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'></svg>",
+  "isFullWidth": false,
+  "updateVideoSize": [Function],
+}
+`)
+  await act(async () => {
     // Provider 内使用了 raf 延迟更新状态
     await waitRAF()
-    expect(ctx).toMatchInlineSnapshot(`
-    Object {
-      "helperImageSrc": "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'></svg>",
-      "isFullWidth": true,
-      "updateVideoSize": [Function],
-    }
-    `)
   })
+  expect(ctx).toMatchInlineSnapshot(`
+  Object {
+    "helperImageSrc": "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'></svg>",
+    "isFullWidth": true,
+    "updateVideoSize": [Function],
+  }
+  `)
 })