From afb1c0f1acdf86873d4a0d79c7eb6d83f249d268 Mon Sep 17 00:00:00 2001 From: Justineo Date: Sun, 19 Sep 2021 15:34:14 +0800 Subject: [PATCH] feat: add stackblitz playground --- common/play/index.js | 95 ++++++++++++++----- .../{.prettierrc.raw => .prettierrc} | 0 common/play/templates/.stackblitzrc | 4 + .../play/templates/{App.raw.vue => App.vue} | 0 .../templates/{index.raw.html => index.html} | 2 +- .../{landing.raw.html => landing.html} | 0 .../play/templates/{main.raw.js => main.js} | 0 .../{package.raw => package.codesandbox} | 0 common/play/templates/package.stackblitz | 12 +++ common/play/templates/vue.config.js | 5 + components/OneDemo.vue | 36 ++++--- package-lock.json | 6 ++ package.json | 1 + plugins/l10n.js | 6 +- 14 files changed, 127 insertions(+), 40 deletions(-) rename common/play/templates/{.prettierrc.raw => .prettierrc} (100%) create mode 100644 common/play/templates/.stackblitzrc rename common/play/templates/{App.raw.vue => App.vue} (100%) rename common/play/templates/{index.raw.html => index.html} (90%) rename common/play/templates/{landing.raw.html => landing.html} (100%) rename common/play/templates/{main.raw.js => main.js} (100%) rename common/play/templates/{package.raw => package.codesandbox} (100%) create mode 100644 common/play/templates/package.stackblitz create mode 100644 common/play/templates/vue.config.js diff --git a/common/play/index.js b/common/play/index.js index a536ea3..40b3233 100644 --- a/common/play/index.js +++ b/common/play/index.js @@ -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 () { diff --git a/common/play/templates/.prettierrc.raw b/common/play/templates/.prettierrc similarity index 100% rename from common/play/templates/.prettierrc.raw rename to common/play/templates/.prettierrc diff --git a/common/play/templates/.stackblitzrc b/common/play/templates/.stackblitzrc new file mode 100644 index 0000000..a6e32d6 --- /dev/null +++ b/common/play/templates/.stackblitzrc @@ -0,0 +1,4 @@ +{ + "installDependencies": true, + "startCommand": "npx vue-cli-service serve" +} diff --git a/common/play/templates/App.raw.vue b/common/play/templates/App.vue similarity index 100% rename from common/play/templates/App.raw.vue rename to common/play/templates/App.vue diff --git a/common/play/templates/index.raw.html b/common/play/templates/index.html similarity index 90% rename from common/play/templates/index.raw.html rename to common/play/templates/index.html index 65413b2..5af9f94 100644 --- a/common/play/templates/index.raw.html +++ b/common/play/templates/index.html @@ -1,5 +1,5 @@ - + diff --git a/common/play/templates/landing.raw.html b/common/play/templates/landing.html similarity index 100% rename from common/play/templates/landing.raw.html rename to common/play/templates/landing.html diff --git a/common/play/templates/main.raw.js b/common/play/templates/main.js similarity index 100% rename from common/play/templates/main.raw.js rename to common/play/templates/main.js diff --git a/common/play/templates/package.raw b/common/play/templates/package.codesandbox similarity index 100% rename from common/play/templates/package.raw rename to common/play/templates/package.codesandbox diff --git a/common/play/templates/package.stackblitz b/common/play/templates/package.stackblitz new file mode 100644 index 0000000..ce244e2 --- /dev/null +++ b/common/play/templates/package.stackblitz @@ -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" + } +} diff --git a/common/play/templates/vue.config.js b/common/play/templates/vue.config.js new file mode 100644 index 0000000..782276c --- /dev/null +++ b/common/play/templates/vue.config.js @@ -0,0 +1,5 @@ +module.exports = { + chainWebpack (config) { + config.resolve.alias.set('veui$', 'veui/dist/veui.esm') + } +} diff --git a/components/OneDemo.vue b/components/OneDemo.vue index 27fa578..f0b5d32 100644 --- a/components/OneDemo.vue +++ b/components/OneDemo.vue @@ -22,13 +22,21 @@
+ + + @@ -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' } }) @@ -180,5 +190,5 @@ Icon.register({ font-size 18px .veui-button + .veui-button - margin-left 8px + margin-left 12px diff --git a/package-lock.json b/package-lock.json index f284919..bd22ac8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 3d81fb9..84c00de 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/plugins/l10n.js b/plugins/l10n.js index 9d2fadd..46b92f1 100644 --- a/plugins/l10n.js +++ b/plugins/l10n.js @@ -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'