feat(docs): add support for <script setup> (#4190)

* feat(docs): add support for script setup

* docs: add changelog

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -7,6 +7,7 @@
 - `n-tree` adds `get-children` prop, closes [#4128](https://github.com/tusen-ai/naive-ui/issues/4128).
 - `n-badge` adds `offset` prop, closes [#4149](https://github.com/tusen-ai/naive-ui/issues/4149).
 - `n-card` adds `tag` prop
+- demos can now use `<script setup />`
 - `n-pagination` adds `select-props` prop, closes [#4199](https://github.com/tusen-ai/naive-ui/issues/4199).
 - `n-select` adds `show-on-focus` prop, closes [#4191](https://github.com/tusen-ai/naive-ui/issues/4191).
 - `n-pagination` adds `goto` prop, closes [#4133](https://github.com/tusen-ai/naive-ui/issues/4133).

CHANGELOG.zh-CN.md

@@ -7,6 +7,7 @@
 - `n-tree` 新增 `get-children` 属性，关闭 [#4128](https://github.com/tusen-ai/naive-ui/issues/4128)
 - `n-badge` 新增 `offset` 属性，关闭 [#4149](https://github.com/tusen-ai/naive-ui/issues/4149)
 - `n-card` 新增 `tag` 属性
+- demos 可以使用 `<script setup />`
 - `n-pagination` 新增 `select-props` 属性，关闭 [#4199](https://github.com/tusen-ai/naive-ui/issues/4199)
 - `n-select` 新增 `show-on-focus` 属性，关闭 [#4191](https://github.com/tusen-ai/naive-ui/issues/4191)
 - `n-pagination` 新增 `goto` 属性，关闭 [#4133](https://github.com/tusen-ai/naive-ui/issues/4133)

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

@@ -122,8 +122,10 @@ function genVueComponent (parts, fileName, relativeUrl) {
     src = src.replace(jsCodeReg, parts.jsCode)
   }
   if (parts.script) {
-    const startScriptTag =
-      parts.language === 'ts' ? '<script lang="ts">\n' : '<script>\n'
+    const attributes = `${parts.api === 'composition' ? ' setup' : ''}${
+      parts.language === 'ts' ? ' lang="ts"' : ''
+    }`
+    const startScriptTag = `<script${attributes}>\n`
     src = src.replace(scriptReg, startScriptTag + parts.script + '\n</script>')
   }
   if (parts.language) {

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

@@ -13,7 +13,7 @@ function getPartsOfDemo (text) {
   let template = text.slice(firstIndex + 10)
   const lastIndex = template.lastIndexOf('</template>')
   template = template.slice(0, lastIndex)
-  const script = text.match(/<script.*?>([\s\S]*?)<\/script>/)?.[1]?.trim()
+  const script = text.match(/<script[\s\S]*?>([\s\S]*?)<\/script>/)?.[1]?.trim()
   const style = text.match(/<style>([\s\S]*?)<\/style>/)?.[1]
   const markdownText = text
     .match(/<markdown>([\s\S]*?)<\/markdown>/)?.[1]
@@ -28,7 +28,13 @@ function getPartsOfDemo (text) {
       contentTokens.push(token)
     }
   }
-  const languageType = text.includes('lang="ts"') ? 'ts' : 'js'
+  const scriptAttributes = text
+    .match(/<script([\s\S]*?)>[\s\S]*?<\/script>/)?.[1]
+    .trim()
+  const languageType = scriptAttributes?.includes('lang="ts"') ? 'ts' : 'js'
+  const apiType = scriptAttributes?.includes('setup')
+    ? 'composition'
+    : 'options'
   return {
     template,
     script,
@@ -37,7 +43,8 @@ function getPartsOfDemo (text) {
     content: marked.parser(contentTokens, {
       renderer: mdRenderer
     }),
-    language: languageType
+    language: languageType,
+    api: apiType
   }
 }
 

build/utils/handle-merge-code.js

@@ -1,5 +1,6 @@
 const tsToJs = require('./tsToJs')
 module.exports = function handleMergeCode ({ parts, mergedParts, isVue }) {
+  const isCompositionApi = parts.api === 'composition'
   if (isVue && parts.language === 'ts') {
     // ts and js
     if (parts.template) {
@@ -11,10 +12,12 @@ module.exports = function handleMergeCode ({ parts, mergedParts, isVue }) {
         mergedParts.tsCode += '\n\n'
         mergedParts.jsCode += '\n\n'
       }
-      mergedParts.tsCode += `<script lang="ts">
+      mergedParts.tsCode += `<script${
+        isCompositionApi ? ' setup' : ''
+      } lang="ts">
 ${parts.script}
 </script>`
-      mergedParts.jsCode += `<script>
+      mergedParts.jsCode += `<script${isCompositionApi ? ' setup' : ''}>
 ${tsToJs(parts.script)}
 </script>`
     }
@@ -41,7 +44,7 @@ ${tsToJs(parts.script)}
       if (parts.template) {
         mergedParts.jsCode += '\n\n'
       }
-      mergedParts.jsCode += `<script>
+      mergedParts.jsCode += `<script${isCompositionApi ? ' setup' : ''}>
 ${parts.script}
 </script>`
     }

src/button/demos/enUS/events.demo.vue

@@ -9,18 +9,11 @@ Handle events of buttons.
     Click Me
   </n-button>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
 import { useMessage } from 'naive-ui'
 
-export default defineComponent({
-  setup () {
-    const message = useMessage()
-    return {
-      handleClick () {
-        message.info('Button Clicked')
-      }
-    }
-  }
-})
+const message = useMessage()
+const handleClick = () => {
+  message.info('Button Clicked')
+}
 </script>