Merge pull request #68 from /issues/65

fix: application extends parent injection (#65)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-pixi-monorepo",
   "type": "module",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "private": true,
   "packageManager": "[email protected]",
   "description": "Vue createRenderer for PixiJS",

packages/vue3-pixi-projection/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-pixi-projection",
   "type": "module",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Vue createRenderer for PixiJS",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/vue3-pixi#readme",

packages/vue3-pixi-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-pixi-ui",
   "type": "module",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Vue createRenderer for PixiJS",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/vue3-pixi#readme",

packages/vue3-pixi/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-pixi",
   "type": "module",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Vue createRenderer for PixiJS",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/vue3-pixi#readme",

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

@@ -1,11 +1,12 @@
 /* eslint-disable vue/one-component-per-file */
-import { defineComponent, h, markRaw, onMounted, onUnmounted, ref, renderSlot, warn, watch } from 'vue-demi'
+import { defineComponent, getCurrentInstance, h, markRaw, onMounted, onUnmounted, ref, renderSlot, warn, watch } from 'vue-demi'
 import { throttle } from '@antfu/utils'
 import { Application as _Application } from 'pixi.js'
 import type { ColorSource, Container } from 'pixi.js'
 import type { App, PropType } from 'vue-demi'
 import { createApp } from '../../renderer'
 import { appInjectKey } from '../../composables'
+import { inheritParent } from '../../utils'
 
 export interface ApplicationInst {
   canvas: HTMLCanvasElement
@@ -36,8 +37,10 @@ export const Application = defineComponent({
     resizeTo: Object as PropType<HTMLElement | Window | undefined>,
   },
   setup(props, { slots, expose }) {
+    const { appContext } = getCurrentInstance()!
     const canvas = ref<HTMLCanvasElement>()
     const pixiApp = ref()
+
     let app: App<Container> | undefined
 
     function mount() {
@@ -62,6 +65,9 @@ export const Application = defineComponent({
       app = createApp({
         render: () => renderSlot(slots, 'default'),
       })
+
+      inheritParent(app, appContext)
+
       app.provide(appInjectKey, pixiApp)
       app.mount(pixiApp.value.stage)
     }

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

@@ -2,7 +2,7 @@
 import type { App, PropType } from 'vue-demi'
 import { createApp, defineComponent, getCurrentInstance, h, inject, onMounted, onUnmounted, ref } from 'vue-demi'
 import { appInjectKey } from '../../composables'
-import { inheritParent } from './utils'
+import { inheritParent } from '../../utils'
 
 export const External = defineComponent({
   props: {

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

@@ -1,6 +1,6 @@
 import type { App, AppContext } from 'vue-demi'
 
-export function inheritParent(app: App<Element>, appContext?: AppContext) {
+export function inheritParent(app: App<any>, appContext?: AppContext) {
   const parent = appContext?.app
   if (parent) {
     app.config.globalProperties = parent.config.globalProperties