Setup mdx for docs

rollup.config.js

@@ -4,9 +4,26 @@ import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import css from 'rollup-plugin-css-only';
+import { mdsvex } from "mdsvex";
 
 const production = !process.env.ROLLUP_WATCH;
 
+const docsConfig = {
+  input: 'src/main.js',
+  outputFormat: 'iife',
+  outputFile: 'docs/index.js'
+}
+const packageConfig = {
+  input: 'src/docs/main.js',
+  outputFormat: 'es',
+  outputFile: 'dist/index.js'
+}
+
+const docs = !!process.env.DOCS
+const getConfig = () => {
+  return docs ? docsConfig : packageConfig
+}
+
 function serve() {
   let server;
 
@@ -29,19 +46,22 @@ function serve() {
 }
 
 export default {
-  input: 'src/main.js',
+  input: getConfig().input,
   output: {
-    sourcemap: true,
-    format: 'es',
+    sourcemap: false,
+    format: getConfig().outputFormat,
     name: 'app',
-    file: 'dist/index.js'
+    file: getConfig().outputFile
   },
   plugins: [
     svelte({
       compilerOptions: {
         // enable run-time checks when not in production
         dev: !production
-      }
+      },
+      // tell svelte to handle mdsvex files
+      extensions: [".svelte", ".svx"],
+      preprocess: mdsvex()
     }),
     // we'll extract any component CSS out into
     // a separate file - better for performance