chore: update all renderer type error and run docs [ci skip]

docs/.vitepress/config.ts

@@ -78,7 +78,7 @@ const themeConfig: DefaultTheme.Config = {
           { text: 'NineSlicePlane', link: '/guide/elements/nine-slice-plane' },
           { text: 'ParticleContainer', link: '/guide/elements/particle-container' },
           { text: 'SimplePlane', link: '/guide/elements/simple-plane' },
-          { text: 'SimpleRope', link: '/guide/elements/simple-rope' },
+          { text: 'MeshRope', link: '/guide/elements/mesh-rope' },
           { text: 'Sprite', link: '/guide/elements/sprite' },
           { text: 'Text', link: '/guide/elements/text' },
           { text: 'TilingSprite', link: '/guide/elements/tiling-sprite' },

docs/.vitepress/theme/components/Markdown/ApiDrawMode.md

@@ -1 +1 @@
-^[number] [DRAW_MODES](https://pixijs.download/release/docs/PIXI.html#DRAW_MODES)
+^[number] [Topology](https://pixijs.download/release/docs/PIXI.html#Topology)

docs/guide/api-reference/renderer.md

@@ -14,7 +14,7 @@ Currently, the following PixiJS objects are supported out of the box:
 - [SimplePlane](http://pixijs.download/release/docs/PIXI.SimplePlane.html)
 - [TilingSprite](http://pixijs.download/release/docs/PIXI.TilingSprite.html)
 - [NineSlicePlane](http://pixijs.download/release/docs/PIXI.NineSlicePlane.html)
-- [SimpleRope](http://pixijs.download/release/docs/PIXI.SimpleRope.html)
+- [MeshRope](http://pixijs.download/release/docs/PIXI.MeshRope.html)
 - [Mesh](http://pixijs.download/release/docs/PIXI.AnimatedSprite.html)
 - [BlurFilter](https://pixijs.download/release/docs/PIXI.BlurFilter.html)
 - [AlphaFilter](https://pixijs.download/release/docs/PIXI.AlphaFilter.html)

docs/guide/elements/demo/simple-rope.vue → docs/guide/elements/demo/mesh-rope.vue

@@ -20,7 +20,7 @@ onTick(() => {
 </script>
 
 <template>
-  <simple-rope
+  <mesh-rope
     texture="/assets/snake.png"
     :x="20"
     :y="120"

docs/guide/elements/simple-rope.md → docs/guide/elements/mesh-rope.md

@@ -1,26 +1,26 @@
-# SimpleRope
+# MeshRope
 
-Creates a [SimpleRope](https://pixijs.download/release/docs/PIXI.SimpleRope.html)
+Creates a [MeshRope](https://pixijs.download/release/docs/PIXI.MeshRope.html)
 
 The rope allows you to draw a texture across several points and then manipulate these points
 
-<demo src="./demo/simple-rope.vue" :width="400" />
+<demo src="./demo/mesh-rope.vue" :width="400" />
 
 ## API
 
-### SimpleRope Attributes
+### MeshRope Attributes
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| texture | ^[string] ^[object]`PIXI.Texture` | `undefined` | The texture to use on the SimpleRope. |
+| texture | ^[string] ^[object]`PIXI.Texture` | `undefined` | The texture to use on the MeshRope. |
 | points | ^[Array<object>]`PIXI.IPoint[]` | `undefined` | An array of points or point-like objects to construct this rope. |
 
-> more props in [Container Props](/guide/elements/container#container-props) and [PIXI.SimpleRope](https://pixijs.download/release/docs/PIXI.SimpleRope.html)
+> more props in [Container Props](/guide/elements/container#container-props) and [PIXI.MeshRope](https://pixijs.download/release/docs/PIXI.MeshRope.html)
 
-### SimpleRope Events
+### MeshRope Events
 
 | Name | Type | Description |
 | --- | --- | --- |
-| render | ^[function]`(el: SimpleRope): void` | custom render function |
+| render | ^[function]`(el: MeshRope): void` | custom render function |
 
 > more events in [Container Events](/guide/elements/container#container-events)

docs/guide/elements/mesh.md

@@ -19,7 +19,7 @@ Pretty much all WebGL can be broken down into the following:
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | blend-mode | <api-blend-mode /> | `BLEND_MODES.NORMAL` | The blend mode to be applied to the sprite. |
-| draw-mode | <api-draw-mode /> | `DRAW_MODES.TRIANGLES` | The draw mode to be used. |
+| draw-mode | <api-draw-mode /> | `Topology` | The draw mode to be used. |
 | geometry | ^[object]`PIXI.Geometry` | `undefined` | The geometry the mesh will use. |
 
 > more props in [Container Props](/guide/elements/container#container-props) and [PIXI.Mesh](https://pixijs.download/release/docs/PIXI.Mesh.html)

docs/guide/elements/nine-slice-plane.md

@@ -13,7 +13,7 @@ Allows you to stretch a texture using 9-slice scaling. The corners will remain u
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | blend-mode | <api-blend-mode /> | `BLEND_MODES.NORMAL` | The blend mode to be applied to the sprite. |
-| draw-mode | <api-draw-mode /> | `DRAW_MODES.TRIANGLES` | The draw mode to be used. |
+| draw-mode | <api-draw-mode /> | `Topology` | The draw mode to be used. |
 | texture | ^[string] ^[object]`PIXI.Texture` | `undefined` | The texture to use on the NineSlicePlane. |
 | left-width | ^[number] | `undefined` | The width of the left column of the grid |
 | right-width | ^[number] | `undefined` | The width of the right column of the grid |

docs/guide/elements/simple-plane.md

@@ -12,7 +12,7 @@ The SimplePlane allows you to draw a texture across several points and then mani
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| draw-mode | <api-draw-mode /> | `DRAW_MODES.TRIANGLES` | The draw mode to be used. |
+| draw-mode | <api-draw-mode /> | `Topology` | The draw mode to be used. |
 | texture | ^[string] ^[object]`PIXI.Texture` | `undefined` | The texture to use on the NineSlicePlane. |
 | geometry | ^[object]`PIXI.Geometry` | `undefined` | The geometry to use on the SimplePlane. |
 | vertices | ^[number]`number` | `10` | The number of vertices in the axis |

packages/vue3-pixi/README.md

@@ -107,7 +107,7 @@ The Vue Plugin detects any texture props containing the path to an image and rep
 - [SimplePlane](http://pixijs.download/release/docs/PIXI.SimplePlane.html)
 - [TilingSprite](http://pixijs.download/release/docs/PIXI.TilingSprite.html)
 - [NineSlicePlane](http://pixijs.download/release/docs/PIXI.NineSlicePlane.html)
-- [SimpleRope](http://pixijs.download/release/docs/PIXI.SimpleRope.html)
+- [MeshRope](http://pixijs.download/release/docs/PIXI.MeshRope.html)
 - [Mesh](http://pixijs.download/release/docs/PIXI.AnimatedSprite.html)
 
 ## Props

packages/vue3-pixi/src/compiler.ts

@@ -9,7 +9,7 @@ const elementNames = [
   'mesh',
   'simple-plane',
   'nine-slice-sprite',
-  'simple-rope',
+  'mesh-rope',
 
   'filter',
   'blur-filter',

packages/vue3-pixi/src/components/application/index.ts

@@ -1,8 +1,7 @@
 /* eslint-disable vue/one-component-per-file */
-import { defineComponent, getCurrentInstance, h, markRaw, onMounted, onUnmounted, ref, renderSlot, warn, watch } from 'vue-demi'
-import { throttle } from '@antfu/utils'
+import { defineComponent, getCurrentInstance, h, markRaw, onMounted, onUnmounted, ref, renderSlot } from 'vue-demi'
 import { Application as _Application } from 'pixi.js'
-import type { ApplicationOptions, ColorSource, Container, GpuPowerPreference } from 'pixi.js'
+import type { ColorSource, Container, GpuPowerPreference } from 'pixi.js'
 import type { App, PropType } from 'vue-demi'
 import { createApp } from '../../renderer'
 import { appInjectKey } from '../../composables'
@@ -55,9 +54,7 @@ export const Application = defineComponent({
 
       pixiApp.value = markRaw(inst)
 
-      app = createApp({
-        render: () => renderSlot(slots, 'default'),
-      })
+      app = createApp({ render: () => renderSlot(slots, 'default') })
 
       inheritParent(app, appContext)
 

packages/vue3-pixi/src/composables/useStage.ts

@@ -1,12 +1,12 @@
-import type { Application, Container, ICanvas } from 'pixi.js'
+import type { Application, Container, Renderer } from 'pixi.js'
 import type { Ref } from 'vue-demi'
 import { computed, unref } from 'vue-demi'
 
 import { useApplication } from './useApplication'
 
 export type StageInst = Container & EventTarget
 
-export function useStage(app?: Ref<Application<ICanvas>>): Ref<StageInst> {
+export function useStage(app?: Ref<Application<Renderer>>): Ref<StageInst> {
   const useApp = app || useApplication()
   return computed(() => unref(useApp)?.stage as any)
 }

packages/vue3-pixi/src/elements/animatedSprite.ts

@@ -15,14 +15,12 @@ export interface AnimatedSpriteProps extends AllowedPixiProps {
   playing?: boolean
   gotoAndPlay?: number
 
-  anchor?: PointData | number
+  anchor?: Partial<PIXI.PointData> | number
   anchorX?: number
   anchorY?: number
 
   blendMode?: PIXI.BLEND_MODES
 
-  pluginName?: string
-
   tint?: PIXI.ColorSource
 
   animationSpeed?: number

packages/vue3-pixi/src/elements/bitmapText.ts

@@ -6,14 +6,13 @@ import type {
 import type * as PIXI from 'pixi.js'
 import type { AllowedPixiProps } from './props'
 import type { PixiEvents } from './events'
-
 export interface BitmapTextProps {
   text?: string | number
-  style?: Partial<PIXI.IBitmapTextStyle>
+  style?: Partial<PIXI.TextStyle>
 
   align?: string
 
-  anchor?: PointData | number
+  anchor?: Partial<PIXI.PointData> | number
   anchorX?: number
   anchorY?: number
 

packages/vue3-pixi/src/elements/displacementFilter.ts

@@ -3,11 +3,11 @@ import type {
   DefineComponent,
   VNodeProps,
 } from 'vue-demi'
-import type { DisplacementFilter, ISpriteMaskTarget } from 'pixi.js'
+import type { DisplacementFilter, Sprite } from 'pixi.js'
 import type { AllowedFilterProps, ExtractFilterProps } from './props'
 
 export interface DisplacementFilterProps extends ExtractFilterProps<DisplacementFilter> {
-  sprite: ISpriteMaskTarget
+  sprite: Sprite
 }
 
 export interface DisplacementFilterEvents {

packages/vue3-pixi/src/elements/graphics.ts

@@ -9,11 +9,7 @@ import type { PixiEvents } from './events'
 
 export interface GraphicsProps {
   blendMode?: PIXI.BLEND_MODES
-  pluginName?: string
-  shader?: PIXI.Shader
-  tint?: PIXI.ColorSource
-  geometry?: PIXI.GraphicsGeometry
-  isMask?: boolean
+  geometry?: PIXI.GraphicsOptions | PIXI.GraphicsContext
 }
 
 export interface GraphicsEvents extends PixiEvents {

packages/vue3-pixi/src/elements/mesh.ts

@@ -9,9 +9,9 @@ import type { PixiEvents } from './events'
 
 export interface MeshProps {
   geometry: PIXI.Geometry
-  shader: PIXI.Shader | PIXI.MeshMaterial
+  shader: PIXI.Shader
   blendMode?: PIXI.BLEND_MODES
-  drawMode?: PIXI.DRAW_MODES
+  drawMode?: PIXI.Topology
   material?: PIXI.Shader
   roundPixels?: boolean
   size?: number

packages/vue3-pixi/src/elements/simpleRope.ts → packages/vue3-pixi/src/elements/meshRope.ts

@@ -7,14 +7,14 @@ import type * as PIXI from 'pixi.js'
 import type { AllowedPixiProps } from './props'
 import type { PixiEvents } from './events'
 
-export interface SimpleRopeProps {
+export interface MeshRopeProps {
   texture: string | PIXI.Texture
   points: PIXI.Point[]
   textureScale?: number
   autoUpdate?: number
-  shader?: PIXI.Shader | PIXI.MeshMaterial
+  shader?: PIXI.Shader
   blendMode?: PIXI.BLEND_MODES
-  drawMode?: PIXI.DRAW
+  drawMode?: PIXI.Topology
   material?: PIXI.Shader
   roundPixels?: boolean
   size?: number
@@ -24,26 +24,26 @@ export interface SimpleRopeProps {
   canvasPadding?: number
 }
 
-export interface SimpleRopeEvents extends PixiEvents {
-  render: [SimpleRopeInst]
+export interface MeshRopeEvents extends PixiEvents {
+  render: [MeshRopeInst]
 }
 
-export type SimpleRopeInst = PIXI.SimpleRope & EventTarget
+export type MeshRopeInst = PIXI.MeshRope & EventTarget
 
-export type SimpleRopeComponent = DefineComponent<
-SimpleRopeProps,
+export type MeshRopeComponent = DefineComponent<
+MeshRopeProps,
   {},
   unknown,
   {},
   {},
   ComponentOptionsMixin,
   ComponentOptionsMixin,
-  (keyof SimpleRopeEvents)[],
-  keyof SimpleRopeEvents,
+  (keyof MeshRopeEvents)[],
+  keyof MeshRopeEvents,
   VNodeProps & AllowedPixiProps,
-  Readonly<SimpleRopeProps> & {
-    [key in keyof SimpleRopeEvents as `on${Capitalize<key>}`]?:
-    | ((...args: SimpleRopeEvents[key]) => any)
+  Readonly<MeshRopeProps> & {
+    [key in keyof MeshRopeEvents as `on${Capitalize<key>}`]?:
+    | ((...args: MeshRopeEvents[key]) => any)
     | undefined;
   },
   {}

packages/vue3-pixi/src/elements/nineSliceSprite.ts

@@ -16,9 +16,9 @@ export interface NineSliceSpriteProps {
   verticesX?: number
   verticesY?: number
 
-  shader?: PIXI.Shader | PIXI.MeshMaterial
+  shader?: PIXI.Shader
   blendMode?: PIXI.BLEND_MODES
-  drawMode?: PIXI.DRAW_MODES
+  drawMode?: PIXI.Topology
   material?: PIXI.Shader
   roundPixels?: boolean
   size?: number

packages/vue3-pixi/src/elements/simplePlane.ts

@@ -13,7 +13,7 @@ export interface SimplePlaneProps {
 
   shader?: PIXI.Shader | PIXI.MeshMaterial
   blendMode?: PIXI.BLEND_MODES
-  drawMode?: PIXI.DRAW_MODES
+  drawMode?: PIXI.Topology
   material?: PIXI.Shader
   roundPixels?: boolean
   size?: number

packages/vue3-pixi/src/elements/sprite.ts

@@ -8,7 +8,7 @@ import type { AllowedPixiProps } from './props'
 import type { PixiEvents } from './events'
 export interface SpriteProps extends AllowedPixiProps {
   texture: string | PIXI.Texture
-  textureOptions?: PIXI.IBaseTextureOptions
+  textureOptions?: PIXI.TextureOptions
 
   blendMode?: PIXI.BLEND_MODES
 

packages/vue3-pixi/src/elements/text.ts

@@ -11,9 +11,7 @@ export interface TextProps {
   text?: string | number
   style?: PIXI.TextStyle | Partial<PIXI.TextStyle>
 
-  canvas?: PIXI.ICanvas
   context?: PIXI.ICanvasRenderingContext2D
-  resolution?: number
 
   width?: number
 }

packages/vue3-pixi/src/elements/tilingSprite.ts

@@ -13,7 +13,7 @@ export interface TilingSpriteProps {
   width?: number
   height?: number
 
-  anchor?: PIXI.PointData | number
+  anchor?: Partial<PIXI.PointData> | number
   anchorX?: number
   anchorY?: number
 

packages/vue3-pixi/src/global.ts

@@ -1,6 +1,6 @@
 import '@vue/runtime-core'
 import 'pixi.js'
-import type { SimpleRopeComponent } from './elements/simpleRope'
+import type { MeshRopeComponent } from './elements/meshRope'
 import type { SimplePlaneComponent } from './elements/simplePlane'
 import type { NineSliceSpriteComponent } from './elements/NineSliceSprite'
 import type { MeshComponent } from './elements/mesh'
@@ -71,8 +71,8 @@ declare module '@vue/runtime-core' {
     NineSliceSprite: NineSliceSpriteComponent
     PixiNineSliceSprite: NineSliceSpriteComponent
 
-    SimpleRope: SimpleRopeComponent
-    PixiSimpleRope: SimpleRopeComponent
+    MeshRope: MeshRopeComponent
+    PixiMeshRope: MeshRopeComponent
   }
 }
 
@@ -87,7 +87,7 @@ declare module 'pixi.js' {
   }
 }
 
-export * from './elements/simpleRope'
+export * from './elements/meshRope'
 export * from './elements/simplePlane'
 export * from './elements/nineSliceSprite'
 export * from './elements/mesh'