feat: basic markdown generation

package.json

@@ -45,9 +45,12 @@
     "@vitejs/plugin-vue": "^1.1.5",
     "@vue/compiler-sfc": "^3.0.7",
     "eslint": "latest",
+    "hljs": "^6.2.3",
     "jest": "latest",
     "json-schema": "^0.3.0",
+    "marked": "^2.0.1",
     "monaco-editor": "^0.23.0",
+    "prismjs": "^1.23.0",
     "siroc": "latest",
     "standard-version": "latest",
     "ts-jest": "^26.5.4",

playground/App.vue

@@ -3,7 +3,7 @@
     <!-- Nav -->
     <div class="p-1em bg-cyan-500 text-white flex space-x-0 justify-between">
       <p class="font-extrabold">
-        <a href="/">MagicSchema</a>
+        <a href="/">Untyped</a>
       </p>
       <div>
         <a href="https://github.com/unjs/untyped" role="noopener" target="github">Github</a>
@@ -34,7 +34,7 @@
       <!-- Output -->
       <div class="block">
         <div class="block-title">
-          <Tabs v-model="state.outputTab" :tabs="['loader', 'schema', 'types', 'resolved']" />
+          <Tabs v-model="state.outputTab" :tabs="['loader', 'schema', 'docs', 'types', 'resolved']" />
           <span class="block-label">Output</span>
         </div>
         <!-- Schema -->
@@ -51,6 +51,13 @@
           </div>
           <Editor :model-value="types" read-only language="typescript" />
         </div>
+        <!-- Docs -->
+        <div v-if="state.outputTab === 'docs'" class="block-content">
+          <div class="block-info">
+            Markdown documentation is auto generated from schema.
+          </div>
+          <Markdown :value="markdown" />
+        </div>
         <!-- Loader -->
         <div v-if="state.outputTab === 'loader'" class="block-content">
           <div class="block-info">
@@ -73,7 +80,7 @@
 <script>
 import 'virtual:windi.css'
 import { defineComponent, defineAsyncComponent } from 'vue'
-import { resolveSchema, generateTypes, applyDefaults } from '../src'
+import { resolveSchema, generateTypes, applyDefaults, generateMarkdown } from '../src'
 import { evaluateSource, persistedState, safeComputed, asyncImport } from './utils'
 import { defaultReference, defaultInput } from './consts'
 import LoadingComponent from './components/loading.vue'
@@ -85,6 +92,10 @@ export default defineComponent({
     Editor: defineAsyncComponent({
       loader: () => import('./components/editor.vue'),
       loadingComponent: LoadingComponent
+    }),
+    Markdown: defineAsyncComponent({
+      loader: () => import('./components/markdown.vue'),
+      loadingComponent: LoadingComponent
     })
   },
   setup () {
@@ -106,6 +117,7 @@ export default defineComponent({
     const referenceObj = safeComputed(() => evaluateSource(transpiledRef.value))
     const schema = safeComputed(() => resolveSchema(referenceObj.value))
     const types = safeComputed(() => generateTypes(schema.value))
+    const markdown = safeComputed(() => generateMarkdown(schema.value))
 
     const inputObj = safeComputed(() => evaluateSource(state.input))
     const resolvedInput = safeComputed(() => applyDefaults(referenceObj.value, inputObj.value))
@@ -116,7 +128,8 @@ export default defineComponent({
       types,
       transpiledRef,
       inputObj,
-      resolvedInput
+      resolvedInput,
+      markdown
     }
   }
 })
@@ -161,8 +174,4 @@ body, html, #app {
   padding: .25em;
   @apply border-dashed border-light-blue-500 border-b-1 mb-3 text-gray-700;
 }
-
-code {
-  @apply bg-gray-500 rounded text-gray-100 py-.5 px-2;
-}
 </style>

playground/components/markdown.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="container">
+    <div class="mb-2">
+      <input id="markdown-raw" v-model="render" type="checkbox">
+      <label for="markdown-raw" class="select-none"> Render markdown</label><br>
+    </div>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div v-if="render" class="markdown" v-html="rendered" />
+    <pre v-else v-text="value" />
+  </div>
+</template>
+
+<script>
+import 'prismjs/themes/prism.css'
+import { defineComponent, ref } from 'vue'
+import marked from 'marked'
+import prism from 'prismjs'
+import { safeComputed } from '../utils'
+
+export default defineComponent({
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  setup (ctx) {
+    const render = ref(true)
+    const rendered = safeComputed(() => marked(ctx.value, {
+      highlight (code, lang) {
+        const _lang = prism.languages[lang]
+        return _lang ? prism.highlight(code, _lang) : code
+      }
+    }))
+    return {
+      render,
+      rendered
+    }
+  }
+})
+</script>
+
+<style scoped>
+.container {
+  padding: 1em;
+}
+</style>
+
+<style>
+.markdown {
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji !important;
+  color: #24292e !important;
+  word-wrap: break-word;
+}
+
+.markdown code {
+  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  padding: .2em .4em;
+  font-size: 85%;
+  background-color: #f6f8fa;
+  border-radius: 6px;
+}
+</style>

src/generator/md.ts

@@ -0,0 +1,32 @@
+import type { Schema } from '../types'
+
+export function generateMarkdown (schema: Schema) {
+  return _generateMarkdown(schema, 'Documentation', '#').join('\n')
+}
+
+export function _generateMarkdown (schema: Schema, title: string, level) {
+  const lines: string[] = []
+
+  lines.push(`${level} ${title}`)
+
+  if (schema.type === 'object') {
+    for (const key in schema.properties) {
+      const val = schema.properties[key] as Schema
+      lines.push(..._generateMarkdown(val, `\`${key}\``, level + '#'))
+    }
+    return lines
+  }
+
+  lines.push(`**Type**: \`${schema.type}\`    `)
+  if ('default' in schema) {
+    lines.push(`**Default**: \`${JSON.stringify(schema.default)}\`    `)
+  }
+  if (schema.title) {
+    lines.push('', schema.title, '')
+  }
+  if (schema.description) {
+    lines.push('', schema.description, '')
+  }
+
+  return lines
+}

src/index.ts

@@ -1,5 +1,6 @@
 export { resolveSchema } from './schema/resolve'
 export { generateTypes } from './generator/dts'
+export { generateMarkdown } from './generator/md'
 export { applyDefaults } from './schema/apply'
 
 export * from './types'

yarn.lock

@@ -1498,6 +1498,15 @@ clean-regexp@^1.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+clipboard@^2.0.0:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
+  integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
@@ -1986,6 +1995,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 detect-indent@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
@@ -2906,6 +2920,13 @@ globby@^11.0.1, globby@^11.0.2:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
   version "4.2.6"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
@@ -3014,6 +3035,11 @@ he@^1.1.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hljs@^6.2.3:
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/hljs/-/hljs-6.2.3.tgz#d4d6208fa2a84f294956bc50f2c812e9cbd49bcc"
+  integrity sha1-1NYgj6KoTylJVrxQ8sgS6cvUm8w=
+
 hosted-git-info@^2.1.4:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
@@ -3847,7 +3873,7 @@ jest@latest:
     import-local "^3.0.2"
     jest-cli "^26.6.3"
 
-jiti@^1.6.2, jiti@^1.6.3, jiti@^1.6.4:
+jiti@^1.6.2, jiti@^1.6.3:
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.6.4.tgz#63453b602d0234f8bd7ce638f03f0e74ef99be12"
   integrity sha512-ICUtP0/rAyT/GaaDG0vj6fmWzx5yjFc7v+L1MAEARGl1+lrdJ8wtJNChr+ZGEdPoOhFwdhtcDO5VM2TNNgPpjQ==
@@ -4205,6 +4231,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.1.tgz#5e7ed7009bfa5c95182e4eb696f85e948cefcee3"
+  integrity sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw==
+
 meow@^3.3.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@@ -4942,6 +4973,13 @@ pretty-format@^26.0.0, pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
+prismjs@^1.23.0:
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
+  integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -5355,6 +5393,11 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 "semver@2 || 3 || 4 || 5", semver@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -5901,6 +5944,11 @@ through@2, "through@>=2.2.7 <3":
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 [email protected]:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"