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

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>`
+}