feat: export vue compiler options for Tres custom renderer (#324)

* feat: export vue compiler options for Tres custom renderer * docs: added vite config vue compiler options * docs: Update docs/guide/index.md Co-authored-by: Tino Koch <[email protected]> --------- Co-authored-by: Tino Koch <[email protected]>
Tresjs · Jun 28, 2023 · 66716d5 · 66716d5
1 parent 9cc63d2
commit 66716d5
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 61 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,7 +11,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "scss.lint.unknownAtRules": "ignore",
   "css.lint.unknownAtRules": "ignore",

diff --git a/docs/guide/index.md b/docs/guide/index.md
@@ -41,6 +41,25 @@ pnpm add @types/three -D
 ```
 :::
 
+## Vite
+
+If you are using Vite, you have add the following to your `vite.config.ts`:
+
+```ts
+import { templateCompilerOptions } from '@tresjs/core'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      // Other config
+      ...templateCompilerOptions
+    }),
+  ],
+}),
+```
+
+This is required to make the template compiler work with the custom renderer and not throw warnings on the console. For more info check [here](/guide/troubleshooting.html).
+
 ## Try it online
 
 We have a brand new [StackBlitz](https://stackblitz.com/) starter to try TresJS online. Check it out:

diff --git a/docs/guide/troubleshooting.md b/docs/guide/troubleshooting.md
@@ -63,15 +63,13 @@ Got to your `vite.config.ts` and add the following configuration to the `@vitejs
 ```ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { templateCompilerOptions } from '@tresjs/core'
 
 export default defineConfig({
   plugins: [
     vue({
-      template: {
-        compilerOptions: {
-          isCustomElement: tag => (tag.startsWith('Tres') && tag !== 'TresCanvas') || tag === 'primitive',
-        },
-      },
+      // Other config
+      ...templateCompilerOptions,
     }),
   ],
 })

diff --git a/package.json b/package.json
@@ -102,7 +102,7 @@
     "vite-plugin-inspect": "^0.7.29",
     "vite-plugin-require-transform": "^1.0.17",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.2",
+    "vitepress": "1.0.0-beta.3",
     "vitest": "^0.32.2",
     "vue": "^3.3.4",
     "vue-demi": "^0.14.5"

diff --git a/playground/.eslintrc-auto-import.json b/playground/.eslintrc-auto-import.json
@@ -60,4 +60,4 @@
     "watchSyncEffect": true,
     "toValue": true
   }
-}
+}
diff --git a/playground/components.d.ts b/playground/components.d.ts
@@ -3,11 +3,9 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     AnimatedModel: typeof import('./src/components/AnimatedModel.vue')['default']
     Cameras: typeof import('./src/components/Cameras.vue')['default']

diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -5,21 +5,13 @@ import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import glsl from 'vite-plugin-glsl'
 import UnoCSS from 'unocss/vite'
+import { templateCompilerOptions } from '@tresjs/core'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     glsl(),
-    vue({
-      script: {
-        propsDestructure: true,
-      },
-      template: {
-        compilerOptions: {
-          isCustomElement: tag => (tag.startsWith('Tres') && tag !== 'TresCanvas' && tag !== 'TresLeches') || tag === 'primitive',
-        },
-      },
-    }),
+    vue(templateCompilerOptions),
     AutoImport({
       dts: true,
       eslintrc: {