feat: remove tweakpane (#313)

BREAKING CHANGE: The tweakpane package has been removed in favor of @tresjs/leches package or v-tweakpane

package.json

@@ -53,7 +53,6 @@
   "peerDependencies": {
     "@tresjs/core": ">=3.2",
     "three": ">=0.133",
-    "tweakpane": ">=3.0.0",
     "vue": ">=3.3"
   },
   "dependencies": {
@@ -69,7 +68,7 @@
     "@release-it/conventional-changelog": "^8.0.1",
     "@tresjs/core": "^3.2.1",
     "@tresjs/eslint-config-vue": "^0.2.1",
-    "@tweakpane/core": "^1.1.9",
+
     "@types/node": "^20.10.0",
     "@types/three": "^0.159.0",
     "@typescript-eslint/eslint-plugin": "^6.13.0",
@@ -84,7 +83,6 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.3",
     "three": "^0.159.0",
-    "tweakpane": "^3.1.10",
     "typescript": "^5.3.2",
     "unocss": "^0.57.7",
     "vite": "^5.0.2",

playground/src/pages/abstractions/Sampler.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref, shallowReactive } from 'vue'
+import { ref } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, Sampler, useTweakPane } from '@tresjs/cientos'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/dist/style.css'
+import { OrbitControls, Sampler } from '@tresjs/cientos'
 import { SRGBColorSpace, ACESFilmicToneMapping } from 'three'
 import type { Mesh } from 'three'
 
@@ -16,17 +18,13 @@ const gl = {
 const torusRef = ref<Mesh>()
 const instancesRef = ref<Mesh>()
 
-const state = shallowReactive({
-  count: 1,
-})
-
-const { pane } = useTweakPane()
-
-pane.addInput(state, 'count', {
-  label: 'samplers',
-  min: 1,
-  max: 50,
-  step: 1,
+const { samples } = useControls({
+  samples: {
+    min: 1,
+    max: 50,
+    step: 1,
+    value: 1,
+  },
 })
 </script>
 
@@ -36,7 +34,7 @@ pane.addInput(state, 'count', {
     <TresPerspectiveCamera :position="[0, 0.5, 5]" />
     <OrbitControls />
 
-    <Sampler :count="state.count">
+    <Sampler :count="samples">
       <TresMesh ref="torusRef">
         <TresTorusGeometry />
       </TresMesh>

src/core/misc/index.ts

@@ -1,7 +1,5 @@
-import { useTweakPane } from './useTweakPane'
-
 import { Stats } from './Stats'
 import { StatsGl } from './StatsGl'
 import Html from './html/HTML.vue'
 
-export { useTweakPane, Html, Stats, StatsGl }
+export { Html, Stats, StatsGl }

vite.config.ts

@@ -5,7 +5,7 @@ import banner from 'vite-plugin-banner'
 import dts from 'vite-plugin-dts'
 import analyze from 'rollup-plugin-analyzer'
 
-/* import { visualizer } from 'rollup-plugin-visualizer' */
+import { visualizer } from 'rollup-plugin-visualizer'
 import { templateCompilerOptions } from '@tresjs/core'
 
 import { resolve } from 'pathe'
@@ -48,13 +48,13 @@ export default defineConfig({
     rollupOptions: {
       plugins: [
         analyze(),
-        /* visualizer({
+        visualizer({
           gzipSize: true,
           brotliSize: true,
           open: true,
-        }), */
+        }),
       ],
-      external: ['three', 'vue', '@tresjs/core', 'tweakpane', '@tweakpane/core', '@tweakpane/plugin-essentials'],
+      external: ['three', 'vue', '@tresjs/core'],
       output: {
         exports: 'named',
         // Provide global variables to use in the UMD build
@@ -68,6 +68,6 @@ export default defineConfig({
     },
   },
   optimizeDeps: {
-    exclude: ['three', 'vue', '@tresjs/core', 'tweakpane', '@tweakpane/core', '@tweakpane/plugin-essentials'],
+    exclude: ['three', 'vue', '@tresjs/core'],
   },
 })