docs: extending catalogue

docs/.vitepress/theme/index.ts

@@ -8,8 +8,11 @@ import StackBlitzEmbed from './components/StackBlitzEmbed.vue'
 export default {
   ...DefaultTheme,
   enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
     ctx.app.component('FirstScene', FirstScene)
     ctx.app.component('StackBlitzEmbed', StackBlitzEmbed)
     ctx.app.use(Tres)
+
+    console.log(ctx)
   },
 }

docs/advanced/extending.md

@@ -28,3 +28,34 @@ This will automatically add a `<TresOrbitControls>` to the catalogue, so you can
   </TresCanvas>
 </template>
 ```
+
+## Extending an element dynamically <Badge type="tip" text="^1.1.0" />
+
+Or you can also add it dynamically in your components:
+
+```vue{2,3,5,8,17,19}
+<script setup lang="ts">
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
+
+const { extend } = useCatalogue()
+
+// Add the element to the catalogue
+extend({ TextGeometry, OrbitControls })
+
+/* Rest of the code */
+</script>
+
+<template>
+  <TresCanvas shadows alpha>
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+    <TresScene>
+      <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
+      <TresMesh>
+        <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
+        <TresMeshMatcapMaterial :matcap="matcapTexture" />
+      </TresMesh>
+    </TresScene>
+  </TresCanvas>
+</template>
+```

package.json

@@ -55,7 +55,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^9.7.0",
     "prettier": "^2.7.1",
-    "vitepress": "1.0.0-alpha.26",
+    "vitepress": "1.0.0-alpha.29",
     "vue": "^3.2.41",
     "vue-eslint-parser": "^9.1.0"
   }

pnpm-lock.yaml

@@ -17,7 +17,7 @@ importers:
       eslint-config-prettier: ^8.5.0
       eslint-plugin-vue: ^9.7.0
       prettier: ^2.7.1
-      vitepress: 1.0.0-alpha.26
+      vitepress: 1.0.0-alpha.29
       vue: ^3.2.41
       vue-eslint-parser: ^9.1.0
     devDependencies:
@@ -34,7 +34,7 @@ importers:
       eslint-config-prettier: 8.5.0_eslint@8.28.0
       eslint-plugin-vue: 9.8.0_eslint@8.28.0
       prettier: 2.8.0
-      vitepress: 1.0.0-alpha.26
+      vitepress: 1.0.0-alpha.29
       vue: 3.2.45
       vue-eslint-parser: 9.1.0_eslint@8.28.0
 
@@ -2168,8 +2168,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
-      is-text-path: 1.0.1
       JSONStream: 1.3.5
+      is-text-path: 1.0.1
       lodash: 4.17.21
       meow: 8.1.2
       split2: 3.2.2
@@ -5184,14 +5184,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /shiki-processor/0.1.1_shiki@0.11.1:
-    resolution: {integrity: sha512-K2v/JNHdMRGFnbcVqAgvPU8qmZNgtiBrYcYKe3O6Lx2W0RoyiwzrrpCUU917b2r2EMS+2FNgRIgz9xvtmF/L7w==}
-    peerDependencies:
-      shiki: ^0.11.1
-    dependencies:
-      shiki: 0.11.1
-    dev: true
-
   /shiki/0.10.1:
     resolution: {integrity: sha512-VsY7QJVzU51j5o1+DguUd+6vmCmZ5v/6gYu4vyYAhzjuNQU6P/vmSy4uQaOhvje031qQMiW0d2BwgMH52vqMng==}
     dependencies:
@@ -6065,8 +6057,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitepress/1.0.0-alpha.26:
-    resolution: {integrity: sha512-XpDpflrdmyBmUQrg06q29Mhez144NvoZ48pRvNhANy/wV7E7XJ1zenQROOSADnOsAlhV1gzcNjqiFNObCk7l8A==}
+  /vitepress/1.0.0-alpha.29:
+    resolution: {integrity: sha512-oaRaeMLcN9M3Bxz97fFVF6Gzm3Aqtb0CijTt5TOW0XPzNPuKA0YpFnsmS97gdKmA+VztM6itRJ8K7JJuU0VS3g==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.3.0
@@ -6076,7 +6068,6 @@ packages:
       '@vueuse/core': 9.6.0_vue@3.2.45
       body-scroll-lock: 4.0.0-beta.0
       shiki: 0.11.1
-      shiki-processor: 0.1.1_shiki@0.11.1
       vite: 3.2.4
       vue: 3.2.45
     transitivePeerDependencies: