✨ Add mdx example

Author: amoutonbrady

playground/components/counter.tsx

@@ -0,0 +1,23 @@
+import { Component, createSignal } from 'solid-js';
+
+const Counter: Component = () => {
+  const style = { padding: '8px', color: 'white', background: 'black', borderRadius: '4px' };
+
+  const [click, setClick] = createSignal(0);
+  const increment = () => setClick((click) => click + 1);
+  const decrement = () => setClick((click) => click - 1);
+
+  return (
+    <>
+      <button onClick={decrement} style={style}>
+        -1
+      </button>
+      <span>{click()}</span>
+      <button onClick={increment} style={style}>
+        +1
+      </button>
+    </>
+  );
+};
+
+export default Counter;

playground/hello.mdx

@@ -0,0 +1,5 @@
+import Counter from "./components/counter";
+
+# This is MDX woo
+
+<Counter />

playground/index.tsx

@@ -6,6 +6,8 @@ import type { RouteDefinition } from 'solid-app-router';
 
 import test from '@@/test.txt?raw';
 import Home from '@/index';
+// @ts-ignore
+import Hello from './hello.mdx';
 
 const json = await fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) =>
   response.json(),
@@ -38,6 +40,7 @@ const App = () => {
       <hr />
       <Route />
       <button onClick={() => setCount(count() + 1)}>{count()}</button>
+      <Hello />
     </>
   );
 };

playground/package.json

@@ -10,12 +10,14 @@
   "devDependencies": {
     "@babel/core": "^7.16.7",
     "@babel/plugin-syntax-top-level-await": "^7.14.5",
+    "@mdx-js/mdx": "^2.0.0-rc.2",
     "vite": "^2.7.10",
     "vite-plugin-solid": "link:.."
   },
   "dependencies": {
     "solid-app-router": "^0.1.14",
     "solid-js": "^1.2.6",
+    "solid-mdx": "^0.0.5",
     "solid-meta": "^0.27.3",
     "solid-utils": "^0.8.1"
   }