docusaurus-plugin-usesvelte

Docusaurus Plugin for dealing with svelte files

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

This plugin - docusaurus-plugin-usesvelte 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-usesvelte": "^0.1.1"
    }

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/docusaurus.config.js as below by adding to plugins property as below.

<project root>/.docusaurus/docusaurus.config.js

export default { 
..
..
  "plugins": [
    "docusaurus-plugin-usesvelte"
  ],
  "presets": [
      ...

  ]
}

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

Example

With docusaurus v2, it still depends on mdx v1 - hence svelte components are not natively supported yet.

Until then - we use an adapter component to embed our svelte component inside a react component to make things work.

Dependency

The example adds another external dependency on another external library - svelte-adapter . You can add it 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 />