Docusaurus Plugin to embed svelte components

Docusaurus (v2) loads content from user friendly mdx files and converts the mdx files to html files.

This plugin - docusaurus-plugin-svelte helps docusaurus understand .svelte files so the components in the .svelte files could be rendered directly inline in the .mdx file.

Usage

Dependency in package.json

In the project created by docusaurus - modify the package.json to add the following new dependency In package.json as the following

package.json

   "dependencies": {
       "docusaurus-plugin-svelte": "^0.1.7"
    }

The peerDependencies - svelte and svelte-loader also needs to be installed as above so as to not pollute the namespace of the dependent projects.

Configuring docusaurus to add the plugin

After adding the new dependency as mentioned above - make changes to the docusaurus config file - <project root>/docusaurus.config.js as below by adding to plugins property as below.

<project root>/docusaurus.config.js

export default { 

 plugins: [
    "docusaurus-plugin-svelte"
  ],
  presets: [


  ]
}

The plugin should help enable docusaurus to read the .svelte files in the content repository and inject them into the components.

Example

Docusaurus v2, depends on mdx v1 - hence it supports cjs and does not support esm natively yet.

mdx v2 does support them natively thoough.

Due to that limitation, we use an adapter react component to embed our svelte component until then.

Dependency

We use the external library svelte-adapter to embed our svelte component inside a react component to make things work.

We add the dependency to package.json as below.

package.json

"dependencies": {
    
    "svelte-adapter": "^0.5.0",
    
}

Svelte component

Say - we have a svelte component - hello.svelte as below.

hello.svelte

<div class="nice">
  A nice hello universe component
</div>
<style>
.nice {
    background: purple;
    padding: 2rem 2rem 2rem 2rem;
}    
</style>

Content / mdx file

The above mentioned svelte component can be embeeded in a mdx file as below.

content.mdx

## Embedding svelte inside a mdx file

The following content renders the svelte component - hello.svelte below.

import toReact from "svelte-adapter/react";
import hello from './hello.svelte';

export const baseStyle = {
  width: "100%"
};

export const HelloUniverse = toReact(hello, baseStyle, "div");


<HelloUniverse />