lint fixes

docs/.vitepress/config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vitepress'
-import { resolve } from 'pathe'
 import { templateCompilerOptions } from '@tresjs/core'
+import { resolve } from 'pathe'
+import { defineConfig } from 'vitepress'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({

docs/.vitepress/theme/components/BloomDemo.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Color } from 'three'
-import { reactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
-import { BlendFunction } from 'postprocessing'
 import { Bloom, EffectComposer } from '@tresjs/post-processing'
+import { BlendFunction } from 'postprocessing'
+import { Color } from 'three'
+import { reactive } from 'vue'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/components/DepthOfFieldDemo.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { gsap } from 'gsap'
 import { TresCanvas } from '@tresjs/core'
 import { DepthOfField, EffectComposer } from '@tresjs/post-processing'
+import { gsap } from 'gsap'
+import { ref } from 'vue'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/components/GlitchDemo.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Color } from 'three'
-import { TresCanvas } from '@tresjs/core'
 import { Text3D } from '@tresjs/cientos'
-
+import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, Glitch } from '@tresjs/post-processing'
 
+import { Color } from 'three'
+
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
 const gl = {

docs/.vitepress/theme/components/LoveVueThreeJS.vue

@@ -2,9 +2,9 @@
 /// <reference types="vite-svg-loader" />
 import { gsap } from 'gsap'
 import { onMounted, ref } from 'vue'
-import Triangle from '../assets/triangle.svg'
 import SecondRow from '../assets/second-row.svg'
 import ThirdRow from '../assets/third-row.svg'
+import Triangle from '../assets/triangle.svg'
 
 const triangleRef = ref()
 const secondRowRef = ref()

docs/.vitepress/theme/components/NoiseDemo.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { EffectComposer, Noise } from '@tresjs/post-processing'
-import { OrbitControls } from '@tresjs/cientos'
 import { BlendFunction } from 'postprocessing'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/components/OutlineDemo.vue

@@ -1,17 +1,17 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import type { Intersection, Object3D } from 'three'
-import { NoToneMapping } from 'three'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
 import { EffectComposer, Outline } from '@tresjs/post-processing'
 import { KernelSize } from 'postprocessing'
+import { NoToneMapping } from 'three'
+import { ref } from 'vue'
 
-import { TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/styles'
-
+import type { Intersection, Object3D } from 'three'
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 
+import '@tresjs/leches/styles'
+
 const gl = {
   clearColor: '#121212',
   toneMapping: NoToneMapping,

docs/.vitepress/theme/components/PixelationDemo.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, Pixelation } from '@tresjs/post-processing'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'

docs/.vitepress/theme/components/VignetteDemo.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 
 import { useRouteDisposal } from '../composables/useRouteDisposal'
 

docs/.vitepress/theme/composables/useRouteDisposal.ts

@@ -1,5 +1,5 @@
-import { ref, watch } from 'vue'
 import { useRouter } from 'vitepress'
+import { ref, watch } from 'vue'
 import type { EffectComposer } from '@tresjs/post-processing'
 
 export function useRouteDisposal() {

docs/.vitepress/theme/index.ts

@@ -1,9 +1,9 @@
 // https://vitepress.dev/guide/custom-theme
-import 'uno.css'
 import Theme from 'vitepress/theme'
+import TresLayout from './TresLayout.vue'
 import './style.css'
 
-import TresLayout from './TresLayout.vue'
+import 'uno.css'
 
 export default {
   ...Theme,

docs/guide/effects/noise.md

@@ -10,9 +10,9 @@ Noise is an effect that adds Gaussian noise to the scene. This can be used to si
 
 ```vue
 <script setup lang="ts">
-import { BlendFunction } from 'postprocessing'
-
 import { Bloom, EffectComposer } from '@tresjs/post-processing'
+
+import { BlendFunction } from 'postprocessing'
 </script>
 
 <template>

docs/vite.config.ts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'vite'
+import { templateCompilerOptions } from '@tresjs/core'
 import Unocss from 'unocss/vite'
-import svgLoader from 'vite-svg-loader'
 import Components from 'unplugin-vue-components/vite'
-import { templateCompilerOptions } from '@tresjs/core'
+import { defineConfig } from 'vite'
+import svgLoader from 'vite-svg-loader'
 
 export default defineConfig({
   plugins: [

eslint.config.js

@@ -4,6 +4,13 @@ export default tresLintConfig({
   ignores: ['dist', 'node_modules', 'public', '.github', 'docs/blog'],
 }, {
   rules: {
+    'perfectionist/sort-named-exports': [
+      'error',
+      {
+        type: 'line-length',
+        order: 'asc',
+      },
+    ],
     'style/max-statements-per-line': 'off',
     'jsdoc/check-alignment': 'off',
     'vue/valid-template-root': 'off',

playground-nuxt/pages/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Bloom, EffectComposer } from '@tresjs/post-processing'
 import { BlendFunction } from 'postprocessing'
 import { BasicShadowMap, Color, NoToneMapping, SRGBColorSpace } from 'three'
 import { reactive } from 'vue'
-import { Bloom, EffectComposer } from '@tresjs/post-processing'
 
 const gl = {
   clearColor: '#82DBC5',

playground/src/components/BasicScene.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { EffectComposerThree, PixelationThree } from '@tresjs/post-processing'
+import { EffectComposerThree } from '@tresjs/post-processing'
 
 defineProps<{
   wireframe?: boolean

playground/src/components/GraphPane.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { useRafFn } from '@vueuse/core'
+import { ref } from 'vue'
 import { useState } from '../composables/state'
 
 const width = 160

playground/src/components/OutlineDemo.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls, useTweakPane } from '@tresjs/cientos'
-import { reactive, ref } from 'vue'
+import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, Outline } from '@tresjs/post-processing'
-import type { Intersection, Object3D } from 'three'
 import { BasicShadowMap, NoToneMapping } from 'three'
+import { reactive, ref } from 'vue'
+import type { Intersection, Object3D } from 'three'
 
 const gl = {
   alpha: false,

playground/src/pages/postprocessing/bloom.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { BasicShadowMap, Color, NoToneMapping } from 'three'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
-import { BlendFunction, KernelSize } from 'postprocessing'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
 import { Bloom, EffectComposer } from '@tresjs/post-processing'
+import { BlendFunction, KernelSize } from 'postprocessing'
+import { BasicShadowMap, Color, NoToneMapping } from 'three'
 import { onMounted, ref, watch } from 'vue'
-import { TresLeches, useControls } from '@tresjs/leches'
 import '@tresjs/leches/styles'
 
 const gl = {

playground/src/pages/postprocessing/depth-of-field.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
-import { DepthOfField, EffectComposer } from '@tresjs/post-processing'
-
+import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/styles'
+import { DepthOfField, EffectComposer } from '@tresjs/post-processing'
 
+import { computed } from 'vue'
 import type { Ref } from 'vue'
 
+import '@tresjs/leches/styles'
+
 useControls('fpsgraph')
 const controls = useControls({
   focusDistance: {

playground/src/pages/postprocessing/glitch.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
 import { EffectComposer, Glitch } from '@tresjs/post-processing'
-import { BasicShadowMap, NoToneMapping, Vector2 } from 'three'
 import { GlitchMode } from 'postprocessing'
-import { TresLeches, useControls } from '@tresjs/leches'
+import { BasicShadowMap, NoToneMapping, Vector2 } from 'three'
 import '@tresjs/leches/styles'
 
 const gl = {

playground/src/pages/postprocessing/noise.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-import { EffectComposer, Noise } from '@tresjs/post-processing'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
+import { EffectComposer, Noise } from '@tresjs/post-processing'
 import { BlendFunction } from 'postprocessing'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import '@tresjs/leches/styles'
 
 const gl = {

playground/src/pages/postprocessing/on-demand.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, Pixelation } from '@tresjs/post-processing'
 import { ref } from 'vue'
 import GraphPane from '../../components/GraphPane.vue'

playground/src/pages/postprocessing/pixelation.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
-import { EffectComposer, Pixelation } from '@tresjs/post-processing'
+import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
+import { EffectComposer, Pixelation } from '@tresjs/post-processing'
 import '@tresjs/leches/styles'
 
 useControls('fpsgraph')

playground/src/pages/postprocessing/vignette.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { TresCanvas } from '@tresjs/core'
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
-import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing'
+import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
+import { DepthOfField, EffectComposer, Vignette } from '@tresjs/post-processing'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
 import BlenderCube from '../components/BlenderCube.vue'
 import '@tresjs/leches/styles'
 

playground/src/pages/three/unreal-bloom.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { OutputThree, UnrealBloomThree } from '@tresjs/post-processing'
+import { UnrealBloomThree } from '@tresjs/post-processing'
 import { ref } from 'vue'
 import BasicScene from '../../components/BasicScene.vue'
 

playground/src/router.ts

@@ -1,5 +1,5 @@
-import type { RouteRecordRaw } from 'vue-router'
 import { createRouter, createWebHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 import { kebabCase } from './util/string'
 
 const makeRoute = (name: string, icon: string, isThreeEffect: boolean = true): RouteRecordRaw => {

playground/vite.config.ts

@@ -1,10 +1,10 @@
-import { defineConfig } from 'vite'
+import { templateCompilerOptions } from '@tresjs/core'
 import vue from '@vitejs/plugin-vue'
-import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
 import { resolve } from 'pathe'
 import UnoCSS from 'unocss/vite'
-import { templateCompilerOptions } from '@tresjs/core'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { defineConfig } from 'vite'
 import { qrcode } from 'vite-plugin-qrcode'
 
 // https://vitejs.dev/config/

src/core/composables/effect.ts

@@ -1,7 +1,7 @@
-import type { Effect } from 'postprocessing'
+import { useTresContext } from '@tresjs/core'
 import { EffectPass } from 'postprocessing'
 import { inject, onUnmounted, shallowRef, watchEffect } from 'vue'
-import { useTresContext } from '@tresjs/core'
+import type { Effect } from 'postprocessing'
 import { effectComposerInjectionKey } from '../EffectComposer.vue'
 
 export const useEffect = <T extends Effect>(newEffectFunction: () => T) => {

src/core/composables/useEffectThree.ts

@@ -1,6 +1,6 @@
-import type { Pass } from 'three/examples/jsm/postprocessing/Pass.js'
-import { inject, onUnmounted, shallowRef, watchEffect } from 'vue'
 import { useTresContext } from '@tresjs/core'
+import { inject, onUnmounted, shallowRef, watchEffect } from 'vue'
+import type { Pass } from 'three/examples/jsm/postprocessing/Pass.js'
 import { effectComposerInjectionKey } from '../three/EffectComposer.vue'
 
 export const useEffectThree = <T extends Pass>(newPassFunction: () => T) => {

src/core/postprocessing/Bloom.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { BloomEffect } from 'postprocessing'
 import type { BlendFunction, KernelSize } from 'postprocessing'
-import { useEffect } from '../composables/effect'
 import { makePropWatchers } from '../../util/prop'
+import { useEffect } from '../composables/effect'
 
 export interface BloomProps {
   /**

src/core/postprocessing/DepthOfField.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { BlendFunction } from 'postprocessing'
 import { useTresContext } from '@tresjs/core'
 import { DepthOfFieldEffect } from 'postprocessing'
+import type { BlendFunction } from 'postprocessing'
 import { makePropWatchers } from '../../util/prop'
 import { useEffect } from '../composables/effect'
 

src/core/postprocessing/Glitch.vue

@@ -4,8 +4,8 @@ import { watchEffect } from 'vue'
 import type { BlendFunction } from 'postprocessing'
 import type { Texture, Vector2 } from 'three'
 import { omit } from '../../util/object'
-import { useEffect } from '../composables/effect'
 import { makePropWatchersUsingAllProps } from '../../util/prop'
+import { useEffect } from '../composables/effect'
 
 export interface GlitchProps {
   blendFunction?: BlendFunction

src/core/postprocessing/Noise.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { BlendFunction, NoiseEffect } from 'postprocessing'
-import { useEffect } from '../composables/effect'
-import { makePropWatchersUsingAllProps } from '../../util/prop'
 import { omit } from '../../util/object'
+import { makePropWatchersUsingAllProps } from '../../util/prop'
+import { useEffect } from '../composables/effect'
 
 export interface NoiseProps {
   /**