Merge branch 'main' into v4

.github/workflows/actions/pnpm/action.yml

@@ -25,3 +25,8 @@ runs:
     - name: install dependencies
       run: pnpm install --shamefully-hoist
       shell: bash
+
+# Avoid running husky hooks on Github
+# http://typicode.github.io/husky/how-to.html
+env:
+  HUSKY: 0

.husky/install.mjs

@@ -0,0 +1,8 @@
+// Skip Husky install in production and CI
+// http://typicode.github.io/husky/how-to.html
+if (process.env.NODE_ENV === 'production' || process.env.CI === 'true') {
+  process.exit(0)
+}
+const husky = (await import('husky')).default
+// eslint-disable-next-line no-console
+console.log(husky())

.husky/pre-push

@@ -0,0 +1,25 @@
+# NOTE: Don't fail immediately after error
+# This allows us to echo messages even if the linter exits with an error.
+set +e  
+
+# NOTE: --silent to keep pnpm from echoing, e.g., "> @tresjs/core[...] lint" 
+# --max-warnings=0 to fail on errors *and* warnings
+pnpm --silent lint --max-warnings=0
+
+# NOTE: Capture linter exit status.
+LINT_STATUS=$?
+
+# NOTE: If linting failed, inform user how to proceed.
+if [[ $LINT_STATUS != 0 ]]; then
+  echo "
+To fix linter problems:
+  pnpm lint --fix  – fix automatically fixable problems
+  pnpm lint        – print a list of problems to fix by hand
+
+To skip this verification and push anyway (not recommended):
+  git push --no-verify <...>
+"
+fi
+
+# NOTE: +e was set, so we have to return an exit status.
+exit $LINT_STATUS

docs/.vitepress/theme/components/HomeSponsors.vue

@@ -14,7 +14,7 @@ const { data } = useSponsor()
   <div class="action">
     <a
       class="sponsor"
-      href="https://github.com/sponsors/vitejs"
+      href="https://github.com/sponsors/tresjs"
       target="_blank"
       rel="noreferrer"
     >

docs/api/instances-arguments-and-props.md

@@ -10,7 +10,7 @@ import { PerspectiveCamera } from 'three'
 const camera = new PerspectiveCamera(45, width / height, 1, 1000)
 ```
 
-With **Tres** you don't need to import anything, that's because **Tres** automatically generate a **Vue Component based of the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use a `PerspectiveCamera` you would use `<TresPerspectiveCamera />` component.
+With **Tres** you don't need to import anything, that's because **Tres** automatically generate a **Vue Component based of the Three Object you want to use in PascalCase with a Tres prefix**. For example, if you want to use a `PerspectiveCamera` you would use `<TresPerspectiveCamera />` component.
 
 ```vue
 <template>

docs/es/api/instances-arguments-and-props.md

@@ -10,7 +10,7 @@ import { PerspectiveCamera } from 'three'
 const camera = new PerspectiveCamera(45, width / height, 1, 1000)
 ```
 
-Con **Tres** no necesitas importar nada, esto se debe a que **Tres** genera automáticamente un **Componente Vue basado en el objeto Three que deseas usar en CamelCase con un prefijo Tres**. Por ejemplo, si quieres usar una `PerspectiveCamera`, puedes usar el componente `<TresPerspectiveCamera />`.
+Con **Tres** no necesitas importar nada, esto se debe a que **Tres** genera automáticamente un **Componente Vue basado en el objeto Three que deseas usar en PascalCase con un prefijo Tres**. Por ejemplo, si quieres usar una `PerspectiveCamera`, puedes usar el componente `<TresPerspectiveCamera />`.
 
 ```vue
 <template>

docs/es/guide/your-first-scene.md

@@ -140,7 +140,7 @@ Ahora veamos cómo podemos lograr lo mismo fácilmente con **TresJS**. Para hace
 ```
 
 ::: info
-Observa que no necesitamos importar nada, esto se debe a que **TresJS** genera automáticamente un **Componente Vue basado en el objeto Three que deseas usar en CamelCase con un prefijo Tres**. Por ejemplo, si quieres usar una `AmbientLight`, puedes usar el componente `<TresAmbientLight />`.
+Observa que no necesitamos importar nada, esto se debe a que **TresJS** genera automáticamente un **Componente Vue basado en el objeto Three que deseas usar en PascalCase con un prefijo Tres**. Por ejemplo, si quieres usar una `AmbientLight`, puedes usar el componente `<TresAmbientLight />`.
 :::
 
 ```vue

docs/fr/api/instances-arguments-and-props.md

@@ -10,7 +10,7 @@ import { PerspectiveCamera } from 'three'
 const camera = new PerspectiveCamera(45, width / height, 1, 1000)
 ```
 
-Avec **Tres**, vous n'avez pas besoin d'importer quoi que ce soit, car **Tres** génère automatiquement un composant **Vue basé sur l'objet Three que vous souhaitez utiliser dans CamelCase avec un préfixe Tres**. Par exemple, si vous souhaitez utiliser une `PerspectiveCamera`, vous pouvez utiliser le composant `<TresPerspectiveCamera />`.
+Avec **Tres**, vous n'avez pas besoin d'importer quoi que ce soit, car **Tres** génère automatiquement un composant **Vue basé sur l'objet Three que vous souhaitez utiliser dans PascalCase avec un préfixe Tres**. Par exemple, si vous souhaitez utiliser une `PerspectiveCamera`, vous pouvez utiliser le composant `<TresPerspectiveCamera />`.
 
 ```vue
 <template>

docs/fr/guide/your-first-scene.md

@@ -140,7 +140,7 @@ Maintenant, voyons à quel point il peux être simple de faire la même chose av
 ```
 
 ::: Info :
-Comme vous l'aurez surement constaté, nous n'avons rien besoin d'importer, car **TresJS** genère automatiquement un **composant Vue basé sur l'objet Three que vous souhaitez en CamelCase avec le préfixe Tres**. Par exemple, si vous voulez une `AmbientLight`, vous pouvez utiliser le composant `<TresAmbientLight />`.
+Comme vous l'aurez surement constaté, nous n'avons rien besoin d'importer, car **TresJS** genère automatiquement un **composant Vue basé sur l'objet Three que vous souhaitez en PascalCase avec le préfixe Tres**. Par exemple, si vous voulez une `AmbientLight`, vous pouvez utiliser le composant `<TresAmbientLight />`.
 :::
 
 ```vue

docs/guide/your-first-scene.md

@@ -140,7 +140,7 @@ Now let's see how we can easily achieve the same with **TresJS**. To do that we
 ```
 
 ::: info
-Notice that we don't need to import anything, that's because **TresJS** automatically generate a **Vue Component based on the three objects you want to use in CamelCase with a Tres prefix**. For example, if you want to use an `AmbientLight` you would use the `<TresAmbientLight />` component.
+Notice that we don't need to import anything, that's because **TresJS** automatically generate a **Vue Component based on the three objects you want to use in PascalCase with a Tres prefix**. For example, if you want to use an `AmbientLight` you would use the `<TresAmbientLight />` component.
 :::
 
 ```vue

docs/nl/api/instances-arguments-and-props.md

@@ -10,7 +10,7 @@ import { PerspectiveCamera } from 'three'
 const camera = new PerspectiveCamera(45, width / height, 1, 1000)
 ```
 
-Met **Tres** hoef je niets te importeren, omdat **Tres** automatisch een **Vue-component genereert op basis van de drie objecten die je in CamelCase wilt gebruiken met een Tres-voorvoegsel**. Als je bijvoorbeeld een `PerspectiveCamera` wilt gebruiken, gebruikt je de component '`<TresPerspectiveCamera />`.
+Met **Tres** hoef je niets te importeren, omdat **Tres** automatisch een **Vue-component genereert op basis van de drie objecten die je in PascalCase wilt gebruiken met een Tres-voorvoegsel**. Als je bijvoorbeeld een `PerspectiveCamera` wilt gebruiken, gebruikt je de component '`<TresPerspectiveCamera />`.
 
 ```vue
 <template>

docs/nl/guide/your-first-scene.md

@@ -139,7 +139,7 @@ Laten we nu eens kijken hoe we gemakkelijk hetzelfde kunnen bereiken met **TresJ
 ```
 
 ::: info
-Merk op dat we niets hoeven te importeren, omdat **TresJS** automatisch een **Vue-component genereert op basis van de drie objecten die u in CamelCase wilt gebruiken met een Tres-voorvoegsel**. Als u bijvoorbeeld een 'AmbientLight' wilt gebruiken, gebruikt u de component `<TresAmbientLight />`.
+Merk op dat we niets hoeven te importeren, omdat **TresJS** automatisch een **Vue-component genereert op basis van de drie objecten die u in PascalCase wilt gebruiken met een Tres-voorvoegsel**. Als u bijvoorbeeld een 'AmbientLight' wilt gebruiken, gebruikt u de component `<TresAmbientLight />`.
 :::
 
 ```vue

docs/zh/guide/your-first-scene.md

@@ -140,7 +140,7 @@ scene.add(donut)
 ```
 
 ::: info
-请注意，我们不需要导入任何东西，这是因为 **TresJS** 会为**您使用的 CamelCase 的带有 Tres 前缀的 Three 对象自动生成一个 Vue 组件**。例如，如果要使用 `<TresAmbientLight />` 组件。
+请注意，我们不需要导入任何东西，这是因为 **TresJS** 会为**您使用的 PascalCase 的带有 Tres 前缀的 Three 对象自动生成一个 Vue 组件**。例如，如果要使用 `<TresAmbientLight />` 组件。
 :::
 
 ```vue

package.json

@@ -59,7 +59,8 @@
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
     "docs:preview": "vitepress preview docs",
-    "docs:contributors": "esno scripts/update-contributors.ts"
+    "docs:contributors": "esno scripts/update-contributors.ts",
+    "prepare": "node .husky/install.mjs"
   },
   "peerDependencies": {
     "three": ">=0.133",
@@ -76,37 +77,39 @@
     "@tresjs/cientos": "3.8.0",
     "@tresjs/eslint-config": "^1.0.0",
     "@types/three": "^0.163.0",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitest/coverage-c8": "^0.33.0",
-    "@vitest/ui": "^1.4.0",
+
+    "@vitest/ui": "^1.5.0",
     "@vue/test-utils": "^2.4.5",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.24.0",
     "esno": "^4.7.0",
     "gsap": "^3.12.5",
+    "husky": "^9.0.11",
     "jsdom": "^24.0.0",
     "kolorist": "^1.8.0",
     "ohmyfetch": "^0.4.21",
     "pathe": "^1.1.2",
-    "release-it": "^17.1.1",
+    "release-it": "^17.2.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "three": "^0.163.0",
-    "unocss": "^0.58.7",
-    "unplugin": "^1.10.0",
+    "unocss": "^0.59.3",
+    "unplugin": "^1.10.1",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.2.7",
+    "vite": "^5.2.9",
     "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-dts": "3.8.1",
+    "vite-plugin-dts": "3.8.3",
     "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-require-transform": "^1.0.21",
     "vite-svg-loader": "^5.1.0",
-    "vitepress": "1.0.2",
-    "vitest": "^1.0.4",
-    "vue": "^3.4.21",
+    "vitepress": "1.1.0",
+    "vitest": "^1.5.0",
+    "vue": "^3.4.22",
     "vue-demi": "^0.14.7"
   }
 }