added custom svelte preprocessor to provide dynamic source

.gitignore

@@ -14,6 +14,7 @@ dist
 dist-ssr
 *.local
 LoadersToMake.html
+TestPreprocessor.story.svelte
 
 # Editor directories and files
 .vscode/*

README.md

@@ -1,6 +1,19 @@
 # Svelte Component Library
 A growing collection of all my reusable Svelte components and SVGs.
 
+# Preprocessor
+This project uses a custom made svelte pre-processor located in src/lib/preprocessors. The pre-processor adds dynamic source code to all the Histoire components and variants, replacing variable names with reactive values to make them easier to use in other projects.
+
+Unfortunately there is currently a bug in Histoire that causes variants to all share the source of the last declared variant.
+
+To use the pre processor it needs to be placed in the `preprocess` array after `vitePreprocess` in the svelte config. The available options will be displayed when you add an empty object as a parameter to the preprocessor.
+
+## Shortcomings
+- It does not replace variables with values in expressions that are not Identifiers
+- It does not recognize variables declared with the @const directive
+- It has not been tested with multiple stories in a file
+- The only multiline thing that indents correctly is text. Everything else is missing indentation
+
 ## Components to add
 - Tabs
 - Loading animations from LoadersToMake

package.json

@@ -10,15 +10,16 @@
 		"preview": "histoire preview"
 	},
 	"devDependencies": {
-		"histoire": "^0.17.17",
 		"@histoire/plugin-svelte": "^0.17.17",
 		"@sveltejs/vite-plugin-svelte": "^3.1.0",
 		"@tsconfig/svelte": "^5.0.4",
-		"sass": "^1.74.1",
-		"svelte": "^4.2.13",
+		"defu": "^6.1.4",
+		"histoire": "^0.17.17",
+		"sass": "^1.75.0",
+		"svelte": "^4.2.14",
 		"svelte-check": "^3.6.9",
 		"tslib": "^2.6.2",
 		"typescript": "^5.4.5",
 		"vite": "^5.2.8"
 	}
-}
+}