feat: nuxt load more component

.gitignore

@@ -80,4 +80,6 @@ dist
 # IDE
 .idea
 
-cache
+cache
+
+.output

packages/vue3-pixi-nuxt/package.json

@@ -29,17 +29,23 @@
     "dist"
   ],
   "scripts": {
-    "dev": "nuxi dev playground"
+    "dev": "nuxi dev playground",
+    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "dev:build": "nuxi build playground",
+    "postinstall": "npm run dev:prepare"
   },
   "dependencies": {
     "@antfu/utils": "^0.7.2",
     "@nuxt/kit": "^3.8.2",
+    "mlly": "^1.4.2",
     "pixi-projection": "^1.0.0",
+    "pkg-types": "^1.0.3",
     "sirv": "^2.0.3",
     "vue-demi": "^0.14.1",
     "vue3-pixi": "workspace:^"
   },
   "devDependencies": {
+    "@nuxt/module-builder": "^0.5.4",
     "nuxt": "^3.8.2"
   },
   "build": {

packages/vue3-pixi-nuxt/playground/app.vue

@@ -3,7 +3,13 @@
 
 <template>
   <div style="height: 100vh">
-    -
+    <Application
+      width="629"
+      height="550"
+      background="#fff"
+    >
+      <TransitionBasic />
+    </Application>
   </div>
 </template>
 

packages/vue3-pixi-nuxt/playground/components/GraphicsDynamic.vue

@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { GraphicsInst } from 'vue3-pixi'
+const graphicsRef = ref<GraphicsInst>()
+const thingRef = ref<GraphicsInst>()
+function onDraw(graphics: GraphicsInst) {
+// set a fill and line style
+  graphics.beginFill(0xFF3300)
+  graphics.lineStyle(10, 0xFFD900, 1)
+
+  // draw a shape
+  graphics.moveTo(50, 50)
+  graphics.lineTo(250, 50)
+  graphics.lineTo(100, 100)
+  graphics.lineTo(250, 220)
+  graphics.lineTo(50, 220)
+  graphics.lineTo(50, 50)
+  graphics.closePath()
+  graphics.endFill()
+
+  // set a fill and line style again
+  graphics.lineStyle(10, 0xFF0000, 0.8)
+  graphics.beginFill(0xFF700B, 1)
+
+  // draw a second shape
+  graphics.moveTo(210, 300)
+  graphics.lineTo(450, 320)
+  graphics.lineTo(570, 350)
+  graphics.quadraticCurveTo(600, 0, 480, 100)
+  graphics.lineTo(330, 120)
+  graphics.lineTo(410, 200)
+  graphics.lineTo(210, 300)
+  graphics.closePath()
+  graphics.endFill()
+
+  // draw a rectangle
+  graphics.lineStyle(2, 0x0000FF, 1)
+  graphics.drawRect(50, 250, 100, 100)
+
+  // draw a circle
+  graphics.lineStyle(0)
+  graphics.beginFill(0xFFFF0B, 0.5)
+  graphics.drawCircle(470, 200, 100)
+  graphics.endFill()
+
+  graphics.lineStyle(20, 0x33FF00)
+  graphics.moveTo(30, 30)
+  graphics.lineTo(600, 300)
+}
+
+let count = 0
+
+function onDrawThing(thing: GraphicsInst) {
+  count += 0.1
+
+  thing.clear()
+  thing.lineStyle(10, 0xFF0000, 1)
+  thing.beginFill(0xFFFF00, 0.5)
+
+  thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20)
+  thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count) * 20)
+  thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count) * 20)
+  thing.lineTo(-120 + Math.cos(count) * 20, 100 + Math.sin(count) * 20)
+  thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20)
+  thing.closePath()
+
+  thing.rotation = count * 0.1
+}
+
+function onClick() {
+  if (!graphicsRef.value)
+    return
+  const graphics = graphicsRef.value
+  graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1)
+  graphics.moveTo(Math.random() * 800, Math.random() * 600)
+  graphics.bezierCurveTo(
+    Math.random() * 800, Math.random() * 600,
+    Math.random() * 800, Math.random() * 600,
+    Math.random() * 800, Math.random() * 600,
+  )
+}
+
+useEventListener('pointerdown', onClick)
+
+onTick(() => thingRef.value && onDrawThing(thingRef.value))
+</script>
+
+<template>
+  <Graphics ref="graphicsRef" @render="onDraw" />
+  <Graphics ref="thingRef" :x="400" :y="300" @render="onDrawThing" />
+</template>
+

packages/vue3-pixi-nuxt/playground/components/TransitionBasic.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { Graphics as GraphicsIns } from 'pixi.js'
+
+function onDrawRounded(e: GraphicsIns) {
+  e.beginFill('#00a3af')
+  e.drawRoundedRect(0, 0, 60, 60, 10)
+}
+
+const show = ref(true)
+</script>
+
+<template>
+  <p-transition
+    :duration="{ enter: 600, leave: 700 }"
+    :before-enter="{ alpha: 0, scaleX: 0.25, scaleY: 0.25 }"
+    :enter="{ alpha: 1, scaleX: 1, scaleY: 1 }"
+    :leave="[
+      { x: 300 },
+      { delay: 500, alpha: 0 },
+    ]"
+  >
+    <graphics v-if="show" :scale="1" :pivot="30" :x="120" :y="120" @render="onDrawRounded" />
+  </p-transition>
+  <external class="btn" tag="button" @click="show = !show">
+    {{ show ? 'Hide' : 'Show' }}
+  </external>
+</template>

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

@@ -1,9 +1,7 @@
 export default defineNuxtConfig({
-  modules: ['../src/module', '@nuxt/devtools'],
-  tres: {
-    // for testing purposes, and so we test both deduplication + auto-detection capabilities
-    modules: ['@tresjs/cientos'],
-    devtools: true,
-    glsl: true,
-  },
+  modules: [
+    '../src/module',
+    '@vueuse/nuxt',
+    '@nuxt/devtools',
+  ],
 })

packages/vue3-pixi-nuxt/playground/package.json

@@ -7,6 +7,10 @@
     "build": "nuxi build",
     "generate": "nuxi generate"
   },
+  "dependencies": {
+    "@vueuse/core": "^10.1.2",
+    "@vueuse/nuxt": "^10.7.0"
+  },
   "devDependencies": {
     "@nuxt/devtools": "1.0.4",
     "@tresjs/cientos": "^3.6.0",

packages/vue3-pixi-nuxt/src/devtools.ts

@@ -1,9 +1,8 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { existsSync } from 'fs'
 import type { Nuxt } from 'nuxt/schema'
 import type { Resolver } from '@nuxt/kit'
 
-const DEVTOOLS_UI_ROUTE = '/__tres_nuxt_devtools'
+const DEVTOOLS_UI_ROUTE = '/__vue3pixi_nuxt_devtools'
 const DEVTOOLS_UI_LOCAL_PORT = 3300
 
 export function setupDevToolsUI(nuxt: Nuxt, resolver: Resolver) {
@@ -16,7 +15,6 @@ export function setupDevToolsUI(nuxt: Nuxt, resolver: Resolver) {
       const sirv = await import('sirv').then(r => r.default || r)
       server.middlewares.use(
         DEVTOOLS_UI_ROUTE,
-        // @ts-expect-error
         sirv(clientPath, { dev: true, single: true }),
       )
     })
@@ -38,11 +36,11 @@ export function setupDevToolsUI(nuxt: Nuxt, resolver: Resolver) {
   nuxt.hook('devtools:customTabs', (tabs) => {
     tabs.push({
       // unique identifier
-      name: 'tres-nuxt-devtools',
+      name: 'vue3-pixi-nuxt-devtools',
       // title to display in the tab
-      title: 'TresJS',
+      title: 'Vue3PIXI',
       // any icon from Iconify, or a URL to an image
-      icon: 'https://raw.githubusercontent.com/Tresjs/tres/main/public/favicon.svg',
+      icon: 'https://raw.githubusercontent.com/hairyf/vue3-pixi/docs/public/favicon.svg',
       // iframe view
       view: {
         type: 'iframe',