snowpack-plugin-mdsvex

snowpack-plugin-mdsvex

Use Markdown enhanced with Svelte components compiled by MDSvex to parse .md and .svx files with Snowpack!

 

 

---

This plugin was created to be used within a Svelte project, but could possbily be used in a non-Svelte app since this plugin parses .md and .svx files into JS externally of the main Svelte preprocessor loop used in @snowpack/plugin-svelte.

Note: The plugin was archived at one point when the preprocessor option was added to @snowpack/plugin-svelte, however since a Snowpack plugin's resolve.input doesn't allow dyanmic input it was not possible to make Snowpack aware of extensions beyond .svelte.

yarn add snowpack-plugin-mdsvex -D
# or 
npm i snowpack-plugin-mdsvex --dev -D

Peer dependencies: svelte, snowpack, mdsvex.

Quick start

If starting a new project, tryout Create Snowpack App (CSA) using either:

• @snowpack/app-template-svelte
• @snowpack/app-template-svelte-typescript

Otherwise, after installing, update your snowpack config:

// snowpack.config.json
{
  "plugins": [
    ...
    ["snowpack-plugin-mdsvex", { /* see "Plugin Options" below */ }],
    ...
  ]
}

Plugin Options

interface SnowpackPluginMdsvexOptions {
  /**
   * Includes only the  specified paths
   */
  include?: string[]
  /**
   * Excludes the specified paths
   */
  exclude?: string[]
  /**
   * Include CSS. Default: false
   */
  css?: boolean
  /**
   * These options are passed directly to the MDSvex compiler
   */
  mdsvexOptions?: Record<string, any>
}

Supported MDSvex options:

interface MdsvexOptions {
  /**
   * Use custom extensions
   * example: ['.dvx']
   */
  extensions?: string[]
}

• extensions: Set if you wish to use any custom extensions. Defaults: ['.md', '.svx'].
• [TODO]: View all MDSvex options. With exception to custom extensions, all other MDSvex options have not been tested, but should work.

---

Acknowledgements

• Inspired and guided by snowpack-plugin-mdx

LICENSE

MIT