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
14 changed files with 127 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
common/play/index.js
View File

@@ -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
},
description: 'Online playground for VEUI.',
template: 'node'
},
'.prettierrc': {
content: prettier
},
'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 () {

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>
<html lang="zh-Hans">
<html lang="{{ locale }}">
<head>
<meta charset="utf-8" />
<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')
}
}