feat: add stackblitz playground
This commit is contained in:
Justineo
parent
8a2e1e3187
commit
afb1c0f1ac
@ -1,18 +1,58 @@
|
||||
import { loading } from 'dls-graphics'
|
||||
import sdk from '@stackblitz/sdk'
|
||||
/* 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'
|
||||
import packageCodeSandbox from '!!raw-loader!./templates/package.codesandbox'
|
||||
import packageStackBlitz from '!!raw-loader!./templates/package.stackblitz'
|
||||
import rcStackBlitz from '!!raw-loader!./templates/.stackblitzrc'
|
||||
import vueConfig from '!!raw-loader!./templates/vue.config.js'
|
||||
import prettier from '!!raw-loader!./templates/.prettierrc'
|
||||
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 */
|
||||
|
||||
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'
|
||||
|
||||
export function createCodeSandbox (sfc, { locale }) {
|
||||
const win = window.open()
|
||||
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`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@ -21,9 +61,9 @@ export function createCodeSandbox (sfc, { locale }) {
|
||||
},
|
||||
body: JSON.stringify({
|
||||
files: {
|
||||
...getTemplateFiles({ locale }),
|
||||
...files,
|
||||
'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 }) {
|
||||
return {
|
||||
'package.json': {
|
||||
content: meta
|
||||
export function createStackBlitz (sfc, { locale }) {
|
||||
sdk.openProject(
|
||||
{
|
||||
title: 'VEUI Playground',
|
||||
files: {
|
||||
...getPlaygroundFiles({ locale, vendor: 'StackBlitz' }),
|
||||
'src/Demo.vue': sfc
|
||||
},
|
||||
'.prettierrc': {
|
||||
content: prettier
|
||||
description: 'Online playground for VEUI.',
|
||||
template: 'node'
|
||||
},
|
||||
'public/index.html': {
|
||||
content: index
|
||||
},
|
||||
'src/main.js': {
|
||||
content: main.replace('{{locale}}', locale)
|
||||
},
|
||||
'src/App.vue': {
|
||||
content: app
|
||||
{
|
||||
openFile: 'src/Demo.vue'
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
function getPlaygroundFiles ({ locale, vendor }) {
|
||||
return Object.entries(PLAYGROUND_FILES[vendor]).reduce(
|
||||
(acc, [key, value]) => {
|
||||
acc[key] = value.replace('{{locale}}', locale)
|
||||
return acc
|
||||
},
|
||||
{}
|
||||
)
|
||||
}
|
||||
|
||||
function genLoading () {
|
||||
|
||||
4
common/play/templates/.stackblitzrc
Normal file
4
common/play/templates/.stackblitzrc
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"installDependencies": true,
|
||||
"startCommand": "npx vue-cli-service serve"
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hans">
|
||||
<html lang="{{ locale }}">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
12
common/play/templates/package.stackblitz
Normal file
12
common/play/templates/package.stackblitz
Normal 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
5
common/play/templates/vue.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
chainWebpack (config) {
|
||||
config.resolve.alias.set('veui$', 'veui/dist/veui.esm')
|
||||
}
|
||||
}
|
||||
@ -22,13 +22,21 @@
|
||||
</section>
|
||||
<section class="actions">
|
||||
<veui-button
|
||||
v-tooltip="t('playInCsb')"
|
||||
v-tooltip="t('playInCodeSandbox')"
|
||||
ui="icon"
|
||||
@click="play"
|
||||
@click="play('CodeSandbox')"
|
||||
>
|
||||
<veui-icon
|
||||
scale="0.8"
|
||||
name="one-demo-csb"
|
||||
name="one-demo-codesandbox"
|
||||
/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="t('playInStackBlitz')"
|
||||
ui="icon"
|
||||
@click="play('StackBlitz')"
|
||||
>
|
||||
<veui-icon
|
||||
name="one-demo-stackblitz"
|
||||
/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
@ -37,6 +45,7 @@
|
||||
@click="localExpanded = !localExpanded"
|
||||
>
|
||||
<veui-icon
|
||||
scale="1.2"
|
||||
:name="localExpanded ? 'one-demo-code-off' : 'one-demo-code'"
|
||||
/>
|
||||
</veui-button>
|
||||
@ -58,7 +67,7 @@ import tooltip from 'veui/directives/tooltip'
|
||||
import i18n from 'veui/mixins/i18n'
|
||||
import { BrowserWindow } from 'vue-windows'
|
||||
import { getLocale } from '../common/i18n'
|
||||
import { createCodeSandbox } from '../common/play'
|
||||
import { play } from '../common/play'
|
||||
|
||||
export default {
|
||||
name: 'one-demo',
|
||||
@ -98,17 +107,13 @@ export default {
|
||||
style.height = '0'
|
||||
},
|
||||
methods: {
|
||||
play () {
|
||||
play (vendor) {
|
||||
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({
|
||||
'one-demo-code': {
|
||||
width: 24,
|
||||
@ -120,10 +125,15 @@ Icon.register({
|
||||
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'
|
||||
},
|
||||
'one-demo-csb': {
|
||||
'one-demo-codesandbox': {
|
||||
width: 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'
|
||||
},
|
||||
'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>
|
||||
@ -180,5 +190,5 @@ Icon.register({
|
||||
font-size 18px
|
||||
|
||||
.veui-button + .veui-button
|
||||
margin-left 8px
|
||||
margin-left 12px
|
||||
</style>
|
||||
|
||||
6
package-lock.json
generated
6
package-lock.json
generated
@ -4933,6 +4933,12 @@
|
||||
"integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==",
|
||||
"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": {
|
||||
"version": "0.37.2",
|
||||
"resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz",
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"devDependencies": {
|
||||
"@docsearch/css": "^3.0.0-alpha.39",
|
||||
"@docsearch/js": "^3.0.0-alpha.39",
|
||||
"@stackblitz/sdk": "^1.5.2",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-lodash": "^3.3.4",
|
||||
"babel-plugin-veui": "^2.1.0",
|
||||
|
||||
@ -5,7 +5,8 @@ i18n.register(
|
||||
{
|
||||
showCode: '显示代码',
|
||||
hideCode: '隐藏代码',
|
||||
playInCsb: '在 CodeSandbox 中打开'
|
||||
playInCodeSandbox: '在 CodeSandbox 中打开',
|
||||
playInStackBlitz: '在 StackBlitz 中打开'
|
||||
},
|
||||
{
|
||||
ns: 'onedemo'
|
||||
@ -17,7 +18,8 @@ i18n.register(
|
||||
{
|
||||
showCode: 'Show code',
|
||||
hideCode: 'Hide code',
|
||||
playInCsb: 'Open in CodeSandbox'
|
||||
playInCodeSandbox: 'Open in CodeSandbox',
|
||||
playInStackBlitz: 'Open in StackBlitz'
|
||||
},
|
||||
{
|
||||
ns: 'onedemo'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user