chore: move preprocessors to src-build/

src-build/print-component.js

@@ -0,0 +1,54 @@
+import { createHighlighter } from 'shiki';
+import * as fs from 'node:fs';
+import { resolvePath } from './resolve-alias.js';
+
+const theme = 'one-dark-pro';
+
+const highlighter = await createHighlighter({
+	langs: ['svelte'],
+	themes: [theme]
+});
+
+/**
+ * @param {string} code
+ * @returns {string}
+ */
+function highlight(code) {
+	const html = highlighter.codeToHtml(code, {
+		lang: 'svelte',
+		theme
+	});
+
+	return html;
+}
+
+/**
+ * @returns {import("svelte/compiler").PreprocessorGroup}
+ */
+const printComponent = () => {
+	return {
+		name: 'print-self',
+		markup({ content, filename }) {
+			const replacement = content.replace(/%import\('([^']+)'\)%/g, (match, alias) => {
+				try {
+					if (!filename) throw Error('filename is undefined');
+
+					const compPath = resolvePath(filename, alias);
+					const content = fs.readFileSync(compPath, 'utf-8').replace('$lib', 'svelte-knobs').trim();
+					const html = highlight(content);
+
+					return `{@html \`${html}\`}`;
+				} catch (err) {
+          console.error(err)
+					return match;
+				}
+			});
+
+			return {
+				code: replacement
+			};
+		}
+	};
+};
+
+export default printComponent;

src-build/resolve-alias.js

@@ -0,0 +1,35 @@
+import * as path from 'node:path';
+
+const aliasMap = {
+	$lib: 'src/lib'
+};
+
+/**
+ * @param {string} pth
+ * @returns {string}
+ */
+function resolveAlias(pth) {
+	const entries = Object.entries(aliasMap);
+	for (const [alias, path] of entries) {
+		if (!pth.includes(alias)) continue;
+		return pth.replace(alias, path);
+	}
+
+	return pth;
+}
+
+/**
+ * @param {string} filename
+ * @param {string} pth
+ * @returns {string}
+ */
+export function resolvePath(filename, pth) {
+	if (pth.startsWith('./') || pth.startsWith('../')) {
+		const currentDir = path.dirname(filename);
+		const compPath = path.join(currentDir, pth);
+
+		return compPath;
+	}
+
+	return resolveAlias(pth);
+}

svelte.config.js

@@ -1,49 +1,6 @@
-import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import { createHighlighter } from 'shiki';
-import * as path from 'node:path';
-import * as fs from 'node:fs';
-
-const theme = 'one-dark-pro';
-
-const highlighter = await createHighlighter({
-	langs: ['svelte'],
-	themes: [theme]
-});
-
-function highlight(code) {
-	const html = highlighter.codeToHtml(code, {
-		lang: 'svelte',
-		theme
-	});
-
-	return html;
-}
-
-function printComponent() {
-	return {
-		name: 'print-self',
-		markup({ content, filename }) {
-			const replacement = content.replace(/%import\('([^']+)'\)%/g, (match, pth) => {
-				const currentDir = path.dirname(filename);
-				const compPath = path.join(currentDir, pth);
-
-				try {
-					const content = fs.readFileSync(compPath, 'utf-8').replace('$lib', 'svelte-knobs');
-					const html = highlight(content);
-
-					return `{@html \`${html}\`}`;
-				} catch {
-					return match;
-				}
-			});
-
-			return {
-				code: replacement
-			};
-		}
-	};
-}
+import adapter from '@sveltejs/adapter-static';
+import printComponent from './src-build/print-component.js';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {