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 = `
VEUI Playground
`
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 = `
`
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 = `
VEUI Playground
${genLoading()}
`
function genLoading () {
const { contents, attrs } = loading
const attrsStr = Object.entries({
...attrs,
class: `loading ${attrs.class}`
})
.map(([key, value]) => `${key}="${value}"`)
.join(' ')
return ``
}