From e0d785662daac01d3c9c01f2dd2d2d2c16ab32d1 Mon Sep 17 00:00:00 2001 From: Harvey Zhao Date: Mon, 14 Sep 2026 05:17:51 +0800 Subject: [PATCH] fix(react): [EX-01] verify installed consumers and clean up callback failures --- .github/workflows/nodejs.yml | 3 + example/react.js/README.md | 62 +- example/react.js/eslint.config.js | 31 +- example/react.js/index.html | 2 +- example/react.js/package.json | 29 +- example/react.js/src/App.tsx | 4 +- example/react.js/src/Player.tsx | 50 +- example/react.js/src/player-options.ts | 23 + example/react.js/tsconfig.json | 15 + example/react.js/vite.config.js | 2 +- package.json | 14 +- .../baselines/react-consumer-validation.json | 2557 +++++++++++++++++ .../2026-09-14-EX-01-react-consumer.md | 95 + refactor/plan.md | 17 +- refactor/progress.md | 15 + refactor/risk-table.md | 2 + refactor/risks.json | 42 + refactor/scripts/ci-workflow.mjs | 3 + refactor/scripts/ci-workflow.test.mjs | 3 + refactor/scripts/react-consumer.mjs | 206 ++ refactor/tasks.json | 31 +- test/README.md | 8 + test/react/consumer.tsx | 21 + test/react/lifecycle.tsx | 79 + yarn.lock | 323 ++- 25 files changed, 3539 insertions(+), 98 deletions(-) create mode 100644 example/react.js/src/player-options.ts create mode 100644 example/react.js/tsconfig.json create mode 100644 refactor/baselines/react-consumer-validation.json create mode 100644 refactor/changes/2026-09-14-EX-01-react-consumer.md create mode 100644 refactor/scripts/react-consumer.mjs create mode 100644 test/react/consumer.tsx create mode 100644 test/react/lifecycle.tsx 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