Is the MDSveX config intentionally omitted?

[spences10]

Been playing around with this and love it! Thanks!

I found the mdsvex config isn't quite working as expected for me, not sure if others see this behaviour

New project created with the CLI:

npx sv@latest create ploopy
┌  Welcome to the Svelte CLI! (v0.5.7)
│
◆  What would you like to add to your project?
│  ◼ prettier
│  ◼ eslint
│  ◼ vitest
│  ◼ playwright (https://playwright.dev)
│  ◻ tailwindcss
│  ◻ drizzle
│  ◻ lucia
│  ◻ mdsvex
│  ◻ paraglide
│  ◻ storybook
└

Then added in mdsvex:

npx sv@latest add
┌  Welcome to the Svelte CLI! (v0.5.7)
│
◆  What would you like to add to your project?
│  ◻ prettier
│  ◻ eslint
│  ◻ vitest
│  ◻ playwright
│  ◻ tailwindcss
│  ◻ drizzle
│  ◻ lucia
│  ◼ mdsvex (https://mdsvex.pngwn.io)
│  ◻ paraglide
│  ◻ storybook
└

svelte.config.js

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://svelte.dev/docs/kit/integrations#preprocessors
    // for more information about preprocessors
    preprocess: [vitePreprocess(), mdsvex()],

    kit: {
        // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
        // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
        // See https://svelte.dev/docs/kit/adapters for more information about adapters.
        adapter: adapter()
    },

    extensions: ['.svelte', '.svx']
};

Replaced the +page.svelte with +page.md so realised that I needed to add '.md' to the extensions array.

Thing is though, that didn't render the markdown on the page, so I added a mdsvex.config.js file:

import { defineMDSveXConfig as defineConfig } from 'mdsvex';

const config = defineConfig({
    extensions: ['.svelte.md', '.md', '.svx'],

    smartypants: {
        dashes: 'oldschool'
    },

    remarkPlugins: [],
    rehypePlugins: []
});

export default config;

This also has an extensions array, but if I comment out here the md isn't rendered, comment out on the svelte.config.js then the page isn't rendered

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsvex } from 'mdsvex';
import mdsvexConfig from './mdsvex.config.js';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://svelte.dev/docs/kit/integrations#preprocessors
    // for more information about preprocessors
    preprocess: [vitePreprocess(), mdsvex(mdsvexConfig)],

    kit: {
        // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
        // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
        // See https://svelte.dev/docs/kit/adapters for more information about adapters.
        adapter: adapter()
    },

    extensions: ['.svelte', '.svx', '.md']
};

export default config;

Am I missing something here or do we now need to have two sets of extensions defined?

LMK if you would like a minimal repo, it's those steps though

[manuel3108]

Interesting. I assume that we are not adding this, because it's not part of the docs: https://mdsvex.pngwn.io/docs. This is because mdsvex & kit need to understand that new file extension. In your first try you only told kit about the new extension, but not mdsvex

Instead of adding a whole new mdsvex config, you can just pass the extensions property to your mdsvex call in svelte.config.js, leaving you with something like this:

import { mdsvex } from 'mdsvex';
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [vitePreprocess(), mdsvex({ extensions: ['.svx', 'md'] })],

    // boring kit stuff

    extensions: ['.svelte', '.svx', '.md']
};

export default config;

[dominikg]

extensions have to be added to the svelte config vite-plugin-svelte uses. as sveltekit currently does not expose a way for users to do this and other tools also need to be aware of custom extensions, svelte.config.js is the best way i know of today.

so you'd include .svelte, .svx and .md in svelte.config extensions but only .md and .svx in mdsvex.config.js extensions