threlte-minify 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Micheal Parks
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,81 @@
+# threlte-minify
+
+A Vite plugin that produces smaller and faster [Threlte](https://threlte.xyz) apps.
+
+> **Note:** This plugin is not compatible with Threlte's `extend` function.
+
+## Install
+
+```bash
+npm i -D threlte-minify
+```
+
+## Usage
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import { sveltekit } from '@sveltejs/kit/vite'
+import { threlteMinify } from 'threlte-minify'
+
+export default defineConfig({
+	plugins: [threlteMinify(), sveltekit()],
+})
+```
+
+## Results
+
+Tested on a simple scene with a few meshes and materials:
+
+| Configuration                                                                      |      Size |      Gzip |
+| ---------------------------------------------------------------------------------- | --------: | --------: |
+| No plugins                                                                         | 810.88 kB | 213.82 kB |
+| threlte-minify                                                                     | 576.58 kB | 150.13 kB |
+| threlte-minify + [three-minifier](https://github.com/nickyMcDonald/three-minifier) | 550.64 kB | 145.96 kB |
+
+## How it works
+
+Threlte's `<T.Mesh>` syntax relies on a proxy that does `import * as THREE from 'three'` to resolve Three.js classes at runtime. This has two costs:
+
+1. **Bundle size** -- the wildcard import prevents tree-shaking, pulling in all of Three.js regardless of what you use.
+2. **Runtime speed** -- every `<T.Something>` goes through a proxy lookup to resolve the class.
+
+This plugin preprocesses your Svelte components, transforming them from this:
+
+```svelte
+<script>
+	import { T } from '@threlte/core'
+</script>
+
+<T.Mesh>
+	<T.BoxGeometry />
+	<T.MeshStandardMaterial color="orange" />
+</T.Mesh>
+```
+
+...into this:
+
+```svelte
+<script>
+	import { Mesh as THRELTE_MINIFY__Mesh } from 'three'
+	import { BoxGeometry as THRELTE_MINIFY__BoxGeometry } from 'three'
+	import { MeshStandardMaterial as THRELTE_MINIFY__MeshStandardMaterial } from 'three'
+	import { T } from '@threlte/core'
+</script>
+
+<T is={THRELTE_MINIFY__Mesh}>
+	<T is={THRELTE_MINIFY__BoxGeometry} />
+	<T
+		is={THRELTE_MINIFY__MeshStandardMaterial}
+		color="orange"
+	/>
+</T>
+```
+
+By replacing proxy-resolved dot notation with direct imports, the bundler can tree-shake unused Three.js classes and the runtime skips the proxy entirely.
+
+The plugin also removes the wildcard import from Threlte's internals to complete the tree-shaking.
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,62 @@
+{
+	"name": "threlte-minify",
+	"version": "0.0.1",
+	"description": "A vite plugin to better minify Threlte apps.",
+	"keywords": [
+		"Threlte"
+	],
+	"license": "MIT",
+	"author": {
+		"name": "Micheal Parks",
+		"email": "michealparks1989@gmail.com",
+		"url": "https://parks.lol"
+	},
+	"exports": {
+		"import": "./plugin/index.js",
+		"types": "./plugin/index.d.ts"
+	},
+	"files": [
+		"./plugin/*"
+	],
+	"scripts": {
+		"dev": "vite dev --host",
+		"build": "vite build",
+		"build:null": "vite build --mode null",
+		"build:threlte": "vite build --mode threlte",
+		"build:three": "vite build --mode three",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"stats": "node stats.js",
+		"test": "vitest",
+		"test:watch": "vitest --watch"
+	},
+	"devDependencies": {
+		"@changesets/cli": "^2.30.0",
+		"@sveltejs/adapter-auto": "^3.2.1",
+		"@sveltejs/kit": "^2.55.0",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@threlte/core": "^8.5.0",
+		"@threlte/extras": "^9.14.0",
+		"@types/three": "^0.183.0",
+		"@yushijinhun/three-minifier-rollup": "^0.4.0",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^10.0.0",
+		"eslint-plugin-svelte": "^3.0.0",
+		"prettier": "^3.2.5",
+		"prettier-plugin-svelte": "^3.2.3",
+		"svelte": "^5.55.0",
+		"svelte-check": "^4.0.0",
+		"three": "^0.183.0",
+		"typescript": "^5.4.5",
+		"vite": "^6.3.0",
+		"vitest": "^3.0.0"
+	},
+	"dependencies": {
+		"magic-string": "^0.30.10"
+	},
+	"type": "module",
+	"packageManager": "pnpm@10.29.3"
+}

package/plugin/__tests__/compile.spec.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from 'vitest'
+import { compile } from '../compile.js'
+
+describe('compile', () => {
+	const component = `
+    <script context="module" lang="ts">
+      import { Group } from 'three'
+    </script>
+    <script lang="ts">
+      import { Canvas, T } from '@threlte/core'
+    </script>
+
+    <Canvas>
+      <T.Group>
+        <T.Mesh>
+          <T is={Group}>
+
+          </T>
+        </T.Mesh>
+      </T.Group>
+    </Canvas>
+  `
+
+	it('Correctly modifies <T.> components during compilation', async () => {
+		const result = await compile(component, 'file.svelte')
+		expect(result.code).toBe(`
+    <script context="module" lang="ts">
+      import { Group } from 'three'
+    </script>
+    <script lang="ts">
+import { Group as THRELTE_MINIFY__Group, Mesh as THRELTE_MINIFY__Mesh } from 'three'
+
+      import { Canvas, T } from '@threlte/core'
+    </script>
+
+    <Canvas>
+      <T is={THRELTE_MINIFY__Group}>
+        <T is={THRELTE_MINIFY__Mesh}>
+          <T is={Group}>
+
+          </T>
+        </T>
+      </T>
+    </Canvas>
+  `)
+	})
+
+	it('does not transform comment, style, or text literals that contain <T.>', async () => {
+		const source = `
+    <script>
+      import { T } from '@threlte/core'
+    </script>
+    <!-- <T.Mesh /> -->
+    <style>.x::before { content: "<T.Mesh />"; }</style>
+    <p>{'<T.Mesh />'}</p>
+  `
+		const result = await compile(source, 'file.svelte')
+		expect(result.code).toBe(source)
+	})
+
+	it('does not transform components when T is not imported from @threlte/core', async () => {
+		const source = `
+    <script>
+      import * as T from './local.js'
+    </script>
+    <T.Mesh />
+  `
+		const result = await compile(source, 'file.svelte')
+		expect(result.code).toBe(source)
+	})
+
+	it('is idempotent and returns a source map for transformed components', async () => {
+		const source = `
+    <script>
+      import { T } from '@threlte/core'
+    </script>
+    <T.Mesh />
+  `
+		const first = await compile(source, '/virtual/Test.svelte')
+		const second = await compile(first.code, '/virtual/Test.svelte')
+
+		expect(second.code).toBe(first.code)
+		expect(first.map).toMatchObject({
+			version: 3,
+			sources: ['Test.svelte'],
+		})
+		expect(second.map).toMatchObject({
+			version: 3,
+			sources: ['Test.svelte'],
+		})
+	})
+})

package/plugin/__tests__/extractImports.spec.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest'
+import { extractExistingImports } from '../extractExistingImports.js'
+
+describe('extractExistingImports', () => {
+	it('returns an array of imports from the specified module', () => {
+		const code = `
+      import { Mesh, Group, type Material } from 'three'
+    `
+		const result = extractExistingImports(code, 'three')
+		expect(result).toEqual(['Mesh', 'Group', 'type Material'])
+	})
+
+	it('returns an empty array if no match for the specified module', () => {
+		const code = `
+	    import { Mesh, Group, type Material } from 'other-module'
+	  `
+		const result = extractExistingImports(code, 'three')
+		expect(result).toEqual([])
+	})
+
+	it('returns an empty array if there are no import statements', () => {
+		const code = ``
+		const result = extractExistingImports(code, 'three')
+		expect(result).toEqual([])
+	})
+
+	it('handles multiple import statements', () => {
+		const code = `
+			import { Mesh, Group, type Material } from 'three'
+			import { anotherThing } from 'another-module'
+    `
+		const result = extractExistingImports(code, 'three')
+		expect(result).toEqual(['Mesh', 'Group', 'type Material'])
+	})
+
+	it('handles strange whitespace', () => {
+		const code = `
+      import {   Mesh   ,   Group ,  type Material   } from 'three'
+    `
+		const result = extractExistingImports(code, 'three')
+		expect(result).toEqual(['Mesh', 'Group', 'type Material'])
+	})
+
+	it('handles imports with type and as keywords', () => {
+		const code = `
+      import { Mesh, type Material, Object3D as ThreeObject } from 'three'
+    `
+		const result = extractExistingImports(code, 'three')
+		expect(result).toEqual(['Mesh', 'type Material', 'Object3D as ThreeObject'])
+	})
+
+	it('handles multiple import statements from the same module', () => {
+		const code = `
+			import { Mesh } from 'three'
+			import { Group, type Material } from 'three'
+    `
+		const result = extractExistingImports(code, 'three')
+		expect(result).toEqual(['Mesh', 'Group', 'type Material'])
+	})
+
+	it('handles imports without whitespace around braces or from', () => {
+		const code = `import{Mesh as THRELTE_MINIFY__Mesh,type Material}from"three"`
+		const result = extractExistingImports(code, 'three')
+		expect(result).toEqual(['Mesh as THRELTE_MINIFY__Mesh', 'type Material'])
+	})
+})

package/plugin/__tests__/findImportAlias.spec.ts

@@ -0,0 +1,150 @@
+import { describe, expect, it } from 'vitest'
+import { findImportAlias } from '../findImportAlias.js'
+
+describe('findImportAlias', () => {
+	it('returns the alias when the import statement is correctly formatted', () => {
+		const svelteComponent = `
+      <script>
+        import { T as y } from '@threlte/core';
+      </script>
+    `
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		expect(result).toBe('y')
+	})
+
+	it('returns null when the import statement does not exist', () => {
+		const svelteComponent = `
+      <script>
+        // no import statement
+      </script>
+    `
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		expect(result).toBeNull()
+	})
+
+	it('handles no whitespace', () => {
+		const svelteComponent = `
+      <script>
+        import{T as y}from'@threlte/core';
+      </script>
+    `
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		expect(result).toBe('y')
+	})
+
+	it('returns null when the alias is not found in the import statement', () => {
+		const svelteComponent = `
+      <script>
+        import { X as y } from '@threlte/core';
+      </script>
+    `
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		expect(result).toBeNull()
+	})
+
+	it('handles extra whitespace', () => {
+		const svelteComponent = `
+      <script>
+        import {  T  as   y      } from '@threlte/core';
+      </script>
+    `
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		expect(result).toBe('y')
+	})
+
+	it('handles multiple import statements and find the correct one', () => {
+		const svelteComponent = `
+      <script>
+        import { A as b } from '@threlte/core';
+        import { T as y } from '@threlte/core';
+        import { C as d } from 'otherlib';
+      </script>
+    `
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		expect(result).toBe('y')
+	})
+
+	it('should return the correct alias when there are multiple imports with the same alias', () => {
+		const svelteComponent = `
+      <script>
+        import { T as b } from 'otherlib';
+        import { T as a } from '@threlte/core';
+      </script>
+    `
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		// Only the first match is considered
+		expect(result).toBe('a')
+	})
+
+	it('should handle import statements without "as"', () => {
+		const svelteComponent = `
+      <script>
+        import { T } from '@threlte/core';
+      </script>
+    `
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		expect(result).toBe('T')
+	})
+
+	it('should handle an empty component string', () => {
+		const svelteComponent = ``
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		expect(result).toBeNull()
+	})
+
+	it('should handle multiple imports from the same library', () => {
+		const svelteComponent = `
+      <script>
+        import { A as a, T as y, C as c } from '@threlte/core';
+      </script>
+    `
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		expect(result).toBe('y')
+	})
+
+	it('should handle multiple lines of imports from the same library', () => {
+		const svelteComponent = `
+      <script>
+        import {
+          A as a,
+          T as y,
+          C as c
+        } from '@threlte/core';
+      </script>
+    `
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		expect(result).toBe('y')
+	})
+
+	it('should handle import statement with double quotes', () => {
+		const svelteComponent = `
+      <script>
+        import { A as a, T as y, C as c } from "@threlte/core";
+      </script>
+    `
+		const alias = 'T'
+		const result = findImportAlias(svelteComponent, alias)
+		expect(result).toBe('y')
+	})
+
+	it('does not truncate aliases that contain "as"', () => {
+		const svelteComponent = `
+      <script>
+        import { T as task } from '@threlte/core';
+      </script>
+    `
+		const result = findImportAlias(svelteComponent, 'T')
+		expect(result).toBe('task')
+	})
+})

package/plugin/__tests__/hasDotComponent.spec.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest'
+import { hasDotComponent } from '../hasDotComponent.js'
+
+describe('hasDotComponent', () => {
+	it('returns true when the code contains a <T.>', () => {
+		const code = `
+      <script>
+				import { T } from '@threlte/core'
+			</script>
+      <T.Mesh></T.Mesh>
+    `
+		expect(hasDotComponent(code)).toBe(true)
+	})
+
+	it('returns true when the code contains multiple <T.> instances', () => {
+		const code = `
+			<script>
+				import { T } from '@threlte/core'
+			</script>
+      <T.Mesh></T.Mesh>
+      <T.Object3D attribute="value" {...$$restProps}></T.Object3D>
+    `
+		expect(hasDotComponent(code)).toBe(true)
+	})
+
+	it('returns false when the code does not contain any <T.Component>', () => {
+		const code = ``
+		expect(hasDotComponent(code)).toBe(false)
+	})
+
+	it('should return false when the code contains <T> but not <T.>', () => {
+		const code = `
+			<T></T>
+			<T is={something}></T>
+			<Threlte></Threlte>
+    `
+		expect(hasDotComponent(code)).toBe(false)
+	})
+
+	it('should return false when the code contains <T.> only in the script section', () => {
+		const code = `
+			<script>
+				const str = '<T.Mesh>'
+			</script>
+    `
+		expect(hasDotComponent(code)).toBe(false)
+	})
+
+	it('detects aliased T dot components', () => {
+		const code = `
+			<script>
+				import { T as C } from '@threlte/core'
+			</script>
+			<C.Mesh />
+    `
+		expect(hasDotComponent(code)).toBe(true)
+	})
+
+	it('returns false when T is not imported from @threlte/core', () => {
+		const code = `
+			<script>
+				import * as T from './local.js'
+			</script>
+			<T.Mesh />
+    `
+		expect(hasDotComponent(code)).toBe(false)
+	})
+
+	it('returns false when <T.> only appears in comments or text', () => {
+		const code = `
+			<script>
+				import { T } from '@threlte/core'
+			</script>
+			<!-- <T.Mesh /> -->
+			<p>{'<T.Mesh />'}</p>
+    `
+		expect(hasDotComponent(code)).toBe(false)
+	})
+})

package/plugin/__tests__/index.spec.ts

@@ -0,0 +1,100 @@
+import { readFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+import { threlteMinify } from '../index.js'
+
+const getTransform = () => {
+	const plugin = threlteMinify()
+
+	if (!plugin || Array.isArray(plugin) || !('transform' in plugin) || !plugin.transform) {
+		throw new Error('Expected a Vite plugin with a transform hook')
+	}
+
+	return plugin.transform
+}
+
+const getExportedNames = (code: string) => {
+	const names = new Set<string>()
+
+	for (const match of code.matchAll(/export const (\w+)/g)) {
+		names.add(match[1])
+	}
+
+	for (const match of code.matchAll(/export \{\s*default as (\w+)\s*\}/g)) {
+		names.add(match[1])
+	}
+
+	return [...names].sort()
+}
+
+describe('threlteMinify', () => {
+	it('transforms aliased T dot components', async () => {
+		const transform = getTransform()
+		const result = await transform.call(
+			{},
+			`
+				<script>
+					import { T as C } from '@threlte/core'
+				</script>
+				<C.Mesh />
+			`,
+			'/virtual/Test.svelte'
+		)
+
+		expect(result).toMatchObject({
+			code: `
+				<script>
+import { Mesh as THRELTE_MINIFY__Mesh } from 'three'
+
+					import { T as C } from '@threlte/core'
+				</script>
+				<C is={THRELTE_MINIFY__Mesh} />
+			`,
+		})
+
+		if (!result || typeof result === 'string') {
+			throw new Error('Expected an object transform result')
+		}
+
+		expect(JSON.parse(result.map)).toMatchObject({
+			version: 3,
+			sources: ['Test.svelte'],
+		})
+	})
+
+	it('does not transform non-Threlte T components', async () => {
+		const transform = getTransform()
+		const source = `
+				<script>
+					import * as T from './local.js'
+				</script>
+				<T.Mesh />
+			`
+		const result = await transform.call({}, source, '/virtual/Test.svelte')
+
+		expect(result).toBeUndefined()
+	})
+
+	it('preserves the installed @threlte/core T.js export contract when overwriting', async () => {
+		const transform = getTransform()
+		const id = resolve(process.cwd(), 'node_modules/@threlte/core/dist/components/T/T.js')
+		const source = await readFile(id, 'utf8')
+
+		expect(getExportedNames(source)).toEqual(['T', 'extend'])
+
+		const result = await transform.call({}, source, id)
+
+		if (!result || typeof result === 'string') {
+			throw new Error('Expected an object transform result')
+		}
+
+		expect(getExportedNames(result.code)).toEqual(['T', 'extend'])
+		expect(result.code).toContain(`export { default as T } from './T.svelte'`)
+		expect(result.code).toContain(`export const extend = () => {`)
+		expect(result.code).not.toContain(`import * as THREE from 'three'`)
+		expect(JSON.parse(result.map.toString())).toMatchObject({
+			version: 3,
+			sources: [''],
+		})
+	})
+})