Upgrade to Vite 3

docs/components/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import OmorphiaLogo from '../assets/omorphia.svg'
+	import OmorphiaLogo from '../assets/omorphia.svg?component'
 	import IconLogoGithub from 'virtual:icons/carbon/logo-github'
 	import IconChat from 'virtual:icons/heroicons-outline/chat-alt-2'
 	import { onMount } from 'svelte'

docs/global.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="vite-plugin-sveld" />
-
 declare module '$assets/images/*'
 declare module '$locales/*'
-declare module 'insane'
 
-declare module '*.svg' {
-	export { SvelteComponentDev as default } from 'svelte/internal'
+declare module '*.svg?component' {
+	import type { SvelteComponentTyped } from 'svelte/internal'
+	class SVGComponent extends SvelteComponentTyped<{ class: string }> {}
+	export default SVGComponent
 }

docs/layout/page.svelte

@@ -18,13 +18,7 @@
 
 	let api = { props: [], events: [], slots: [] }
 	if ($page.url.pathname.includes('components')) {
-		if (import.meta.env.DEV) {
-			import(`../../src/components/${title}.svelte?raw&sveld`).then(
-				(output) => (api = output.default)
-			)
-		} else {
-			api = COMPONENT_API[`${title}.svelte`]
-		}
+		api = COMPONENT_API[`${title}.svelte`]
 	}
 </script>
 

docs/plugins/sveld.js

@@ -7,38 +7,29 @@ import { preprocess } from '../../src/config/svelte.js'
 export default function sveld() {
 	return {
 		name: 'vite-plugin-sveld',
+		// This generates a `COMPONENT_API.json` with sveld in the `/_app` folder which is used by the docs about components
+		// TODO: Make more efficient & handle typescript types with `svelte2tsx`
 		async transform(src, id) {
-			if (id.endsWith('?raw&sveld')) {
-				const raw = JSON.parse(src.split('export default ')[1])
+			if (id.includes('/src/components/')) {
+				const output = {}
 
-				const data = await parseRaw(raw, id)
+				const componentFiles = await fs.readdir(path.resolve('./src/components'))
 
-				return {
-					code: `export default ${JSON.stringify(data)}`,
-					map: null,
+				for (const fileName of componentFiles.filter((name) => name.endsWith('.svelte'))) {
+					const filePath = path.resolve('./src/components', fileName)
+					const raw = (await fs.readFile(filePath)).toString()
+					output[fileName] = await parseRaw(raw, filePath)
 				}
+
+				try {
+					await fs.mkdir(path.resolve('./generated'))
+				} catch {
+					// Do nothing, directory already exists
+				}
+
+				await fs.writeFile(path.resolve('./generated/COMPONENT_API.json'), JSON.stringify(output))
 			}
 		},
-		// This generates a `COMPONENT_API.json` with sveld in the `/_app` folder on build, which is used by the docs about components (only when built statically)
-		async buildStart() {
-			const output = {}
-
-			const componentFiles = await fs.readdir(path.resolve('./src/components'))
-
-			for (const fileName of componentFiles.filter((name) => name.endsWith('.svelte'))) {
-				const filePath = path.resolve('./src/components', fileName)
-				const raw = (await fs.readFile(filePath)).toString()
-				output[fileName] = await parseRaw(raw, filePath)
-			}
-
-			try {
-				await fs.mkdir(path.resolve('./generated'))
-			} catch {
-				// Do nothing, directory already exists
-			}
-
-			await fs.writeFile(path.resolve('./generated/COMPONENT_API.json'), JSON.stringify(output))
-		},
 	}
 }