diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 3a872928b..850e98451 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -131,6 +131,8 @@ jobs: package-manager-cache: false - name: Verify canonical installed consumers run: node scripts/package-runtime.mjs --canonical 2>&1 | tee refactor/.cache/ci/consumer-node-canonical.log + - name: Verify React installed consumers + run: yarn test:react-consumer 2>&1 | tee refactor/.cache/ci/react-consumer.log - name: Run all three engines run: yarn test:browser 2>&1 | tee refactor/.cache/ci/browser.log - name: Verify iframe cached history and interrupted navigation @@ -146,6 +148,7 @@ jobs: refactor/.cache/ci/ refactor/.cache/browser/ refactor/.cache/iframe-history/ + refactor/.cache/react-consumer-*/ refactor/.cache/performance/ refactor/.cache/packages/latest.json refactor/.cache/packages/run-*/*.json diff --git a/example/react.js/README.md b/example/react.js/README.md index 7059a962a..e82de06d3 100644 --- a/example/react.js/README.md +++ b/example/react.js/README.md @@ -1,12 +1,60 @@ -# React + Vite +# React consumer example -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +Run from the repository root with Node from .node-version and Yarn Classic +1.22.22. Install once with yarn install --frozen-lockfile; keep only the root +yarn.lock in version control. -Currently, two official plugins are available: +```sh +yarn dev:react +yarn typecheck:react +yarn lint:react +yarn build:react +yarn test:react-consumer +``` -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +build:react writes to refactor/.cache/react-example-dist. It uses built +workspace package entrypoints. Rebuild a changed library with `yarn build ` before testing its integration. The consumer test packs the current +core, Danmuku and Document PiP distributions, installs them outside the workspace, +verifies their bytes, typechecks and builds the copied example, and exercises it +in Chromium, Firefox and WebKit. No package aliases to source files are used. +Reports and the consumer lock are in unique refactor/.cache/react-consumer-* folders. -## Expanding the ESLint configuration +## Component contract and ownership -If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. +- src/Player.tsx owns one Artplayer instance per effect. Existing props remain + option: `Partial