Upgrade to Pixi.js v8

.npmrc

@@ -1 +1,2 @@
-package-manager-strict=false
+package-manager-strict=false
+link-workspace-packages=true

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

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 |

docs/package.json

@@ -17,7 +17,7 @@
     "gsap": "^3.12.5",
     "naive-ui": "^2.38.2",
     "nanoid": "^4.0.2",
-    "pixi.js": "^7.4.2",
+    "pixi.js": "^8.2.5",
     "unocss": "^0.60.0",
     "vue": "^3.4.27",
     "vue3-pixi": "workspace:^"

packages/vue3-pixi-nuxt/package.json

@@ -35,14 +35,16 @@
   "dependencies": {
     "@antfu/utils": "^0.7.8",
     "@nuxt/kit": "^3.11.2",
+    "@xmldom/xmldom": "^0.8.10",
     "mlly": "^1.7.0",
+    "nuxi": "^3.12.0",
     "pkg-types": "^1.1.1",
     "sirv": "^2.0.4",
     "vue-demi": "^0.14.8",
-    "vue3-pixi": "latest"
+    "vue3-pixi": "workspace:1.0.0"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.7.0",
+    "@nuxt/module-builder": "^0.7.1",
     "@nuxt/schema": "^3.11.2",
     "@vue/runtime-core": "^3.4.27",
     "nuxt": "^3.11.2"

packages/vue3-pixi-nuxt/playground/nuxt.config.ts

@@ -0,0 +1,6 @@
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: ['vue3-pixi-nuxt'],
+})

packages/vue3-pixi-nuxt/playground/pages/index.vue

@@ -0,0 +1,10 @@
+<script setup>
+</script>
+
+<template>
+  <Application :width="800" :height="600">
+    <text :anchor="0.5" :x="120" :y="120" :style="{ fill: 'white' }">
+      Hello NuxtJS World
+    </text>
+  </Application>
+</template>

packages/vue3-pixi-ui/package.json

@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@pixi/ui": "^0.10.5",
-    "pixi.js": "^7.4.2",
+    "pixi.js": "^8.2.5",
     "vue-demi": "^0.14.8",
     "vue3-pixi": "workspace:^"
   },

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-pixi",
   "type": "module",
-  "version": "0.9.3",
+  "version": "1.0.0",
   "description": "Vue createRenderer for PixiJS",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/vue3-pixi#readme",
@@ -61,7 +61,8 @@
     "@antfu/utils": "^0.7.8",
     "@vueuse/core": "^10.10.0",
     "nanoid": "^4.0.2",
-    "pixi.js": "^7.4.2",
+    "pixi-filters": "^6.0.4",
+    "pixi.js": "^8.2.5",
     "vue-demi": "^0.14.8"
   },
   "devDependencies": {

packages/vue3-pixi/src/compiler.ts

@@ -8,15 +8,14 @@ const elementNames = [
   'animated-sprite',
   'mesh',
   'simple-plane',
-  'nine-slice-plane',
-  'simple-rope',
+  'nine-slice-sprite',
+  'mesh-rope',
 
   'filter',
   'blur-filter',
   'alpha-filter',
   'displacement-filter',
   'color-matrix-filter',
-  'f-x-a-a-filter',
 ]
 
 const prefix = 'pixi-'

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 { ColorSource, Container } 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'
@@ -15,60 +14,51 @@ export interface ApplicationInst {
 
 export const Application = defineComponent({
   props: {
-    antialias: { type: Boolean, default: true },
-    autoDensity: { type: Boolean, default: true },
+    antialias: { type: Boolean, default: undefined },
+    autoDensity: { type: Boolean, default: undefined },
     autoStart: { type: Boolean, default: true },
-    background: [Number, String, Array] as PropType<ColorSource>,
-    backgroundColor: [Number, String, Array] as PropType<ColorSource>,
+    alpha: { type: Boolean, default: undefined },
+    backgroundColor: [Number, String, Array, Object] as PropType<ColorSource>,
     backgroundAlpha: { type: Number, default: 1 },
-    clearBeforeRender: { type: Boolean, default: true },
-    forceCanvas: Boolean,
-    alpha: Number,
-    depth: Boolean,
-    desynchronized: Boolean,
-    failIfMajorPerformanceCaveat: Boolean,
-    powerPreference: String as PropType<WebGLPowerPreference>,
-    premultipliedAlpha: Boolean,
-    preserveDrawingBuffer: Boolean,
-    stencil: { type: Boolean, default: true },
-    width: Number,
-    height: Number,
-    resolution: Number,
+    clearBeforeRender: { type: Boolean, default: undefined },
+    hello: { type: Boolean, default: undefined },
+    textureGCActive: { type: Boolean, default: undefined },
+    textureGCAMaxIdle: { type: Number, default: undefined },
+    textureGCCheckCountMax: { type: Number, default: undefined },
+    bezierSmoothness: { type: Number, default: undefined },
+    premultipliedAlpha: { type: Boolean, default: undefined },
+    preserveDrawingBuffer: { type: Boolean, default: undefined },
+    forceFallbackAdapter: { type: Boolean, default: undefined },
+    depth: { type: Boolean, default: undefined },
+    failIfMajorPerformanceCaveat: { type: Boolean, default: undefined },
+    powerPreference: { type: String as PropType<GpuPowerPreference>, default: undefined },
     resizeTo: Object as PropType<HTMLElement | Window | undefined>,
+    roundPixels: { type: Boolean, default: undefined },
+    useBackBuffer: { type: Boolean, default: undefined },
+    width: { type: Number, default: undefined },
+    height: { type: Number, default: undefined },
+    resolution: { type: Number, default: 1 },
+
+    // @TODO: Add webgl/webgpu
   },
   setup(props, { slots, expose }) {
     const { appContext } = getCurrentInstance()!
     const canvas = ref<HTMLCanvasElement>()
-    const pixiApp = ref()
+    const pixiApp = ref<_Application>()
 
     let app: App<Container> | undefined
 
-    function mount() {
-      const context = canvas.value?.getContext('webgl', {
-        alpha: props.alpha,
-        antialias: props.antialias,
-        depth: props.depth,
-        desynchronized: props.desynchronized,
-        failIfMajorPerformanceCaveat: props.failIfMajorPerformanceCaveat,
-        powerPreference: props.powerPreference,
-        premultipliedAlpha: props.premultipliedAlpha,
-        preserveDrawingBuffer: props.preserveDrawingBuffer,
-        stencil: props.stencil,
-      })
-
-      if (!context)
-        warn('could not crate webgl context')
+    async function mount() {
+      const inst = new _Application()
+      await inst.init({ canvas: canvas.value, ...props })
 
-      const inst = new _Application({ view: canvas.value, ...props })
       pixiApp.value = markRaw(inst)
 
-      app = createApp({
-        render: () => renderSlot(slots, 'default'),
-      })
+      app = createApp({ render: () => renderSlot(slots, 'default') })
 
       inheritParent(app, appContext)
 
-      app.provide(appInjectKey, pixiApp)
+      app.provide(appInjectKey, pixiApp.value)
       app.mount(pixiApp.value.stage)
     }
     function unmount() {
@@ -78,18 +68,6 @@ export const Application = defineComponent({
       pixiApp.value?.destroy()
       pixiApp.value = undefined
     }
-    function resize() {
-      if (!pixiApp.value)
-        return
-      const width = props.width || pixiApp.value.renderer.width
-      const height = props.height || pixiApp.value.renderer.height
-      pixiApp.value.renderer.resize(width, height)
-    }
-
-    watch(
-      () => [props.width, props.height],
-      throttle(50, resize),
-    )
     onMounted(mount)
     onUnmounted(unmount)
 

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

@@ -15,7 +15,7 @@ export const External = defineComponent({
     const pixiApp = ref(inject(appInjectKey)!)
     const childApp = ref<App>()
 
-    const root = props.root || pixiApp.value.view.parentNode as HTMLElement
+    const root = props.root || pixiApp.value.canvas.parentNode as HTMLElement
 
     function mount() {
       if (!root)

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

@@ -4,7 +4,7 @@ import { Assets } from 'pixi.js'
 import type { ExtractPropTypes, PropType } from 'vue-demi'
 import { defineComponent, onBeforeUnmount, ref, renderSlot, watch } from 'vue-demi'
 
-import type { IBaseTextureOptions, Texture, UnresolvedAsset as _UnresolvedAsset } from 'pixi.js'
+import type { Texture, TextureOptions, UnresolvedAsset as _UnresolvedAsset } from 'pixi.js'
 import type { Awaitable } from '@antfu/utils'
 import { isString } from '@antfu/utils'
 import { setTextureOptions } from '../../renderer'
@@ -26,7 +26,7 @@ export const loaderProps = {
     required: true as const,
   },
   options: {
-    type: Object as PropType<IBaseTextureOptions>,
+    type: Object as PropType<TextureOptions>,
     default: () => ({}),
   },
   bundleIds: String,

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

@@ -1,10 +1,10 @@
-import type { Application, ICanvas, IRenderer } from 'pixi.js'
+import type { Application, Renderer } from 'pixi.js'
 import type { Ref } from 'vue-demi'
 import { computed, unref } from 'vue-demi'
 
 import { useApplication } from './useApplication'
 
-export function useRenderer(app?: Ref<Application<ICanvas>>): Ref<IRenderer> {
+export function useRenderer(app?: Ref<Application>): Ref<Renderer> {
   const useApp = app || useApplication()
   return computed(() => unref(useApp)?.renderer)
 }

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

@@ -1,13 +1,13 @@
 import type { Ref } from 'vue-demi'
 import { computed, unref } from 'vue-demi'
 
-import type { Application, ICanvas } from 'pixi.js'
+import type { Application } from 'pixi.js'
 import { Rectangle } from 'pixi.js'
 
 import { computedWithControl, useResizeObserver } from '@vueuse/core'
 import { useApplication } from './useApplication'
 
-export function useScreen(app?: Ref<Application<ICanvas>>): Ref<Rectangle> {
+export function useScreen(app?: Ref<Application>): Ref<Rectangle> {
   const useApp = app || useApplication()
   const view = computed(() => unref(useApp).view as HTMLCanvasElement)
   const defaultRectangle = new Rectangle()

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)
 }