feat: migrate griffith-standalone to ts

package.json

@@ -36,7 +36,7 @@
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch --notify",
-    "build:lib": "lerna run build --scope griffith* --parallel",
+    "build:lib": "lerna run build --scope griffith*",
     "deploy:website": "lerna run --scope website deploy",
     "build": "yarn build:lib",
     "build:watch": "lerna run build --parallel --scope griffith* --ignore griffith-standalone -- --watch",
@@ -45,13 +45,8 @@
     "start": "yarn start-server"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/preset-env": "^7.14.2",
-    "@babel/preset-react": "^7.13.13",
     "@commitlint/config-conventional": "^7.5.0",
     "@rollup/plugin-alias": "^3.1.2",
-    "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.2",
@@ -75,13 +70,11 @@
     "jest": "^27.1.0",
     "lerna": "^3.13.1",
     "lint-staged": "^8.1.5",
-    "microbundle": "^0.13.3",
-    "npm-run-all": "^4.1.5",
     "prettier": "^2.3.2",
     "rollup": "^2.48.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "ts-migrate": "^0.1.22"
+    "typescript": "^4.4.3"
   },
   "husky": {
     "hooks": {

packages/griffith-mp4/src/mse/controller.ts

@@ -79,6 +79,7 @@ export default class MSE {
         }
       } catch (error) {
         // see https://developers.google.com/web/updates/2017/10/quotaexceedederror
+        // @ts-expect-error any
         if (error.code === 22) {
           this.handleQuotaExceededError(buffer, type)
         } else {

packages/griffith-standalone/package.json

@@ -7,13 +7,15 @@
   "files": [
     "dist/"
   ],
-  "source": "src/index.js",
+  "source": "src/index.tsx",
   "main": "dist/index.umd.min.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prebuild": "rm -rf dist",
     "build": "rollup -c"
   },
   "devDependencies": {
+    "@types/react-dom": "^17.0.9",
     "griffith": "^1.17.0",
     "react": "^16.8",
     "react-dom": "^16.8"

packages/griffith-standalone/rollup.config.js

@@ -1,12 +1,14 @@
 import path from 'path'
-import babel from '@rollup/plugin-babel'
+import findCacheDir from 'find-cache-dir'
+import typescript from 'rollup-plugin-typescript2'
 import resolve from '@rollup/plugin-node-resolve'
 import replace from '@rollup/plugin-replace'
 import commonjs from '@rollup/plugin-commonjs'
 import alias from '@rollup/plugin-alias'
 import {terser} from 'rollup-plugin-terser'
 
-const pkg = require(path.resolve(process.cwd(), 'package.json'))
+const resolveCwd = path.resolve.bind(null, process.cwd())
+const pkg = require(resolveCwd('package.json'))
 
 export default [
   {
@@ -20,7 +22,20 @@ export default [
       },
     ],
     plugins: [
-      babel(require('../../babel.config')),
+      typescript({
+        cacheRoot: findCacheDir({
+          name: 'rollup-plugin-typescript2',
+          cwd: resolveCwd('../..'),
+        }),
+        tsconfigOverride: {
+          include: [resolveCwd('src/**/*')],
+          exclude: ['**/*.spec.*', '**/__tests__'],
+          compilerOptions: {
+            // reset to empty
+            paths: {},
+          },
+        },
+      }),
       commonjs({
         // 不是所有的包都是 ESM（如 React 只是 CJS）
         include: /node_modules/,

packages/griffith-standalone/src/index.js → packages/griffith-standalone/src/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Player from 'griffith'
+import Player, {PlayerProps} from 'griffith'
 
-export function createPlayer(target) {
+export function createPlayer(target: Element) {
   return {
-    render(props) {
+    render(props: PlayerProps) {
       ReactDOM.render(<Player {...props} />, target)
     },
 

packages/griffith-standalone/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

packages/griffith/src/components/PlayerContainer.tsx

@@ -5,7 +5,7 @@ import {
   LocaleCode,
   PartialLocaleConfigMap,
 } from '../constants/locales'
-import Player, {PlayerProps} from './Player'
+import Player, {PlayerProps as InternalPlayerProps} from './Player'
 import VideoSourceProvider from '../contexts/VideoSourceProvider'
 import VideoSourceContext from '../contexts/VideoSourceContext'
 import {
@@ -17,7 +17,7 @@ import PositionProvider from '../contexts/PositionProvider'
 import ObjectFitProvider, {ObjectFit} from '../contexts/ObjectFitProvider'
 import LocaleProvider from '../contexts/LocaleProvider'
 
-type Props = {
+export type PlayerProps = {
   id: string
   sources: PlaySourceMap
   onBeforePlay?: (...args: any[]) => any
@@ -33,7 +33,7 @@ type Props = {
   shouldObserveResize?: boolean
   locale?: LocaleCode
   localeConfig?: PartialLocaleConfigMap
-} & Omit<PlayerProps, 'onEvent' | 'onBeforePlay'>
+} & Omit<InternalPlayerProps, 'onEvent' | 'onBeforePlay'>
 
 const DEFAULT_PLAYBACK_RATE: PlaybackRate = {value: 1.0, text: '1.0x'}
 const DEFAULT_PLAYBACK_RATES: PlaybackRate[] = [
@@ -45,7 +45,7 @@ const DEFAULT_PLAYBACK_RATES: PlaybackRate[] = [
   {value: 2.0, text: '2.0x'},
 ]
 
-const PlayerContainer: React.FC<Props> = ({
+const PlayerContainer: React.FC<PlayerProps> = ({
   standalone,
   id,
   title,

packages/griffith/src/index.ts

@@ -1,4 +1,5 @@
 export {default} from './components/PlayerContainer'
+export * from './components/PlayerContainer'
 export {ExternalContext as MessageContext} from './contexts/MessageContext'
 export {default as VideoSourceContext} from './contexts/VideoSourceContext'
 export {default as Controller} from './components/Controller'