✨ 更新文档 (#60)

* ➕  添加 vitepress 依赖

* ⚗️  初始化 vitepress 文档

* ➕  添加 vitepress 依赖

* ⚗️  初始化 vitepress 文档

* 🔧  新增相关命令

* 🔥  移除 vitepress 相关代码

* 🔨  新增 markdown-it 插件

* 🔨  新增 md 转 sfc 的脚本

* 🔨  新增匹配元素属性方法

* 🔨  添加匹配多个属性的方法和匹配 Demo 组件固定属性的方法

* 🔨  更新 mdToSfc 脚本
* 新增 Demo 组件转换后文本的正则匹配
* 添加 Demo 组件提取信息相关类型

* 🔧  添加 vite 客户端类型提示

* ➕  添加 vitepress 依赖

* ⚗️  初始化 vitepress 文档

* 🔧  新增相关命令

* ⬆️  更新 vitepess 依赖

* 🎨 移除 @corgwn/vue 的自动引入

* ⬆️  更新 ant-design-vue, @ant-design/icons-vue

* 🚧  编写自定义的 vitepress 插件来解析 Demo

* 🩹  重新生成 pnpm-lock

* 🍱  更新 Demo 中的图片地址

* ➖  移除 unplugin-vue-components

* ⬆️  更新 vue, typescript

* ⬆️  更新 vitepress

* ⬆️  更新 vite

* 🚧  更新文档自定义 Demo 组件

* ⬆️  更新 vue-tsc

* 🚨  修复 cypress 测试报错

* ➕  升级 vitest

.eslintrc.js

@@ -29,7 +29,8 @@ module.exports = {
                     'packages/react',
                     'packages/vue',
                     'demo/react',
-                    'demo/vue'
+                    'demo/vue',
+                    'docs/vue'
                 ],
                 devDependencies: true
             }

demo/vue/example/AudioPlayer/Link.vue

@@ -1,7 +1,7 @@
 <template>
     <AudioPlayer
         source="https://howlerjs.com/assets/howler.js/examples/player/audio/rave_digger.webm"
-        cover="https://github.com/JavanShen/corgi/blob/main/docs/react/public/corgi.png?raw=true"
+        cover="https://github.com/JavanShen/corgi/raw/main/packages/assets/pic/corgi.png?raw=true"
         title="corgwn"
         artist="apine"
     />

demo/vue/example/Overview.vue

@@ -1,24 +1,25 @@
 <template>
-    <a-list :grid="{ gutter: 16, column: 3 }" :data-source="componentsList">
+    <List :grid="{ gutter: 16, column: 3 }" :data-source="componentsList">
         <template #renderItem="{ item: { name, label } }">
-            <a-list-item>
-                <router-link :to="`/components/${name}`">
-                    <a-card
+            <ListItem>
+                <RouterLink :to="`/components/${name}`">
+                    <Card
                         :title="`${name} ${label}`"
                         :bodyStyle="{ textAlign: 'center' }"
                         hoverable
                     >
-                        <a-image
+                        <Image
                             :height="160"
                             :src="`https://github.com/JavanShen/corgi/blob/main/packages/assets/pic/${name}.png?raw=true`"
                             :preview="false"
                         />
-                    </a-card>
-                </router-link>
-            </a-list-item>
+                    </Card>
+                </RouterLink>
+            </ListItem>
         </template>
-    </a-list>
+    </List>
 </template>
 <script setup lang="ts">
+import { List, ListItem, Card, Image } from 'ant-design-vue'
 import componentsList from '../componentsList'
 </script>

demo/vue/vite.config.ts

@@ -1,20 +1,9 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import Components from 'unplugin-vue-components/vite'
-import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
 import svgLoader from 'vite-svg-loader'
-import { resolve } from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [
-        vue(),
-        vueJsx(),
-        Components({
-            dts: resolve(__dirname, '../../packages/vue/components.d.ts'),
-            resolvers: [AntDesignVueResolver()]
-        }),
-        svgLoader()
-    ]
+    plugins: [vue(), vueJsx(), svgLoader()]
 })

docs/vue/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+**/cache

docs/vue/docs/.vitepress/components/CustomSidebar.vue

@@ -0,0 +1,36 @@
+<template>
+    <Menu
+        mode="inline"
+        :style="{ height: '100%' }"
+        v-model:selectedKeys="selectedKeys"
+        @select="handleSelect"
+    >
+        <MenuItemGroup
+            v-for="group in theme.sidebar"
+            :key="group.text"
+            :title="group.text"
+        >
+            <MenuItem v-for="item in group.items" :key="item.link">{{
+                item.text
+            }}</MenuItem>
+        </MenuItemGroup>
+    </Menu>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Menu, MenuItemGroup, MenuItem } from 'ant-design-vue'
+import { useData, useRouter } from 'vitepress'
+import type { SelectInfo } from 'ant-design-vue/es/menu/src/interface'
+import type { DefaultTheme } from 'vitepress'
+
+const { theme } = useData<DefaultTheme.Config>()
+
+const router = useRouter()
+
+const selectedKeys = ref<string[]>([])
+
+const handleSelect = ({ key }: SelectInfo) => {
+    router.go(key as string)
+}
+</script>

docs/vue/docs/.vitepress/components/DemoPreview/index.vue

@@ -0,0 +1,120 @@
+<template>
+    <Card class="container">
+        <section><slot></slot></section>
+        <Divider orientation="left">{{ title }}</Divider>
+        <div class="description">
+            {{ description }}
+        </div>
+        <Divider dashed />
+        <div class="actions">
+            <Space size="large">
+                <Tooltip title="在statk 打开"></Tooltip>
+                <Tooltip
+                    class="action-btn"
+                    :title="`切换到 ${isJs ? 'TypeScript' : 'JavaScript'}`"
+                    @click="isJs = !isJs"
+                >
+                    <span class="language-switch">
+                        {{ isJs ? 'TS' : 'JS' }}
+                    </span>
+                </Tooltip>
+                <Tooltip class="action-btn" title="复制代码">
+                    <CopyOutlined @click="copyCode" />
+                </Tooltip>
+                <Tooltip
+                    class="action-btn"
+                    :title="isShowCode ? '隐藏代码' : '显示代码'"
+                    @click="isShowCode = !isShowCode"
+                >
+                    <ShrinkOutlined v-if="isShowCode" />
+                    <ArrowsAltOutlined v-else />
+                </Tooltip>
+            </Space>
+        </div>
+        <div
+            v-if="isShowCode"
+            :class="['language-vue', isDark ? 'dark-mode' : 'light-mode']"
+            v-html="isJs ? showJSSourceCode : showSourceCode"
+        ></div>
+    </Card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Card, Divider, Space, Tooltip, message } from 'ant-design-vue'
+import {
+    ArrowsAltOutlined,
+    ShrinkOutlined,
+    CopyOutlined
+} from '@ant-design/icons-vue'
+import { useData } from 'vitepress'
+import useClipboard from 'vue-clipboard3'
+
+export type DemoPreviewProps = {
+    code: string
+    showCode: string
+    title: string
+    description: string
+    JSCode: string
+    showJSCode: string
+}
+
+const { isDark } = useData()
+const isJs = ref(false)
+
+const props = withDefaults(defineProps<DemoPreviewProps>(), {
+    title: '',
+    description: ''
+})
+
+const showSourceCode = decodeURIComponent(props.showCode)
+const showJSSourceCode = decodeURIComponent(props.showJSCode)
+const sourceCode = decodeURIComponent(props.code)
+const JSSourceCode = decodeURIComponent(props.JSCode)
+
+const isShowCode = ref(false)
+
+const { toClipboard } = useClipboard()
+const copyCode = async () => {
+    try {
+        await toClipboard(isJs.value ? JSSourceCode : sourceCode)
+        message.success('复制成功')
+    } catch (e) {
+        message.error('复制失败')
+    }
+}
+</script>
+
+<style scoped>
+.actions {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+}
+
+.dark-mode :deep(.vp-code-light) {
+    display: none;
+}
+
+.light-mode :deep(.vp-code-dark) {
+    display: none;
+}
+
+.language-switch {
+    cursor: pointer;
+    font-weight: 500;
+}
+
+.language-vue {
+    margin-top: 16px;
+}
+
+.action-btn {
+    transform: scale(1);
+    transition: transform 0.3s ease;
+}
+.action-btn:hover {
+    transform: scale(1.2);
+}
+</style>

docs/vue/docs/.vitepress/config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vitepress'
+import { componentPreview, containerPreview } from './plugin/core'
+
+export default defineConfig({
+    title: 'Corgwn',
+    themeConfig: {
+        sidebar: [
+            {
+                text: '组件',
+                items: [
+                    {
+                        text: '音频播放器',
+                        link: '/components/AudioPlayer'
+                    }
+                ]
+            }
+        ]
+    },
+    markdown: {
+        config(md) {
+            md.use(componentPreview)
+            md.use(containerPreview)
+        }
+    }
+})

docs/vue/docs/.vitepress/plugin/core/componentPreview.ts

@@ -0,0 +1,101 @@
+/* eslint-disable no-param-reassign */
+import MarkdownIt from 'markdown-it'
+import Token from 'markdown-it/lib/token'
+import { resolve, dirname } from 'path'
+import { readFileSync } from 'fs'
+import os from 'os'
+import {
+    composeComponentName,
+    injectComponentImportScript,
+    isCheckingRelativePath,
+    transformHighlightCode,
+    tsToJs
+} from './utils'
+
+const titleRegex = /title="(.*?)"/
+const pathRegex = /path="(.*?)"/
+const descriptionRegex = /description="(.*?)"/
+
+export interface DefaultProps {
+    path: string
+    title: string
+    description: string
+}
+
+/**
+ * 编译预览组件
+ * @param md
+ * @param token
+ * @param env
+ * @returns
+ */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const transformPreview = (md: MarkdownIt, token: Token, env: any) => {
+    const componentProps: DefaultProps = {
+        path: '',
+        title: '默认标题',
+        description: '描述内容'
+    }
+
+    // 获取Props相关参数
+    const titleValue = token.content.match(titleRegex)
+    const pathRegexValue = token.content.match(pathRegex)
+    const descriptionRegexValue = token.content.match(descriptionRegex)
+
+    if (!pathRegexValue)
+        throw new Error(
+            '@vitepress-demo-preview/plugin: path is a required parameter'
+        )
+    // eslint-disable-next-line prefer-destructuring
+    componentProps.path = isCheckingRelativePath(pathRegexValue[1])
+    componentProps.title = titleValue ? titleValue[1] : ''
+    componentProps.description = descriptionRegexValue
+        ? descriptionRegexValue[1]
+        : ''
+
+    // 组件绝对路径
+    const componentPath = resolve(dirname(env.path), componentProps.path || '.')
+
+    // 组件名
+    const componentName = composeComponentName(componentProps.path)
+    // 后缀名
+    const suffixName = componentPath.substring(
+        componentPath.lastIndexOf('.') + 1
+    )
+
+    // 注入组件导入语句
+    injectComponentImportScript(env, componentProps.path, componentName)
+
+    // 组件源码
+    const componentSourceCode = readFileSync(componentPath, {
+        encoding: 'utf-8'
+    })
+    // 源码代码块（经过处理）
+    const compileHighlightCode = transformHighlightCode(
+        md,
+        componentSourceCode,
+        suffixName
+    )
+
+    // TS 转换为 JS 后的源码
+    const scriptContentRE = /(?<=<script[^>]*>)([\s\S]*)(?=<\/script>)/
+    const JSSourceCode = componentSourceCode
+        .replace(scriptContentRE, str => os.EOL + tsToJs(str) + os.EOL)
+        .replace(/lang=['"]ts['"]/, '')
+    const compileHighlightJSCode = transformHighlightCode(
+        md,
+        JSSourceCode,
+        suffixName
+    )
+
+    const code = encodeURI(componentSourceCode)
+    const showCode = encodeURIComponent(compileHighlightCode)
+    const JSCode = encodeURI(JSSourceCode)
+    const showJSCode = encodeURIComponent(compileHighlightJSCode)
+
+    const sourceCode = `<demo-preview title="${componentProps.title}" description="${componentProps.description}" code="${code}" showCode="${showCode}" JSCode="${JSCode}" showJSCode = "${showJSCode}" suffixName="${suffixName}" absolutePath="${componentPath}" relativePath="${componentProps.path}">
+    <${componentName}></${componentName}>
+  </demo-preview>`
+
+    return sourceCode
+}