refactor: use raw-loader to import template, update directive usage in demo

2021-09-17 19:41:59 +08:00
parent 573407b07a
commit 0a080cf662
23 changed files with 241 additions and 204 deletions
--- a/common/play/index.js
+++ b/common/play/index.js
@@ -0,0 +1,66 @@
+import { loading } from 'dls-graphics'
+/* 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'
+/* eslint-enable import/no-webpack-loader-syntax */
+
+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()))
+  fetch(`${API_CSB}?json=1`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json'
+    },
+    body: JSON.stringify({
+      files: {
+        ...getTemplateFiles({ locale }),
+        'src/Demo.vue': {
+          content: sfc
+        }
+      }
+    })
+  })
+    .then(res => res.json())
+    .then(data => {
+      win.location = `https://codesandbox.io/s/${data.sandbox_id}?file=/src/Demo.vue`
+    })
+}
+
+function getTemplateFiles ({ locale }) {
+  return {
+    'package.json': {
+      content: meta
+    },
+    '.prettierrc': {
+      content: prettier
+    },
+    'public/index.html': {
+      content: index
+    },
+    'src/main.js': {
+      content: main.replace('{{locale}}', locale)
+    },
+    'src/App.vue': {
+      content: app
+    }
+  }
+}
+
+function genLoading () {
+  const { contents, attrs } = loading
+  const attrsStr = Object.entries({
+    ...attrs,
+    class: `loading ${attrs.class}`
+  })
+    .map(([key, value]) => `${key}="${value}"`)
+    .join(' ')
+  return `<svg ${attrsStr}>${contents}</svg>`
+}
--- a/common/play/templates/.prettierrc.raw
+++ b/common/play/templates/.prettierrc.raw
@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
--- a/common/play/templates/App.raw.vue
+++ b/common/play/templates/App.raw.vue
@@ -0,0 +1,21 @@
+<template>
+<main>
+  <demo/>
+</main>
+</template>
+
+<script>
+import Demo from './Demo'
+
+export default {
+  components: {
+    Demo
+  }
+}
+</script>
+
+<style scoped>
+main {
+  padding: 24px;
+}
+</style>
--- a/common/play/templates/index.raw.html
+++ b/common/play/templates/index.raw.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-Hans">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>VEUI Playground</title>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
--- a/common/play/templates/landing.raw.html
+++ b/common/play/templates/landing.raw.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="zh-Hans">
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+  <title>VEUI Playground</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      position: relative;
+      width: 100vw;
+      height: 100vh;
+      margin: 0;
+      background-color: #040404;
+    }
+    .loading {
+      position: absolute;
+      top: 38.4%;
+      left: 50%;
+      transform: translate(-50%, -38.4%);
+      height: 48px;
+      font-weight: 400;
+      color: #fff;
+    }
+  </style>
+</head>
+<body>
+  {{loading}}
+</body>
+</html>
--- a/common/play/templates/main.raw.js
+++ b/common/play/templates/main.raw.js
@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import App from './App.vue'
+import 'veui-theme-dls/dist/dls.esm'
+import 'veui-theme-dls-icons/dist/icons.esm'
+import 'veui/dist/locale.{{locale}}.esm'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: (h) => h(App)
+}).$mount('#app')
--- a/common/play/templates/package.raw
+++ b/common/play/templates/package.raw
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "veui": "2.1.2",
+    "veui-theme-dls": "2.1.2",
+    "vue": "2.6.14"
+  }
+}