feat: support & add vue-sfc - *.vue demo

fritx · fritx · commit 90e1198ac050 · 2020-04-27T23:40:27.000+08:00
diff --git a/public/code/index.yml b/public/code/index.yml
@@ -1,3 +1,4 @@
+- vue-sfc.vue
 - moon-star-single-div.js
 - vue-3d-model.js
 - turtle.py
diff --git a/public/code/vue-sfc.vue b/public/code/vue-sfc.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="container">
+    <h1>Vue Single-file Component</h1>
+    <h3>Hello. {{message}} {{count}}</h3>
+    <button @click="add()">Add</button>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  data() {
+    return { count: 0, message: 'This is Vue App.' };
+  },
+  mounted() {
+    this.timerId = setInterval(this.add, 1000);
+  },
+  beforeDestroy() {
+    let { timerId } = this;
+    if (timerId) clearInterval(timerId);
+  },
+  methods: {
+    add() {
+      this.count++;
+    },
+  },
+};
+</script>
+
+<style>
+.container {
+  padding: 20px;
+}
+</style>
diff --git a/public/code/vue-sfc.vue.png b/public/code/vue-sfc.vue.png
diff --git a/src/playground/codeTransform.ts b/src/playground/codeTransform.ts
@@ -2,7 +2,9 @@ import { babelTransform } from './babelMaster';
 
 export let codeTransform = async (code: string, file: string) => {
   let isPy = file.endsWith('.py');
+  let isVue = file.endsWith('.vue');
   if (isPy) return wrapPy(code);
+  if (isVue) return wrapVue(code);
 
   code = wrapJs(code);
   let hasJsx = file && ['.jsx', '.tsx'].some(ext => file.endsWith(ext));
@@ -11,6 +13,64 @@ export let codeTransform = async (code: string, file: string) => {
   return code;
 };
 
+export let wrapVue = (code: string) => {
+  // todo move into rendering
+  let sandbox = document.createElement('div');
+  sandbox.innerHTML = code; // safe, script won't be executed
+
+  let vueTemplateEl = sandbox.querySelector('template');
+  let vueTemplate = vueTemplateEl ? vueTemplateEl.innerHTML : '';
+  let vueScript = '';
+  sandbox.querySelectorAll('script').forEach(el => {
+    vueScript += el.innerHTML + '\n\n;;';
+  });
+  let vueStyle = '';
+  sandbox.querySelectorAll('style').forEach(el => {
+    vueStyle += el.innerHTML + '\n\n';
+  });
+
+  return `
+(async () => {
+  setRendering(true)
+
+  let a0 = assetsNode
+  a0.id = 'assetsNodeOutdated'
+  let a1 = document.createElement('div')
+  a1.id = 'assetsNode'
+  a0.parentNode.appendChild(a1)
+
+  ReactDOM.unmountComponentAtNode(mountNode)
+  mountNode.innerHTML = '' // put behind, otherwise can cause error in react
+
+  try {
+    await loadJs('https://unpkg.com/vue@2.6.11/dist/vue.min.js')
+    appendCss(${JSON.stringify(vueStyle)})
+
+    let module = { exports: null }
+    ;(() => {
+      ;;${vueScript};;
+    })()
+    let App = module.exports
+    App.template = ${JSON.stringify(vueTemplate)}
+
+    if (!mountNode.children[0]) {
+      let innerNode = document.createElement('div')
+      mountNode.appendChild(innerNode)
+    }
+    let curr = mountNode.children[0]
+    new Vue(App).$mount(curr)
+
+    a0.parentNode.removeChild(a0)
+  } catch (err) {
+    console.error(['displayError', err])
+    displayError(err)
+  } finally {
+    setRendering(false)
+  }
+})()
+  `.trim();
+};
+
 export let wrapPy = (code: string) => {
   return `
 (async () => {
@@ -22,8 +82,8 @@ export let wrapPy = (code: string) => {
   a1.id = 'assetsNode'
   a0.parentNode.appendChild(a1)
 
-  // mountNode.innerHTML = '' // can cause error in react
   ReactDOM.unmountComponentAtNode(mountNode)
+  mountNode.innerHTML = '' // put behind, otherwise can cause error in react
 
   try {
     // await loadJs('http://www.skulpt.org/js/skulpt.min.js')
@@ -91,7 +151,7 @@ export let wrapJs = (code: string) => {
   a0.parentNode.appendChild(a1)
 
   ReactDOM.unmountComponentAtNode(mountNode)
-  mountNode.innerHTML = '' // put after, otherwise can cause error in react
+  mountNode.innerHTML = '' // put behind, otherwise can cause error in react
 
   try {
     let { useRef, useMemo, useState, useEffect, useLayoutEffect, useReducer, useContext, useCallback, useImperativeHandle } = React
diff --git a/src/playground/util.tsx b/src/playground/util.tsx
@@ -75,6 +75,7 @@ export let loadCss = (url: string | string[]): Promise<void> => {
   });
 };
 
+// todo error-handling
 export let appendJs = (code: string) => {
   let el = document.createElement('script');
   el.innerHTML = code;

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+- vue-sfc.vue`
`1`	`2`	`- moon-star-single-div.js`
`2`	`3`	`- vue-3d-model.js`
`3`	`4`	`- turtle.py`