@tresjs/nuxt 5.7.3 → 5.8.1

package/dist/client/favicon.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6854 3.42916C12.0738 2.78182 13.012 2.78182 13.4004 3.42915L19.1771 13.0569C19.577 13.7235 19.0969 14.5714 18.3196 14.5714H6.76624C5.98894 14.5714 5.50883 13.7235 5.90875 13.0569L11.6854 3.42916Z" fill="#82DBC5"/>
+<path d="M15.6857 10.5429C15.6857 9.99059 16.1334 9.54288 16.6857 9.54288H26C26.5522 9.54288 27 9.99059 27 10.5429V19.8572C27 20.4094 26.5522 20.8572 26 20.8572H16.6857C16.1334 20.8572 15.6857 20.4094 15.6857 19.8572V10.5429Z" fill="#4F4F4F"/>
+<circle cx="16" cy="22" r="6" fill="#EFAC35"/>
+</svg>

package/dist/client/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script type="importmap">{"imports":{"#entry":"/__tres_nuxt_devtools/_nuxt/BC5Izh9D.js"}}</script><link rel="stylesheet" href="/__tres_nuxt_devtools/_nuxt/entry.CLaUX4X2.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__tres_nuxt_devtools/_nuxt/BC5Izh9D.js"><link rel="modulepreload" as="script" crossorigin href="/__tres_nuxt_devtools/_nuxt/B7oceTSY.js"><link rel="modulepreload" as="script" crossorigin href="/__tres_nuxt_devtools/_nuxt/DlyN-BeH.js"><script type="module" src="/__tres_nuxt_devtools/_nuxt/BC5Izh9D.js" crossorigin></script><link rel="prefetch" as="style" crossorigin href="/__tres_nuxt_devtools/_nuxt/error-404.a_6S_W9T.css"><link rel="prefetch" as="script" crossorigin href="/__tres_nuxt_devtools/_nuxt/7VW5Q03I.js"><link rel="prefetch" as="style" crossorigin href="/__tres_nuxt_devtools/_nuxt/error-500.0YBD5JWJ.css"><link rel="prefetch" as="script" crossorigin href="/__tres_nuxt_devtools/_nuxt/d-7YrwQl.js"><script>"use strict";(()=>{const o=window,e=document.documentElement,c=["dark","light"],s=getStorageValue("localStorage","nuxt-color-mode")||"system";let r=s==="system"?f():s;const l=e.getAttribute("data-color-mode-forced");l&&(r=l),i(r),o["__NUXT_COLOR_MODE__"]={preference:s,value:r,getColorScheme:f,addColorScheme:i,removeColorScheme:d};function i(t){const a=""+t+"",n="";e.classList?e.classList.add(a):e.className+=" "+a,n&&e.setAttribute("data-"+n,t)}function d(t){const a=""+t+"",n="";e.classList?e.classList.remove(a):e.className=e.className.replace(new RegExp(a,"g"),""),n&&e.removeAttribute("data-"+n)}function u(t){return o.matchMedia("(prefers-color-scheme"+t+")")}function f(){if(o.matchMedia&&u("").media!=="not all"){for(const t of c)if(u(":"+t).matches)return t}return"light"}})();function getStorageValue(o,e){switch(o){case"localStorage":try{return window.localStorage.getItem(e)}catch{return null}case"sessionStorage":try{return window.sessionStorage.getItem(e)}catch{return null}case"cookie":try{return getCookie(e)}catch{return null}default:return null}}function getCookie(o){const c=("; "+window.document.cookie).split("; "+o+"=");if(c.length===2){const s=c.pop();return s?s.split(";").shift():null}}</script></head><body><div id="__nuxt" class="isolate"></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__tres_nuxt_devtools",buildId:"15f8fab6-c2dd-4642-9ea9-0f83eba879d9",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1791265574548,false]</script></body></html>
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script type="importmap">{"imports":{"#entry":"/__tres_nuxt_devtools/_nuxt/CMLeC7E3.js"}}</script><link rel="stylesheet" href="/__tres_nuxt_devtools/_nuxt/entry.CxLioTJ9.css" crossorigin><link rel="modulepreload" as="script" crossorigin href="/__tres_nuxt_devtools/_nuxt/CMLeC7E3.js"><link rel="modulepreload" as="script" crossorigin href="/__tres_nuxt_devtools/_nuxt/B7oceTSY.js"><link rel="modulepreload" as="script" crossorigin href="/__tres_nuxt_devtools/_nuxt/DlyN-BeH.js"><script type="module" src="/__tres_nuxt_devtools/_nuxt/CMLeC7E3.js" crossorigin></script><link rel="prefetch" as="style" crossorigin href="/__tres_nuxt_devtools/_nuxt/error-404.a_6S_W9T.css"><link rel="prefetch" as="script" crossorigin href="/__tres_nuxt_devtools/_nuxt/7VW5Q03I.js"><link rel="prefetch" as="style" crossorigin href="/__tres_nuxt_devtools/_nuxt/error-500.0YBD5JWJ.css"><link rel="prefetch" as="script" crossorigin href="/__tres_nuxt_devtools/_nuxt/d-7YrwQl.js"><script>"use strict";(()=>{const o=window,e=document.documentElement,c=["dark","light"],s=getStorageValue("localStorage","nuxt-color-mode")||"system";let r=s==="system"?f():s;const l=e.getAttribute("data-color-mode-forced");l&&(r=l),i(r),o["__NUXT_COLOR_MODE__"]={preference:s,value:r,getColorScheme:f,addColorScheme:i,removeColorScheme:d};function i(t){const a=""+t+"",n="";e.classList?e.classList.add(a):e.className+=" "+a,n&&e.setAttribute("data-"+n,t)}function d(t){const a=""+t+"",n="";e.classList?e.classList.remove(a):e.className=e.className.replace(new RegExp(a,"g"),""),n&&e.removeAttribute("data-"+n)}function u(t){return o.matchMedia("(prefers-color-scheme"+t+")")}function f(){if(o.matchMedia&&u("").media!=="not all"){for(const t of c)if(u(":"+t).matches)return t}return"light"}})();function getStorageValue(o,e){switch(o){case"localStorage":try{return window.localStorage.getItem(e)}catch{return null}case"sessionStorage":try{return window.sessionStorage.getItem(e)}catch{return null}case"cookie":try{return getCookie(e)}catch{return null}default:return null}}function getCookie(o){const c=("; "+window.document.cookie).split("; "+o+"=");if(c.length===2){const s=c.pop();return s?s.split(";").shift():null}}</script></head><body><div id="__nuxt" class="isolate"></div><div id="teleports"></div><script>window.__NUXT__={};window.__NUXT__.config={public:{},app:{baseURL:"/__tres_nuxt_devtools",buildId:"3c133056-4c36-45e1-b6d3-3f975e89de6f",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="false" id="__NUXT_DATA__">[{"prerenderedAt":1,"serverRendered":2},1793232229872,false]</script></body></html>

package/dist/module.d.mts

@@ -1,9 +1,17 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
+type TresRenderer = 'webgl' | 'webgpu';
+
 interface ModuleOptions {
     modules: string[];
     devtools: boolean;
     glsl: boolean;
+    /**
+     * The renderer that auto-imports target. `'webgpu'` imports from the `/webgpu` entries
+     * (`@tresjs/core/webgpu`, `@tresjs/cientos/webgpu`). It applies to the whole app.
+     * @default 'webgl'
+     */
+    renderer: TresRenderer;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.16.0"
   },
-  "version": "5.7.3",
+  "version": "5.8.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,22 +1,21 @@
-import { readFile } from 'node:fs/promises';
-import { defineNuxtModule, createResolver, addImports, resolvePath, addComponent, addVitePlugin } from '@nuxt/kit';
-import * as core from '@tresjs/core';
+import { defineNuxtModule, createResolver, useLogger, addImports, resolvePath, addComponent, addTemplate, addVitePlugin } from '@nuxt/kit';
 import { templateCompilerOptions } from '@tresjs/core';
 import { defu } from 'defu';
-import { findExportNames } from 'mlly';
 import { readPackageJSON } from 'pkg-types';
 import glsl from 'vite-plugin-glsl';
 import { existsSync } from 'node:fs';
 import { addCustomTab } from '@nuxt/devtools-kit';
+import { readFile } from 'node:fs/promises';
+import { findExportNames } from 'mlly';
 import { dirname, join } from 'node:path';
 
-const version = "5.7.3";
+const version = "5.8.1";
 
 const DEVTOOLS_UI_ROUTE = "/__tres_nuxt_devtools";
 const DEVTOOLS_UI_LOCAL_PORT = 3300;
 function setupDevToolsUI(nuxt, resolver) {
   const clientPath = resolver.resolve("./client");
-  const isProductionBuild = existsSync(clientPath);
+  const isProductionBuild = existsSync(resolver.resolve("./client/index.html"));
   if (isProductionBuild) {
     nuxt.hook("vite:serverCreated", async (server) => {
       const sirv = await import('sirv').then((r) => r.default || r);
@@ -40,7 +39,7 @@ function setupDevToolsUI(nuxt, resolver) {
   addCustomTab(() => ({
     name: "tres-nuxt-devtools",
     title: "TresJS",
-    icon: "https://raw.githubusercontent.com/Tresjs/tres/main/public/favicon.svg",
+    icon: `${DEVTOOLS_UI_ROUTE}/favicon.svg`,
     view: {
       type: "iframe",
       src: DEVTOOLS_UI_ROUTE
@@ -48,6 +47,39 @@ function setupDevToolsUI(nuxt, resolver) {
   }));
 }
 
+const WEBGL_ONLY_PACKAGES = ["@tresjs/post-processing"];
+function coreEntry(renderer) {
+  return renderer === "webgpu" ? "@tresjs/core/webgpu" : "@tresjs/core";
+}
+function hasWebGPUEntry(pkg) {
+  return typeof pkg.exports === "object" && pkg.exports !== null && "./webgpu" in pkg.exports;
+}
+function selectEntry(mod, renderer, pkg) {
+  if (renderer === "webgl") {
+    return mod;
+  }
+  if (hasWebGPUEntry(pkg)) {
+    return `${mod}/webgpu`;
+  }
+  return WEBGL_ONLY_PACKAGES.includes(mod) ? null : mod;
+}
+async function readExportNames(entryPath) {
+  return findExportNames(await readFile(entryPath, "utf8"));
+}
+function isComponentExport(name) {
+  return /^[A-Z]/.test(name);
+}
+function findUnportedComponents(rootNames, webgpuNames) {
+  const ported = new Set(webgpuNames);
+  return rootNames.filter((name) => isComponentExport(name) && !ported.has(name));
+}
+function renderWebGPUStubs(runtimePath, stubs) {
+  return [
+    `import { createWebGPUStub } from ${JSON.stringify(runtimePath)}`,
+    ...stubs.map(({ name, from }) => `export const ${name} = /* #__PURE__ */ createWebGPUStub(${JSON.stringify(name)}, ${JSON.stringify(from)})`)
+  ].join("\n");
+}
+
 async function getAllPackageDeps(nuxtRootDir) {
   const localPkg = await readPackageJSON(nuxtRootDir);
   let rootPkg = localPkg;
@@ -75,71 +107,105 @@ const module$1 = defineNuxtModule({
   defaults: {
     modules: [],
     devtools: true,
-    glsl: false
+    glsl: false,
+    renderer: "webgl"
   },
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
+    const logger = useLogger("@tresjs/nuxt");
+    const isWebGPU = options.renderer === "webgpu";
+    const coreEntryId = coreEntry(options.renderer);
     nuxt.options.build.transpile.push(/@tresjs/);
-    for (const name in core) {
+    const coreNames = await readExportNames(await resolver.resolvePath(coreEntryId));
+    for (const name of coreNames) {
       if (name.match(/^use/)) {
         addImports({
-          from: "@tresjs/core",
+          from: coreEntryId,
           name
         });
       }
     }
     addImports([
       {
-        from: "@tresjs/core",
+        from: coreEntryId,
         name: "extend",
         as: "extendTres"
       },
       {
-        from: "@tresjs/core",
+        from: coreEntryId,
         type: true,
         name: "TresObject"
       }
     ]);
     nuxt.hook("prepare:types", ({ references }) => {
-      references.push({ types: "@tresjs/core" });
+      references.push({ types: coreEntryId });
     });
     nuxt.options.vue.compilerOptions.isCustomElement = templateCompilerOptions.template.compilerOptions.isCustomElement;
     const allDeps = await getAllPackageDeps(nuxt.options.rootDir);
     const coreDeps = Object.keys(allDeps).filter((d) => d.startsWith("@tresjs/"));
+    const webgpuStubs = [];
     for (const mod of /* @__PURE__ */ new Set([...options.modules, ...coreDeps])) {
       if (mod === "@tresjs/core" || mod === "@tresjs/nuxt") {
         continue;
       }
-      const entry = await resolvePath(mod);
-      if (entry === mod) {
+      const rootEntry = await resolvePath(mod);
+      if (rootEntry === mod) {
+        continue;
+      }
+      const entryId = selectEntry(mod, options.renderer, await readPackageJSON(rootEntry));
+      if (!entryId) {
+        logger.warn(`\`${mod}\` has no WebGPU entry yet, so it is not auto-imported with \`renderer: 'webgpu'\`.`);
+        continue;
+      }
+      const entryPath = entryId === mod ? rootEntry : await resolvePath(entryId);
+      if (!existsSync(entryPath)) {
+        logger.warn(`Cannot find the \`${entryId}\` build (${entryPath}), so \`${mod}\` is not auto-imported. Rebuild \`${mod}\`.`);
         continue;
       }
-      const imports = findExportNames(await readFile(entry, "utf8"));
+      const imports = await readExportNames(entryPath);
       for (const name of imports) {
-        if (name.match(/^[a-z]/)) {
-          addImports({
-            from: mod,
-            name
-          });
-        } else {
+        if (isComponentExport(name)) {
           addComponent({
             name,
-            filePath: mod,
+            filePath: entryId,
             export: name
           });
+        } else {
+          addImports({
+            from: entryId,
+            name
+          });
         }
       }
+      if (entryId !== mod) {
+        const unported = findUnportedComponents(await readExportNames(rootEntry), imports);
+        webgpuStubs.push(...unported.map((name) => ({ name, from: mod })));
+      }
+    }
+    if (webgpuStubs.length) {
+      const stubsTemplate = addTemplate({
+        filename: "tres/webgpu-stubs.mjs",
+        getContents: () => renderWebGPUStubs(resolver.resolve("./runtime/webgpuStub"), webgpuStubs),
+        write: true
+      });
+      for (const { name } of webgpuStubs) {
+        addComponent({
+          name,
+          filePath: stubsTemplate.dst,
+          export: name
+        });
+      }
     }
     nuxt.options.vite.resolve = defu(nuxt.options.vite.resolve, {
       dedupe: ["three"]
     });
     nuxt.options.vite.optimizeDeps = defu(nuxt.options.vite.optimizeDeps, {
-      include: ["three"]
+      include: isWebGPU ? ["three", "three/webgpu", "three/tsl"] : ["three"]
     });
     await Promise.all([
       addComponent({
         name: "TresCanvas",
-        filePath: resolver.resolve("./runtime/TresCanvas.client.vue")
+        filePath: resolver.resolve(isWebGPU ? "./runtime/TresCanvasWebGPU.client.vue" : "./runtime/TresCanvas.client.vue")
       }),
       addComponent({
         name: "TresCanvas",

package/dist/runtime/TresCanvasWebGPU.client.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/TresCanvasWebGPU.client.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { useAttrs } from "#imports";
+import { TresCanvas as CoreTresCanvas } from "@tresjs/core/webgpu";
+const attrs = useAttrs();
+</script>
+
+<template>
+  <CoreTresCanvas v-bind="attrs">
+    <slot />
+  </CoreTresCanvas>
+</template>

package/dist/runtime/TresCanvasWebGPU.client.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/TresCanvasWebGPU.vue.d.ts

@@ -0,0 +1,2 @@
+const _default: typeof import('@tresjs/core/webgpu')['TresCanvas']
+export default _default

package/dist/runtime/webgpuStub.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Stands in for a component that has no WebGPU version yet. Without it, auto-imports only
+ * give Vue's generic "Failed to resolve component" warning.
+ */
+export declare function createWebGPUStub(name: string, from: string): import("vue").DefineComponent<{}, never, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/webgpuStub.js

@@ -0,0 +1,11 @@
+import { defineComponent } from "vue";
+export function createWebGPUStub(name, from) {
+  return defineComponent({
+    name,
+    setup() {
+      throw new Error(
+        `[@tresjs/nuxt] \`${name}\` from ${from} is not available for WebGPU yet. Use it with \`tres: { renderer: 'webgl' }\`, or remove it from this scene.`
+      );
+    }
+  });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/nuxt",
   "type": "module",
-  "version": "5.7.3",
+  "version": "5.8.1",
   "description": "TresJS integration for Nuxt.",
   "author": "Daniel Roe (https://github.com/danielroe/)",
   "license": "MIT",
@@ -47,7 +47,7 @@
     "pkg-types": "^2.3.2",
     "sirv": "^3.0.2",
     "vite-plugin-glsl": "^1.6.1",
-    "@tresjs/core": "5.9.3"
+    "@tresjs/core": "5.10.1"
   },
   "devDependencies": {
     "@nuxt/devtools": "^3.2.4",
@@ -88,6 +88,27 @@
       "@nuxt/devtools-kit"
     ]
   },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/dist",
+          "{projectRoot}/.nuxt"
+        ]
+      },
+      "test:ci": {
+        "dependsOn": [
+          "^build",
+          {
+            "projects": [
+              "@tresjs/cientos"
+            ],
+            "target": "build"
+          }
+        ]
+      }
+    }
+  },
   "scripts": {
     "build": "pnpm run module:build && pnpm run client:build",
     "module:build": "nuxt-module-build prepare && nuxt-module-build build",
@@ -99,6 +120,7 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest run",
+    "test:ci": "vitest run",
     "test:watch": "vitest watch"
   }
 }

package/dist/client/_nuxt/builds/meta/15f8fab6-c2dd-4642-9ea9-0f83eba879d9.json

@@ -1 +0,0 @@
-{"id":"15f8fab6-c2dd-4642-9ea9-0f83eba879d9","timestamp":1791265567598,"prerendered":[]}