taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactor: use raw-loader to import template, update directive usage in demo

Browse Source
This commit is contained in:
Justineo 2021-09-17 19:41:59 +08:00
parent 573407b07a
commit 0a080cf662
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
23 changed files with 241 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
common/play/index.js Normal file
View File

@ -0,0 +1,66 @@
import { loading } from 'dls-graphics'
/* eslint-disable import/no-webpack-loader-syntax */
import meta from '!!raw-loader!./templates/package.raw'
import prettier from '!!raw-loader!./templates/.prettierrc.raw'
import index from '!!raw-loader!./templates/index.raw.html'
import landing from '!!raw-loader!./templates/landing.raw.html'
import main from '!!raw-loader!./templates/main.raw.js'
import app from '!!raw-loader!./templates/App.raw.vue'
/* eslint-enable import/no-webpack-loader-syntax */
const API_CSB = 'https://codesandbox.io/api/v1/sandboxes/define'
export function createCodeSandbox (sfc, { locale }) {
const win = window.open()
win.document.write(landing.replace('{{loading}}', genLoading()))
fetch(`${API_CSB}?json=1`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},
body: JSON.stringify({
files: {
...getTemplateFiles({ locale }),
'src/Demo.vue': {
content: sfc
}
}
})
})
.then(res => res.json())
.then(data => {
win.location = `https://codesandbox.io/s/${data.sandbox_id}?file=/src/Demo.vue`
})
}
function getTemplateFiles ({ locale }) {
return {
'package.json': {
content: meta
},
'.prettierrc': {
content: prettier
},
'public/index.html': {
content: index
},
'src/main.js': {
content: main.replace('{{locale}}', locale)
},
'src/App.vue': {
content: app
}
}
}
function genLoading () {
const { contents, attrs } = loading
const attrsStr = Object.entries({
...attrs,
class: `loading ${attrs.class}`
})
.map(([key, value]) => `${key}="${value}"`)
.join(' ')
return `<svg ${attrsStr}>${contents}</svg>`
}

11
common/play/templates/.prettierrc.raw Normal file
View File

@ -0,0 +1,11 @@
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"fluid": false
}

21
common/play/templates/App.raw.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<main>
<demo/>
</main>
</template>
<script>
import Demo from './Demo'
export default {
components: {
Demo
}
}
</script>
<style scoped>
main {
padding: 24px;
}
</style>

12
common/play/templates/index.raw.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>VEUI Playground</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

33
common/play/templates/landing.raw.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>VEUI Playground</title>
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
width: 100vw;
height: 100vh;
margin: 0;
background-color: #040404;
}
.loading {
position: absolute;
top: 38.4%;
left: 50%;
transform: translate(-50%, -38.4%);
height: 48px;
font-weight: 400;
color: #fff;
}
</style>
</head>
<body>
{{loading}}
</body>
</html>

11
common/play/templates/main.raw.js Normal file
View File

@ -0,0 +1,11 @@
import Vue from 'vue'
import App from './App.vue'
import 'veui-theme-dls/dist/dls.esm'
import 'veui-theme-dls-icons/dist/icons.esm'
import 'veui/dist/locale.{{locale}}.esm'
Vue.config.productionTip = false
new Vue({
render: (h) => h(App)
}).$mount('#app')

7
common/play/templates/package.raw Normal file
View File

@ -0,0 +1,7 @@
{
"dependencies": {
"veui": "2.1.2",
"veui-theme-dls": "2.1.2",
"vue": "2.6.14"
}
}

7
components/OneDemo.vue
View File

@ -57,7 +57,8 @@ import { Button, Icon } from 'veui'
import tooltip from 'veui/directives/tooltip'
import i18n from 'veui/mixins/i18n'
import { BrowserWindow } from 'vue-windows'
import { createCodeSandbox } from './play'
import { getLocale } from '../common/i18n'
import { createCodeSandbox } from '../common/play'
export default {
name: 'one-demo',
@ -98,14 +99,14 @@ export default {
},
methods: {
play () {
createCodeSandbox(preprocess(this.$refs.source.textContent))
let locale = getLocale(this.$route.path)
createCodeSandbox(preprocess(this.$refs.source.textContent), { locale })
}
}
}
function preprocess (code) {
return code.replace(/from 'veui'/g, `from 'veui/dist/veui.esm'`)
.replace(/(?:import 'veui-theme-dls-icons[^']+'\n)+/g, `import 'veui-theme-dls-icons/dist/icons.esm'\n`)
}
Icon.register({

161
components/play.js
View File

@ -1,161 +0,0 @@
import { loading } from 'dls-graphics'
const API_CSB = 'https://codesandbox.io/api/v1/sandboxes/define'
export function createCodeSandbox (sfc) {
const win = window.open()
win.document.write(landing)
fetch(`${API_CSB}?json=1`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},
body: JSON.stringify({
files: {
...templateFiles,
'src/Demo.vue': {
content: sfc
}
}
})
})
.then(res => res.json())
.then(data => {
win.location = `https://codesandbox.io/s/${data.sandbox_id}?file=/src/Demo.vue`
})
}
const meta = `{
"dependencies": {
"veui": "2.1.2",
"veui-theme-dls": "2.1.2",
"vue": "2.6.14"
}
}
`
const prettier = `{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"fluid": false
}
`
const index = `<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>VEUI Playground</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
`
const main = `import Vue from 'vue'
import App from './App.vue'
import 'veui-theme-dls/dist/dls.esm'
Vue.config.productionTip = false
new Vue({
render: (h) => h(App)
}).$mount('#app')
`
const app = `<template>
<main>
<demo/>
</main>
</template>
<script>
import Demo from './Demo'
export default {
components: {
Demo
}
}
</script>
<style scoped>
main {
padding: 24px;
}
</style>
`
const templateFiles = {
'package.json': {
content: meta
},
'.prettierrc': {
content: prettier
},
'public/index.html': {
content: index
},
'src/main.js': {
content: main
},
'src/App.vue': {
content: app
}
}
const landing = `<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>VEUI Playground</title>
<style>
* {
box-sizing: border-box;
}
body {
position: relative;
width: 100vw;
height: 100vh;
margin: 0;
background-color: #040404;
}
.loading {
position: absolute;
top: 38.4%;
left: 50%;
transform: translate(-50%, -38.4%);
height: 48px;
font-weight: 400;
color: #fff;
}
</style>
</head>
<body>
${genLoading()}
</body>
</html>
`
function genLoading () {
const { contents, attrs } = loading
const attrsStr = Object.entries({
...attrs,
class: `loading ${attrs.class}`
})
.map(([key, value]) => `${key}="${value}"`)
.join(' ')
return `<svg ${attrsStr}>${contents}</svg>`
}

6
nuxt.config.js
View File

@ -39,7 +39,7 @@ module.exports = {
css: false
},
css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl'],
css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl', 'veui-theme-dls/'],
plugins: [
{ src: '~plugins/i18n.js' },
@ -82,10 +82,6 @@ module.exports = {
options: {
locale: ['zh-Hans', 'en-US'],
modules: [
{
package: 'veui-theme-dls',
fileName: '{module}.less'
},
{
package: 'veui-theme-dls',
fileName: '{module}.js',

2
one/docs/demo/directives/drag/axis.vue
View File

@ -18,7 +18,7 @@
</template>
<script>
import drag from 'veui/directives/drag'
import { drag } from 'veui'
export default {
directives: {

2
one/docs/demo/directives/drag/base.vue
View File

@ -9,7 +9,7 @@
</template>
<script>
import drag from 'veui/directives/drag'
import { drag } from 'veui'
export default {
directives: {

2
one/docs/demo/directives/drag/containment.vue
View File

@ -14,7 +14,7 @@
</template>
<script>
import drag from 'veui/directives/drag'
import { drag } from 'veui'
export default {
directives: {

2
one/docs/demo/directives/drag/sort-x.vue
View File

@ -24,7 +24,7 @@
</template>
<script>
import drag from 'veui/directives/drag'
import { drag } from 'veui'
const items = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'.split(/[,. ]+/).filter(Boolean)

2
one/docs/demo/directives/drag/sort-y.vue
View File

@ -23,7 +23,7 @@
</template>
<script>
import drag from 'veui/directives/drag'
import { drag } from 'veui'
const items = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'.split(/[,. ]+/).filter(Boolean)

2
one/docs/demo/directives/drag/targets.vue
View File

@ -19,7 +19,7 @@
</template>
<script>
import drag from 'veui/directives/drag'
import { drag } from 'veui'
export default {
directives: {

2
one/docs/demo/directives/nudge.vue
View File

@ -21,7 +21,7 @@
</template>
<script>
import nudge from 'veui/directives/nudge'
import { nudge } from 'veui'
export default {
directives: {

3
one/docs/demo/directives/resize.vue
View File

@ -47,8 +47,7 @@
</template>
<script>
import { Button } from 'veui'
import { resize } from 'veui/directives'
import { Button, resize } from 'veui'
export default {
components: {

3
one/docs/demo/directives/tooltip.vue
View File

@ -22,8 +22,7 @@
</template>
<script>
import { Button, Icon } from 'veui'
import tooltip from 'veui/directives/tooltip'
import { Button, Icon, tooltip } from 'veui'
import 'veui-theme-dls-icons/zoom-in'
import 'veui-theme-dls-icons/upload'
import 'veui-theme-dls-icons/trash'

3
one/docs/demo/overlay/position.vue
View File

@ -18,8 +18,7 @@
</template>
<script>
import { Overlay, Button } from 'veui'
import outside from 'veui/directives/outside'
import { Overlay, Button, outside } from 'veui'
export default {
components: {

3
one/docs/demo/overlay/relative-base.vue
View File

@ -20,8 +20,7 @@
</template>
<script>
import { Overlay, Button } from 'veui'
import outside from 'veui/directives/outside'
import { Overlay, Button, outside } from 'veui'
export default {
components: {

75
package-lock.json generated
View File

@ -8095,9 +8095,9 @@
}
},
"date-fns": {
"version": "2.23.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.23.0.tgz",
"integrity": "sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==",
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.24.0.tgz",
"integrity": "sha512-6ujwvwgPID6zbI0o7UbURi2vlLDR9uP26+tW6Lg+Ji3w7dd0i3DOcjcClLjLPranT60SSEFBwdSyYwn/ZkPIuw==",
"dev": true
},
"de-indent": {
@ -15651,6 +15651,49 @@
"unpipe": "1.0.0"
}
},
"raw-loader": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
"integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"dependencies": {
"json5": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
"integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
"dev": true,
"requires": {
"minimist": "^1.2.5"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"schema-utils": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
"integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.8",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
}
},
"rc9": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/rc9/-/rc9-1.2.0.tgz",
@ -18814,9 +18857,9 @@
}
},
"veui": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/veui/-/veui-2.1.1.tgz",
"integrity": "sha512-0l9tZAx6xHygQSegqyFcD5QbKwwcAfI3imLsU8TCGmzIPebPnXvaSXOtFm6KKUep6wvdFGaofGRU5KPZ1pyEpw==",
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/veui/-/veui-2.1.3.tgz",
"integrity": "sha512-hBV8G7wJLAd9yEvX/Nqv4DHfSO1wWYAmxhcGyeymRAQ07EPnOd1w6zeyHwx4P2QlzwwGm2lCw/2bDQgXd8Ju5g==",
"dev": true,
"requires": {
"bytes": "^3.0.0",
@ -18839,9 +18882,9 @@
}
},
"veui-loader": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.1.1.tgz",
"integrity": "sha512-DmwuQEvvDC2+yOLwkdiLEQI/EEnsCTQXW7svypA7l95Tyo+phE6Iw4PhOlTY9Hz2ywLUgDCHHBN+KSCH5u3kMw==",
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.1.3.tgz",
"integrity": "sha512-OxrZxXGR5z6m7TR1Z7RAqYFkUUsq5GlNyCPl6VoHbT9M3bvxWfNI74G88cC65agkTOKdC0WODtSCpzXL+ZqUfQ==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
@ -18931,9 +18974,9 @@
}
},
"veui-theme-dls": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.1.1.tgz",
"integrity": "sha512-zrQXNwikp6zNFEWdYE5kEN7CUu1N5pYO3aoSp6HJYYEZA940s9Nw1vb/IUVNQga2nuOxtkePgnhudPEe/W44Vw==",
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.1.3.tgz",
"integrity": "sha512-5tT/x9amQMJj3IyIDCd9BSBXjnBAylWd+IZ8uaCiS0PyNlGpMsqavzc5KBUWcFieOsabdOmgiQbPJVlb18W2ZQ==",
"dev": true,
"requires": {
"classlist-polyfill": "^1.2.0",
@ -18941,7 +18984,7 @@
"focus-visible": "^4.1.0",
"less-plugin-dls": "^1.4.0",
"less-plugin-est": "^3.0.0",
"veui-theme-dls-icons": "^2.1.1"
"veui-theme-dls-icons": "^2.1.3"
},
"dependencies": {
"dls-icons-vue": {
@ -18953,9 +18996,9 @@
}
},
"veui-theme-dls-icons": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.1.1.tgz",
"integrity": "sha512-VSLg11amuDfvxYKE8CJg/eMaLbXAGY6PZ6CQdv5APtvNxWJWrETYOl7Lmem05dUI8+BJCrhMZLxi5JSPvyuMEA==",
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.1.3.tgz",
"integrity": "sha512-hLtKT/T8JpZCdDQBvcGGIJrxDeYFlv4z2k359x8vCsYwDOnsFgfkVfSv0Y+0DR/C9KnH0MDkSEtZ8dq2hFcAEQ==",
"dev": true,
"requires": {
"dls-icons-vue": "^1.9.0"

9
package.json
View File

@ -54,6 +54,7 @@
"preact": "^10.5.14",
"prettier": "^1.16.4",
"prettier-eslint": "^8.8.2",
"raw-loader": "^4.0.2",
"recursive-readdir": "^2.2.2",
"recursive-readdir-sync": "^1.0.6",
"rehype-raw": "^2.0.0",
@ -72,10 +73,10 @@
"stylus-loader": "^3.0.2",
"unist-util-remove": "^1.0.1",
"unist-util-visit": "^1.4.0",
"veui": "^2.1.1",
"veui-loader": "^2.1.1",
"veui-theme-dls": "^2.1.1",
"veui-theme-dls-icons": "^2.1.1",
"veui": "^2.1.3",
"veui-loader": "^2.1.3",
"veui-theme-dls": "^2.1.3",
"veui-theme-dls-icons": "^2.1.3",
"vue-awesome": "^4.1.0",
"vue-i18n": "^8.16.0",
"vue-windows": "^0.2.4"