threlte-minify 0.0.1

package/plugin/__tests__/insertImports.spec.ts

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import { insertImports } from '../insertImports.js'
+
+describe('insertImports', () => {
+	it('inserts new imports into a component with existing imports from the same module', () => {
+		const content = `
+      import { Mesh } from 'three'
+    `
+		const newImports = new Set(['Group', 'Material'])
+		const result = insertImports(newImports, content)
+		expect(result?.code).toContain(`import { Mesh } from 'three'`)
+		expect(result?.code).toContain(`import { Group, Material } from 'three'`)
+	})
+
+	it('inserts new imports into a component with existing imports from different modules', () => {
+		const content = `
+      import { someOtherThing } from 'another-module'
+    `
+		const newImports = new Set(['Mesh', 'Group'])
+		const result = insertImports(newImports, content)
+		expect(result?.code).toContain(`import { someOtherThing } from 'another-module'`)
+		expect(result?.code).toContain(`import { Mesh, Group } from 'three'`)
+	})
+
+	it('does not insert duplicate imports', () => {
+		const content = `
+      import { Mesh } from 'three'
+    `
+		const newImports = new Set(['Mesh', 'Group'])
+		const result = insertImports(newImports, content)
+		expect(result?.code).not.toContain(`import { Mesh, Mesh`)
+		expect(result?.code).toContain(`import { Mesh } from 'three'`)
+		expect(result?.code).toContain(`import { Group } from 'three'`)
+	})
+
+	it('handles an empty set of new imports', () => {
+		const content = `
+      import { Mesh } from 'three'
+	  `
+		const newImports = new Set<string>()
+		const result = insertImports(newImports, content)
+		// No changes
+		expect(result?.code).toEqual(content)
+	})
+
+	it('should not insert imports if all new imports already exist in the component', () => {
+		const content = `
+      import { Mesh, Group } from 'three'
+    `
+		const newImports = new Set(['Mesh', 'Group'])
+		const result = insertImports(newImports, content)
+		// No changes
+		expect(result?.code).toEqual(content)
+	})
+
+	it('does not insert duplicates when the existing import uses compact spacing', () => {
+		const content = `import{Mesh as THRELTE_MINIFY__Mesh}from"three"`
+		const newImports = new Set(['Mesh as THRELTE_MINIFY__Mesh'])
+		const result = insertImports(newImports, content)
+		expect(result.code).toBe(content)
+	})
+})

package/plugin/__tests__/replaceDotComponents.spec.ts

@@ -0,0 +1,241 @@
+import { describe, expect, it } from 'vitest'
+import { replaceDotComponents } from '../replaceDotComponents.js'
+
+describe('replaceDotComponents', () => {
+	it('replaces <T.SomeClass> with <T is={THRELTE_MINIFY__SomeClass}>', () => {
+		const content = `<script>
+	import { T } from '@threlte/core'
+</script>
+<T.SomeClass></T.SomeClass>`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe(`<script>
+	import { T } from '@threlte/core'
+</script>
+<T is={THRELTE_MINIFY__SomeClass}></T>`)
+		expect(imports.has('SomeClass as THRELTE_MINIFY__SomeClass')).toBe(true)
+	})
+
+	it('handles empty components', () => {
+		const content = ''
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe('')
+		expect(imports.size).toBe(0)
+	})
+
+	it('handles nested components', () => {
+		const content = `<script>
+	import { T } from '@threlte/core'
+</script>
+<T.Outer><T.Inner /></T.Outer>`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe(`<script>
+	import { T } from '@threlte/core'
+</script>
+<T is={THRELTE_MINIFY__Outer}><T is={THRELTE_MINIFY__Inner} /></T>`)
+		expect(imports.has('Outer as THRELTE_MINIFY__Outer')).toBe(true)
+		expect(imports.has('Inner as THRELTE_MINIFY__Inner')).toBe(true)
+	})
+
+	it('handles mixed components', () => {
+		const content = `
+			<script>
+				import { T } from '@threlte/core'
+			</script>
+			<T
+				is={group}
+				bind:ref
+				{...props}
+			>
+				<T.Group rotation.x={Math.PI / 2}>
+					<T.Mesh
+						scale.y={-1}
+						rotation.x={-Math.PI / 2}
+						material={shadowMaterial}
+						geometry={planeGeometry}
+					/>
+
+					<T
+						is={shadowCamera}
+						manual
+					/>
+
+					<slot ref={group} />
+				</T.Group>
+			</T>
+		`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe(`
+			<script>
+				import { T } from '@threlte/core'
+			</script>
+			<T
+				is={group}
+				bind:ref
+				{...props}
+			>
+				<T is={THRELTE_MINIFY__Group} rotation.x={Math.PI / 2}>
+					<T is={THRELTE_MINIFY__Mesh}
+						scale.y={-1}
+						rotation.x={-Math.PI / 2}
+						material={shadowMaterial}
+						geometry={planeGeometry}
+					/>
+
+					<T
+						is={shadowCamera}
+						manual
+					/>
+
+					<slot ref={group} />
+				</T>
+			</T>
+		`)
+		expect(imports.has('Group as THRELTE_MINIFY__Group')).toBe(true)
+		expect(imports.has('Mesh as THRELTE_MINIFY__Mesh')).toBe(true)
+	})
+
+	it('replaces components with attributes', () => {
+		const content = `
+			<script>
+				import { T } from '@threlte/core'
+			</script>
+			<T.SomeClass attribute="value" {prop} {...$$restProps}>
+				<slot />
+			</T.SomeClass>
+		`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe(`
+			<script>
+				import { T } from '@threlte/core'
+			</script>
+			<T is={THRELTE_MINIFY__SomeClass} attribute="value" {prop} {...$$restProps}>
+				<slot />
+			</T>
+		`)
+		expect(imports.has('SomeClass as THRELTE_MINIFY__SomeClass')).toBe(true)
+	})
+
+	it('replaces closing tags', () => {
+		const content = `<script>
+	import { T } from '@threlte/core'
+</script>
+<T.SomeClass></T.SomeClass>`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe(`<script>
+	import { T } from '@threlte/core'
+</script>
+<T is={THRELTE_MINIFY__SomeClass}></T>`)
+		expect(imports.has('SomeClass as THRELTE_MINIFY__SomeClass')).toBe(true)
+	})
+
+	it('does not affect components without .', () => {
+		const content = `<T is={SomeClass} />`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe(`<T is={SomeClass} />`)
+		expect(imports.size).toBe(0)
+	})
+
+	it('handles import { x as y }', () => {
+		const content = `
+			<script>
+				import { T as C } from '@threlte/core'
+			</script>
+			<C.SomeClass />
+		`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe(`
+			<script>
+				import { T as C } from '@threlte/core'
+			</script>
+			<C is={THRELTE_MINIFY__SomeClass} />
+		`)
+		expect(imports.size).toBe(1)
+	})
+
+	it('handles aliases that contain regex characters', () => {
+		const content = `
+			<script>
+				import { T as T$ } from '@threlte/core'
+			</script>
+			<T$.SomeClass />
+		`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe(`
+			<script>
+				import { T as T$ } from '@threlte/core'
+			</script>
+			<T$ is={THRELTE_MINIFY__SomeClass} />
+		`)
+		expect(imports.has('SomeClass as THRELTE_MINIFY__SomeClass')).toBe(true)
+	})
+
+	it('uses a unique generated alias when the default one already exists', () => {
+		const content = `
+			<script>
+				const THRELTE_MINIFY__Mesh = 1
+				import { T } from '@threlte/core'
+			</script>
+			<T.Mesh />
+		`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toContain(`<T is={THRELTE_MINIFY__Mesh_1} />`)
+		expect(imports.has('Mesh as THRELTE_MINIFY__Mesh_1')).toBe(true)
+	})
+
+	it('does not replace components when T is not imported from @threlte/core', () => {
+		const content = `
+			<script>
+				import * as T from './local.js'
+			</script>
+			<T.Mesh />
+		`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe(content)
+		expect(imports.size).toBe(0)
+	})
+
+	it('does not replace comment or text content that looks like a dot component', () => {
+		const content = `
+			<script>
+				import { T } from '@threlte/core'
+			</script>
+			<!-- <T.Mesh /> -->
+			<p>{'<T.Mesh />'}</p>
+		`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe(content)
+		expect(imports.size).toBe(0)
+	})
+
+	it('does not replace <T.> in the script section', () => {
+		const content = `
+			<script>
+				import { T } from '@threlte/core'
+				const str = '<T.Component />'
+			</script>
+			<T.Mesh></T.Mesh>
+		`
+		const imports = new Set<string>()
+		const result = replaceDotComponents(imports, content)
+		expect(result.code).toBe(`
+			<script>
+				import { T } from '@threlte/core'
+				const str = '<T.Component />'
+			</script>
+			<T is={THRELTE_MINIFY__Mesh}></T>
+		`)
+		expect(imports.size).toBe(1)
+	})
+})

package/plugin/__tests__/stripScriptTags.spec.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { stripScriptTags } from '../stripScriptTags.js'
+
+describe('stripScriptTags', () => {
+	it('Does not remove content that is not script tags', () => {
+		const input = `<div><p>Paragraph</p></div>`
+		const expected = `<div><p>Paragraph</p></div>`
+		expect(stripScriptTags(input)).toBe(expected)
+	})
+
+	it('Removes a simple script tag', () => {
+		const input = `<script>let name = 'world'</script><h1>Hello {name}!</h1>`
+		const expected = `<h1>Hello {name}!</h1>`
+		expect(stripScriptTags(input)).toBe(expected)
+	})
+
+	it('Removes multiple script tags', () => {
+		const input = `<script>let name = 'world';</script><style></style><h1>Hello {name}!</h1><script>console.log('test')</script>`
+		const expected = `<style></style><h1>Hello {name}!</h1>`
+		expect(stripScriptTags(input)).toBe(expected)
+	})
+
+	it('Removes script tags with attributes', () => {
+		const input = `<script context="module">import { foo } from 'bar'</script><script lang='ts'></script><h1>Hello</h1>`
+		const expected = `<h1>Hello</h1>`
+		expect(stripScriptTags(input)).toBe(expected)
+	})
+
+	it('Removes script tags nested in other tags', () => {
+		const input = `<div><script>let name = 'world';</script></div>`
+		const expected = `<div></div>`
+		expect(stripScriptTags(input)).toBe(expected)
+	})
+
+	it('Removes script tags with unusual spacing', () => {
+		const input = `<script     >let name = 'world';</script><h1>Hello {name}!</h1>`
+		const expected = `<h1>Hello {name}!</h1>`
+		expect(stripScriptTags(input)).toBe(expected)
+	})
+
+	it('should handle script tags with newlines inside', () => {
+		const input = `<script>
+      let name = 'world';
+    </script><h1>Hello {name}!</h1>`
+		const expected = `<h1>Hello {name}!</h1>`
+		expect(stripScriptTags(input)).toBe(expected)
+	})
+})

package/plugin/__tests__/viteBuild.spec.ts

@@ -0,0 +1,133 @@
+import { mkdtemp, mkdir, readFile, rm, writeFile } from 'node:fs/promises'
+import { join } from 'node:path'
+import { afterEach, describe, expect, it } from 'vitest'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { build } from 'vite'
+import { threlteMinify } from '../index.js'
+
+const tempDirs = new Set<string>()
+
+const collectFiles = async (dir: string): Promise<string[]> => {
+	const { readdir } = await import('node:fs/promises')
+	const entries = await readdir(dir, { withFileTypes: true })
+	const files = await Promise.all(
+		entries.map(async (entry) => {
+			const fullPath = join(dir, entry.name)
+			if (entry.isDirectory()) {
+				return collectFiles(fullPath)
+			}
+			return [fullPath]
+		})
+	)
+
+	return files.flat()
+}
+
+const createFixture = async () => {
+	const tempRoot = join(process.cwd(), '.vitest-tmp')
+	await mkdir(tempRoot, { recursive: true })
+
+	const root = await mkdtemp(join(tempRoot, 'threlte-minify-vite-'))
+	tempDirs.add(root)
+
+	await mkdir(join(root, 'src'), { recursive: true })
+	await writeFile(
+		join(root, 'index.html'),
+		`<!doctype html>
+<html lang="en">
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>`
+	)
+	await writeFile(
+		join(root, 'src', 'main.js'),
+		`import { mount } from 'svelte'
+import App from './App.svelte'
+
+mount(App, {
+	target: document.getElementById('app'),
+})`
+	)
+	await writeFile(
+		join(root, 'src', 'App.svelte'),
+		`<script>
+	import { Canvas, T } from '@threlte/core'
+</script>
+
+<Canvas>
+	<T.Mesh>
+		<T.BoxGeometry />
+	</T.Mesh>
+</Canvas>`
+	)
+
+	return root
+}
+
+afterEach(async () => {
+	await Promise.all(
+		[...tempDirs].map(async (dir) => {
+			tempDirs.delete(dir)
+			await rm(dir, { recursive: true, force: true })
+		})
+	)
+})
+
+describe('vite build integration', () => {
+	it('builds a fixture app and applies the Svelte transform before compilation', async () => {
+		const root = await createFixture()
+		let capturedSvelte = ''
+		const outDir = join(root, 'dist')
+
+		await build({
+			configFile: false,
+			logLevel: 'silent',
+			root,
+			publicDir: false,
+			plugins: [
+				threlteMinify(),
+				{
+					name: 'capture-threlte-minify-output',
+					enforce: 'pre',
+					transform(code, id) {
+						if (id.endsWith('/src/App.svelte')) {
+							capturedSvelte = code
+						}
+
+						return null
+					},
+				},
+				svelte(),
+			],
+			build: {
+				minify: false,
+				outDir,
+				rollupOptions: {
+					input: join(root, 'index.html'),
+				},
+			},
+		})
+
+		expect(capturedSvelte).toContain(`Mesh as THRELTE_MINIFY__Mesh`)
+		expect(capturedSvelte).toContain(`BoxGeometry as THRELTE_MINIFY__BoxGeometry`)
+		expect(capturedSvelte).toContain(`<T is={THRELTE_MINIFY__Mesh}>`)
+		expect(capturedSvelte).toContain(`<T is={THRELTE_MINIFY__BoxGeometry} />`)
+
+		const files = await collectFiles(outDir)
+		const jsFiles = files.filter((file) => file.endsWith('.js'))
+		expect(jsFiles.length).toBeGreaterThan(0)
+
+		const bundle = (
+			await Promise.all(
+				jsFiles.map(async (file) => {
+					return readFile(file, 'utf8')
+				})
+			)
+		).join('\n')
+
+		expect(bundle).toContain('return Mesh;')
+		expect(bundle).toContain('return BoxGeometry;')
+	}, 30000)
+})

package/plugin/compile.js

@@ -0,0 +1,76 @@
+import MagicString from 'magic-string'
+import { insertImports } from './insertImports.js'
+import { parse, preprocess } from 'svelte/compiler'
+import { replaceDotComponents } from './replaceDotComponents.js'
+
+/**
+ *
+ * @param {Set<string>} imports
+ * @returns {string}
+ */
+const createThreeImport = (imports) => {
+	return `import { ${[...imports].join(', ')} } from 'three'`
+}
+
+/**
+ *
+ * @param {string} code
+ * @param {Set<string>} imports
+ * @param {string=} filename
+ * @returns {{ code: string; map: import('magic-string').SourceMap }}
+ */
+const injectInstanceScript = (code, imports, filename) => {
+	const ast = parse(code)
+	const str = new MagicString(code, { filename })
+	const instanceScript = `<script>\n${createThreeImport(imports)}\n</script>`
+	const insertAt = ast.module ? ast.module.end : 0
+	const prefix = insertAt === 0 ? '' : '\n'
+	const suffix = insertAt === 0 ? '\n' : ''
+
+	str.appendLeft(insertAt, `${prefix}${instanceScript}${suffix}`)
+
+	return {
+		code: str.toString(),
+		map: str.generateMap(),
+	}
+}
+
+/**
+ *
+ * @param {string} source
+ * @param {string} filename
+ * @returns {Promise<import('svelte/compiler').Processed>}
+ */
+export const compile = async (source, filename) => {
+	/** @type {Set<string>} */
+	const imports = new Set()
+
+	const processed = await preprocess(
+		source,
+		[
+			{
+				name: 'threlte-minify',
+
+				markup: ({ content }) => {
+					return replaceDotComponents(imports, content, filename)
+				},
+				script: ({ content, attributes }) => {
+					if (attributes.context === 'module' || 'module' in attributes) return
+					const result = insertImports(imports, content, filename)
+					imports.clear()
+					return result
+				},
+			},
+		],
+		{ filename }
+	)
+
+	if (imports.size === 0) {
+		return processed
+	}
+
+	return {
+		...processed,
+		...injectInstanceScript(processed.code, imports, filename),
+	}
+}

package/plugin/extractExistingImports.js

@@ -0,0 +1,29 @@
+/**
+ *
+ * @param {string} code
+ * @param {string} moduleName
+ * @returns {string[]}
+ */
+export const extractExistingImports = (code, moduleName) => {
+	const escapedModuleName = moduleName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+	const regex = new RegExp(`import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${escapedModuleName}['"]`, 'ug')
+
+	/**
+	 * @type {RegExpExecArray | null}
+	 */
+	let match = null
+
+	/**
+	 * @type {Set<string>}
+	 */
+	const imports = new Set()
+
+	while ((match = regex.exec(code)) !== null) {
+		const [, result] = match
+		for (const item of result.split(',')) {
+			imports.add(item.trim())
+		}
+	}
+
+	return [...imports]
+}

package/plugin/findImportAlias.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * @param {string} content
+ * @param {string} alias
+ * @returns {string | null}
+ */
+export const findImportAlias = (content, alias) => {
+	const regex = /import\s*{([^}]+)}\s*from\s*["']@threlte\/core["']/g
+	const matches = [...content.matchAll(regex)]
+
+	for (const match of matches) {
+		const imports = match[1].split(',')
+		for (const imp of imports) {
+			const [imported, asAlias] = imp
+				.trim()
+				.split(/\s+as\s+/)
+				.map((str) => {
+					return str.trim()
+				})
+			if (imported === alias) {
+				return asAlias ?? imported
+			}
+		}
+	}
+	return null
+}

package/plugin/hasDotComponent.js

@@ -0,0 +1,53 @@
+import { findImportAlias } from './findImportAlias.js'
+import { parse } from 'svelte/compiler'
+import { stripScriptTags } from './stripScriptTags.js'
+
+/**
+ *
+ * @param {string} code
+ * @returns {boolean}
+ */
+export const hasDotComponent = (code) => {
+	const alias = findImportAlias(code, 'T')
+
+	if (!alias) {
+		return false
+	}
+
+	if (!stripScriptTags(code).includes(`<${alias}.`)) {
+		return false
+	}
+
+	let hasMatch = false
+
+	/**
+	 *
+	 * @param {unknown} node
+	 * @returns {void}
+	 */
+	const visit = (node) => {
+		if (!node || typeof node !== 'object' || hasMatch) return
+
+		if (Array.isArray(node)) {
+			for (const child of node) {
+				visit(child)
+			}
+			return
+		}
+
+		if (node.type === 'InlineComponent' && node.name.startsWith(`${alias}.`)) {
+			hasMatch = true
+			return
+		}
+
+		for (const value of Object.values(node)) {
+			if (value && typeof value === 'object') {
+				visit(value)
+			}
+		}
+	}
+
+	visit(parse(code).html)
+
+	return hasMatch
+}

package/plugin/index.d.ts

@@ -0,0 +1,3 @@
+import { PluginOption } from 'vite'
+
+export function threlteMinify(): PluginOption