Merge pull request #792 from QingWei-Li/feat/jsfiddle

Add jsfiddle in demo

build/cooking.demo.js

@@ -58,11 +58,17 @@ cooking.add('vueMarkdown', {
         var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
         if (tokens[idx].nesting === 1) {
           var description = (m && m.length > 1) ? m[1] : '';
-          var html = convert(striptags(tokens[idx + 1].content, 'script'));
+          var content = tokens[idx + 1].content;
+          var html = convert(striptags.strip(content, 'script'));
+          var script = striptags.fetch(content, 'script');
+          var jsfiddle = { html: html, script: script };
           var descriptionHTML = description
             ? '<div class="description">' + md.render(description) + '</div>'
             : '';
-          return `<demo-block class="demo-box">
+
+          jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle));
+
+          return `<demo-block class="demo-box" :jsfiddle="${jsfiddle}">
                     <div class="source">${html}</div>
                     <div class="meta">
                       ${descriptionHTML}

build/strip-tags.js

@@ -9,7 +9,7 @@
 
 var cheerio = require('cheerio');
 
-module.exports = function(str, tags) {
+exports.strip = function(str, tags) {
   var $ = cheerio.load(str, {decodeEntities: false});
 
   if (!tags || tags.length === 0) {
@@ -25,3 +25,10 @@ module.exports = function(str, tags) {
 
   return $.html();
 };
+
+exports.fetch = function(str, tag) {
+  var $ = cheerio.load(str, {decodeEntities: false});
+  if (!tag) return str;
+
+  return $(tag).html();
+};

examples/components/demo-block.vue

@@ -4,6 +4,7 @@
     :class="[blockClass, { 'hover': hovering }]"
     @mouseenter="hovering = true"
     @mouseleave="hovering = false">
+    <el-button class="demo-button" type="text" @click="goJsfiddle">jsfiddle</el-button>
     <slot></slot>
     <div class="demo-block-control" @click="isExpanded = !isExpanded">
       <transition name="arrow-slide">
@@ -21,19 +22,23 @@
     border: solid 1px #eaeefb;
     border-radius: 4px;
     transition: .2s;
-  
+
     &.hover {
       box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5);
     }
-     
+
     code {
       font-family: Menlo, Monaco, Consolas, Courier, monospace;
     }
-  
+
+    .demo-button {
+      float: right;
+    }
+
     .source {
       padding: 24px;
     }
-    
+
     .meta {
       background-color: #f9fafc;
       border-top: solid 1px #eaeefb;
@@ -57,7 +62,7 @@
       p {
         margin: 0;
       }
-      
+
       code {
         color: #5e6d82;
         background-color: #e6effb;
@@ -69,7 +74,7 @@
         border-radius: 3px;
       }
     }
-    
+
     .highlight {
       width: 60%;
       border-right: solid 1px #eaeefb;
@@ -77,19 +82,19 @@
       pre {
         margin: 0;
       }
-      
+
       code.hljs {
         margin: 0;
         border: none;
         max-height: none;
         border-radius: 0;
-      
+
         &::before {
           content: none;
         }
       }
     }
-  
+
     .demo-block-control {
       border-top: solid 1px #eaeefb;
       height: 36px;
@@ -121,12 +126,12 @@
         transition: .3s;
         display: inline-block;
       }
-      
+
       &:hover {
         color: #20a0ff;
         background-color: #f9fafc;
       }
-       
+
       & .text-slide-enter,
       & .text-slide-leave-active {
         opacity: 0;
@@ -145,6 +150,47 @@
       };
     },
 
+    props: {
+      jsfiddle: Object,
+      default() {
+        return {};
+      }
+    },
+
+    methods: {
+      goJsfiddle() {
+        const { script, html } = this.jsfiddle;
+        const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>' +
+        '\n<scr' + 'ipt src="//unpkg.com/element-ui@next/lib/index.js"></scr' + 'ipt>';
+        let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
+        let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
+        let cssTpl = '@import url("//unpkg.com/element-ui@next/lib/theme-default/index.css");';
+        jsTpl = jsTpl
+          ? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
+          : 'new Vue().$mount(\'#app\')';
+        const data = {
+          js: jsTpl,
+          css: cssTpl,
+          html: htmlTpl,
+          panel_js: 3
+        };
+        const form = document.createElement('form');
+        const node = document.createElement('textarea');
+
+        form.method = 'post';
+        form.action = 'http://jsfiddle.net/api/post/library/pure/';
+        form.target = '_blank';
+
+        for (let name in data) {
+          node.name = name;
+          node.value = data[name].toString();
+          form.appendChild(node.cloneNode());
+        }
+
+        form.submit();
+      }
+    },
+
     computed: {
       blockClass() {
         return `demo-${ this.$router.currentRoute.path.split('/').pop() }`;