feat: upgrade Rollup to v4, TypeScript to v5

.eslintrc.js

@@ -38,6 +38,7 @@ module.exports = {
         '@typescript-eslint/no-unsafe-assignment': 'warn',
         '@typescript-eslint/no-unsafe-member-access': 'warn',
         '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/no-explicit-any': 'warn',
       },
     },
   ],

.github/workflows/main.yml

@@ -14,21 +14,21 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: test
         run: |
+          corepack enable
           yarn
           yarn build
-          yarn jest --coverage
+          yarn test:coverage
       - name: report
-        uses: coverallsapp/github-action@v1.0.1
+        uses: coverallsapp/github-action@v2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-          path-to-lcov: ./coverage/lcov.info

.gitignore

@@ -11,9 +11,15 @@ package-lock.json
 *.log
 .DS_Store
 
-# Editor
-.vscode
-
 # gatsby
 .cache
 website/public
+
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.husky/commit-msg

@@ -0,0 +1 @@
+yarn commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1 @@
+yarn lint-staged

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "search.exclude": {".yarn": true}
+}

.yarn/plugins/plugin-dedupe-on-install.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+  name: `plugin-dedupe-on-install`,
+  factory: (require) => {
+    const {execute} = require('@yarnpkg/shell')
+    return {
+      hooks: {
+        // yarn / yarn install / yarn add / yarn dedupe -> afterAllInstalled
+        async afterAllInstalled() {
+          // use env var to prevent infinite loops
+          if (!process.env.DEDUPED && !process.argv.includes('dedupe')) {
+            process.env.DEDUPED = 'yes'
+            // fast check for duplicates
+            if (await execute('yarn dedupe --check')) {
+              // run actual dedupe/link step
+              await execute('yarn dedupe')
+            }
+          }
+        },
+      },
+    }
+  },
+}

.yarn/plugins/plugin-hook-scripts.cjs

@@ -0,0 +1,22 @@
+module.exports = {
+  name: `plugin-hook-scripts`,
+  factory: (require) => {
+    /** @type {import('@yarnpkg/core')} */
+    const {scriptUtils} = require('@yarnpkg/core')
+    return {
+      hooks: {
+        async afterAllInstalled(
+          /** @type {import('@yarnpkg/core').Project} */ project
+        ) {
+          const script = 'yarn:afterAllInstalled'
+          const locator = project.topLevelWorkspace.anchoredLocator
+          if (await scriptUtils.hasPackageScript(locator, script, {project})) {
+            await scriptUtils.executePackageScript(locator, script, [], {
+              project,
+            })
+          }
+        },
+      },
+    }
+  },
+}

.yarnrc.yml

@@ -0,0 +1,9 @@
+nodeLinker: node-modules
+
+plugins:
+  - checksum: 7930a64ba6239d4502df0204edda913788df1a9614a9056d23b53345d844f6f13526dae71c2be5282071502c3c077db7b1e97bcf019037db3ca35c737cd25b0c
+    path: .yarn/plugins/plugin-dedupe-on-install.cjs
+    spec: "https://raw.githubusercontent.com/ambar/yarn-plugin-dedupe-on-install/main/index.js"
+  - checksum: 2bf08235ccdfb0b95f511d4f0b0383a14de6c06e0c37e20e61c6ba939b85934542fbc6ff502387858722ac8b10f24c6b0a28a93536b628bd2e9446a491b40f29
+    path: .yarn/plugins/plugin-hook-scripts.cjs
+    spec: "https://raw.githubusercontent.com/ambar/yarn-plugin-hook-scripts/main/index.js"

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>

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"
   }
 }

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>
   )
 }

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

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': {

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()],
 }

jest.config.base.js

@@ -10,5 +10,4 @@ module.exports = {
     '!src/**/types.ts',
   ],
   testPathIgnorePatterns: ['/__mocks__/'],
-  snapshotSerializers: [require.resolve('./jest/prettier-dom.js')],
 }

lerna.json

@@ -4,8 +4,13 @@
     "example",
     "website"
   ],
+  "ignoreChanges": [
+    "**/__tests__/**",
+    "**/__snapshots__/**",
+    "**/*.mdx",
+    "**/*.md"
+  ],
   "version": "1.31.0",
   "conventionalCommits": true,
-  "npmClient": "yarn",
-  "useWorkspaces": true
+  "npmClient": "yarn"
 }