Merge pull request #1184 from evidence-dev/fix/1182/pluggable-svelte-…

…config

feat: enable custom sveltekit configs

.changeset/slow-actors-march.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/evidence': patch
+---
+
+User projects can now extend svelte.config.js

.eslintignore

@@ -20,4 +20,7 @@ yarn.lock
 /packages/components/*
 **/sites/docs/*
 **/dist/*
-.changeset/*
+.changeset/*
+
+# Ignore this file because it uses top-level await and ESLint can't parse that.
+packages/evidence/scripts/svelte.config.js

packages/evidence/scripts/build-template.js

@@ -1,7 +1,7 @@
 // Populate the template that's shipped with the package using a subset of files from the example-project
 import path from 'path';
-import fs from 'fs-extra';
-
+import fsExtra from 'fs-extra';
+import fs from 'fs';
 const templatePaths = [
 	'.npmrc',
 	'static/',
@@ -22,50 +22,19 @@ const templatePaths = [
 	'postcss.config.cjs'
 ];
 
-fs.emptyDirSync('./template/');
+fsExtra.emptyDirSync('./template/');
 
 templatePaths.forEach((p) => {
-	fs.copySync(path.join('../../sites/example-project', p), path.join('./template', p));
+	fsExtra.copySync(path.join('../../sites/example-project', p), path.join('./template', p));
 });
 
-fs.emptyDirSync('./template/sources');
+fsExtra.emptyDirSync('./template/sources');
 
+const configFileLocation = new URL('svelte.config.js', import.meta.url);
 // Create a clean SK config (workspace's is modified)
-fs.outputFileSync(
-	'./template/svelte.config.js',
-	`
-    import evidencePreprocess from '@evidence-dev/preprocess'
-    import preprocess from "svelte-preprocess";
-    import adapter from '@sveltejs/adapter-static';
-    import { evidencePlugins } from '@evidence-dev/plugin-connector';
-    
-    /** @type {import('@sveltejs/kit').Config} */
-    
-    const config = {
-        extensions: ['.svelte', ".md"], 
-        preprocess: [
-            ...evidencePreprocess(true),
-            evidencePlugins(),
-            preprocess({
-              postcss: true,
-            }),
-        ],
-        kit: {
-            adapter: adapter({
-                strict: false
-            }),
-            files: {
-                routes: 'src/pages',
-                lib: 'src/components'
-            }
-        }
-    };
-    
-    export default config    
-    `
-);
+fs.writeFileSync('./template/svelte.config.js', fs.readFileSync(configFileLocation));
 
-fs.outputFileSync(
+fsExtra.outputFileSync(
 	'./template/vite.config.js',
 	`import { sveltekit } from "@sveltejs/kit/vite"
     const strictFs = (process.env.NODE_ENV === 'development') ? false : true;
@@ -90,7 +59,7 @@ fs.outputFileSync(
 );
 
 // Create a readme
-fs.outputFileSync(
+fsExtra.outputFileSync(
 	'./template/README.md',
 	`
 # Evidence Template Project

packages/evidence/scripts/svelte.config.js

@@ -0,0 +1,82 @@
+import evidencePreprocess from '@evidence-dev/preprocess';
+import preprocess from 'svelte-preprocess';
+import adapter from '@sveltejs/adapter-static';
+import { evidencePlugins } from '@evidence-dev/plugin-connector';
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * @param {Object} a
+ * @param {Object} b
+ * @returns {Object}
+ */
+const deepMerge = (a, b) => {
+	for (const key in b) {
+		if (typeof b[key] === 'object' && !Array.isArray(b[key])) {
+			if (!a[key]) a[key] = {};
+			deepMerge(a[key], b[key]);
+		} else {
+			Object.assign(a, { [key]: b[key] });
+		}
+	}
+	return a;
+};
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	extensions: ['.svelte', '.md'],
+	preprocess: [
+		...evidencePreprocess(true),
+		evidencePlugins(),
+		preprocess({
+			postcss: true
+		})
+	],
+	kit: {
+		adapter: adapter({
+			strict: false
+		}),
+		files: {
+			routes: 'src/pages',
+			lib: 'src/components'
+		}
+	}
+};
+
+async function loadUserConfiguration() {
+	if (!process.cwd().includes('.evidence')) return;
+	const rootDir = process.cwd().split('.evidence')[0];
+	const rootDirContents = fs.readdirSync(rootDir);
+
+	if (!rootDirContents.includes('svelte.config.js')) return;
+
+	const configFileLocation = path.join(rootDir, 'svelte.config.js');
+	const configURL = new URL(`file:///${configFileLocation}`).href;
+	/** @type {import("@sveltejs/kit").Config} */
+	const userConfig = await import(configURL).then((r) => r.default);
+
+	if ('preprocess' in userConfig) {
+		if ('preprocess' in config) {
+			config.preprocess.push(...userConfig.preprocess);
+		} else {
+			// This case shouldn't ever be reached.
+			config.preprocess = userConfig.preprocess;
+		}
+		delete userConfig.preprocess;
+	}
+	if ('extensions' in userConfig) {
+		console.warn('Configuring extensions is disabled for Evidence projects.');
+		delete userConfig.extensions;
+	}
+	if ('kit' in userConfig && 'files' in userConfig.kit) {
+		console.warn('Configuring file locations is disabled for Evidence projects.');
+		delete userConfig.kit.files;
+	}
+
+	deepMerge(config, userConfig);
+	console.log('Custom svelte.config.js applied');
+}
+
+await loadUserConfiguration();
+
+export default config;

sites/test-env/svelte.config.js

@@ -0,0 +1,15 @@
+/** @type {import("@sveltejs/kit").Config} */
+export default {
+	preprocess: [],
+	extensions: [],
+	kit: {
+		files: {}
+	},
+	vite: {
+		server: {
+			watch: {
+				usePolling: true
+			}
+		}
+	}
+};