From 474e4898c03736d8b07b3cd0e723ea79bb16e948 Mon Sep 17 00:00:00 2001
From: Jonas Kruckenberg <iterpre@protonmail.com>
Date: Wed, 31 May 2023 16:09:08 +0200
Subject: [PATCH] feat: add markdown docs output to playground

---
 playground/Cargo.toml            |  3 +-
 playground/editor/pnpm-lock.yaml |  6 ++-
 playground/editor/src/index.ts   | 90 +++++++++++++++++---------------
 playground/index.html            | 13 ++++-
 playground/src/main.rs           |  8 ++-
 5 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/playground/Cargo.toml b/playground/Cargo.toml
index 782d426..e5b0c32 100644
--- a/playground/Cargo.toml
+++ b/playground/Cargo.toml
@@ -19,4 +19,5 @@ tauri-bindgen-gen-markdown = { path = "../crates/gen-markdown" }
 tauri-bindgen-gen-guest-rust = { path = "../crates/gen-guest-rust" }
 tauri-bindgen-gen-guest-ts = { path = "../crates/gen-guest-ts" }
 tauri-bindgen-gen-guest-js = { path = "../crates/gen-guest-js" }
-wit-parser = { path = "../crates/wit-parser" }
\ No newline at end of file
+wit-parser = { path = "../crates/wit-parser" }
+pulldown-cmark = { version = "0.9", default-features = false }
diff --git a/playground/editor/pnpm-lock.yaml b/playground/editor/pnpm-lock.yaml
index d2bed06..28bf7ca 100644
--- a/playground/editor/pnpm-lock.yaml
+++ b/playground/editor/pnpm-lock.yaml
@@ -1,4 +1,8 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
 
 dependencies:
   '@codemirror/lang-javascript':
diff --git a/playground/editor/src/index.ts b/playground/editor/src/index.ts
index 3a20faa..0306954 100644
--- a/playground/editor/src/index.ts
+++ b/playground/editor/src/index.ts
@@ -9,55 +9,59 @@ const default_content = `interface greet {
 }`
 
 const outputs = {
-    'errors': new EditorView({
-        parent: document.getElementById('errors')!,
-        extensions: [basicSetup, javascript(), EditorState.readOnly.of(true)],
-    }),
-    'host': new EditorView({
-        parent: document.getElementById('host')!,
-        extensions: [basicSetup, rust(), EditorState.readOnly.of(true)],
-    }),
-    'guest-rust': new EditorView({
-        parent: document.getElementById('guest_rust')!,
-        extensions: [basicSetup, rust(), EditorState.readOnly.of(true)],
-    }),
-    'guest-js': new EditorView({
-        parent: document.getElementById('guest_js')!,
-        extensions: [basicSetup, javascript(), EditorState.readOnly.of(true)],
-    }),
-    'guest-ts': new EditorView({
-        parent: document.getElementById('guest_ts')!,
-        extensions: [basicSetup, javascript(), EditorState.readOnly.of(true)],
-    }),
+  'errors': new EditorView({
+    parent: document.getElementById('errors')!,
+    extensions: [basicSetup, javascript(), EditorState.readOnly.of(true)],
+  }),
+  'host': new EditorView({
+    parent: document.getElementById('host')!,
+    extensions: [basicSetup, rust(), EditorState.readOnly.of(true)],
+  }),
+  'guest-rust': new EditorView({
+    parent: document.getElementById('guest_rust')!,
+    extensions: [basicSetup, rust(), EditorState.readOnly.of(true)],
+  }),
+  'guest-js': new EditorView({
+    parent: document.getElementById('guest_js')!,
+    extensions: [basicSetup, javascript(), EditorState.readOnly.of(true)],
+  }),
+  'guest-ts': new EditorView({
+    parent: document.getElementById('guest_ts')!,
+    extensions: [basicSetup, javascript(), EditorState.readOnly.of(true)],
+  }),
 }
 
-export function updateOutput(id: 'errors' | 'host' | 'guest-rust' | 'guest-js' | 'guest-ts', data: string) {
+export function updateOutput(id: 'errors' | 'host' | 'guest-rust' | 'guest-js' | 'guest-ts' | 'markdown', data: string) {
+  if (id === "markdown") {
+    document.getElementById('markdown')!.innerHTML = data
+  } else {
     outputs[id].dispatch({
-        changes: {
-            from: 0,
-            to: outputs[id].state.doc.length,
-            insert: data,
-        },
+      changes: {
+        from: 0,
+        to: outputs[id].state.doc.length,
+        insert: data,
+      },
     })
+  }
 }
 
 export function setup(onChange: (data: string) => void) {
-    const input = new EditorView({
-        parent: document.getElementById('input')!,
-        extensions: [basicSetup, wit(), EditorView.updateListener.of((v) => {
-            if (v.docChanged) {
-                console.log(v.state.doc.toString())
+  const input = new EditorView({
+    parent: document.getElementById('input')!,
+    extensions: [basicSetup, wit(), EditorView.updateListener.of((v) => {
+      if (v.docChanged) {
+        console.log(v.state.doc.toString())
 
-                onChange(v.state.doc.toString())
-            }
-        })],
-    })
+        onChange(v.state.doc.toString())
+      }
+    })],
+  })
 
-    input.dispatch({
-        changes: {
-            from: 0,
-            to: input.state.doc.length,
-            insert: default_content,
-        },  
-    })
-}
\ No newline at end of file
+  input.dispatch({
+    changes: {
+      from: 0,
+      to: input.state.doc.length,
+      insert: default_content,
+    },
+  })
+}
diff --git a/playground/index.html b/playground/index.html
index 065d41b..7384c3d 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -19,6 +19,7 @@
         <input id="iguest-rust" type="radio" name="tabs" />
         <input id="iguest-js" type="radio" name="tabs" />
         <input id="iguest-ts" type="radio" name="tabs" />
+        <input id="imarkdown" type="radio" name="tabs" />
 
         <nav>
             <label for="iinfo">Info</label>
@@ -27,16 +28,19 @@
             <label for="iguest-rust">Guest Rust</label>
             <label for="iguest-js">Guest JavaScript</label>
             <label for="iguest-ts">Guest TypeScript</label>
+            <label for="imarkdown">Markdown</label>
         </nav>
 
         <figure>
             <section id="info">
                 <h1>Welcome</h1>
 
-                <p>This is the tauri-bindgen playground. You can enter any .wit interface definition file and inspect the generated code.</p>
+                <p>This is the tauri-bindgen playground. You can enter any .wit interface definition file and inspect
+                    the generated code.</p>
                 <p>For more info see <a href="https://github.com/tauri-apps/tauri-bindgen">the repo</a>. </p>
             </section>
             <section id="errors"></section>
+            <section id="markdown"></section>
             <section id="host"></section>
             <section id="guest_rust"></section>
             <section id="guest_js"></section>
@@ -55,6 +59,7 @@
         grid-template-rows: 50vh 50vh;
         font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
     }
+
     main {
         width: 100%;
         height: 100%;
@@ -62,6 +67,7 @@
         padding: 5px;
         box-sizing: border-box;
     }
+
     aside figure {
         display: block;
         margin-left: 0;
@@ -86,6 +92,7 @@
 
     #iinfo:checked~figure #info,
     #ierrors:checked~figure #errors,
+    #imarkdown:checked~figure #markdown,
     #ihost:checked~figure #host,
     #iguest-rust:checked~figure #guest_rust,
     #iguest-js:checked~figure #guest_js,
@@ -116,6 +123,7 @@
 
     #iinfo:checked~nav label[for="iinfo"],
     #ierrors:checked~nav label[for="ierrors"],
+    #imarkdown:checked~nav label[for="imarkdown"],
     #ihost:checked~nav label[for="ihost"],
     #iguest-rust:checked~nav label[for="iguest-rust"],
     #iguest-js:checked~nav label[for="iguest-js"],
@@ -128,6 +136,7 @@
 
     #iinfo:checked~nav label[for="iinfo"]::after,
     #ierrors:checked~nav label[for="ierrors"]::after,
+    #imarkdown:checked~nav label[for="imarkdown"]::after,
     #ihost:checked~nav label[for="ihost"]::after,
     #iguest-rust:checked~nav label[for="iguest-rust"]::after,
     #iguest-js:checked~nav label[for="iguest-js"]::after,
@@ -143,4 +152,4 @@
     }
 </style>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/playground/src/main.rs b/playground/src/main.rs
index f21a9de..2770f98 100644
--- a/playground/src/main.rs
+++ b/playground/src/main.rs
@@ -1,4 +1,5 @@
 use miette::NamedSource;
+use pulldown_cmark::{html, Parser};
 use tauri_bindgen_core::GeneratorBuilder;
 use wasm_bindgen::prelude::*;
 use wit_parser::Interface;
@@ -64,9 +65,14 @@ fn main() {
                             prettier: false,
                             romefmt: false,
                         },
-                        iface,
+                        iface.clone(),
                     ),
                 );
+                let markdown = gen_interface(tauri_bindgen_gen_markdown::Builder {}, iface);
+                let parser = Parser::new(&markdown);
+                let mut html_output = String::new();
+                html::push_html(&mut html_output, parser);
+                update_output("markdown", &html_output);
             }
             Err(err) => {
                 update_output("errors", &format!("{:?}", err));