Merge pull request #12 from threlte/types

Add type export

.changeset/real-mugs-whisper.md

@@ -0,0 +1,5 @@
+---
+'@threlte/test': patch
+---
+
+Add type export

.github/workflows/pullrequest.yml

@@ -23,3 +23,21 @@ jobs:
 
       - name: Prettier 💅
         run: npm run prettier
+
+  unit-test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install 🔧
+        run: npm ci
+
+      - name: Test 🔬
+        run: npm run test

package.json

@@ -13,7 +13,7 @@
 		"prettier": "prettier --check .",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"test": "vitest",
+		"test": "vitest run",
 		"test:watch": "vitest --watch",
 		"release": "changeset publish"
 	},

src/lib/index.d.ts

@@ -1 +1,55 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as Svelte from 'svelte'
+import * as THREE from 'three'
+import type { ThrelteContext } from '@threlte/core'
+import type { IntersectionEvent } from '@threlte/extras'
+
 export { act, cleanup, render } from './pure'
+
+type ThrelteEvents =
+	| 'click'
+	| 'contextmenu'
+	| 'dblclick'
+	| 'wheel'
+	| 'pointerup'
+	| 'pointerdown'
+	| 'pointerover'
+	| 'pointerout'
+	| 'pointerenter'
+	| 'pointerleave'
+	| 'pointermove'
+	| 'pointermissed'
+
+export function act(fn?: (() => Promise<void>) | (() => void)): Promise<void>
+
+export function cleanup(): void
+
+export function render(
+	component: typeof Svelte.SvelteComponent<any, any, any>,
+	componentOptions?: { target: HTMLElement } & Record<string, unknown>,
+	renderOptions?: {
+		baseElement?: HTMLElement
+		canvas?: HTMLCanvasElement
+		userSize?: { width: number; height: number }
+	}
+): {
+	baseElement: HTMLElement
+	camera: THREE.PerspectiveCamera | THREE.OrthographicCamera
+	component: Svelte.SvelteComponent<any, any, any>
+	container: HTMLElement
+	context: ThrelteContext
+	scene: THREE.Scene
+
+	advance: (options?: { count?: number; delta?: number }) => void
+
+	fireEvent(
+		object3D: THREE.Object3D,
+		event: ThrelteEvents,
+		payload: IntersectionEvent<ThrelteEvents>
+	): Promise<void>
+
+	rerender(props: Record<string, unknown>): Promise<void>
+
+	unmount(): void
+}

src/routes/Scene.svelte

@@ -2,6 +2,7 @@
 	import type { Mesh } from 'three'
 	import { T, useTask } from '@threlte/core'
 
+	export let positionX = 0
 	export let onClick: (() => void) | undefined = undefined
 
 	let ref: Mesh
@@ -21,7 +22,7 @@
 <T.DirectionalLight />
 <T.AmbientLight />
 
-<T.Mesh bind:ref on:click={onClick}>
+<T.Mesh bind:ref on:click={onClick} position.x={positionX}>
 	<T.MeshStandardMaterial />
 	<T.BoxGeometry />
 </T.Mesh>

src/routes/__tests__/Scene.spec.ts

@@ -21,6 +21,17 @@ describe('Scene', () => {
 		expect(mesh.geometry).toBeInstanceOf(BoxGeometry)
 	})
 
+	it('updates position', async () => {
+		const { scene, rerender } = render(Scene, { positionX: 1 })
+
+		const mesh = scene.getObjectByProperty('isMesh', true) as Mesh
+		expect(mesh.position.x).toBe(1)
+
+		await rerender({ positionX: 2 })
+
+		expect(mesh.position.x).toBe(2)
+	})
+
 	it('creates a default perspective camera at position [1, 1, 1]', () => {
 		const { camera } = render(Scene)
 

vite.config.ts

@@ -1,31 +1,20 @@
 import { defineConfig } from 'vite'
 import { sveltekit } from '@sveltejs/kit/vite'
+import { threlteTesting } from './src/lib/plugin'
 
 // https://vitejs.dev/config/
-export default defineConfig(({ mode }) => {
-	return {
-		plugins: [sveltekit()],
-		resolve: {
-			/*
-			 * Ensure `browser` exports are used in tests
-			 * Vitest prefers modules' `node` export by default
-			 * Svelte's `node` export is its SSR bundle, which does not have onMount
-			 * https://github.com/testing-library/svelte-testing-library/issues/222#issuecomment-1909993331
-			 */
-			conditions: mode === 'test' ? ['browser'] : [],
+export default defineConfig({
+	plugins: [sveltekit(), threlteTesting()],
+	ssr: {
+		noExternal: ['three'],
+	},
+	test: {
+		coverage: {
+			include: ['src'],
+			provider: 'v8',
 		},
-		ssr: {
-			noExternal: ['three'],
-		},
-		test: {
-			coverage: {
-				include: ['src'],
-				provider: 'v8',
-			},
-			environment: 'jsdom',
-			mockReset: true,
-			setupFiles: ['./src/lib/vitest.js'],
-			unstubGlobals: true,
-		},
-	}
+		environment: 'jsdom',
+		mockReset: true,
+		unstubGlobals: true,
+	},
 })