From 76aa55af1afbe038428cb16d83b9f0da77f9e372 Mon Sep 17 00:00:00 2001 From: "Mr.Mao" <951416545@qq.com> Date: Wed, 13 Dec 2023 14:31:58 +0800 Subject: [PATCH] feat: nuxt load more component --- .gitignore | 4 +- packages/vue3-pixi-nuxt/package.json | 8 +- packages/vue3-pixi-nuxt/playground/app.vue | 8 +- .../playground/components/GraphicsDynamic.vue | 91 ++ .../playground/components/NuxtStones.vue | 52 - .../playground/components/TransitionBasic.vue | 27 + .../playground/components/UglyNakedBunny.vue | 15 - .../components/shader-ball/index.vue | 37 - .../shader-ball/shaders/fragment.glsl | 6 - .../shader-ball/shaders/vertex.glsl | 15 - .../vue3-pixi-nuxt/playground/nuxt.config.ts | 12 +- .../vue3-pixi-nuxt/playground/package.json | 4 + packages/vue3-pixi-nuxt/src/devtools.ts | 10 +- packages/vue3-pixi-nuxt/src/module.ts | 68 +- .../src/runtime/ServerApplication.vue | 7 + .../src/runtime/ServerEmpty.vue | 3 + packages/vue3-pixi-nuxt/tsconfig.json | 2 +- pnpm-lock.yaml | 1388 +++++++++-------- 18 files changed, 978 insertions(+), 779 deletions(-) create mode 100644 packages/vue3-pixi-nuxt/playground/components/GraphicsDynamic.vue delete mode 100644 packages/vue3-pixi-nuxt/playground/components/NuxtStones.vue create mode 100644 packages/vue3-pixi-nuxt/playground/components/TransitionBasic.vue delete mode 100644 packages/vue3-pixi-nuxt/playground/components/UglyNakedBunny.vue delete mode 100644 packages/vue3-pixi-nuxt/playground/components/shader-ball/index.vue delete mode 100644 packages/vue3-pixi-nuxt/playground/components/shader-ball/shaders/fragment.glsl delete mode 100644 packages/vue3-pixi-nuxt/playground/components/shader-ball/shaders/vertex.glsl create mode 100644 packages/vue3-pixi-nuxt/src/runtime/ServerApplication.vue create mode 100644 packages/vue3-pixi-nuxt/src/runtime/ServerEmpty.vue diff --git a/.gitignore b/.gitignore index 64d4b634..28f32d0a 100644 --- a/.gitignore +++ b/.gitignore @@ -80,4 +80,6 @@ dist # IDE .idea -cache \ No newline at end of file +cache + +.output \ No newline at end of file diff --git a/packages/vue3-pixi-nuxt/package.json b/packages/vue3-pixi-nuxt/package.json index b3c9343d..d885627d 100644 --- a/packages/vue3-pixi-nuxt/package.json +++ b/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": { diff --git a/packages/vue3-pixi-nuxt/playground/app.vue b/packages/vue3-pixi-nuxt/playground/app.vue index a6bf861d..80e47e8d 100644 --- a/packages/vue3-pixi-nuxt/playground/app.vue +++ b/packages/vue3-pixi-nuxt/playground/app.vue @@ -3,7 +3,13 @@ diff --git a/packages/vue3-pixi-nuxt/playground/components/GraphicsDynamic.vue b/packages/vue3-pixi-nuxt/playground/components/GraphicsDynamic.vue new file mode 100644 index 00000000..e057d77c --- /dev/null +++ b/packages/vue3-pixi-nuxt/playground/components/GraphicsDynamic.vue @@ -0,0 +1,91 @@ + + + + diff --git a/packages/vue3-pixi-nuxt/playground/components/NuxtStones.vue b/packages/vue3-pixi-nuxt/playground/components/NuxtStones.vue deleted file mode 100644 index 730b0ed0..00000000 --- a/packages/vue3-pixi-nuxt/playground/components/NuxtStones.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - diff --git a/packages/vue3-pixi-nuxt/playground/components/TransitionBasic.vue b/packages/vue3-pixi-nuxt/playground/components/TransitionBasic.vue new file mode 100644 index 00000000..a60bb099 --- /dev/null +++ b/packages/vue3-pixi-nuxt/playground/components/TransitionBasic.vue @@ -0,0 +1,27 @@ + + + diff --git a/packages/vue3-pixi-nuxt/playground/components/UglyNakedBunny.vue b/packages/vue3-pixi-nuxt/playground/components/UglyNakedBunny.vue deleted file mode 100644 index e50153d9..00000000 --- a/packages/vue3-pixi-nuxt/playground/components/UglyNakedBunny.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/packages/vue3-pixi-nuxt/playground/components/shader-ball/index.vue b/packages/vue3-pixi-nuxt/playground/components/shader-ball/index.vue deleted file mode 100644 index 3ae192ed..00000000 --- a/packages/vue3-pixi-nuxt/playground/components/shader-ball/index.vue +++ /dev/null @@ -1,37 +0,0 @@ - - - diff --git a/packages/vue3-pixi-nuxt/playground/components/shader-ball/shaders/fragment.glsl b/packages/vue3-pixi-nuxt/playground/components/shader-ball/shaders/fragment.glsl deleted file mode 100644 index 4be008e3..00000000 --- a/packages/vue3-pixi-nuxt/playground/components/shader-ball/shaders/fragment.glsl +++ /dev/null @@ -1,6 +0,0 @@ -precision mediump float; -varying vec2 vUv; - -void main() { - gl_FragColor = vec4(1.0, vUv.y, 0.5, 1.0); -} \ No newline at end of file diff --git a/packages/vue3-pixi-nuxt/playground/components/shader-ball/shaders/vertex.glsl b/packages/vue3-pixi-nuxt/playground/components/shader-ball/shaders/vertex.glsl deleted file mode 100644 index 68a8a335..00000000 --- a/packages/vue3-pixi-nuxt/playground/components/shader-ball/shaders/vertex.glsl +++ /dev/null @@ -1,15 +0,0 @@ -uniform vec2 uAmplitude; -uniform vec2 uFrequency; -uniform float uTime; - -varying vec2 vUv; - -void main() { - vec4 modelPosition = modelMatrix * vec4(position, 1.0); - modelPosition.y += sin(modelPosition.x * uFrequency.x - uTime) * uAmplitude.x; - modelPosition.x += cos(modelPosition.y * uFrequency.y - uTime) * uAmplitude.y; - - vec4 viewPosition = viewMatrix * modelPosition; - gl_Position = projectionMatrix * viewPosition; - vUv = uv; -} \ No newline at end of file diff --git a/packages/vue3-pixi-nuxt/playground/nuxt.config.ts b/packages/vue3-pixi-nuxt/playground/nuxt.config.ts index c8d4a8be..763938ea 100644 --- a/packages/vue3-pixi-nuxt/playground/nuxt.config.ts +++ b/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', + ], }) diff --git a/packages/vue3-pixi-nuxt/playground/package.json b/packages/vue3-pixi-nuxt/playground/package.json index 3b5af220..72faa2f0 100644 --- a/packages/vue3-pixi-nuxt/playground/package.json +++ b/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", diff --git a/packages/vue3-pixi-nuxt/src/devtools.ts b/packages/vue3-pixi-nuxt/src/devtools.ts index 107d9399..3ba9d175 100644 --- a/packages/vue3-pixi-nuxt/src/devtools.ts +++ b/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', diff --git a/packages/vue3-pixi-nuxt/src/module.ts b/packages/vue3-pixi-nuxt/src/module.ts index 856eaf58..bac998bb 100644 --- a/packages/vue3-pixi-nuxt/src/module.ts +++ b/packages/vue3-pixi-nuxt/src/module.ts @@ -1,26 +1,62 @@ -import { addComponent, addImports, addVitePlugin, createResolver, defineNuxtModule, resolvePath } from '@nuxt/kit' +import { addComponent, addImports, createResolver, defineNuxtModule } from '@nuxt/kit' +import * as core from 'vue3-pixi' +import { isCustomElement } from 'vue3-pixi' +import { setupDevToolsUI } from './devtools' + export interface ModuleOptions { modules: string[] devtools: boolean - glsl: boolean } + +const resolver = createResolver(import.meta.url) + +const components = [ + 'Application', + 'PixiTransition', + 'PixiTransitionGroup', + 'PTransition', + 'PTransitionGroup', + 'External', + 'Loader', +] + export default defineNuxtModule({ meta: { - name: '@tresjs/nuxt', - configKey: 'tres', - }, - defaults: { - modules: [], - devtools: true, - glsl: false, + name: 'vue3-pixi-nuxt', + configKey: 'vue3pixi', }, async setup(options, nuxt) { - addComponent({ - name: 'Application', - filePath: '@tresjs/core', - export: 'TresCanvas', - mode: 'client', - _raw: true, - }) + for (const name of components) { + addComponent({ + name, + filePath: 'vue3-pixi', + export: name, + mode: 'client', + _raw: true, + }) + addComponent({ + name, + filePath: name === 'Application' + ? resolver.resolve('./runtime/ServerApplication.vue') + : resolver.resolve('./runtime/ServerEmpty.vue'), + mode: 'server', + }) + } + + for (const name in core) { + if (name.match(/^use/) || name.match(/^on[A-Z]{1}/)) { + addImports({ + from: 'vue3-pixi', + name, + }) + } + } + + nuxt.options.build.transpile.push(/vue3-pixi/) + + nuxt.options.vue.compilerOptions.isCustomElement = isCustomElement + + if (options.devtools) + setupDevToolsUI(nuxt, resolver) }, }) diff --git a/packages/vue3-pixi-nuxt/src/runtime/ServerApplication.vue b/packages/vue3-pixi-nuxt/src/runtime/ServerApplication.vue new file mode 100644 index 00000000..a0679bc6 --- /dev/null +++ b/packages/vue3-pixi-nuxt/src/runtime/ServerApplication.vue @@ -0,0 +1,7 @@ + + + diff --git a/packages/vue3-pixi-nuxt/src/runtime/ServerEmpty.vue b/packages/vue3-pixi-nuxt/src/runtime/ServerEmpty.vue new file mode 100644 index 00000000..9a8d9e33 --- /dev/null +++ b/packages/vue3-pixi-nuxt/src/runtime/ServerEmpty.vue @@ -0,0 +1,3 @@ + +