refactor: optimized vite-demo plugin code (#1844)

* feat: optimized vite-demo plugin code

* fix: update

* fix: update

* fix: vue not ts does not generate tsCode

* fix: cannot anchor link

Co-authored-by: yugang.cao <yugang.cao@tusimple.ai>

build/loaders/convert-md-to-demo.js

@@ -2,7 +2,7 @@ const { marked } = require('marked')
 const fs = require('fs')
 const path = require('path')
 const createRenderer = require('./md-renderer')
-const tsToJs = require('../utils/tsToJs')
+const handleMergeCode = require('../utils/handle-merge-code.js')
 const mdRenderer = createRenderer()
 
 const __HTTP__ = process.env.NODE_ENV !== 'production' ? 'http' : 'https'
@@ -60,54 +60,10 @@ function mergeParts ({ parts, isVue }) {
   }
   mergedParts.title = parts.title
   mergedParts.content = parts.content
-  mergedParts.code = ''
+  mergedParts.tsCode = ''
   mergedParts.jsCode = ''
-  let jsCode = ''
-  if (parts.template) {
-    if (isVue) {
-      mergedParts.code += `<template>${parts.template}</template>`
-      mergedParts.jsCode += `<template>${parts.template}</template>`
-    } else {
-      mergedParts.code += `<template>\n${parts.template
-        .split('\n')
-        .map((line) => (line.length ? '  ' + line : line))
-        .join('\n')}\n</template>`
-      mergedParts.jsCode = mergedParts.code
-    }
-  }
-  if (parts.script) {
-    if (parts.template) {
-      mergedParts.code += '\n\n'
-      mergedParts.jsCode += '\n\n'
-    }
-    const startScriptTag =
-      parts.language === 'ts' ? '<script lang="ts">' : '<script>'
-    mergedParts.code += `${startScriptTag}
-${parts.script}
-</script>`
-    if (parts.language === 'ts') {
-      jsCode = tsToJs(parts.script)
-      mergedParts.jsCode += `<script>
-${jsCode}
-</script>`
-    } else {
-      mergedParts.jsCode = mergedParts.code
-    }
-  }
-  if (parts.style) {
-    if (parts.template || parts.script) {
-      mergedParts.code += '\n\n'
-      mergedParts.jsCode += '\n\n'
-    }
-    const style = isVue
-      ? `<style>${parts.style}</style>`
-      : `<style>
-${parts.style}
-</style>`
-    mergedParts.code += style
-    mergedParts.jsCode += style
-  }
-  mergedParts.code = encodeURIComponent(mergedParts.code)
+  handleMergeCode({ parts, mergedParts, isVue })
+  mergedParts.tsCode = encodeURIComponent(mergedParts.tsCode)
   mergedParts.jsCode = encodeURIComponent(mergedParts.jsCode)
   return mergedParts
 }
@@ -159,8 +115,8 @@ function genVueComponent (parts, fileName, relativeUrl) {
   if (parts.title) {
     src = src.replace(titleReg, parts.title)
   }
-  if (parts.code) {
-    src = src.replace(tsCodeReg, parts.code)
+  if (parts.tsCode) {
+    src = src.replace(tsCodeReg, parts.tsCode)
   }
   if (parts.jsCode) {
     src = src.replace(jsCodeReg, parts.jsCode)
@@ -194,10 +150,10 @@ function getFileName (resourcePath) {
   return [fileNameWithExtension.split('.')[0], fileNameWithExtension]
 }
 
-function convertMd2Demo (text, { resourcePath, relativeUrl }) {
+function convertMd2Demo (text, { resourcePath, relativeUrl, isVue = false }) {
   const tokens = marked.lexer(text)
   const parts = getPartsOfDemo(tokens)
-  const mergedParts = mergeParts({ parts, isVue: false })
+  const mergedParts = mergeParts({ parts, isVue })
   const [fileName] = getFileName(resourcePath)
   const vueComponent = genVueComponent(mergedParts, fileName, relativeUrl)
   return vueComponent

build/loaders/convert-vue-to-demo.js

@@ -37,11 +37,15 @@ function getPartsOfDemo (text) {
   }
 }
 
-function convertVue2Demo (content, { resourcePath, relativeUrl }) {
+function convertVue2Demo (content, { resourcePath, relativeUrl, isVue = true }) {
   const parts = getPartsOfDemo(content)
-  const mergedParts = mergeParts({ parts, isVue: true })
+  const mergedParts = mergeParts({ parts, isVue })
   const [fileName] = getFileName(resourcePath)
-  const vueComponent = genVueComponent(mergedParts, fileName, relativeUrl)
+  const vueComponent = genVueComponent(
+    mergedParts,
+    fileName + '.vue',
+    relativeUrl
+  )
   return vueComponent
 }
 

build/loaders/naive-ui-demo-loader.js

@@ -7,11 +7,13 @@ module.exports = function (content, path, type) {
   if (type === 'vue') {
     return convertVue2Demo(content, {
       relativeUrl,
-      resourcePath: path
+      resourcePath: path,
+      isVue: true
     })
   }
   return convertMd2Demo(content, {
     relativeUrl,
-    resourcePath: path
+    resourcePath: path,
+    isVue: false
   })
 }

build/utils/handle-merge-code.js

@@ -0,0 +1,60 @@
+const tsToJs = require('./tsToJs')
+module.exports = function handleMergeCode ({ parts, mergedParts, isVue }) {
+  if (isVue && parts.language === 'ts') {
+    // ts and js
+    if (parts.template) {
+      mergedParts.tsCode += `<template>${parts.template}</template>`
+      mergedParts.jsCode += `<template>${parts.template}</template>`
+    }
+    if (parts.script) {
+      if (parts.template) {
+        mergedParts.tsCode += '\n\n'
+        mergedParts.jsCode += '\n\n'
+      }
+      mergedParts.tsCode += `<script lang="ts">
+${parts.script}
+</script>`
+      mergedParts.jsCode += `<script>
+${tsToJs(parts.script)}
+</script>`
+    }
+    if (parts.style) {
+      if (parts.template || parts.script) {
+        mergedParts.tsCode += '\n\n'
+        mergedParts.jsCode += '\n\n'
+      }
+      const style = `<style>${parts.style}</style>`
+      mergedParts.tsCode += style
+      mergedParts.jsCode += style
+    }
+  } else {
+    // only js when md or vue file
+    if (parts.template) {
+      mergedParts.jsCode += isVue
+        ? `<template>${parts.template}</template>`
+        : `<template>\n${parts.template
+            .split('\n')
+            .map((line) => (line.length ? '  ' + line : line))
+            .join('\n')}\n</template>`
+    }
+    if (parts.script) {
+      if (parts.template) {
+        mergedParts.jsCode += '\n\n'
+      }
+      mergedParts.jsCode += `<script>
+${parts.script}
+</script>`
+    }
+    if (parts.style) {
+      if (parts.template || parts.script) {
+        mergedParts.jsCode += '\n\n'
+      }
+      const style = isVue
+        ? `<style>${parts.style}</style>`
+        : `<style>
+${parts.style}
+</style>`
+      mergedParts.jsCode += style
+    }
+  }
+}

demo/utils/ComponentDemo.vue

@@ -141,7 +141,7 @@ export default {
       return !(isDebugDemo && displayModeRef.value !== 'debug')
     })
     const showCodeRef = ref(false)
-    const showTsRef = ref(true)
+    const showTsRef = ref(props.languageType === 'ts')
     const expandCodeButtonRef = ref(null)
     watch(showCodeRef, () => {
       nextTick(() => {

src/select/demos/enUS/add-tooltip.demo.md

@@ -6,19 +6,19 @@ Use the `render-option` property to control rendering of the entire option.
 <n-select :options="options" :render-option="renderOption" />
 ```
 
-```ts
-import { defineComponent, h, VNode, ref } from 'vue'
-import { NTooltip, SelectOption } from 'naive-ui'
+```js
+import { defineComponent, h, ref } from 'vue'
+import { NTooltip } from 'naive-ui'
 
 export default defineComponent({
   setup () {
     return {
-      renderOption: ({ node, option }: { node: VNode, option: SelectOption }) =>
+      renderOption: ({ node, option }) =>
         h(NTooltip, null, {
           trigger: () => node,
           default: () => 'Rubber Soul -' + option.label
         }),
-      options: ref<SelectOption[]>([
+      options: ref([
         {
           label: "Everybody's Got Something to Hide Except Me and My Monkey",
           value: 'song0',

src/select/demos/zhCN/add-tooltip.demo.md

@@ -6,19 +6,19 @@
 <n-select :options="options" :render-option="renderOption" />
 ```
 
-```ts
-import { defineComponent, h, VNode, ref } from 'vue'
-import { NTooltip, SelectOption } from 'naive-ui'
+```js
+import { defineComponent, h, ref } from 'vue'
+import { NTooltip } from 'naive-ui'
 
 export default defineComponent({
   setup () {
     return {
-      renderOption: ({ node, option }: { node: VNode, option: SelectOption }) =>
+      renderOption: ({ node, option }) =>
         h(NTooltip, null, {
           trigger: () => node,
           default: () => 'Rubber Soul -' + option.label
         }),
-      options: ref<SelectOption[]>([
+      options: ref([
         {
           label: "Everybody's Got Something to Hide Except Me and My Monkey",
           value: 'song0',