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

feat: add stackblitz playground

Browse Source
This commit is contained in:
Justineo 2021-09-19 15:34:14 +08:00
parent 8a2e1e3187
commit afb1c0f1ac
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
14 changed files with 127 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
common/play/index.js
View File

@ -1,18 +1,58 @@
import { loading } from 'dls-graphics' import { loading } from 'dls-graphics'
import sdk from '@stackblitz/sdk'
/* eslint-disable import/no-webpack-loader-syntax */ /* eslint-disable import/no-webpack-loader-syntax */
import meta from '!!raw-loader!./templates/package.raw' import packageCodeSandbox from '!!raw-loader!./templates/package.codesandbox'
import prettier from '!!raw-loader!./templates/.prettierrc.raw' import packageStackBlitz from '!!raw-loader!./templates/package.stackblitz'
import index from '!!raw-loader!./templates/index.raw.html' import rcStackBlitz from '!!raw-loader!./templates/.stackblitzrc'
import landing from '!!raw-loader!./templates/landing.raw.html' import vueConfig from '!!raw-loader!./templates/vue.config.js'
import main from '!!raw-loader!./templates/main.raw.js' import prettier from '!!raw-loader!./templates/.prettierrc'
import app from '!!raw-loader!./templates/App.raw.vue' import index from '!!raw-loader!./templates/index.html'
import landing from '!!raw-loader!./templates/landing.html'
import main from '!!raw-loader!./templates/main.js'
import app from '!!raw-loader!./templates/App.vue'
/* eslint-enable import/no-webpack-loader-syntax */ /* eslint-enable import/no-webpack-loader-syntax */
const PLAYGROUND_FILES = {
CodeSandbox: {
'package.json': packageCodeSandbox,
'.prettierrc': prettier,
'public/index.html': index,
'src/main.js': main,
'src/App.vue': app
},
StackBlitz: {
'package.json': packageStackBlitz,
'.prettierrc': prettier,
'public/index.html': index,
'src/main.js': main,
'src/App.vue': app,
'.stackblitzrc': rcStackBlitz,
'vue.config.js': vueConfig
}
}
const PLAY_IMPLS = {
CodeSandbox: createCodeSandbox,
StackBlitz: createStackBlitz
}
export function play (sfc, { locale, vendor }) {
PLAY_IMPLS[vendor](sfc, { locale })
}
const API_CSB = 'https://codesandbox.io/api/v1/sandboxes/define' const API_CSB = 'https://codesandbox.io/api/v1/sandboxes/define'
export function createCodeSandbox (sfc, { locale }) { export function createCodeSandbox (sfc, { locale }) {
const win = window.open() const win = window.open()
win.document.write(landing.replace('{{loading}}', genLoading())) win.document.write(landing.replace('{{loading}}', genLoading()))
const files = Object.entries(
getPlaygroundFiles({ locale, vendor: 'CodeSandbox' })
).reduce((acc, [key, value]) => {
acc[key] = { content: value }
return acc
}, {})
fetch(`${API_CSB}?json=1`, { fetch(`${API_CSB}?json=1`, {
method: 'POST', method: 'POST',
headers: { headers: {
@ -21,9 +61,9 @@ export function createCodeSandbox (sfc, { locale }) {
}, },
body: JSON.stringify({ body: JSON.stringify({
files: { files: {
...getTemplateFiles({ locale }), ...files,
'src/Demo.vue': { 'src/Demo.vue': {
content: sfc content: sfc.replace(/from 'veui'/g, `from 'veui/dist/veui.esm'`)
} }
} }
}) })
@ -34,24 +74,31 @@ export function createCodeSandbox (sfc, { locale }) {
}) })
} }
function getTemplateFiles ({ locale }) { export function createStackBlitz (sfc, { locale }) {
return { sdk.openProject(
'package.json': { {
content: meta title: 'VEUI Playground',
files: {
...getPlaygroundFiles({ locale, vendor: 'StackBlitz' }),
'src/Demo.vue': sfc
}, },
'.prettierrc': { description: 'Online playground for VEUI.',
content: prettier template: 'node'
}, },
'public/index.html': { {
content: index openFile: 'src/Demo.vue'
},
'src/main.js': {
content: main.replace('{{locale}}', locale)
},
'src/App.vue': {
content: app
}
} }
)
}
function getPlaygroundFiles ({ locale, vendor }) {
return Object.entries(PLAYGROUND_FILES[vendor]).reduce(
(acc, [key, value]) => {
acc[key] = value.replace('{{locale}}', locale)
return acc
},
{}
)
} }
function genLoading () { function genLoading () {

0
common/play/templates/.prettierrc.raw → common/play/templates/.prettierrc
View File

4
common/play/templates/.stackblitzrc Normal file
View File

@ -0,0 +1,4 @@
{
"installDependencies": true,
"startCommand": "npx vue-cli-service serve"
}

0
common/play/templates/App.raw.vue → common/play/templates/App.vue
View File

2
common/play/templates/index.raw.html → common/play/templates/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-Hans"> <html lang="{{ locale }}">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />

0
common/play/templates/landing.raw.html → common/play/templates/landing.html
View File

0
common/play/templates/main.raw.js → common/play/templates/main.js
View File

0
common/play/templates/package.raw → common/play/templates/package.codesandbox
View File

12
common/play/templates/package.stackblitz Normal file
View File

@ -0,0 +1,12 @@
{
"dependencies": {
"veui": "^2.1.3",
"veui-theme-dls": "^2.1.3",
"veui-theme-dls-icons": "^2.1.3",
"vue": "^2.6.14"
},
"devDependencies": {
"@vue/cli-service": "~5.0.0-beta.4",
"vue-template-compiler": "^2.6.14"
}
}

5
common/play/templates/vue.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
chainWebpack (config) {
config.resolve.alias.set('veui$', 'veui/dist/veui.esm')
}
}

36
components/OneDemo.vue
View File

@ -22,13 +22,21 @@
</section> </section>
<section class="actions"> <section class="actions">
<veui-button <veui-button
v-tooltip="t('playInCsb')" v-tooltip="t('playInCodeSandbox')"
ui="icon" ui="icon"
@click="play" @click="play('CodeSandbox')"
> >
<veui-icon <veui-icon
scale="0.8" name="one-demo-codesandbox"
name="one-demo-csb" />
</veui-button>
<veui-button
v-tooltip="t('playInStackBlitz')"
ui="icon"
@click="play('StackBlitz')"
>
<veui-icon
name="one-demo-stackblitz"
/> />
</veui-button> </veui-button>
<veui-button <veui-button
@ -37,6 +45,7 @@
@click="localExpanded = !localExpanded" @click="localExpanded = !localExpanded"
> >
<veui-icon <veui-icon
scale="1.2"
:name="localExpanded ? 'one-demo-code-off' : 'one-demo-code'" :name="localExpanded ? 'one-demo-code-off' : 'one-demo-code'"
/> />
</veui-button> </veui-button>
@ -58,7 +67,7 @@ import tooltip from 'veui/directives/tooltip'
import i18n from 'veui/mixins/i18n' import i18n from 'veui/mixins/i18n'
import { BrowserWindow } from 'vue-windows' import { BrowserWindow } from 'vue-windows'
import { getLocale } from '../common/i18n' import { getLocale } from '../common/i18n'
import { createCodeSandbox } from '../common/play' import { play } from '../common/play'
export default { export default {
name: 'one-demo', name: 'one-demo',
@ -98,17 +107,13 @@ export default {
style.height = '0' style.height = '0'
}, },
methods: { methods: {
play () { play (vendor) {
let locale = getLocale(this.$route.path) let locale = getLocale(this.$route.path)
createCodeSandbox(preprocess(this.$refs.source.textContent), { locale }) play(this.$refs.source.textContent, { locale, vendor })
} }
} }
} }
function preprocess (code) {
return code.replace(/from 'veui'/g, `from 'veui/dist/veui.esm'`)
}
Icon.register({ Icon.register({
'one-demo-code': { 'one-demo-code': {
width: 24, width: 24,
@ -120,10 +125,15 @@ Icon.register({
height: 24, height: 24,
d: 'M19.17 12l-4.58-4.59L16 6l6 6l-3.59 3.59L17 14.17L19.17 12zM1.39 4.22l4.19 4.19L2 12l6 6l1.41-1.41L4.83 12L7 9.83l12.78 12.78l1.41-1.41L2.81 2.81L1.39 4.22z' d: 'M19.17 12l-4.58-4.59L16 6l6 6l-3.59 3.59L17 14.17L19.17 12zM1.39 4.22l4.19 4.19L2 12l6 6l1.41-1.41L4.83 12L7 9.83l12.78 12.78l1.41-1.41L2.81 2.81L1.39 4.22z'
}, },
'one-demo-csb': { 'one-demo-codesandbox': {
width: 32, width: 32,
height: 32, height: 32,
d: 'M2.667 8l13.938-8l13.943 8l.12 15.932L16.605 32L2.667 24zm2.786 3.307v6.344l4.458 2.479v4.688l5.297 3.063V16.85zm22.318 0l-9.755 5.542V27.88l5.292-3.063v-4.682l4.464-2.484zM6.844 8.802l9.74 5.526l9.76-5.573l-5.161-2.932l-4.547 2.594l-4.573-2.625z' d: 'M2.667 8l13.938-8l13.943 8l.12 15.932L16.605 32L2.667 24zm2.786 3.307v6.344l4.458 2.479v4.688l5.297 3.063V16.85zm22.318 0l-9.755 5.542V27.88l5.292-3.063v-4.682l4.464-2.484zM6.844 8.802l9.74 5.526l9.76-5.573l-5.161-2.932l-4.547 2.594l-4.573-2.625z'
},
'one-demo-stackblitz': {
width: 28,
height: 28,
d: 'M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z'
} }
}) })
</script> </script>
@ -180,5 +190,5 @@ Icon.register({
font-size 18px font-size 18px
.veui-button + .veui-button .veui-button + .veui-button
margin-left 8px margin-left 12px
</style> </style>

6
package-lock.json generated
View File

@ -4933,6 +4933,12 @@
"integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==", "integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==",
"dev": true "dev": true
}, },
"@stackblitz/sdk": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.5.2.tgz",
"integrity": "sha512-rV8HJb7pti8UBROgVUbxc6f1DGxuUpaGCdQvxvHcGecwqqVMB4XAOzeGuk4HkQLmyCrH/9qTbNA6ch4FwQZRDQ==",
"dev": true
},
"@stylelint/postcss-css-in-js": { "@stylelint/postcss-css-in-js": {
"version": "0.37.2", "version": "0.37.2",
"resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz", "resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz",

1
package.json
View File

@ -21,6 +21,7 @@
"devDependencies": { "devDependencies": {
"@docsearch/css": "^3.0.0-alpha.39", "@docsearch/css": "^3.0.0-alpha.39",
"@docsearch/js": "^3.0.0-alpha.39", "@docsearch/js": "^3.0.0-alpha.39",
"@stackblitz/sdk": "^1.5.2",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"babel-plugin-lodash": "^3.3.4", "babel-plugin-lodash": "^3.3.4",
"babel-plugin-veui": "^2.1.0", "babel-plugin-veui": "^2.1.0",

6
plugins/l10n.js
View File

@ -5,7 +5,8 @@ i18n.register(
{ {
showCode: '显示代码', showCode: '显示代码',
hideCode: '隐藏代码', hideCode: '隐藏代码',
playInCsb: '在 CodeSandbox 中打开' playInCodeSandbox: '在 CodeSandbox 中打开',
playInStackBlitz: '在 StackBlitz 中打开'
}, },
{ {
ns: 'onedemo' ns: 'onedemo'
@ -17,7 +18,8 @@ i18n.register(
{ {
showCode: 'Show code', showCode: 'Show code',
hideCode: 'Hide code', hideCode: 'Hide code',
playInCsb: 'Open in CodeSandbox' playInCodeSandbox: 'Open in CodeSandbox',
playInStackBlitz: 'Open in StackBlitz'
}, },
{ {
ns: 'onedemo' ns: 'onedemo'