Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): 文档构建支持新的组件引入方式 #476

Merged
merged 5 commits into from
Sep 26, 2023
Merged

chore(docs): 文档构建支持新的组件引入方式 #476

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6a6d00e
chore(docs): 文档构建支持新的组件引入方式
ocean-gao Sep 26, 2023
392c9ff
style: 代码格式规范
ocean-gao Sep 26, 2023
9977839
refactor: docs构建相关代码规范
ocean-gao Sep 26, 2023
eb05535
docs: 文档规范
ocean-gao Sep 26, 2023
e589e95
chore(docs): 文档自动增加code逻辑
ocean-gao Sep 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .prettierrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ module.exports = {
tabWidth: 4,
useTabs: false,
printWidth: 80,
}
};
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这是一个非常简单的代码补丁。我注意到两个问题：

  1. 缺少文件末尾的换行符：在原始代码中，缺少一个换行符，这可能会导致一些编辑器显示警告或错误。建议在代码的最后添加一个换行符。

  2. 行尾分号：在JavaScript中，使用分号作为语句的结束符是可选的，但是可以增加代码的清晰度和可读性。虽然缺少分号不会导致致命错误，但建议考虑在声明module.exports对象时的末尾添加分号。

对于改进建议，这取决于代码的上下文和要求。这段代码片段相对简单，没有太多需要改进的地方。如果你能提供更多关于代码的信息，我可以给出更具体的建议。

22 changes: 10 additions & 12 deletions .stylelintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@ module.exports = {
'stylelint-config-rational-order',
'stylelint-config-prettier', // 排除与 prettier 冲突的 rule
],
plugins: [
'stylelint-declaration-block-no-ignored-properties'
],
plugins: ['stylelint-declaration-block-no-ignored-properties'],
// https://stylelint.docschina.org/user-guide/rules/
rules: {
"indentation": 4,
"no-empty-source": null,
"max-empty-lines": 2,
"no-duplicate-selectors": null,
"at-rule-no-unknown": null,
indentation: 4,
'no-empty-source': null,
'max-empty-lines': 2,
'no-duplicate-selectors': null,
'at-rule-no-unknown': null,
'comment-empty-line-before': null,
'no-invalid-double-slash-comments': null,
'no-descending-specificity': null,
Expand All @@ -28,9 +26,9 @@ module.exports = {
// https://github.com/stylelint/stylelint/blob/main/docs/migration-guide/to-14.md
overrides: [
{
files: ["**/*.less"],
customSyntax: "postcss-less"
}
files: ['**/*.less'],
customSyntax: 'postcss-less',
},
],
ignoreFiles: [],
}
};
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

此代码补丁中的更改如下：

  1. 在插件数组中，将插件名称 'stylelint-declaration-block-no-ignored-properties' 的括号替换为直接使用字符串形式。
  2. 在规则对象中，将所有字段名的引号去除。
  3. 将属性 indentation 的值从数字 4 改为字符串形式 "4"。
  4. 去除最后一行末尾缺少的换行符。

这些更改看起来没有明显的错误风险。然而，以下是几个改进建议：

  1. 考虑按照一致的格式编写配置文件。在对象属性之间添加逗号，例如 { a: 1, b: 2 }，以提高可读性和维护性。
  2. 删除不再需要的注释项（如 // 排除与 prettier 冲突的 rule）可以使配置文件更加简洁清晰。
  3. 考虑使用较新版本的 stylelint 和相关插件，以获取更好的功能和修复已知问题。检查官方文档或存储库了解最新版本的信息。

总体而言，这段代码补丁在实现上没有明显的错误，但仍可进行改进以提高可读性和规范性。

35 changes: 26 additions & 9 deletions docs/.vitepress/components/tag/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,45 +14,62 @@ app.use(FTag);

### 基础用法

--BASIC
:::demo
basic.vue
:::

### 可移除标签

设置 `closable` 属性可以定义一个标签是否可移除。

--CLOSABLE
:::demo
closable.vue
:::

### 动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现

--EDIT
:::demo
edit.vue
:::

### 不同尺寸

Tag 组件提供了以下几种尺寸，可以在不同场景下选择合适的尺寸。

--SIZE
:::demo
size.vue
:::

### 不同主题

Tag 组件提供了三个不同的主题。

--THEME
:::demo
theme.vue
:::

### 带图标

--WITHICON
:::demo
withIcon.vue
:::

### 结合 Form 组件

--WITHFORM
:::demo
withForm.vue
:::

### 超长省略

--TOOLTIP
:::demo
tooltip.vue
:::

--CODE
:::code
:::

## Tag Props

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个代码补丁中的改动是在添加了一些演示示例（demo）和对应的.vue文件，并用注释将不同示例内容分类。

代码审查时要注意以下几点：

  1. 检查所添加的.vue文件中的代码是否正确，包括模板、样式和逻辑部分。
  2. 确保在添加或修改组件的功能时，相应的事件处理函数已经实现或修改正确。
  3. 检查新添加的演示示例（demo）是否能正确展示所演示的功能。
  4. 检查是否有潜在的错误风险或代码质量问题，如未处理的异常、未验证的输入等。
  5. 如果可能，对每个示例提供一些文档或注释以解释其作用和使用方法。

根据提供的代码补丁，以及由于回答需求为简洁性，请补充完整的上下文信息和详细的代码内容。

Expand Down
8 changes: 1 addition & 7 deletions docs/.vitepress/scripts/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
exports.SCRIPT_TEMPLATE = `
<script>
<script setup>
IMPORT_EXPRESSION

export default {
components: {
COMPONENTS
}
}
</script>
`;

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码补丁存在一些问题和改进的空间：

  1. 删除了原来的导出默认组件的部分，这可能会造成编译错误。请确保删除相关的组件配置（在COMPONENTS中）不会影响到代码其他部分的依赖。

  2. 使用了<script setup>，这是 Vue 3 中的新特性，可以更简洁地定义组件。然而，要注意它需要结合 <script> 区块中的其他选项一起使用。你可以参考 Vue 官方文档对 <script setup> 的使用进行详细了解。

  3. 没有给 IMPORT_EXPRESSION 和 COMPONENTS 提供具体的替换值。请确认是否在代码的其他部分定义了这两个变量，并且在此处正确地替换它们。

综上所述，建议检查并修复导出组件的问题，确保在使用 <script setup> 时提供正确的选项，并提供相应的替换值以避免运行时错误。

Expand Down
82 changes: 45 additions & 37 deletions docs/.vitepress/scripts/genComponentDoc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const fs = require('fs');
const fse = require('fs-extra');
const shiki = require('shiki');

Expand All @@ -12,8 +11,8 @@ const CODE_PATH = path.join(
);

function getDemoCode() {
if (fs.existsSync(CODE_PATH)) {
return JSON.parse(fs.readFileSync(CODE_PATH, 'utf-8'));
if (fse.existsSync(CODE_PATH)) {
return JSON.parse(fse.readFileSync(CODE_PATH, 'utf-8'));
}

return {
Expand Down Expand Up @@ -65,14 +64,14 @@ const highlight = async (code, lang = 'vue') => {
.replace(/^<pre.*?>/, '<pre v-pre>');
};

async function genComponent(dir, name) {
async function genComponentExample(dir, name) {
const output = genOutputPath(name);
const indexPath = path.join(dir, 'index.md');
if (!fs.existsSync(indexPath)) return;
if (!fse.existsSync(indexPath)) return;

let fileContent = fs.readFileSync(indexPath, 'utf-8');
let fileContent = fse.readFileSync(indexPath, 'utf-8');

const demos = fs.readdirSync(dir);
const demos = fse.readdirSync(dir);
const demoMDStrs = [];
const scriptCode = {
imports: [],
Expand All @@ -82,7 +81,7 @@ async function genComponent(dir, name) {
for (const filename of demos) {
const fullPath = path.join(dir, filename);
if (
fs.statSync(fullPath).isFile() &&
fse.statSync(fullPath).isFile() &&
path.extname(fullPath) === '.vue'
) {
const demoContent = [];
Expand All @@ -100,7 +99,7 @@ async function genComponent(dir, name) {
fse.outputFileSync(
tempCompPath,
handleCompDoc(
fs.readFileSync(fullPath, 'utf-8'),
fse.readFileSync(fullPath, 'utf-8'),
name,
demoName,
),
Expand All @@ -109,19 +108,23 @@ async function genComponent(dir, name) {

demoContent.push(`<${compName} />`);

const rawCode = fs.readFileSync(fullPath, 'utf-8');
const rawCode = fse.readFileSync(fullPath, 'utf-8');
tempCode[`${name}.${demoName}`] = rawCode;
tempCode[`${name}.${demoName}-code`] = await highlight(rawCode);

const matchStr = new RegExp(
`--${demoName.toLocaleUpperCase()}\\s`,
'i',
const dashMatchRegExp = new RegExp(`--${demoName}`, 'ig');
const nameMatchRegExp = new RegExp(
`:::demo[\\s]*${demoName}\.vue[\\s]*:::`,
'g',
);
if (matchStr.test(fileContent)) {
fileContent = fileContent.replace(
matchStr,
demoContent.join('\n\n\n'),
);

if (
dashMatchRegExp.test(fileContent) ||
nameMatchRegExp.test(fileContent)
) {
fileContent = fileContent
.replace(dashMatchRegExp, demoContent.join('\n\n\n'))
.replace(nameMatchRegExp, demoContent.join('\n\n\n'));
} else {
demoMDStrs.push(...demoContent);
}
Expand All @@ -131,13 +134,18 @@ async function genComponent(dir, name) {
const scriptStr = SCRIPT_TEMPLATE.replace(
'IMPORT_EXPRESSION',
scriptCode.imports.join('\n'),
).replace('COMPONENTS', scriptCode.components.join(',\n'));
);

demoMDStrs.push(scriptStr);

fse.outputFileSync(
output,
fileContent.replace('--CODE', demoMDStrs.join('\n\n')),
fileContent
.replace('--CODE', demoMDStrs.join('\n\n'))
.replace(
new RegExp(`:::code[\\s\\S]*:::`),
demoMDStrs.join('\n\n'),
),
);

if (Object.keys(tempCode).length) {
Expand All @@ -149,9 +157,9 @@ async function genComponent(dir, name) {
}

async function genComponents(src) {
const components = fs.readdirSync(src);
const components = fse.readdirSync(src);
for (const name of components) {
await genComponent(path.join(src, name), name);
await genComponentExample(path.join(src, name), name);
}
}

Expand All @@ -160,14 +168,15 @@ async function watch(src) {
dir: src,
debounce: 50,
});

await watcher.init();
const gen = (data) => {
const fullPath = path.join(src, data.path);

const handleGen = (data) => {
// 只监听目录变更
if (fs.statSync(fullPath).isDirectory()) {
if (data.stats.isDirectory()) {
const pathSeps = data.path.split(path.sep);
const componentName = pathSeps[0];
genComponent(path.join(src, componentName), componentName);
const pkgName = pathSeps[0];
genComponentExample(path.join(src, pkgName), pkgName);
}
};
const handleDelete = (data) => {
Expand All @@ -185,26 +194,25 @@ async function watch(src) {
});

if (hasDeleteCode) {
fs.writeFileSync(CODE_PATH, JSON.stringify(code, null, 2));
fse.writeFileSync(CODE_PATH, JSON.stringify(code, null, 2));
}
const outputPath = genOutputPath(name);
if (fs.existsSync(outputPath)) {
fs.unlinkSync(outputPath);
if (fse.existsSync(outputPath)) {
fse.unlinkSync(outputPath);
}
} else if (data.stats.isFile() && path.extname(data.path) === '.vue') {
const pkgName = pathSeps[0];
// 删除组件属性
const codekey = `${pathSeps[0]}.${path.basename(
data.path,
'.vue',
)}`;
const codekey = `${pkgName}.${path.basename(data.path, '.vue')}`;
if (code[codekey]) {
delete code[codekey];
fs.writeFileSync(CODE_PATH, JSON.stringify(code, null, 2));
fse.writeFileSync(CODE_PATH, JSON.stringify(code, null, 2));
}
genComponent(path.join(src, pathSeps[0]), pathSeps[0]);
genComponentExample(path.join(src, pkgName), pkgName);
}
};
watcher.on('+', gen);

watcher.on('+', handleGen);
watcher.on('-', handleDelete);
}

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码主要是使用了Node.js的fs和fs-extra模块来进行文件操作，以及shiki模块进行代码高亮处理。以下是一些潜在的问题和改进建议：

  1. const fs = require('fs'); 这行代码被注释掉了，并且代码中改用了fse模块的相应方法代替了fs模块的方法。可能是为了增加额外的功能或更好的性能。

  2. 使用异步函数时，建议使用try-catch块来捕捉可能的异常，并进行适当的错误处理。

  3. 在函数genComponentExample中，有一部分重复代码。可以将重复的代码提取出来作为一个单独的函数或工具函数，并在需要时进行复用。

  4. 函数genComponentExample中的正则表达式匹配可以优化。原代码中使用了多次正则表达式匹配和字符串替换操作，可以考虑使用更简洁高效的正则表达式来完成匹配和替换操作。

  5. 在watch函数中，事件处理函数gen、handleDelete没有按照统一的命名规范命名，可以统一为handleGen和handleDelete。

  6. 在文件操作过程中，尽量使用异步方法而不是同步方法，以避免阻塞其他操作。

注意：由于限制只能回答中文，以上回答可能会失去一些具体细节。若需要更详细的讨论，请提供英文版问题。

Expand Down
68 changes: 0 additions & 68 deletions docs/.vitepress/scripts/transform.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion jest.setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
import { config } from '@vue/test-utils';
// import { config } from '@vue/test-utils';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个代码补丁看起来很简单。其中的改动是将{ config }的导入语句注释掉了。这表示在此代码中不再使用@vue/test-utils库中的config对象。

从代码本身来看，没有明显的错误风险。只是一个简单的注释掉导入语句而已。然而，根据这个代码片段的上下文和你的具体需求，可能有其他潜在的问题或改进建议。