mattjennings / mdsvexamples

Render your Svelte code blocks in MDSveX
31 stars 2 forks source link

Setting custom Wrapper component through config has no effect #19

Closed janosh closed 1 year ago

janosh commented 1 year ago

Following the readme, I tried setting a custom component to render examples as follows to no effect.

import adapter from '@sveltejs/adapter-static'
import { mdsvex } from 'mdsvex'
import examples from 'mdsvexamples'
import preprocess from 'svelte-preprocess'

/** @type {import('@sveltejs/kit').Config} */
export default {
  extensions: [`.svelte`, `.svx`, `.md`],

  preprocess: [
    preprocess(),
    mdsvex({
      remarkPlugins: [
        examples,
        { defaults: { Wrapper: `/src/components/Example.svelte` } },
      ],
      extensions: [`.svx`, `.md`],
    }),
  ],

  kit: {
    adapter: adapter(),
  },
}

Setting it as code block meta works though:

```svelte example Wrapper="../../components/Example.svelte"
...


Here's a [StackBlitz repro](https://stackblitz.com/edit/sveltejs-kit-template-default-jalx72?file=src/lib/Example.svelte).
mattjennings commented 1 year ago

hey @janosh , thanks for reporting this. I had the wrong syntax in the example for the config 🤦‍♂️ it should be:

remarkPlugins: [
    [examples, { defaults: { Wrapper: `/src/lib/Example.svelte` } }]
]

Just needed to add an extra pair of surrounding square brackets. I'll update the README to correct this.

mattjennings commented 1 year ago

Actually I do have the correct syntax in the README 😅 so yeah - just make sure you add those extra square brackets.

janosh commented 1 year ago

Oops, should have looked at my config more carefully. Sorry for the noise. 🤦 Also, I should have gotten suspicious that it must be my mistake after looking at your tests and finding them very solid. 👍

mattjennings commented 1 year ago

All good!