docusaurus-plugin-svelte/README.md

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

# 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*

```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*

```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*

```json

"dependencies": {
    
    "svelte-adapter": "^0.5.0",
    
}
```
### Svelte component

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

*hello.svelte*

```html
<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*


```jsx

## 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 />
```