Skip to content

Commit 55a36e9

Browse files
nancyzhannancyzhan
authored
Merge pull request #38 from mayinrain/master
upd: 解决文档打包问题
2 parents 205e820 + 7de83c5 commit 55a36e9

File tree

10 files changed

+180
-142
lines changed

10 files changed

+180
-142
lines changed

‎docs/.vitepress/config.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22
import { defineConfig } from 'vitepress';
33
import vueJsx from '@vitejs/plugin-vue-jsx';
44

5-
const path = require('path');
5+
import path from 'path';
66

7-
const {
8-
genComponentDoc
9-
} = require('./scripts/genComponentDoc');
7+
import { genComponentDoc } from './scripts/genComponentDoc.js';
108
genComponentDoc();
119

1210
const ssrTransformCustomDir = () => ({
@@ -30,13 +28,13 @@ export default defineConfig({
3028
ignored: ['**/docs/.vueepress/components/**']
3129
}
3230
},
33-
// optimizeDeps: {
34-
// exclude: ['@vue/repl']
35-
// },
31+
optimizeDeps: {
32+
exclude: ['@vue/repl']
33+
},
3634
ssr: {
3735
// lodash-es 模块是 esm，ssr 渲染的时候编译成 cjs 的引入方式，会引发 nodejs 的模块加载异常错误
3836
noExternal: ['lodash-es', '@fesjs/fes-design', '@fesjs/fes-design/icon'],
39-
// external: ['@vue/repl']
37+
external: ['@vue/repl']
4038
},
4139
resolve: {
4240
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],

‎docs/.vitepress/custom/components/componentDoc.vue‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="component-doc-content">
66
<slot></slot>
77
</div>
8-
<div :class="['component-doc-code', visibleCode && 'visible-code']" v-html="code"></div>
8+
<div :class="['component-doc-code', visibleCode && 'visible-code']" v-html="currentCode"></div>
99
<div class="component-doc-header" @click="toggleCode">
1010
<!-- <LeftOutlined :class="['show-code-btn', visibleCode && 'active']" @click="toggleCode" /> -->
1111
{{visibleCode ? '收起代码' : '查看代码'}}
@@ -17,31 +17,31 @@
1717
<script setup lang="ts">
1818
import {
1919
watch,
20-
ref
20+
ref,
21+
computed
2122
} from 'vue';
2223
import { DownOutlined } from '@fesjs/fes-design/icon';
23-
24+
import { debounce } from 'lodash-es';
2425
import playground from './playground';
2526
import codes from './demoCode.json';
2627
2728
const props = defineProps({
28-
code: String
29+
codeName: String,
30+
codeSrc: String,
31+
codeFormat: String,
2932
});
3033
const code = ref('');
31-
watch(
32-
() => props.code,
33-
() => {
34-
code.value = codes[`${props.code}-code`];
35-
},
36-
{
37-
immediate: true
38-
}
34+
const currentCode = computed(() =>
35+
decodeURIComponent(props?.codeFormat || ''),
3936
);
4037
4138
const visibleCode = ref(false);
42-
const openPlayground = () => {
43-
playground(props.code);
44-
};
39+
const openPlayground = debounce(() => {
40+
playground({
41+
codeName: props.codeName,
42+
codeSrc: props.codeSrc,
43+
});
44+
}, 500);
4545
4646
const toggleCode = () => {
4747
visibleCode.value = !visibleCode.value;

‎docs/.vitepress/custom/components/constants.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
export const DEMO_ENTRY_FILE = `
2+
<template>
3+
<Demo />
4+
</template>
5+
6+
<script setup>
7+
import {setupFesDesign } from './fes-design.js';
8+
import Demo from './demo.vue';
9+
setupFesDesign();
10+
</script>
11+
`;
12+
13+
export const FES_DESIGN_SETUP = `
14+
// 请谨慎修改内容!!!
15+
import { getCurrentInstance } from 'vue';
16+
import FesDesign from '@fesjs/fes-design';
17+
import * as Icons from '@fesjs/fes-design/icon';
18+
export function loadStyle() {
19+
const hasLinks = document.querySelectorAll('link');
20+
for(let l of hasLinks) {
21+
if (/fes-design.min.css/.test(l.href)) return;
22+
}
23+
24+
const link = document.createElement('link')
25+
link.rel = 'stylesheet'
26+
link.href = 'https://registry.npmmirror.com/@fesjs/fes-design/latest/files/dist/fes-design.min.css';
27+
document.head.appendChild(link)
28+
const twcsslink = document.createElement('link')
29+
twcsslink.rel = 'stylesheet'
30+
twcsslink.href = 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.min.css';
31+
document.head.appendChild(twcsslink)
32+
}
33+
34+
export function setupFesDesign() {
35+
loadStyle();
36+
const instance = getCurrentInstance()
37+
instance.appContext.app.use(FesDesign);
38+
Object.keys(Icons).forEach((iconName) => {
39+
instance.appContext.app.component(iconName, Icons[iconName]);
40+
});
41+
}
42+
`;

‎docs/.vitepress/custom/components/exampleRepl.vue‎

Lines changed: 70 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,96 @@
11
<template>
2-
<FDrawer v-model:show="isShow" title="Playground" displayDirective="show" width="90%" @ok="isShow = false">
3-
<Repl :store="store" :showImportMap="true" :showCompileOutput="false" :clearConsole="false" />
4-
</FDrawer>
2+
<FDrawer v-model:show="isShow" title="Playground" displayDirective="show" width="90%" @ok="isShow = false"
3+
>
4+
<Repl
5+
v-if="props.codeName"
6+
:editor="CodeMirror"
7+
:store="store"
8+
:show-ts-config="false"
9+
:show-import-map="true"
10+
:show-compile-output="false"
11+
:clear-console="false"
12+
/>
13+
</FDrawer>
514
</template>
6-
<script setup lang="ts">
7-
import {
8-
version,
9-
watch,
10-
ref
11-
} from 'vue';
15+
16+
<script setup>
17+
import { ref, version, watch } from 'vue';
18+
19+
import CodeMirror from '@vue/repl/codemirror-editor';
20+
import { Repl, ReplStore } from '@vue/repl';
1221
1322
import { FDrawer } from '@fesjs/fes-design';
14-
import {
15-
Repl,
16-
ReplStore
17-
} from '@vue/repl';
18-
import data from './demoCode.json';
19-
import '@vue/repl/style.css';
23+
import { DEMO_ENTRY_FILE, FES_DESIGN_SETUP } from './constants';
2024
2125
const props = defineProps({
22-
codeName: String
26+
codeName: String,
27+
codeSrc: String,
2328
});
24-
25-
const mainFile = 'App.vue';
26-
const demoFile = 'demo.vue';
29+
const mainFile = 'src/App.vue';
30+
const demoFile = 'src/demo.vue';
2731
2832
const store = new ReplStore({
29-
defaultVueRuntimeURL: `https://npm.elemecdn.com/vue@${version}/dist/vue.esm-browser.js`
33+
defaultVueRuntimeURL: `https://registry.npmmirror.com/vue/${version}/files/dist/vue.esm-browser.js`,
3034
});
3135
32-
const fesDesignSetup = `
33-
// 不要修改此文件!!!
34-
import { getCurrentInstance } from 'vue';
35-
import Space from './space.vue';
36-
import FesDesign from '@fesjs/fes-design';
37-
import * as Icons from '@fesjs/fes-design/icon';
38-
export function loadStyle() {
39-
const hasLinks = document.querySelectorAll('link');
40-
for(let l of hasLinks) {
41-
if (/fes-design.min.css/.test(l.href)) return;
42-
}
43-
44-
const link = document.createElement('link')
45-
link.rel = 'stylesheet'
46-
link.href = 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.min.css';
47-
document.head.appendChild(link)
48-
const twcsslink = document.createElement('link')
49-
twcsslink.rel = 'stylesheet'
50-
twcsslink.href = 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.min.css';
51-
document.head.appendChild(twcsslink)
52-
}
53-
54-
export function setupFesDesign() {
55-
loadStyle();
56-
const instance = getCurrentInstance()
57-
instance.appContext.app.use(FesDesign);
58-
Object.keys(Icons).forEach((iconName) => {
59-
instance.appContext.app.component(iconName, Icons[iconName]);
60-
});
61-
instance.appContext.app.component('Space', Space)
62-
}
63-
`;
64-
65-
function resolveSFCExample (demo) {
66-
67-
const files = {
68-
[mainFile]: data.app,
69-
'space.vue': data.space,
70-
[demoFile]: data[demo],
71-
'fes-design.js': fesDesignSetup,
72-
'import-map.json': JSON.stringify({
73-
imports: {
74-
'@fesjs/fes-design': 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.esm-browser.js',
75-
'@fesjs/fes-design/icon': 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.icon-browser.js',
76-
'@fesjs/traction-widget': 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.esm-browser.js'
77-
}
78-
})
79-
};
80-
return files;
36+
const defaultFiles = {
37+
[mainFile]: DEMO_ENTRY_FILE,
38+
'src/fes-design.js': FES_DESIGN_SETUP,
39+
'import-map.json': JSON.stringify({
40+
imports: {
41+
'@fesjs/fes-design':
42+
'https://registry.npmmirror.com/@fesjs/fes-design/latest/files/dist/fes-design.esm-browser.js',
43+
'@fesjs/fes-design/icon':
44+
'https://registry.npmmirror.com/@fesjs/fes-design/latest/files/dist/fes-design.icon-browser.js',
45+
'@fesjs/traction-widget':
46+
'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.esm-browser.js'
47+
},
48+
}),
49+
};
50+
store.setFiles(defaultFiles);
51+
store.setActive(mainFile);
52+
function resolveSFCExample(codeSrc) {
53+
defaultFiles[demoFile] = codeSrc;
54+
return defaultFiles;
8155
}
8256
83-
function updateExample (fileName) {
84-
store.setFiles(resolveSFCExample(fileName), mainFile).then(() => {
57+
function updateExample(codeSrc) {
58+
store.setFiles(resolveSFCExample(codeSrc), mainFile).then(() => {
8559
store.setActive(demoFile);
8660
});
8761
}
8862
63+
watch(
64+
() => props.codeSrc,
65+
() => {
66+
updateExample(decodeURIComponent(props.codeSrc));
67+
},
68+
{
69+
immediate: true,
70+
},
71+
);
72+
8973
const isShow = ref(true);
90-
const handleShow = (val) => {
74+
function handleShow(val) {
9175
isShow.value = val;
92-
};
93-
76+
}
9477
defineExpose({
9578
isShow,
96-
handleShow
97-
});
98-
99-
watch(() => props.codeName, () => {
100-
updateExample(props.codeName);
101-
}, {
102-
immediate: true
79+
handleShow,
10380
});
10481
</script>
105-
<style lang="less" scoped>
82+
83+
<style lang="less">
10684
.vue-repl {
107-
border-right: 1px solid var(--vt-c-divider-light);
108-
height: calc(100vh - 88px);
85+
border-right: 1px solid var(--vt-c-divider-light);
86+
height: calc(100vh - 55px); // 55px 是 drawer header 的宽度
87+
}
88+
89+
.fes-repl-drawer-content {
90+
.fes-drawer-body-container {
91+
padding-top: 0;
92+
padding-right: 0;
93+
padding-bottom: 0;
94+
}
10995
}
11096
</style>

‎docs/.vitepress/custom/components/playground.js‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,26 @@
1-
import { createVNode, render } from 'vue'
2-
import ExampleRepl from './exampleRepl.vue'
1+
import { createVNode, defineAsyncComponent, render } from 'vue';
32

4-
let vm
5-
export default function playground (codeName) {
6-
console.log('codeName', codeName)
7-
if (vm) {
8-
vm.component.exposed.handleShow(true)
9-
vm.component.props.codeName = codeName
10-
return vm
11-
}
12-
const container = document.createElement('div')
13-
vm = createVNode(ExampleRepl, {
14-
codeName
15-
})
16-
render(vm, container)
3+
const AsyncExampleRepl = defineAsyncComponent({
4+
loader: () => import('./exampleRepl.vue'),
5+
});
176

18-
document.body.appendChild(container)
19-
return vm
7+
let vm;
8+
export default function playground({ codeName, codeSrc }) {
9+
if (vm) {
10+
const exampleReplComponent = vm.component.subTree.component;
11+
exampleReplComponent.props.codeName = codeName;
12+
exampleReplComponent.props.codeSrc = codeSrc;
13+
exampleReplComponent.exposed.handleShow(true);
14+
return vm;
15+
}
16+
const container = document.createElement('div');
17+
vm = createVNode(AsyncExampleRepl, {
18+
codeName,
19+
codeSrc,
20+
});
21+
22+
render(vm, container);
23+
24+
document.body.appendChild(container);
25+
return vm;
2026
}

‎docs/.vitepress/scripts/genComponentDoc.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
const path = require('path');
2-
const fs = require('fs');
3-
const fse = require('fs-extra');
4-
const shiki = require('shiki');
5-
const cheapWatch = require('cheap-watch');
1+
import path from 'path';
2+
import fs from 'fs';
3+
import fse from 'fs-extra';
4+
import shiki from 'shiki';
5+
import cheapWatch from 'cheap-watch';
66

77
const SCRIPT_TEMPLATE = `
88
<script>
@@ -54,11 +54,15 @@ function genOutputPath (name) {
5454
return path.join(process.cwd(), `./docs/components/${name}.md`);
5555
}
5656

57-
function handleCompDoc (compCode, compName, demoName) {
57+
function handleCompDoc(compCode, compName, demoName) {
58+
const codeName = `${compName}.${demoName}`;
59+
const codeSrc = encodeURIComponent(code[`${codeName}`]);
60+
const codeFormat = encodeURIComponent(code[`${codeName}-code`]);
61+
5862
return compCode.replace(
5963
/<template>([\s\S]*)<\/template>/,
6064
(match, p1) =>
61-
`<template><ComponentDoc code="${compName}.${demoName}"><ClientOnly>${p1}</ClientOnly></ComponentDoc></template>`
65+
`<template><ComponentDoc codeName="${codeName}" codeSrc="${codeSrc}" codeFormat="${codeFormat}"><ClientOnly>${p1}</ClientOnly></ComponentDoc></template>`,
6266
);
6367
}
6468

@@ -236,7 +240,7 @@ async function watch (src) {
236240
watcher.on('-', handleDelete);
237241
}
238242

239-
exports.genComponentDoc = async (useWatch = true) => {
243+
export const genComponentDoc = async (useWatch = true) => {
240244
const src = path.join(process.cwd(), './docs/.vitepress/components');
241245
await genComponents(src);
242246

‎docs/.vitepress/scripts/generate-doc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { genComponentDoc } from './genComponentDoc.js';
2+
3+
genComponentDoc(false);

0 commit comments

Comments
 (0)