diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 850e98451..8ba73f8ba 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -133,6 +133,8 @@ jobs: 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: Verify Vue installed consumers + run: yarn test:vue-consumer 2>&1 | tee refactor/.cache/ci/vue-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 @@ -149,6 +151,7 @@ jobs: refactor/.cache/browser/ refactor/.cache/iframe-history/ refactor/.cache/react-consumer-*/ + refactor/.cache/vue-consumer-*/ refactor/.cache/performance/ refactor/.cache/packages/latest.json refactor/.cache/packages/run-*/*.json diff --git a/example/vue.js/README.md b/example/vue.js/README.md index bf72983ef..ecccd11bd 100644 --- a/example/vue.js/README.md +++ b/example/vue.js/README.md @@ -1,29 +1,76 @@ -# vue-project +# Vue consumer example -This template should help get you started developing with Vue 3 in Vite. - -## Recommended IDE Setup - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur). - -## Customize configuration - -See [Vite Configuration Reference](https://vite.dev/config/). - -## Project Setup +Run the example from the repository root with Node from .node-version and Yarn +Classic 1.22.22. Use yarn install --frozen-lockfile and only the root yarn.lock. ```sh -npm install +yarn dev:vue +yarn typecheck:vue +yarn lint:vue +yarn build:vue +yarn test:vue-consumer ``` -### Compile and Hot-Reload for Development +The build output is refactor/.cache/vue-example-dist. +Rebuild changed library distributions with yarn build followed by the package name. -```sh -npm run dev -``` +## Files and ownership -### Compile and Minify for Production +- src/Player.vue owns the player and container through shallow refs. It constructs + once on mount, emits getInstance, then releases its reference before calling + destroy(false) on owner unmount. Vue owns the outer div. Player state is private: + the component ref exposes the normal Vue surface, not an art property. +- src/player-options.ts holds this example's existing configuration overrides: + French language, French/Indonesian dictionaries and fresh Danmuku/Document PiP + factories per mount. They still override option.lang, i18n and plugins. The + container comes from Vue; other options pass through. The url assertion preserves + the historical Partial input while the core performs runtime validation. +- src/App.vue demonstrates the existing event/prop syntax. Its reactive option + object keeps narrow field inference and is checked against `Partial