I had to use a load function since preprocessed returned a promise. Also the code is a component in which I pasted the contents of the +page.server.js because I have no idea how to access it as a component (or if it's even possible).

+page.server.js

/** @type {import('./$types').PageLoad} */

import { compile, preprocess } from "svelte/compiler";
import { onMount } from "svelte";
import fs from "fs";
import path from "path";

export async function load() {
	const pathToComponent = path.join("src/routes/svelte-course/Preprocess-API/Component.svelte");
	const svelteCode = fs.readFileSync(pathToComponent, "utf-8");

	const processedCode = preprocess(svelteCode, {
		markup: ({ content }) => {
			return { code: content };
		},
		style: ({ content }) => {
			return { code: content };
		},
		script: ({ content, attributes }) => {
			// if (attributes.lang === "ts") {

			// }
			return {
				code: content.replace("%%NAME%%", JSON.stringify(attributes.name)),
				// add dependencies in array below
				// dependencies: []
			};
		},
	});
	processedCode.then((value) => {
		console.log(processedCode);
		compile(value.code, {
			// options here
			filename: "CompiledComponent",
			// format: "cjs", // or esm
			// generate: "ssr" // or dom
			// dev: true
			// immutable: true
			// legacy: true
			// sveltePath:  "",
			// css: false,
			// cssHash: ({ hash, css, name, filename }) => `xyz${hash(css)}`,
			// and more! (see docs at https://svelte.dev/docs/svelte-compiler)
		});
	});
	let finishedCode = await processedCode;
	return {
		code: compile(finishedCode.code),
	};
}

The result is this:

code: "/* generated by Svelte v4.0.1 */\nimport {\n\tSvelteComponent,\n\tdetach,\n\telement,\n\tinit,\n\tinsert,\n\tnoop,\n\tsafe_not_equal\n} from \"svelte/internal\";\n\nimport \"svelte/internal/disclose-version\";\n\nfunction create_fragment(ctx) {\n\tlet div;\n\n\treturn {\n\t\tc() {\n\t\t\tdiv = element(\"div\");\n\t\t\tdiv.textContent = `%%NAME%%: ${name}`;\n\t\t},\n\t\tm(target, anchor) {\n\t\t\tinsert(target, div, anchor);\n\t\t},\n\t\tp: noop,\n\t\ti: noop,\n\t\to: noop,\n\t\td(detaching) {\n\t\t\tif (detaching) {\n\t\t\t\tdetach(div);\n\t\t\t}\n\t\t}\n\t};\n}\n\nlet name = \"special\";\n\nclass Component extends SvelteComponent {\n\tconstructor(options) {\n\t\tsuper();\n\t\tinit(this, options, null, create_fragment, safe_not_equal, {});\n\t}\n}\n\nexport default Component;"map: {"version":3,"names":[],"sources":[null],"sourcesContent":["<script name=\"special\">\n let name = \"special\";\n</script>\n\n<div>\n %%NAME%%: {name}\n</div>\n\n<style>\n \n</style>"],"mappings":";;;;;;;;;;;;;;;;;;;kCAKa,IAAI;;;GADjB,MAEM;;;;;;;;;;;;;IALA,IAAI,GAAG,SAAS;;;;;;;;;"}

code: nullmap: null

html: {"start":59,"end":90,"type":"Fragment","children":[{"start":57,"end":59,"type":"Text","raw":"\n\n","data":"\n\n"},{"start":59,"end":90,"type":"Element","name":"div","attributes":[],"children":[{"start":64,"end":77,"type":"Text","raw":"\n %%NAME%%: ","data":"\n %%NAME%%: "},{"start":77,"end":83,"type":"MustacheTag","expression":{"type":"Identifier","start":78,"end":82,"loc":{"start":{"line":6,"column":13},"end":{"line":6,"column":17}},"name":"name"}},{"start":83,"end":84,"type":"Text","raw":"\n","data":"\n"}]},{"start":90,"end":92,"type":"Text","raw":"\n\n","data":"\n\n"}]}css: {"type":"Style","start":92,"end":111,"attributes":[],"children":[],"content":{"start":99,"end":103,"styles":"\n \n"}}instance: {"type":"Script","start":0,"end":57,"context":"default","content":{"type":"Program","start":23,"end":48,"loc":{"start":{"line":1,"column":0},"end":{"line":3,"column":0}},"body":[{"type":"VariableDeclaration","start":26,"end":47,"loc":{"start":{"line":2,"column":2},"end":{"line":2,"column":23}},"declarations":[{"type":"VariableDeclarator","start":30,"end":46,"loc":{"start":{"line":2,"column":6},"end":{"line":2,"column":22}},"id":{"type":"Identifier","start":30,"end":34,"loc":{"start":{"line":2,"column":6},"end":{"line":2,"column":10}},"name":"name"},"init":{"type":"Literal","start":37,"end":46,"loc":{"start":{"line":2,"column":13},"end":{"line":2,"column":22}},"value":"special","raw":"\"special\""}}],"kind":"let"}],"sourceType":"module"}}module: undefined

warnings:

0: {"name":"name","export_name":null,"injected":false,"module":false,"mutated":false,"reassigned":false,"referenced":true,"writable":true,"referenced_from_script":false}

timings: {"total":4.831596000003628,"parse":{"total":0.5796529999934137},"create component":{"total":0.45524500000465196}}

I couldn't actually figure out how to use the compiled component as a real component using <svelte:component>...