mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
84 lines
4.6 KiB
Markdown
84 lines
4.6 KiB
Markdown
# Vue consumer example
|
|
|
|
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
|
|
yarn build artplayer artplayer-plugin-danmuku artplayer-plugin-document-pip
|
|
yarn dev:vue
|
|
yarn typecheck:vue
|
|
yarn lint:vue
|
|
yarn build:vue
|
|
yarn test:vue-consumer
|
|
```
|
|
|
|
The example's three ArtPlayer dependencies use local `file:../../packages/...`
|
|
references while the next major versions are unpublished. Build those packages
|
|
first and run the example commands from the repository root. Keep only the root
|
|
yarn.lock; external applications should select published versions. The isolated
|
|
consumer checks still replace these inputs with actual packed artifacts.
|
|
|
|
The build output is refactor/.cache/vue-example-dist.
|
|
Rebuild changed library distributions with yarn build followed by the package name.
|
|
|
|
## Files and ownership
|
|
|
|
- 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<Option>`.
|
|
- src/main.ts is the client entry referenced by index.html. tsconfig.json replaces
|
|
jsconfig.json, preserves the @ alias and enables strict source/template checking.
|
|
- vite.config.js uses the standard Vue plugin. The unused optional devtools overlay
|
|
was removed from this example's build dependencies; no player UI was changed.
|
|
|
|
## Compatibility and updates
|
|
|
|
The wrapper retains required option: `Partial<Option>` and the getInstance event.
|
|
The array-form event declaration remains intentionally unchanged: historical
|
|
listener type extraction is not narrowed. Annotate event handlers with Artplayer
|
|
as App.vue does. Missing URLs may typecheck through Partial but still fail the
|
|
core's runtime validation.
|
|
|
|
Changing an option object or its fields does not recreate or update the player.
|
|
Use the received instance's methods, such as switchUrl, for live updates. Change
|
|
the component key to reconstruct using the latest options. No deep option watcher
|
|
or new event/ref contract was introduced. CSS classes and styles still fall through
|
|
to the root div; other native attributes continue to work for JS consumers.
|
|
Strict template checking distinguishes declared props from arbitrary attributes.
|
|
|
|
Vue captures listener errors through its error handling. A mounted component
|
|
retains its instance after a captured listener error and destroys it on unmount.
|
|
KeepAlive deactivation retains the instance; owner unmount destroys it. The example
|
|
does not silently pause or destroy players when cached. Use player APIs if your
|
|
application needs that behavior.
|
|
|
|
## Reproducible checks
|
|
|
|
Root development dependencies pin Vue/compiler-sfc 3.5.28, Vue Vite plugin 6.0.1,
|
|
vue-tsc 3.3.11, TypeScript 5.9.3 and Vite 7.3.6. No player runtime dependency changes.
|
|
The isolated consumer installs actual packed core, Danmuku and Document PiP files,
|
|
frozen-reinstalls them, and verifies every package file. Its Vue compiler and all
|
|
resolved declarations also live in that isolated install; no source aliases or
|
|
workspace type fallbacks are permitted. A plain-JS SFC separately verifies the
|
|
legacy event, attribute and repeated-mount syntax.
|
|
|
|
Development/production browser runs cover native play/pause/seek and pixels,
|
|
instance API source updates, option/key behavior, refs, siblings, repeated mount,
|
|
listener errors, KeepAlive and real Worker termination. Video/XML responses use
|
|
controlled fixtures. Plugin registration does not certify window PiP interaction,
|
|
full Danmuku scheduling, CDN availability or physical macOS/iOS Safari.
|
|
|
|
yarn test:vue-consumer --before runs the original Player.vue from the recorded Git
|
|
baseline against the same candidate packages. Both old and new wrappers must pass;
|
|
this is a compatibility control, not an old published npm wrapper test. Evidence
|
|
is retained in unique refactor/.cache/vue-consumer-* folders. GitHub runs the test
|
|
and uploads these reports; local success does not imply verified remote jobs.
|