diff --git a/packages/vite/README.md b/packages/vite/README.md new file mode 100644 index 0000000..1af5081 --- /dev/null +++ b/packages/vite/README.md @@ -0,0 +1,58 @@ +# MDSvexRs + +Vite/sveltekit plugin that uses `mdsvexrs-wasm` to convert markdown to svelte files in an optimized way. +This plugin generates raw html (using `{@html}` tags) that result in faster build times (less js generated, less js for esbuild to process), faster changes (setting innerHtml is faster than using JSDOM) and slightly faster loading times. + +Main use case was allowing ~2k LoC markdown with embedded svelte to build with less than 20GB of RAM (yes, that's how much esbuild used). + +## Use + +Install this package + +``` +pnpm install mdsvexrs +``` + +And add it to preprocess under `svelte.config.js`: + +```js +import { mdsvexrs } from 'mdsvexrs' + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + kit: ..., + extensions: ['.svelte', '.md'], + + preprocess: [ + mdsvexrs({ layout: "$lib/layout.svelte" }) + ] +}; +``` + +Note that a layout *is* required and requires a static path - use `$lib` prefix and put your layout under `src/lib`. Layout is a svelte file +that accepts route data and markdown frontmatter as inputs. + +As a minimal layout, just render children: + +```svelte + + +``` + +Frontmatter is passed as props, and props passed to markdown component (such as sveltekit `data`) are also passed as props to layout. + +Note that markdown scripts are assumed to be 'old' svelte and not runes. They use `$$props` to pass props to layout, which won't work in runes mode (i.e. if you use `$state` or similar in .md `