xinlei3166 / vitepress-theme-demoblock Goto Github PK

版本：
"vitepress": "0.22.4",
"vue": "3.2.44"，
"vitepress-theme-demoblock": "^2.0.2"

通过分析浏览器请求，发现在vitepress dev docs启动之后，浏览器请求多了非常多lodash-es的js文件（将近1000个），这会导致页面白屏时间长达数秒。

通过分析源码，发现components/Demo.vue文件中引入了lodash-es库的throttle方法，这种写法是全量引入lodash-es，所以会导致这个问题~

import { throttle } from 'lodash-es'

希望能优化下，改成按需加载lodash-es的方法。

按照示例去配置了一下，引用的自己的组件，如果不使用demo插槽，不会报错，用了插槽后会报[plugin:vitepress] Cannot read properties of undefined (reading 'sfcBlocks')，http请求也会报一个500，还有一个hashmap 404的错误

在md中使用scss以及:deep深度选择器，实际上样式没有渲染，相同的代码到正常的页面是可以渲染的，是不是不支持:deep？

2:40:33 PM [vitepress] Internal server error: Illegal tag name. Use '<' to print '<'.
Plugin: vite:vue
File: /Users/vijay/Desktop/project/work/aries-vue3-components/packages/docs/components/aries-upload/index.md:21:4
19 | ```vue
20 |
21 |
| ^
22 |
23 |
at createCompilerError (/Users/vijay/Desktop/project/work/aries-vue3-components/node_modules/.pnpm/registry.npmmirror.com+@VUE[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:19:19)
at emitError (/Users/vijay/Desktop/project/work/aries-vue3-components/node_modules/.pnpm/registry.npmmirror.com+@VUE[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1594:29)

【以上是报错内容，v3.0.3版本，下面是我的文档内容：】
aries-upload/index.md

AriesUpload 上传

介绍

一个基于 Vue3 和 Ant Design Vue 的文件上传组件。提供上传前的钩子函数进行自定义校验，并可以自定义上传的服务器端点。上传过程中会有加载标识，上传完成后，文件名会以超链接的形式展示，点击链接可以打开文件。同时，组件还提供删除文件的功能，点击删除图标，会移除已上传的文件。

安装

npm install @aries/fusionui-aries-upload

在项目中使用

import { AriesUpload } from '@aries/fusionui-aries-upload'

基础用法

:::demo 默认使用 @aries/pro-oss 包中的 oss.uploadByConan(file)上传，从斑马sts接口 通过ali-oss-sdk上传

<template>
  <aries-upload v-model:value="url" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

// const url = ref<string>("")
</script>

:::

自定义上传接口

:::demo 自定义上传接口

<template>
  <aries-upload v-model:value="url"  :action="uploadFile" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// // import oss from '@aries/pro-oss'

// const url = ref("")

// const uploadFile = async (file) => {
//   // return await oss.uploadByConan(file)
// }

</script>

:::

当运行build时（vitepress dev正常，把vitepress-theme-demoblock插件去除或不引入语言包正常），报如下错误：

/Users/wuqiulin/Documents/work/bsnl/bs-material/node_modules/element-plus/es/locale/lang/zh-cn.js:1
export default {
^^^^^^

SyntaxError: Unexpected token 'export'
   at Object.compileFunction (node:vm:352:18)
   at wrapSafe (node:internal/modules/cjs/loader:1025:15)
   at Module._compile (node:internal/modules/cjs/loader:1059:27)
   at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
   at Module.load (node:internal/modules/cjs/loader:975:32)
   at Function.Module._load (node:internal/modules/cjs/loader:822:12)
   at Module.require (node:internal/modules/cjs/loader:999:19)
   at require (node:internal/modules/cjs/helpers:102:18)
   at Module.<anonymous> (/Users/wuqiulin/Documents/work/bsnl/bs-material/node_modules/vitepress/dist/client/app/temp/app.js:28:10)
   at Module._compile (node:internal/modules/cjs/loader:1095:14)
error Command failed with exit code 1.

代码

• .vitepress/index.js

// components
import DefaultTheme from 'vitepress/theme'
import ElementPlus from 'element-plus'
import Demo from 'vitepress-theme-demoblock/components/Demo.vue'
import DemoBlock from 'vitepress-theme-demoblock/components/DemoBlock.vue'

// lang
import cn from 'element-plus/es/locale/lang/zh-cn'

// styles
import 'element-plus/dist/index.css'

export default {
  ...DefaultTheme,
  enhanceApp({ app }) {
    // register global components
    // app.component('MyGlobalComponent' /* ... */)

    app.component('Demo', Demo)
    app.component('DemoBlock', DemoBlock)
    app.use(ElementPlus, { locale: cn, size: 'small' })
  }
}

• .vitepress/config.js 中md配置

const { demoBlockPlugin } = require('vitepress-theme-demoblock')
      md.use(demoBlockPlugin, {
        cssPreprocessor: 'scss',
        scriptImports: [
          "import * as ElementPlus from 'element-plus'"
        ],
        scriptReplaces: [
          {
            searchValue:
              /const ({ defineComponent as _defineComponent }) = Vue/g,
            replaceValue: 'const { defineComponent: _defineComponent } = Vue'
          },
          {
            searchValue: /import ({.*}) from 'element-plus'/g,
            replaceValue: (s, s1) => `const ${s1} = ElementPlus`
          }        ]
      })

这是因为什么导致的呢

在:::demo中，只使用渲染组件没问题，但我想弄个响应式数据绑定到组件，那我就要定义一个ref，所以我需要在script中引入ref：import { ref } from 'vue'，但现在会报错，说我有不期待的{，不知道这个怎么解决
Unexpected "{"
35 |
36 | const { defineComponent: _defineComponent } = Vue
37 | import { ref } from "vue";
| ^
38 |
39 |

:::demo 通过 options 修改

(加个文字，不然会渲染成格式块)```vue
<template>
  <w-qrcode :options="options"></w-qrcode>
</template>

<script setup lang="ts">
import { ref } from "vue";

const options = ref({
  color: {
    dark: "#00ff00",
  },
});
</script>
(加个文字，不然会渲染成格式块)```

:::

<template>
  <xl-button>默认按钮</xl-button>
  <xl-button type="primary">主要按钮</xl-button>
  <xl-button type="success">成功按钮</xl-button>
  <xl-button type="info">信息按钮</xl-button>
  <xl-button type="warning">警告按钮</xl-button>
  <xl-button type="danger">危险按钮</xl-button>
</template>

<script>
 import { Button }  from 'ant-design-vue'
 </script>

报错：

[vite] Internal server error: Transform failed with 1 error: /vitepress-demo/docs/components/button.md:159:11: ERROR: Unexpected "{" Plugin: vite:vue File: /Users/bou/working/code/vue-pro/vitepress-demo/docs/components/button.md:159:11

这个插件个人觉得应该放到 dev依赖中，即安装命令
yarn add -D vitepress-theme-demoblock

可以在在线沙盒中打开么，还有1.0.0-beta.7能用么

尝试仅仅就修改一个文案提交，也会报这个错误

一个md太长了 能不能分成多个 合并进去 像酱紫类似的调用一下
`:::demo

button/basic

:::`

[plugin:vite:vue] Transform failed with 1 error:
/Users/yangzongliu/Downloads/promise-ui-master/docs/components/button/index.md:431:11: ERROR: Unexpected "{"

Unexpected "{"
429| }
430|
431| import { useData } from 'vitepress'
| ^
432| const { ref } = Vue

vue 可以引入，其他 模块 无法引入

使用：
vitepress版本为1.0.0-alpha.30。
vue版本为3.2.44。
具体报错信息如图

<template>
  <add-circle />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { AddCircle } from 'chintui-icons'
export default defineComponent({
  components: {
    AddCircle,
  },
})
</script>

import { AddCircle } from 'chintui-icons' 这行报错 error: Unexpected "{"

首先非常感谢作者写了这个插件，挺好用。这里提一个建议。

1. 测试示例：vitepress-theme-demoblock
   ，修改 docs/guide/index.md，使用 scss 方式编写样式无生效，期望生效。

<style lang="scss">
.card-wrap {
  text-align: center;
  background: red;
  .card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--c-brand);
    background: #fff;
    border: 1px solid var(--c-brand);
    height: 80px;
    width: 600px;
    background: yellow;
  }
}
</style>

2. 查看了源文件 utils、render，发现是 utils.js 的 stripStyle 函数处理正则表达式不会匹配 <style lang="scss"></style> 的字符串， 最终 render 的处理也只考虑 <style><style> 模式。不知道作者能否支持预编译器的适配。

直接在 MD文件里面写 Vue组件，Vue组件如果是带有jsx语法，会无法渲染，如：

<template #item="{ element }"> <a-card :title="element.name" :extra="<a>More</a>" :style="{ width: 200, height: 150 }"> Inner Card content </a-card> </template>

:extra参数无法渲染

由于我们的组件库里面使用了自己的字体图标库，覆盖了demoblock这边的font-family，导致图标不显示，建议使用更通用的svg方式，demoblock这边其实只有几个图标没必要引入一套字体图标库进来。

    "vitepress": "^1.0.0-alpha.8",
    "vitepress-theme-demoblock": "^1.4.2",

md文件中的style scoped不生效，比如下面的content会影响全局的content样式.

<template>
  <div class="content">内容</div>
</template>
<style scoped>
.content {
  height: 300px;
}
</style>

使用的是vite版本^1.0.0-alpha.4

vue提示compileTemplate now requires the id option.

https://vitepress.dev/reference/default-theme-badge#title

目前Badge渲染不出来

<template>
  {{ form.name }}
</template>
<script setup lang="ts">
import { reactive } from 'vue';
const form = reactive({
  name: 'test',
});
</script>

报错：form.md:15 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'name')
且：import { reactive } from 'vue';引入方式不支持双引号

复现步骤：

1. 展开一个demo代码，滚动到某个位置让其固定在页面下面
2. 再展开刚才已经展开的demo块上面的demo块
3. 此时两个操作区块全都会固定在页面下方，并出现重叠现象

升级到1.2.2版本之后出现以下样式问题：

开发环境信息
macOS monterey 12.6
node 16.11.0
ant-design-vue 3.2.11

最小化重现
https://github.com/az031120103/test

复现步骤
git clone https://github.com/az031120103/test.git
npm run dev:ui
npm run dev:docs

实际发生
Form 组件的自定义 hooks useConfigInject 报错：

useConfigInject.js:71 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getPrefixCls')
at WEBPACK_DEFAULT_EXPORT (useConfigInject.js:71:1)
at setup (Form.js:118:43)
at callWithErrorHandling (runtime-core.esm-bundler.js:157:22)
at setupStatefulComponent (runtime-core.esm-bundler.js:7246:29)
at setupComponent (runtime-core.esm-bundler.js:7201:11)
at mountComponent (runtime-core.esm-bundler.js:5524:13)
at processComponent (runtime-core.esm-bundler.js:5499:17)
at patch (runtime-core.esm-bundler.js:5101:21)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5638:21)
at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)

simple-git-hooks我看了一下好像是这个插件里的,这个问题该怎么处理呢

在使用过程中需要导入一些组件中的css文件，但无法直接像导入js中那样通过替换来完成。

希望通过替换，把上面注释的替换成下面的真实路径。
就像下面js这样。

这个问题一直没有解决，最后自己仿照element-plus 撸了一个，
欢迎使用：https://javaweb-h5.gitee.io/component-docs-template/document/

滚动页面滚动条，展开/收起的操作区会自动固定在底部这个功能体验非常好！点个赞！不过有一个小小的样式问题，就是语言（比如vue）这个文字现在没有被遮挡，露出在外面了，这个不太好~

不支持html代码的显示隐藏，希望能修复。我这样修复的，供参考。

<template>
  <div
    ref="demoBlock"
    :class="['demo-block', blockClass, customClass ? customClass : '', { hover }]"
    @mouseenter="hover = true"
    @mouseleave="hover = false"
  >
    <div ref="source" class="source"> <!-- <div class="source"> -->
      <slot />
    </div>
    <!-- ... -->
  </div>
</template>
<script>
// components/Demo.vue
// ...
export default {
  // ...
  setup(props) {
    // ...
    const onClickControl = () => {
      isExpanded.value = !isExpanded.value
      hover.value = isExpanded.value
      // add code
      const hasHtml = source.value.querySelector('.language-html')
      if (hasHtml) {
        if (isExpanded.value) hasHtml.style.display = 'block'
        else hasHtml.style.display = 'none'
      }
      // add end
    }
    // ...
    const source = ref(null) // add
    const highlight = ref(null)
    // ...
    return {
      // ...
      copyText,
      source, // add
      highlight,
      // ...
    }
  }
}
</script>
<!-- ... -->
<style>
.highlight div[class*='language-'] {
  margin: 0 !important;
}
/* add */
.source .language-html {
  display: none;
}
</style>

版本信息：
"vitepress": "1.0.0-alpha.28",
"vitepress-theme-demoblock": "2.0.2",
vue: 3.2.44

报错信息：

node:fs:585
handleErrorFromBinding(ctx);
^

Error: ENOENT: no such file or directory, open 'D:\projects\new-energy-base.prettierrc'
at Object.openSync (node:fs:585:3)
at Object.readFileSync (node:fs:453:35)
at format (file:///D:/projects/new-energy-base/node_modules/.pnpm/[email protected]_aukpcd4tcdec3kaf6goa6mffd4/node_modules/vitepress-theme-demoblock/dist/bin/help.mjs:9:34)
at registerComponents (file:///D:/projects/new-energy-base/node_modules/.pnpm/[email protected]_aukpcd4tcdec3kaf6goa6mffd4/node_modules/vitepress-theme-demoblock/dist/bin/vitepress-register-components.mjs:65:28)
at file:///D:/projects/new-energy-base/node_modules/.pnpm/[email protected]_aukpcd4tcdec3kaf6goa6mffd4/node_modules/vitepress-theme-demoblock/dist/bin/vitepress-register-components.mjs:68:1
at ModuleJob.run (node:internal/modules/esm/module_job:197:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:337:24) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'D:\projects\new-energy-base\.prettierrc'

看了下 bin/help.mjs文件，里面读取.prettierrc路径使用的是cwd， 所以读取的是我个人项目的根路径， 需要把vitepress-theme-demoblock根目录下的.prettierrc文件拷贝到个人项目根目录才行

在::: demo 中使用 <script setup> 和 typescript 下 v-model:value 语法在 dev 模式运行时可正常使用，build 后部署会报错并无法使用。

报错内容

在 ::: demo 中的用法

组件中使用 emits('update:value',value) 抛出事件

这种情况下写会出现错误：[vite] Internal server error: Single file component can contain only one <script> element

希望支持在:::demo外还能再写script标签

可能是 docs 文件夹下有 vite.config.ts 文件导致的：

import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vite';

export default defineConfig(async () => {
  return {
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('../src', import.meta.url)),
        '@public': fileURLToPath(new URL('../public', import.meta.url)),
      },
    },
    css: {
      postcss: '../configs/.postcssrc.yml',
    },
  };
});

运行 pnpm run docs:dev 后报错：

The plugin "externalize-deps" was triggered by this import
docs/.vitepress/config.ts:5:7:
      5 │ } from 'vitepress-theme-demoblock';

具体问题如图：

File: D:/*/node_modules/.pnpm/[email protected]/node_modules/vitepress-theme-demoblock/components/Demo.vue 91 | 92 | const onClickControl = () => { 93 | isExpanded.value = !isExpanded.value | ^ 94 | hover.value = isExpanded.value 95 | }

vue版本3.1.1
demo示例代码如下

:::demo 使用`left`，`right`来定义`Search`搜索图标位置， 默认`right`

      ```vue
      <template>
        <div>
          <d-search iconPosition="left" style="width: 200px"></d-search>
        </div>
      </template>
      ```
:::

d-search已经全局注册

demo代码展开后页面向下滑动，点击收起页面会有抖动。