svelte-exmarkdown

There are major changes in the plugin interface in this release, especially in the component renderers.

Migration Guide

If you don't use any plugins, no migration is required.

GFM Plugin

If you are using the built-in GFM plugin, please make the following changes.
It is now a function and can pass options.

  import { gfmPlugin } from 'svelte-exmarkdown/gfm';
  ...
- <Markdown md="# hello" plugins={[gfmPlugin]} />
+ <Markdown md="# hello" plugins={[gfmPlugin()]} />

remark/rehype plugins

You can still use remark/rehype plugins.

Component map ( renderer prop)

This interface has breaking changes.
This makes customizing the renderer more intuitive than ever.

Previously, I recommended creating a "bridge component" when customizing the renderer.
However, starting with this release, this is no longer necessary.

e.g.

P.svelte

<script></script>
<p {...$$props}><slot /></p>
<style>p { color: red; }</style>

PBridge.svelte

<script lang="ts">
	import P from './P.svelte';
	import type { HastNode } from 'svelte-exmarkdown/types';
	import Children from 'svelte-exmarkdown/renderer/Children.svelte';
	export let tagName: string;
	export let children: HastNode[] | undefined;
	export let properties: Record<string, unknown>;

	export let type: unknown = undefined;
	export let position: unknown = undefined;
	export let __index: unknown = undefined;
	// HACK: ignore `unused-export-let`
	type && position && __index;
</script>

{#if Array.isArray(children) && children.length !== 0}
	<!-- prettier-ignore -->
	<P {...properties}><Children {children} /></P>
{:else}
	<!-- prettier-ignore -->
	<P {...properties} />
{/if}

App.svelte

<script lang="ts">
	import Markdown from 'svelte-exmarkdown';
	import PBridge from './PBrdige.svelte';
	let md = '# Hello';
	const plugins = [{ renderer: { p: PBridge } }];
</script>
<Markdown {md} {plugins} />

P.svelte

<script></script>
<p {...$$props}><slot /></p>
<style>p { color: red; }</style>

App.svelte

<script lang="ts">
	import Markdown from 'svelte-exmarkdown';
	import P from './P.svelte';
	let md = '# Hello';
	const plugins = [{ renderer: { p: P } }];
</script>
<Markdown {md} {plugins} />

If you are using some properties of bridge component, you can get data by using the getAstNode() function.

See the documentation for details.
Please feel free to contact us in Discussions if you have any questions, or in Issues if you find a bug!