diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml index f77cc4e39..5debcd4b4 100644 --- a/.github/workflows/cd.yml +++ b/.github/workflows/cd.yml @@ -11,20 +11,20 @@ on: required: true description: Version options: - - conventional - - patch - - minor - - major - - prerelease - - from-package - - from-git + - conventional + - patch + - minor + - major + - prerelease + - from-package + - from-git prerelease: type: choice description: Pre-release options: - - - - canary - - beta + - + - canary + - beta dryrun: description: 'Dry-run' type: boolean @@ -44,20 +44,23 @@ jobs: CONVENTIONAL_GITHUB_RELEASER_TOKEN: ${{ secrets.GITHUB_TOKEN }} steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v5 with: fetch-depth: 0 # Fetch all history for all tags and branches - - uses: actions/setup-node@v4 + - uses: pnpm/action-setup@v6.1.0 + - uses: actions/setup-node@v5 with: - node-version: 20 + node-version-file: '.node-version' + cache: pnpm # this line is required for the setup-node action to be able to run the npm publish below. registry-url: 'https://registry.npmjs.org' - uses: fregante/setup-git-user@v1 - - run: npm ci - - run: npm run lint - - run: npm run test:coverage - - run: npm run build - - run: npm run build:demo + - run: pnpm install --frozen-lockfile + - run: pnpm lint + - run: pnpm typecheck + - run: pnpm test:coverage + - run: pnpm build + - run: pnpm build:demo - run: npx --yes wet-run@1.0.1 release ${{ inputs.version }} ${{ inputs.dryrun && '--dry-run' || '' }} ${{ inputs.prerelease && format('--prerelease {0}', inputs.prerelease) || '' }} --provenance --github-release --verbose - name: Get NPM version id: npm-version diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 052df39f5..ccf741d89 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -1,71 +1,76 @@ -name: Node.js CI +name: CI on: [push, pull_request] -# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. -# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: - group: "pages" - cancel-in-progress: false + group: ci-${{ github.ref }} + cancel-in-progress: true jobs: lint: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [18.x] + steps: + - uses: actions/checkout@v5 + - uses: pnpm/action-setup@v6.1.0 + - uses: actions/setup-node@v5 + with: + node-version-file: '.node-version' + cache: pnpm + - run: pnpm install --frozen-lockfile --prefer-offline + - run: pnpm lint + + typecheck: + runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.node-version }} - cache: npm - - run: npm ci - - run: npm run lint + - uses: actions/checkout@v5 + - uses: pnpm/action-setup@v6.1.0 + - uses: actions/setup-node@v5 + with: + node-version-file: '.node-version' + cache: pnpm + - run: pnpm install --frozen-lockfile --prefer-offline + - run: pnpm typecheck test: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [18.x] - steps: - - uses: actions/checkout@v4 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.node-version }} - cache: npm - - run: npm ci - - run: npm run test:coverage + - uses: actions/checkout@v5 + - uses: pnpm/action-setup@v6.1.0 + - uses: actions/setup-node@v5 + with: + node-version-file: '.node-version' + cache: pnpm + - run: pnpm install --frozen-lockfile --prefer-offline + - run: pnpm test:coverage build: runs-on: ubuntu-latest - strategy: - matrix: - node-version: [16.x, 18.x, 20.x] - steps: - - uses: actions/checkout@v4 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.node-version }} - cache: npm - - run: npm ci - - run: npm run build - - run: npm run build:demo + - uses: actions/checkout@v5 + - uses: pnpm/action-setup@v6.1.0 + - uses: actions/setup-node@v5 + with: + node-version-file: '.node-version' + cache: pnpm + - run: pnpm install --frozen-lockfile --prefer-offline + - run: pnpm build + - run: pnpm build:demo deploy-preview: # Grant GITHUB_TOKEN the permissions required to make a Pages deployment permissions: - pages: write # to deploy to Pages - id-token: write # to verify the deployment originates from an appropriate source + pages: write # to deploy to Pages + id-token: write # to verify the deployment originates from an appropriate source + + # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. + # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. + concurrency: + group: pages + cancel-in-progress: false environment: name: github-preview @@ -74,14 +79,15 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v4 - - uses: actions/configure-pages@v4 - - uses: actions/setup-node@v4 + - uses: actions/checkout@v5 + - uses: actions/configure-pages@v5 + - uses: pnpm/action-setup@v6.1.0 + - uses: actions/setup-node@v5 with: - node-version: 20 - - run: npm ci - - run: npm run build - - run: npm run build:demo + node-version-file: '.node-version' + cache: pnpm + - run: pnpm install --frozen-lockfile --prefer-offline + - run: pnpm build:demo - uses: actions/upload-pages-artifact@v3 with: path: './demo' diff --git a/.gitignore b/.gitignore index 4d63d4146..267e986cf 100644 --- a/.gitignore +++ b/.gitignore @@ -11,4 +11,5 @@ yarn-error.log .vscode/ /disttest/ /dist/ -tsconfig.tsbuildinfo +*.tsbuildinfo +.vite-hooks/_/ diff --git a/.node-version b/.node-version new file mode 100644 index 000000000..d845d9d88 --- /dev/null +++ b/.node-version @@ -0,0 +1 @@ +24.14.0 diff --git a/.vite-hooks/pre-commit b/.vite-hooks/pre-commit new file mode 100755 index 000000000..85fb65b4f --- /dev/null +++ b/.vite-hooks/pre-commit @@ -0,0 +1 @@ +vp staged diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ada2e14c5..63040d8f9 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,32 +2,35 @@ Thanks for contributing to ReactPlayer! +This project uses [pnpm](https://pnpm.io) and [Vite+](https://viteplus.dev) (`vp`) for building, testing, linting and formatting. The Node version is pinned in `.node-version`. + Running the demo locally is relatively easy: ```bash git clone https://github.com/CookPete/react-player.git cd react-player -npm install # or yarn -npm start -open http://localhost:3000 +pnpm install +pnpm start ``` ## `dist` files -There is **no need** to build or commit files in `dist` after making changes. The `dist` files are only there for [bower](http://bower.io) support, and there is very little point in polluting every commit or pull request with the changes. The `dist` files will be automatically built and committed when new versions are released, so your changes will be included then. +There is **no need** to build or commit files in `dist` after making changes. The `dist` files will be automatically built when new versions are released, so your changes will be included then. -## Linting +## Linting and formatting -This project uses [standard](https://github.com/feross/standard) code style. Be sure to lint the code after making changes and fix any issues that come up. +Code is linted with Oxlint and formatted with Oxfmt via Vite+. A pre-commit hook runs `vp staged` to fix staged files automatically. ```bash -npm run lint +pnpm lint # check formatting and lint +pnpm lint:fix # fix formatting and lint issues +pnpm typecheck ``` ## Testing -This project uses [karma](https://karma-runner.github.io) with [mocha](https://github.com/mochajs/mocha) and [chai](https://github.com/chaijs/chai) for testing in the browser. Be sure to test `ReactPlayer` after making changes and, if you’re feeling generous, add some tests of your own. +This project uses [Vitest](https://vitest.dev) via `vp test`. Be sure to test `ReactPlayer` after making changes and, if you’re feeling generous, add some tests of your own. ```bash -npm test +pnpm test ``` diff --git a/MIGRATING.md b/MIGRATING.md index 6ed6a3f0c..5e63fed4a 100644 --- a/MIGRATING.md +++ b/MIGRATING.md @@ -1,3 +1,205 @@ +## Migrating to `v4.0` + +Breaking changes are in πŸ”₯ __bold and on fire__. + +`v4.0` plays every source with the [Video.js v10](https://videojs.org) React media components (`@videojs/react/media/*`) instead of the standalone `*-video-element` packages and `@mux/mux-player-react`. Props, callbacks, static methods and per-player lazy loading work as before, apart from the changes below. + +### Codemod + +A [jscodeshift](https://github.com/facebook/jscodeshift) codemod makes most of the code changes below. Run it on your source directory, then review the diff: + +```bash +npx jscodeshift --extensions=js,jsx,ts,tsx \ + -t https://raw.githubusercontent.com/cookpete/react-player/master/codemods/v4.ts \ + src +``` + +It changes: + +- `` to `mediaRef`, and `ref.current.api` to `.engine` +- `config` keys and values: `hls` => `hlsJs`, `dash` => `dashJs`, removes `html`, and converts the Spotify, TikTok and Twitch options +- `react-player/patterns`: `canPlay.youtube` => `canPlay('youtube')`, `MATCH_URL_YOUTUBE.test(url)` => `canPlay('youtube')(url)`, and a local copy of any removed regex used another way +- custom player entries: removes `name` + +It leaves a `TODO(react-player v4)` comment, also listed in its output, wherever you need to decide what to do: `config` it can't follow, `config.mux` options from Mux Player, DOM access through the old `ref`, and custom player components. It only finds `config` objects written in the same file or typed as `Config`, so read the sections below for anything it reports. + +### React 18 or later + +`@videojs/react` requires React 18, so πŸ”₯ __React 17 is no longer supported__. The peer range is now `^18 || ^19`. + +### `ref` and `mediaRef` + +ReactPlayer now follows the Video.js v10 media contract: + +- πŸ”₯ __`ref` points to the rendered DOM element__: the `