WIP: Use svelte-preprocess to replace values. Significant progress!

PoC works great if run from the user's svelte.config.js, but we need to extend the user config and still make it work. Currently it only works when run with the default svelte config loading.

Author: Greenheart

packages/kit/src/core/config/index.js

@@ -2,6 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import * as url from 'url';
 import options from './options.js';
+import preprocess from 'svelte-preprocess';
 
 /**
  * Loads the template (src/app.html by default) and validates that it has the
@@ -63,6 +64,24 @@ function process_config(config, { cwd = process.cwd() } = {}) {
 
 	validated.kit.outDir = path.resolve(cwd, validated.kit.outDir);
 
+	const replaceSveltkitAttributes = preprocess({
+		// TODO: Update regex to only match attributes and not all string values, to prevent it from replacing text content.
+		// replace: [[/sveltekit\:prefetch/g, 'data-sveltekit-prefetch']]
+		replace: [
+			[/sveltekit:attribute/g, 'data-sveltekit-attribute'],
+			[/sveltekit\:prefetch/g, 'data-sveltekit-prefetch']
+		]
+	});
+
+	// TODO: Update types of `config.preprocess` to get type safety here. Use correct typing and validation from vite-plugin-svelte
+	// TODO: This needs to support all valid configs for preprocess, possibly including objects and not just arrays.
+	// TODO: Ensure the svelte.preprocess API can run multiple instances of `svelte-preprocess` if the user has their own config too.
+	if (Array.isArray(validated.preprocess)) {
+		validated.preprocess.push(replaceSveltkitAttributes);
+	} else {
+		validated.preprocess = [replaceSveltkitAttributes];
+	}
+
 	for (const key in validated.kit.files) {
 		// @ts-expect-error this is typescript at its stupidest
 		validated.kit.files[key] = path.resolve(cwd, validated.kit.files[key]);

packages/kit/src/vite/index.js

@@ -62,6 +62,16 @@ const enforced_config = {
  * @return {import('vite').Plugin[]}
  */
 export function sveltekit() {
+	// TODO: find out if this is the right place to ensure we add preprocessing for replacing sveltekit specific attributes
+	// NOTE: OR maybe it is autimatically passed in, since it uses the svelte.config.js file where we might have additional preprocessing
+	// TODO: Ensure preprocessing works with multiple calls to `svelte-preprocess`.
+	// Seems like it should be find though, as it likely is using an internal closure to keep state, and returning the callback to actually execute the transform.
+
+	// IDEA: We could use svelte-preprocess to create the needed config for preprocessing `sveltekit:*`
+	// TODO: Update regex to only match attributes and not all string values, to prevent it from replacing text content.
+	// import preprocess from 'svelte-preprocess'
+	// preprocess({ replace: [/sveltekit\:prefetch/g, 'data-sveltekit-prefetch'] })
+
 	return [...svelte(), kit()];
 }
 
@@ -197,6 +207,9 @@ function kit() {
 		async config(config, config_env) {
 			vite_config_env = config_env;
 			svelte_config = await load_config();
+
+			console.log('vite svelte.config.js preprocess', svelte_config.preprocess);
+
 			env = get_env(vite_config_env.mode, svelte_config.kit.env.publicPrefix);
 
 			// The config is created in build_server for SSR mode and passed inline

packages/kit/test/apps/options/source/pages/prefetching/+page.svelte

@@ -1 +1,3 @@
 <a sveltekit:prefetch href="/path-base/prefetching/prefetched">click me for sveltekit:prefetch</a>
+<br />
+<a sveltekit:attribute href="/path-base/prefetching/prefetched">click me for sveltekit:attribute</a>

packages/kit/test/apps/options/svelte.config.js

@@ -1,3 +1,5 @@
+import preprocess from 'svelte-preprocess';
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	extensions: ['.jesuslivesineveryone', '.whokilledthemuffinman', '.svelte.md', '.svelte'],
@@ -23,7 +25,19 @@ const config = {
 			base: '/path-base',
 			assets: 'https://cdn.example.com/stuff'
 		}
-	}
+	},
+	preprocess: [
+		// IDEA: We could use svelte-preprocess to create the needed config for preprocessing `sveltekit:*`
+		// TODO: Update regex to only match attributes and not all string values, to prevent it from replacing text content.
+		// preprocess({
+		// 	// TODO: Find a way to create a combined preprocess() inside of sveltekit.
+		// 	// This works perfectly, but we shouldn't have to expose this detail to app developers. There must be a way to combine it.
+		// 	replace: [
+		// 		[/sveltekit\:attribute/g, 'data-sveltekit-attribute'],
+		// 		[/sveltekit\:prefetch/g, 'data-sveltekit-prefetch']
+		// 	]
+		// })
+	]
 };
 
 export default config;