feat: @docus/mdc (#53)

* use @docus/mdc * feat: context template * fix: test * chore: update lock file * fix: static generate * fix: rename template * chore: update @docus/mdc * fix: CI test * fix: remark plugins
nuxt · Aug 31, 2021 · bf231ee · bf231ee
1 parent a81ed83
commit bf231ee
Show file tree

Hide file tree

Showing 59 changed files with 694 additions and 3,429 deletions.
diff --git a/example/pages/_.vue b/example/pages/_.vue
@@ -3,10 +3,12 @@
     <div class="w-25">
       <ul>
         <li v-for="link in navigation.en" :key="link.id">
-          <NuxtLink :to="link.to">{{ link.title }}</NuxtLink>
+          <NuxtLink v-if="link.page" :to="link.to">{{ link.title }}</NuxtLink>
+          <span v-else>{{ link.title }}</span>
           <ul v-if="link.children">
             <li v-for="child in link.children" :key="child.id">
-              <NuxtLink :to="child.to">{{ child.title }}</NuxtLink>
+              <NuxtLink v-if="child.page" :to="child.to">{{ child.title }}</NuxtLink>
+              <span v-else>{{ child.title }}</span>
             </li>
           </ul>
         </li>
@@ -18,7 +20,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script>
 import { withoutTrailingSlash } from 'ufo'
 import { defineComponent } from '@nuxtjs/composition-api'
 

diff --git a/jest.config.js b/jest.config.js
@@ -9,5 +9,5 @@ module.exports = {
 
   moduleNameMapper: {},
   collectCoverageFrom: ['src/**', '!src/types/**'],
-  transformIgnorePatterns: ['node_modules/(?!@nuxt/design)']
+  transformIgnorePatterns: ['node_modules/(?!@nuxt/design|@docus/mdc|unified)/.*']
 }
diff --git a/package.json b/package.json
@@ -41,55 +41,21 @@
     "clean": "yarn clean:example && yarn clean:dist"
   },
   "dependencies": {
+    "@docus/mdc": "npm:@docus/mdc-edge@latest",
     "@lokidb/loki": "^2.1.0",
     "@nuxt/kit": "npm:@nuxt/kit-edge",
     "@nuxt/nitro": "npm:@nuxt/nitro-edge",
     "@nuxtjs/composition-api": "^0.27.0",
-    "babel-core": "^6.26.3",
     "debounce": "^1.2.1",
     "defu": "^5.0.0",
-    "detab": "^3.0.1",
-    "escape-html": "^1.0.3",
-    "flat": "^5.0.2",
-    "gray-matter": "^4.0.3",
     "h3": "^0.3.0",
     "hasha": "^5.2.2",
-    "html-tags": "^3.1.0",
-    "jiti": "^1.11.0",
-    "mdast-util-to-hast": "^11.2.0",
-    "mdast-util-to-markdown": "^1.2.1",
-    "mdurl": "^1.0.1",
-    "micromark": "^3.0.5",
-    "micromark-core-commonmark": "^1.0.1",
-    "micromark-factory-whitespace": "^1.0.0",
-    "micromark-util-character": "^1.1.0",
-    "micromark-util-symbol": "^1.0.0",
-    "micromark-util-types": "^1.0.1",
+    "node-fetch": "^2.6.1",
     "object-hash": "^2.2.0",
-    "parse-entities": "^3.0.0",
-    "prismjs": "^1.24.1",
-    "property-information": "^6.0.1",
-    "rehype-raw": "^6.1.0",
-    "rehype-sort-attribute-values": "^4.0.0",
-    "rehype-sort-attributes": "^4.0.0",
-    "remark-autolink-headings": "^7.0.1",
-    "remark-emoji": "^2.2.0",
-    "remark-external-links": "^9.0.1",
-    "remark-footnotes": "^4.0.1",
-    "remark-gfm": "^2.0.0",
-    "remark-parse": "^10.0.0",
-    "remark-rehype": "^9.0.0",
-    "remark-slug": "^7.0.0",
-    "remark-squeeze-paragraphs": "^5.0.0",
+    "property-information": "5.6.0",
     "scule": "^0.2.1",
-    "stringify-entities": "^4.0.1",
     "ufo": "^0.7.9",
     "unctx": "^1.0.2",
-    "unified": "^10.1.0",
-    "unist-builder": "^3.0.0",
-    "unist-util-position": "^4.0.1",
-    "unist-util-visit": "^4.0.0",
-    "unist-util-visit-parents": "^5.0.0",
     "unstorage": "^0.2.3",
     "upath": "^2.0.1",
     "vue-docgen-api": "^4.41.1",
@@ -107,15 +73,11 @@
     "@nuxt/typescript-runtime": "latest",
     "@nuxtjs/eslint-config-typescript": "latest",
     "@types/debounce": "^1.2.0",
-    "@types/escape-html": "^1.0.1",
-    "@types/flat": "^5.0.2",
-    "@types/fs-extra": "^9.0.12",
     "@types/jest": "latest",
     "@types/node-fetch": "^2.5.12",
     "@types/object-hash": "^2.1.1",
-    "@types/prismjs": "^1.16.6",
-    "@types/unist": "^2.0.6",
     "@types/ws": "^7.4.7",
+    "babel-core": "^6.26.3",
     "babel-jest": "latest",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

diff --git a/src/context.ts b/src/context.ts
@@ -1,4 +1,3 @@
-import { resolveModule } from '@nuxt/kit'
 import { DocusContext } from './types'
 
 export const defaultContext: DocusContext = {
@@ -16,25 +15,34 @@ export const defaultContext: DocusContext = {
   },
   transformers: {
     markdown: {
-      toc: {
-        depth: 2,
-        searchDepth: 2
-      },
       components: [],
-      remarkPlugins: [
-        {
-          name: resolveModule('./runtime/transformers/markdown/components', { paths: __dirname }),
-          configKey: 'components'
-        },
-        'remark-emoji',
-        'remark-squeeze-paragraphs',
-        'remark-slug',
-        ['remark-autolink-headings', { behavior: 'wrap' }],
-        'remark-external-links',
-        'remark-footnotes',
-        'remark-gfm'
-      ],
-      rehypePlugins: ['rehype-sort-attribute-values', 'rehype-sort-attributes', 'rehype-raw']
+      rehypePlugins: [],
+      remarkPlugins: [],
+      tagMap: {
+        a: 'prose-a',
+        blockquote: 'prose-blockquote',
+        code: 'prose-code-inline',
+        em: 'prose-em',
+        h1: 'prose-h1',
+        h2: 'prose-h2',
+        h3: 'prose-h3',
+        h4: 'prose-h4',
+        h5: 'prose-h5',
+        h6: 'prose-h6',
+        hr: 'prose-hr',
+        img: 'prose-img',
+        li: 'prose-li',
+        ol: 'prose-ol',
+        p: 'prose-paragraph',
+        strong: 'prose-strong',
+        table: 'prose-table',
+        tbody: 'prose-tbody',
+        tf: 'prose-tf',
+        th: 'prose-th',
+        thead: 'prose-thead',
+        tr: 'prose-tr',
+        ul: 'prose-ul'
+      }
     }
   }
 }
diff --git a/src/module.ts b/src/module.ts
@@ -5,7 +5,8 @@ import {
   Nuxt,
   addPlugin,
   installModule,
-  useNuxt
+  useNuxt,
+  addTemplate
 } from '@nuxt/kit'
 import { NitroContext } from '@nuxt/nitro'
 import { resolve } from 'upath'
@@ -30,7 +31,7 @@ export default defineNuxtModule((nuxt: Nuxt) => ({
     }
   },
   configKey: 'content',
-  setup(options: DocusOptions, nuxt) {
+  setup(options: DocusOptions, nuxt: Nuxt) {
     installModule(nuxt, {
       src: resolveModule('@nuxt/nitro/compat'),
       options: {
@@ -39,16 +40,45 @@ export default defineNuxtModule((nuxt: Nuxt) => ({
         }
       }
     })
-
     // Extend context
-    const docusContext = (nuxt.options.privateRuntimeConfig.docusContext = defaultContext)
+    const docusContext = defaultContext
 
     // add root page into generate routes
     nuxt.options.generate.routes = nuxt.options.generate.routes || []
     nuxt.options.generate.routes.push('/')
 
-    const runtimeDir = resolve(__dirname, 'runtime')
+    // transpile @docus/mdc
+    nuxt.options.build.transpile.push(
+      '@docus/mdc',
+      'unified',
+      'bail',
+      'trough',
+      'vfile',
+      'parse-entities',
+      'character-entities',
+      'stringify-entities',
+      'character-reference-invalid',
+      'is-decimal',
+      'is-hexadecimal',
+      'is-alphanumerical',
+      'is-alphabetical',
+      'detab',
+      'emoticon',
+      'space-separated-tokens',
+      'is-absolute-url',
+      'ccount',
+      'markdown-table',
+      'comma-separated-tokens',
+      'web-namespaces',
+      'zwitch',
+      'html-void-elements',
+      'mdurl',
+      'parse5',
+      /(unist|remark|mdast|micromark|rehype|hast)-?.*/
+    )
+
     // setup runtime alias
+    const runtimeDir = resolve(__dirname, 'runtime')
     nuxt.options.alias['~docus/content'] = runtimeDir
     nuxt.options.alias['~docus/database'] = resolve(runtimeDir, `database/providers/${options.database.provider}`)
 
@@ -76,6 +106,18 @@ export default defineNuxtModule((nuxt: Nuxt) => ({
     // Add Docus runtime plugin
     addPlugin(resolve(__dirname, './templates/content'))
 
+    // Add Docus context template
+    for (const target of ['server', 'client']) {
+      addTemplate({
+        src: resolve(__dirname, './templates/context.js'),
+        filename: `docus/context.${target}.mjs`,
+        options: {
+          target,
+          context: docusContext
+        }
+      })
+    }
+
     // Setup dev target
     if (nuxt.options.dev) {
       setupDevTarget(options, nuxt)
@@ -98,12 +140,6 @@ export default defineNuxtModule((nuxt: Nuxt) => ({
       docusContext.locales.defaultLocale = nuxt.options.i18n?.defaultLocale || docusContext.locales.defaultLocale
 
       nuxt.callHook('docus:context', docusContext)
-
-      // TODO: remove privateRuntimeConfig and use below code once @nuxt/kit-edge is used
-      // addTemplate({
-      //   filename: 'docus.context.mjs',
-      //   getContents: () => ...
-      // })
     })
 
     /**
@@ -126,9 +162,10 @@ export default defineNuxtModule((nuxt: Nuxt) => ({
           return ''
         })
       )
-      docusContext.transformers.markdown.components.push({
+      docusContext.transformers.markdown.components?.push({
         name: 'props',
-        path: resolveModule('./runtime/transformers/markdown/components/props', { paths: __dirname }),
+        path: resolveModule('./runtime/transformers/markdown/loaders/props', { paths: __dirname }),
+        target: 'server',
         options: { paths }
       })
     })

diff --git a/src/runtime.ts b/src/runtime.ts
@@ -1,2 +1,4 @@
 export * from './runtime/utils'
 export * from './types'
+// eslint-disable-next-line import/export
+export * from '@docus/mdc/utils'
diff --git a/src/runtime/components/DocusContent.vue b/src/runtime/components/DocusContent.vue
@@ -1,9 +1,10 @@
 <script lang="ts">
 import { pascalCase } from 'scule'
 import Vue, { CreateElement, RenderContext, VNode } from 'vue' // eslint-disable-line
+// @ts-ignore
 import { find, html } from 'property-information'
+import type { MDCNode } from '@docus/mdc'
 import type { DocusDocument } from '../../types/Document'
-import { DocusMarkdownNode } from '../../types'
 
 const rootKeys = ['class-name', 'class', 'className', 'style']
 
@@ -24,7 +25,7 @@ function evalInContext(code: string, context: any) {
   return new Function('with(this) { return (' + code + ') }').call(context)
 }
 
-function propsToData(node: DocusMarkdownNode, doc: DocusDocument) {
+function propsToData(node: MDCNode, doc: DocusDocument) {
   const { tag = '', props = {} } = node
   return Object.keys(props).reduce(
     function (data, key) {
@@ -77,9 +78,9 @@ function propsToData(node: DocusMarkdownNode, doc: DocusDocument) {
  * Create the scoped slots from `node` template children. Templates for default
  * slots are processed as regular children in `processNode`.
  */
-function slotsToData(node: DocusMarkdownNode, h: CreateElement, doc: DocusDocument) {
+function slotsToData(node: MDCNode, h: CreateElement, doc: DocusDocument) {
   const data: any = {}
-  const children: DocusMarkdownNode[] = node.children || []
+  const children: MDCNode[] = node.children || []
 
   children.forEach(child => {
     // Regular children and default templates are processed inside `processNode`.
@@ -91,7 +92,7 @@ function slotsToData(node: DocusMarkdownNode, h: CreateElement, doc: DocusDocume
     data.scopedSlots = data.scopedSlots || {}
     const template = child
     const name = getSlotName(template)
-    const vDomTree = template.content.map((tmplNode: DocusMarkdownNode) => processNode(tmplNode, h, doc))
+    const vDomTree = template.content.map((tmplNode: MDCNode) => processNode(tmplNode, h, doc))
     data.scopedSlots[name] = function () {
       return vDomTree
     }
@@ -100,7 +101,7 @@ function slotsToData(node: DocusMarkdownNode, h: CreateElement, doc: DocusDocume
   return data
 }
 
-function processNode(node: DocusMarkdownNode, h: CreateElement, doc: DocusDocument): VNode | string | undefined {
+function processNode(node: MDCNode, h: CreateElement, doc: DocusDocument): VNode | string | undefined {
   /**
    * Return raw value as it is
    */
@@ -122,7 +123,7 @@ function processNode(node: DocusMarkdownNode, h: CreateElement, doc: DocusDocume
       continue
     }
 
-    const processQueue: DocusMarkdownNode[] = isDefaultTemplate(child) ? child.content : [child]
+    const processQueue: MDCNode[] = isDefaultTemplate(child) ? child.content : [child]
     children.push(...processQueue.map(node => processNode(node, h, doc)))
   }
 
@@ -134,15 +135,15 @@ function processNode(node: DocusMarkdownNode, h: CreateElement, doc: DocusDocume
 
 const DEFAULT_SLOT = 'default'
 
-function isDefaultTemplate(node: DocusMarkdownNode) {
+function isDefaultTemplate(node: MDCNode) {
   return isTemplate(node) && getSlotName(node) === DEFAULT_SLOT
 }
 
-function isTemplate(node: DocusMarkdownNode) {
+function isTemplate(node: MDCNode) {
   return node.tag === 'template'
 }
 
-function getSlotName(node: DocusMarkdownNode) {
+function getSlotName(node: MDCNode) {
   let name = ''
   for (const propName of Object.keys(node.props || {})) {
     if (!propName.startsWith('#') && !propName.startsWith('v-slot:')) {
@@ -173,8 +174,8 @@ export default {
 
     let { body } = (document || {}) as DocusDocument
     // look for ast object in the document
-    if (body && body.ast) {
-      body = body.ast
+    if (body && (body as any).ast) {
+      body = (body as any).ast
     }
 
     if (!body || !body.children || !Array.isArray(body.children)) {
@@ -192,7 +193,7 @@ export default {
     }
     data.class = classes
     data.props = Object.assign({ ...body.props }, data.props)
-    const children = (body.children as DocusMarkdownNode[]).map(child => processNode(child, h, document))
+    const children = (body.children as MDCNode[]).map(child => processNode(child, h, document))
 
     if ((process as any).server) {
       ;(parent.$root as any).context.beforeSerialize((nuxtState: any) => {
@@ -205,7 +206,7 @@ export default {
     }
 
     // detect root tag
-    const tag = (body as DocusMarkdownNode).tag || 'div'
+    const tag = (body as MDCNode).tag || 'div'
 
     return h(tag, data, children)
   }

diff --git a/src/runtime/components/Markdown.vue b/src/runtime/components/Markdown.vue
@@ -1,6 +1,5 @@
 <script lang="ts">
-// @ts-ignore
-import { flatUnwrap, unwrap, isTag } from '~docus/content/utils'
+import { flatUnwrap, unwrap, isTag } from '@docus/mdc/utils'
 
 export default {
   name: 'Markdown',