-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #38 from mayinrain/master
upd: 解决文档打包问题
- Loading branch information
Showing
10 changed files
with
180 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| export const DEMO_ENTRY_FILE = ` | ||
| <template> | ||
| <Demo /> | ||
| </template> | ||
| <script setup> | ||
| import {setupFesDesign } from './fes-design.js'; | ||
| import Demo from './demo.vue'; | ||
| setupFesDesign(); | ||
| </script> | ||
| `; | ||
|
|
||
| export const FES_DESIGN_SETUP = ` | ||
| // 请谨慎修改内容!!! | ||
| import { getCurrentInstance } from 'vue'; | ||
| import FesDesign from '@fesjs/fes-design'; | ||
| import * as Icons from '@fesjs/fes-design/icon'; | ||
| export function loadStyle() { | ||
| const hasLinks = document.querySelectorAll('link'); | ||
| for(let l of hasLinks) { | ||
| if (/fes-design.min.css/.test(l.href)) return; | ||
| } | ||
| const link = document.createElement('link') | ||
| link.rel = 'stylesheet' | ||
| link.href = 'https://registry.npmmirror.com/@fesjs/fes-design/latest/files/dist/fes-design.min.css'; | ||
| document.head.appendChild(link) | ||
| const twcsslink = document.createElement('link') | ||
| twcsslink.rel = 'stylesheet' | ||
| twcsslink.href = 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.min.css'; | ||
| document.head.appendChild(twcsslink) | ||
| } | ||
| export function setupFesDesign() { | ||
| loadStyle(); | ||
| const instance = getCurrentInstance() | ||
| instance.appContext.app.use(FesDesign); | ||
| Object.keys(Icons).forEach((iconName) => { | ||
| instance.appContext.app.component(iconName, Icons[iconName]); | ||
| }); | ||
| } | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,110 +1,96 @@ | ||
| <template> | ||
| <FDrawer v-model:show="isShow" title="Playground" displayDirective="show" width="90%" @ok="isShow = false"> | ||
| <Repl :store="store" :showImportMap="true" :showCompileOutput="false" :clearConsole="false" /> | ||
| </FDrawer> | ||
| <FDrawer v-model:show="isShow" title="Playground" displayDirective="show" width="90%" @ok="isShow = false" | ||
| > | ||
| <Repl | ||
| v-if="props.codeName" | ||
| :editor="CodeMirror" | ||
| :store="store" | ||
| :show-ts-config="false" | ||
| :show-import-map="true" | ||
| :show-compile-output="false" | ||
| :clear-console="false" | ||
| /> | ||
| </FDrawer> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| import { | ||
| version, | ||
| watch, | ||
| ref | ||
| } from 'vue'; | ||
|
|
||
| <script setup> | ||
| import { ref, version, watch } from 'vue'; | ||
| import CodeMirror from '@vue/repl/codemirror-editor'; | ||
| import { Repl, ReplStore } from '@vue/repl'; | ||
| import { FDrawer } from '@fesjs/fes-design'; | ||
| import { | ||
| Repl, | ||
| ReplStore | ||
| } from '@vue/repl'; | ||
| import data from './demoCode.json'; | ||
| import '@vue/repl/style.css'; | ||
| import { DEMO_ENTRY_FILE, FES_DESIGN_SETUP } from './constants'; | ||
| const props = defineProps({ | ||
| codeName: String | ||
| codeName: String, | ||
| codeSrc: String, | ||
| }); | ||
| const mainFile = 'App.vue'; | ||
| const demoFile = 'demo.vue'; | ||
| const mainFile = 'src/App.vue'; | ||
| const demoFile = 'src/demo.vue'; | ||
| const store = new ReplStore({ | ||
| defaultVueRuntimeURL: `https://npm.elemecdn.com/vue@${version}/dist/vue.esm-browser.js` | ||
| defaultVueRuntimeURL: `https://registry.npmmirror.com/vue/${version}/files/dist/vue.esm-browser.js`, | ||
| }); | ||
| const fesDesignSetup = ` | ||
| // 不要修改此文件!!! | ||
| import { getCurrentInstance } from 'vue'; | ||
| import Space from './space.vue'; | ||
| import FesDesign from '@fesjs/fes-design'; | ||
| import * as Icons from '@fesjs/fes-design/icon'; | ||
| export function loadStyle() { | ||
| const hasLinks = document.querySelectorAll('link'); | ||
| for(let l of hasLinks) { | ||
| if (/fes-design.min.css/.test(l.href)) return; | ||
| } | ||
| const link = document.createElement('link') | ||
| link.rel = 'stylesheet' | ||
| link.href = 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.min.css'; | ||
| document.head.appendChild(link) | ||
| const twcsslink = document.createElement('link') | ||
| twcsslink.rel = 'stylesheet' | ||
| twcsslink.href = 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.min.css'; | ||
| document.head.appendChild(twcsslink) | ||
| } | ||
| export function setupFesDesign() { | ||
| loadStyle(); | ||
| const instance = getCurrentInstance() | ||
| instance.appContext.app.use(FesDesign); | ||
| Object.keys(Icons).forEach((iconName) => { | ||
| instance.appContext.app.component(iconName, Icons[iconName]); | ||
| }); | ||
| instance.appContext.app.component('Space', Space) | ||
| } | ||
| `; | ||
| function resolveSFCExample (demo) { | ||
| const files = { | ||
| [mainFile]: data.app, | ||
| 'space.vue': data.space, | ||
| [demoFile]: data[demo], | ||
| 'fes-design.js': fesDesignSetup, | ||
| 'import-map.json': JSON.stringify({ | ||
| imports: { | ||
| '@fesjs/fes-design': 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.esm-browser.js', | ||
| '@fesjs/fes-design/icon': 'https://npm.elemecdn.com/@fesjs/fes-design@latest/dist/fes-design.icon-browser.js', | ||
| '@fesjs/traction-widget': 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.esm-browser.js' | ||
| } | ||
| }) | ||
| }; | ||
| return files; | ||
| const defaultFiles = { | ||
| [mainFile]: DEMO_ENTRY_FILE, | ||
| 'src/fes-design.js': FES_DESIGN_SETUP, | ||
| 'import-map.json': JSON.stringify({ | ||
| imports: { | ||
| '@fesjs/fes-design': | ||
| 'https://registry.npmmirror.com/@fesjs/fes-design/latest/files/dist/fes-design.esm-browser.js', | ||
| '@fesjs/fes-design/icon': | ||
| 'https://registry.npmmirror.com/@fesjs/fes-design/latest/files/dist/fes-design.icon-browser.js', | ||
| '@fesjs/traction-widget': | ||
| 'https://cdn.jsdelivr.net/npm/@fesjs/traction-widget/dist/traction-widget.esm-browser.js' | ||
| }, | ||
| }), | ||
| }; | ||
| store.setFiles(defaultFiles); | ||
| store.setActive(mainFile); | ||
| function resolveSFCExample(codeSrc) { | ||
| defaultFiles[demoFile] = codeSrc; | ||
| return defaultFiles; | ||
| } | ||
| function updateExample (fileName) { | ||
| store.setFiles(resolveSFCExample(fileName), mainFile).then(() => { | ||
| function updateExample(codeSrc) { | ||
| store.setFiles(resolveSFCExample(codeSrc), mainFile).then(() => { | ||
| store.setActive(demoFile); | ||
| }); | ||
| } | ||
| watch( | ||
| () => props.codeSrc, | ||
| () => { | ||
| updateExample(decodeURIComponent(props.codeSrc)); | ||
| }, | ||
| { | ||
| immediate: true, | ||
| }, | ||
| ); | ||
| const isShow = ref(true); | ||
| const handleShow = (val) => { | ||
| function handleShow(val) { | ||
| isShow.value = val; | ||
| }; | ||
| } | ||
| defineExpose({ | ||
| isShow, | ||
| handleShow | ||
| }); | ||
| watch(() => props.codeName, () => { | ||
| updateExample(props.codeName); | ||
| }, { | ||
| immediate: true | ||
| handleShow, | ||
| }); | ||
| </script> | ||
| <style lang="less" scoped> | ||
|
|
||
| <style lang="less"> | ||
| .vue-repl { | ||
| border-right: 1px solid var(--vt-c-divider-light); | ||
| height: calc(100vh - 88px); | ||
| border-right: 1px solid var(--vt-c-divider-light); | ||
| height: calc(100vh - 55px); // 55px 是 drawer header 的宽度 | ||
| } | ||
| .fes-repl-drawer-content { | ||
| .fes-drawer-body-container { | ||
| padding-top: 0; | ||
| padding-right: 0; | ||
| padding-bottom: 0; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,26 @@ | ||
| import { createVNode, render } from 'vue' | ||
| import ExampleRepl from './exampleRepl.vue' | ||
| import { createVNode, defineAsyncComponent, render } from 'vue'; | ||
|
|
||
| let vm | ||
| export default function playground (codeName) { | ||
| console.log('codeName', codeName) | ||
| if (vm) { | ||
| vm.component.exposed.handleShow(true) | ||
| vm.component.props.codeName = codeName | ||
| return vm | ||
| } | ||
| const container = document.createElement('div') | ||
| vm = createVNode(ExampleRepl, { | ||
| codeName | ||
| }) | ||
| render(vm, container) | ||
| const AsyncExampleRepl = defineAsyncComponent({ | ||
| loader: () => import('./exampleRepl.vue'), | ||
| }); | ||
|
|
||
| document.body.appendChild(container) | ||
| return vm | ||
| let vm; | ||
| export default function playground({ codeName, codeSrc }) { | ||
| if (vm) { | ||
| const exampleReplComponent = vm.component.subTree.component; | ||
| exampleReplComponent.props.codeName = codeName; | ||
| exampleReplComponent.props.codeSrc = codeSrc; | ||
| exampleReplComponent.exposed.handleShow(true); | ||
| return vm; | ||
| } | ||
| const container = document.createElement('div'); | ||
| vm = createVNode(AsyncExampleRepl, { | ||
| codeName, | ||
| codeSrc, | ||
| }); | ||
|
|
||
| render(vm, container); | ||
|
|
||
| document.body.appendChild(container); | ||
| return vm; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { genComponentDoc } from './genComponentDoc.js'; | ||
|
|
||
| genComponentDoc(false); |
Oops, something went wrong.