add vanilla export files

.changeset/lemon-walls-promise.md

@@ -0,0 +1,5 @@
+---
+"three-inspect": patch
+---
+
+Fix exports for vanilla projects

CHANGELOG.md

@@ -25,10 +25,10 @@
   Adding the inspector for Vanilla environments has changed:
 
   ```ts
-  import { createInspector } from "three-inspect";
+  import { createInspector } from 'three-inspect'
 
-  const inspector = createInspector({ scene, camera, renderer });
+  const inspector = createInspector({ scene, camera, renderer })
 
   // When you're finished with the inspector...
-  inspector.dispose();
+  inspector.dispose()
   ```

package.json

@@ -35,7 +35,7 @@
 		"start": "vite --host --open",
 		"build": "vite build && npm run package",
 		"package": "svelte-kit sync && svelte-package && npm run package:vanilla && publint",
-		"package:vanilla": "vite build --config vite.lib.config.ts",
+		"package:vanilla": "vite build --config vite.lib.config.ts && tsc --project tsconfig.lib.json --emitDeclarationOnly",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:format": "prettier --check .",
@@ -89,4 +89,4 @@
 		"vite-plugin-glsl": "^1.2.1"
 	},
 	"svelte": "./dist/index.js"
-}
+}

src/app.css

@@ -1,5 +1,6 @@
-body, html {
-  height: 100vh;
-  margin: 0;
-  font-family: system-ui;
+body,
+html {
+	height: 100vh;
+	margin: 0;
+	font-family: system-ui;
 }

src/lib/components/Bindings/Bindings.svelte

@@ -67,31 +67,27 @@
 	>
 		<Camera {object} />
 	</Folder>
-
 {:else if 'isScene' in object}
 	<Folder
 		title="Scene"
 		expanded={false}
 	>
 		<Scene {object} />
 	</Folder>
-
 {:else if 'isDirectionalLight' in object || 'isPointLight' in object || 'isSpotLight' in object || 'isHemisphereLight' in object || 'isRectAreaLight' in object}
 	<Folder
 		title="Light"
 		expanded={false}
 	>
 		<Light {object} />
 	</Folder>
-
 {:else if 'material' in object && object.material instanceof THREE.Material}
 	<Folder
 		title="Material"
 		expanded={false}
 	>
 		<Material object={object.material} />
 	</Folder>
-
 {/if}
 
 <Folder

src/lib/components/Bindings/Camera.svelte

@@ -27,7 +27,6 @@
 			label={key}
 		/>
 	{/each}
-
 {:else if 'isOrthographicCamera' in object}
 	{#each orthographicKeys as key (key)}
 		<Binding

src/lib/components/Bindings/Light.svelte

@@ -4,7 +4,12 @@
 	import Color from './Color.svelte'
 	import Shadow from './Shadow.svelte'
 
-	export let object: THREE.DirectionalLight | THREE.PointLight | THREE.SpotLight | THREE.HemisphereLight | THREE.RectAreaLight
+	export let object:
+		| THREE.DirectionalLight
+		| THREE.PointLight
+		| THREE.SpotLight
+		| THREE.HemisphereLight
+		| THREE.RectAreaLight
 </script>
 
 <Color

src/lib/components/Internal/AxesHelper.svelte

@@ -1,51 +1,51 @@
-<script lang='ts'>
-  import * as THREE from 'three'
-  import { T } from '@threlte/core'
-  import { Line2 } from 'three/examples/jsm/lines/Line2'
-  import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
-  import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
+<script lang="ts">
+	import * as THREE from 'three'
+	import { T } from '@threlte/core'
+	import { Line2 } from 'three/examples/jsm/lines/Line2'
+	import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
+	import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
 
-  export let length = 1
-  export let width = 0.2
-  export let colors = ['red', 'green', 'blue']
+	export let length = 1
+	export let width = 0.2
+	export let colors = ['red', 'green', 'blue']
 
-  const lineGeometry = new LineGeometry()
-  const lineMaterial = new LineMaterial({
-    alphaToCoverage: true,
-    linewidth: width / 100,
-    vertexColors: true,
-  })
-  const line2 = new Line2(lineGeometry, lineMaterial)
-  const color = new THREE.Color()
+	const lineGeometry = new LineGeometry()
+	const lineMaterial = new LineMaterial({
+		alphaToCoverage: true,
+		linewidth: width / 100,
+		vertexColors: true,
+	})
+	const line2 = new Line2(lineGeometry, lineMaterial)
+	const color = new THREE.Color()
 
-  $: {
-    const positions = new Float32Array(27)
-    positions[3] = length
-    positions[13] = length
-    positions[23] = length
-    lineGeometry.setPositions(positions)
-    line2.computeLineDistances()
-  }
+	$: {
+		const positions = new Float32Array(27)
+		positions[3] = length
+		positions[13] = length
+		positions[23] = length
+		lineGeometry.setPositions(positions)
+		line2.computeLineDistances()
+	}
 
-  $: {
-    lineMaterial.linewidth = width / 100
-  }
+	$: {
+		lineMaterial.linewidth = width / 100
+	}
 
-  $: {
-    const colorArray = new Float32Array(27)
-    colors.forEach((axis, i) => {
-      color.set(axis)
-      for (let j = i * 9; j < (i * 9) + 9; j += 3) {
-        colorArray[j + 0] = color.r
-        colorArray[j + 1] = color.g
-        colorArray[j + 2] = color.b
-      }
-    })
-    lineGeometry.setColors(colorArray)
-  }
+	$: {
+		const colorArray = new Float32Array(27)
+		colors.forEach((axis, i) => {
+			color.set(axis)
+			for (let j = i * 9; j < i * 9 + 9; j += 3) {
+				colorArray[j + 0] = color.r
+				colorArray[j + 1] = color.g
+				colorArray[j + 2] = color.b
+			}
+		})
+		lineGeometry.setColors(colorArray)
+	}
 </script>
 
 <T is={line2}>
-  <T is={lineGeometry} />
-  <T is={lineMaterial} />
+	<T is={lineGeometry} />
+	<T is={lineMaterial} />
 </T>

src/lib/components/Internal/Tooltip.svelte

@@ -47,7 +47,7 @@
 </script>
 
 <div
-	role='tooltip'
+	role="tooltip"
 	bind:this={ref}
 	on:mouseenter={showTooltip}
 	on:mouseleave={hideTooltip}

src/lib/components/Positions/Inline.svelte

@@ -42,7 +42,7 @@
 		size={20}
 	>
 		<TabGroup theme={ThemeUtils.presets[$theme]}>
-			<TabPage title='inspector'>
+			<TabPage title="inspector">
 				<Element>
 					<Tools />
 				</Element>
@@ -60,7 +60,6 @@
 
 			<slot />
 		</TabGroup>
-
 	</SplitPane>
 
 	<SplitPane minSize={10}>
@@ -81,7 +80,7 @@
 				theme={ThemeUtils.presets[$theme]}
 			>
 				{#key object}
-					<Bindings object={object} />
+					<Bindings {object} />
 				{/key}
 			</Pane>
 		{/if}

src/lib/components/Tools/Raycast.svelte

@@ -5,7 +5,6 @@
 	import { getInternalContext } from '../../internal/context'
 	import { intersectObjects } from '../../internal/raycast'
 
-
 	const { renderer, camera } = useThrelte()
 	const { selectedObject } = getInternalContext()
 	const down = new THREE.Vector2()
@@ -35,7 +34,7 @@
 		while (hit?.object.userData.threeInspectSkipRaycast) {
 			hit = hits.shift()
 		}
-	
+
 		selectedObject.set(hit?.object)
 	}
 

src/lib/components/Tools/TransformControls.svelte

@@ -39,8 +39,12 @@
 	let controls: THREE.Object3D
 	let group: THREE.Group
 
-	$: controls?.traverse((node) => { node.userData.threeInspectSkipRaycast = true })
-	$: group?.traverse((node) => { node.userData.threeInspectSkipRaycast = true })
+	$: controls?.traverse((node) => {
+		node.userData.threeInspectSkipRaycast = true
+	})
+	$: group?.traverse((node) => {
+		node.userData.threeInspectSkipRaycast = true
+	})
 
 	// Prevent controls from being shown in the Treeview
 	$: if (controls && group) {

src/lib/components/Tree/Tree.svelte

@@ -31,10 +31,10 @@
 
 	const deregister = (object3D: THREE.Object3D) => {
 		object3D.traverse((child) => {
-      if (object3D !== child) {
-        deregister(child)
-      }
-    })
+			if (object3D !== child) {
+				deregister(child)
+			}
+		})
 
 		const item = objectToTreeItem.get(object3D)
 		objectToTreeItem.delete(object3D)
@@ -52,7 +52,7 @@
 
 	const orphaned = new Map()
 
-  let observeChanges = true
+	let observeChanges = true
 
 	const register = (object3D: THREE.Object3D) => {
 		const { parent } = object3D
@@ -84,12 +84,12 @@
 	}
 
 	const handleSelect = async (item: TreeViewItem) => {
-    if (!observeChanges) return
+		if (!observeChanges) return
 		selectedObject.set(treeItemToObject.get(item))
 	}
 
 	treeview.on('deselect', () => {
-    if (!observeChanges) return
+		if (!observeChanges) return
 		selectedObject.set(undefined)
 	})
 
@@ -107,27 +107,27 @@
 		register(child)
 	}
 
-  watch(selectedObject, (object) => {
+	watch(selectedObject, (object) => {
 		observeChanges = false
 
-    if (object) {
-      const treeitem = objectToTreeItem.get(object)
+		if (object) {
+			const treeitem = objectToTreeItem.get(object)
 
-      if (treeitem) treeitem.selected = true
+			if (treeitem) treeitem.selected = true
 			observeChanges = true
 
-      return () => {
-        if (treeitem) {
+			return () => {
+				if (treeitem) {
 					observeChanges = false
 					treeitem.selected = false
 					observeChanges = true
 				}
-      }
-    }
+			}
+		}
 
 		observeChanges = true
 		return () => {}
-  })
+	})
 
 	onMount(() => {
 		element.replaceWith(treeview.wc)

src/lib/internal/raycast.ts

@@ -2,4 +2,3 @@ import type * as THREE from 'three'
 
 export const intersectObjects: THREE.Object3D[] = []
 export const skipRaycastIds = new Set<string>()
-

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-  import '../app.css'
+	import '../app.css'
 </script>
 
 <slot />

src/routes/test3/Scene.svelte

@@ -17,7 +17,7 @@
 	let sway = 0.2
 </script>
 
-<Inspector position='draggable'>
+<Inspector position="draggable">
 	<TabPage title="world">
 		<Slider
 			bind:value={rotationSpeed}

svelte.config.js

@@ -6,9 +6,9 @@ const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
-	
+
 	ssr: {
-		noExternal: ['three']
+		noExternal: ['three'],
 	},
 
 	kit: {