From 59b01e3e88b64803f90ee4e6427089a106d18612 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <hello@benjaminbaedorf.eu>
Date: Mon, 21 Mar 2022 22:26:52 +0100
Subject: [PATCH] Add md generation

---
 packages/core/lib/types.ts                    |  2 +-
 packages/docs/lib/ExampleStandaloneEditor.tsx |  4 +-
 packages/docs/lib/api/ComponentDocs.tsx       |  1 -
 packages/docs/lib/api/Package.tsx             |  6 +-
 packages/docs/lib/api/generate-api.ts         | 84 +++++++++++++++++++
 5 files changed, 89 insertions(+), 8 deletions(-)
 create mode 100644 packages/docs/lib/api/generate-api.ts

diff --git a/packages/core/lib/types.ts b/packages/core/lib/types.ts
index 5050fec..91280b5 100644
--- a/packages/core/lib/types.ts
+++ b/packages/core/lib/types.ts
@@ -159,7 +159,7 @@ export interface IBlockDefinition<T> {
   icon?: string;
   getDefaultData: T;
   edit: Component<IBlockProps<T>>;
-  display: Component<IBlockProps<T>>;
+  view: Component<IBlockProps<T>>;
 }
 
 /**
diff --git a/packages/docs/lib/ExampleStandaloneEditor.tsx b/packages/docs/lib/ExampleStandaloneEditor.tsx
index 087093d..3b7a690 100644
--- a/packages/docs/lib/ExampleStandaloneEditor.tsx
+++ b/packages/docs/lib/ExampleStandaloneEditor.tsx
@@ -22,6 +22,7 @@ export default defineComponent({
     const block = exampleData;
 
     onMounted(async () => {
+      // getBlock could be used to access the block data inside the editor
       const { getBlock } = await startSchlechtenburg(
         '#example-editor',
         {
@@ -39,8 +40,7 @@ export default defineComponent({
 
           // This callback will be alled any time the block data gets updated
           onUpdate: (blockData) => {
-            console.log('Got onUpdate', blockData);
-            console.log('getBlock', getBlock());
+            console.log('got update', blockData);
           }
         },
       )
diff --git a/packages/docs/lib/api/ComponentDocs.tsx b/packages/docs/lib/api/ComponentDocs.tsx
index ce24fbb..6d2bd9b 100644
--- a/packages/docs/lib/api/ComponentDocs.tsx
+++ b/packages/docs/lib/api/ComponentDocs.tsx
@@ -18,7 +18,6 @@ export default defineComponent({
 
   setup(props) {
     const docs = props.docs;
-    console.log(docs);
     return () => <section class="docs component-docs">
       <header class="docs--header">
         <h2
diff --git a/packages/docs/lib/api/Package.tsx b/packages/docs/lib/api/Package.tsx
index 76c168e..a732365 100644
--- a/packages/docs/lib/api/Package.tsx
+++ b/packages/docs/lib/api/Package.tsx
@@ -3,8 +3,6 @@ import { defineComponent } from 'vue';
 import { ComponentDoc } from 'vue-docgen-api';
 import { DeclarationReflection } from 'typedoc';
 
-import { getByName } from '../docs';
-import { getShortPackageName } from './package';
 import ComponentDocs from './ComponentDocs';
 import TSDocs from './TSDocs';
 
@@ -28,7 +26,7 @@ export default defineComponent({
     }
 
     const { lib, components } = docs;
-    return () => <main class="package">
+    return () => <div class="package">
       <h1>{lib.name}</h1>
       <p>{lib.comment}</p>
       <p>{lib.flags}</p>
@@ -40,6 +38,6 @@ export default defineComponent({
 
         return <TSDocs docs={child}></TSDocs>
       })}
-    </main>;
+    </div>;
   },
 });
diff --git a/packages/docs/lib/api/generate-api.ts b/packages/docs/lib/api/generate-api.ts
new file mode 100644
index 0000000..24b3281
--- /dev/null
+++ b/packages/docs/lib/api/generate-api.ts
@@ -0,0 +1,84 @@
+import { DeclarationReflection } from 'typedoc';
+import { ComponentDoc } from 'vue-docgen-api';
+
+import { getByName } from '../docs';
+import { getShortPackageName } from './package';
+
+const getTypeParamString = (params: TypeParameterReflection[]) => `<${params.map(p => p.name).join(', ')}>`;
+
+const generateComponentDoc = (docs: ComponentDoc) => `
+## ${docs.exportName}
+
+<p class="docs--type">Component <code>&lt;${docs.displayName} /&gt;</code></p>
+
+${docs.description}
+
+### Props
+
+${(docs.props || []).map(prop => `
+#### ${prop.name}
+
+${prop.description}
+
+${prop.type ? `Type: <code>${prop.type.name}</code>` : ''}
+
+${prop.defaultValue ? `Default: <code>${prop.defaultValue.value}</code>`: null}
+</div>`).join('\n\n')}
+`;
+
+const generateTSDocs = (docs: DeclarationReflection) => `
+## ${docs.name}${docs.typeParameters ? getTypeParamString(docs.typeParameters) : ''}
+
+<p class="docs--type">{docs.kindString}</p>
+
+${docs.comment?.shortText || ''}
+
+${(docs.children || []).map((child: DeclarationReflection) => `
+\`\`\`
+  ${child.name}: ${child.type?.name}
+\`\`\`
+`).join('\n\n')}
+`;
+
+const generateChildren = (
+  children: DeclarationReflection[] = [],
+  components: ComponentDoc[],
+) => children.map((child) => {
+  const componentDocs = components.find((c: ComponentDoc) => c.exportName === child.name);
+  if (componentDocs) {
+    return generateComponentDoc(componentDocs);
+  }
+
+  return generateTSDocs(child);
+});
+
+/**
+ * Generate the full markdown for a package
+ *
+ * Takes the package name (e.g. @schlechtenburg/core) and outputs a markdown string ready to be
+ * consumed by vitepress
+ */
+export const generatePackageMd = (packageName: string) => {
+  const docs = getByName(getShortPackageName(Array.isArray(packageName) ? packageName[0] : packageName));
+
+  if (!docs) {
+    return `Could not find package docs for ${packageName}`;
+  }
+
+  const { lib, components } = docs;
+
+  const markdown = `
+# ${lib.name}
+
+${lib.comment}
+
+${lib.flags}
+
+${generateChildren(lib.children, components)}
+
+  `;
+
+  return markdown
+    .trim()
+    .replace(/\n\n+/, '\n\n');
+}