feat: support online edit

dewfall123 · Aug 5, 2020 · 7c267e0 · 7c267e0
1 parent 03fee8a
commit 7c267e0
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 110 deletions.
diff --git a/src/client/app/components/Demo/OnlineEdit/OnlineEdit.vue b/src/client/app/components/Demo/OnlineEdit/OnlineEdit.vue
@@ -20,7 +20,7 @@
     </template>
 
     <!-- https://codesandbox.io/docs/importing#define-api -->
-    <template v-if="platform === 'codesandbox'">
+    <!-- <template v-if="platform === 'codesandbox'">
       <input type="hidden" name="parameters" :value="codeSandboxValue" />
       <input
         v-if="codesandboxOptions.query"
@@ -40,7 +40,7 @@
         name="json"
         :value="codesandboxOptions.json"
       />
-    </template>
+    </template> -->
 
     <button type="submit" :data-tip="platformTip">
       <component :is="platform" />
@@ -52,11 +52,11 @@
 import codepen from './icons/CodepenIcon.vue'
 import jsfiddle from './icons/JsfiddleIcon.vue'
 import codesandbox from './icons/CodeSandboxIcon.vue'
-import { getJsTmpl, getHtmlTmpl, getCodeSandboxTmpl } from './utils'
+import { getJsTmpl, getHtmlTmpl } from './utils'
 import { PLATFORMS, ACTION_MAP, PLATFORM_TIP_MAP } from './constants'
 import './onlineEdit.css'
 
-const vueJs = 'https://unpkg.com/vue/dist/vue.js'
+const vueJs = 'https://unpkg.com/vue@3.0.0-beta.14/dist/vue.global.js'
 
 export default {
   name: 'OnlineEdit',
@@ -100,15 +100,6 @@ export default {
         js_external: vm.js_external,
         css_external: vm.css_external,
         js_pre_processor: vm.jsPre
-      }),
-    codeSandboxValue: (vm) =>
-      getCodeSandboxTmpl({
-        js: vm.js,
-        css: vm.css,
-        html: vm.html,
-        deps: vm.codesandboxOptions.deps,
-        jsLibs: vm.jsLibs,
-        cssLibs: vm.cssLibs
       })
   }
 }

diff --git a/src/client/app/components/Demo/OnlineEdit/constants.ts b/src/client/app/components/Demo/OnlineEdit/constants.ts
@@ -1,8 +1,8 @@
-export const JS_RE = /<script>([\s\S]+)<\/script>/
+export const JS_RE = /<script.*>([\s\S]+)<\/script>/
 export const CSS_RE = /<style>([\s\S]+)<\/style>/
 export const HTML_RE = /<template>([\s\S]+)<\/template>/
 
-export const PLATFORMS = ['codepen', 'jsfiddle', 'codesandbox']
+export const PLATFORMS = ['codepen', 'jsfiddle']
 
 export const ACTION_MAP = {
   codepen: 'https://codepen.io/pen/define',

diff --git a/src/client/app/components/Demo/OnlineEdit/icons/CodeSandboxIcon.vue b/src/client/app/components/Demo/OnlineEdit/icons/CodeSandboxIcon.vue
@@ -12,6 +12,7 @@
     <path
       d="M737.828571 166.857143l0.457143-0.228572h0.228572L512 36.571429 285.6 166.628571h-0.228571l0.8 0.342858L100 274.285714v475.428572L512 987.428571l412-237.714285V274.285714l-186.171429-107.428571zM478.514286 890.971429L314.971429 796.571429V637.028571L166.857143 552.914286V353.028571l311.657143 179.771429v358.171429zM199.085714 294.285714l153.942857-88.914285 158.742858 91.085714 158.971428-91.314286 154.514286 89.142857-313.028572 180.571429-313.142857-180.571429zM857.142857 553.485714l-147.2 83.542857v158.971429l-164.457143 94.857143V533.028571L857.142857 353.257143v200.228571z"
       p-id="2784"
+      fill="#666"
     ></path>
   </svg>
 </template>

diff --git a/src/client/app/components/Demo/OnlineEdit/icons/CodepenIcon.vue b/src/client/app/components/Demo/OnlineEdit/icons/CodepenIcon.vue
@@ -6,44 +6,15 @@
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px"
     y="0px"
-    viewBox="0 0 500 500"
+    viewBox="0 0 1024 1024"
     xml:space="preserve"
   >
     <g>
       <path
-        d="M250.001,0C111.927,0,0,111.927,0,250.001C0,388.077,111.927,500,250.001,500C388.073,500,500,388.077,500,250.001
-            C500,111.927,388.073,0,250.001,0z M250.001,458.943c-115.212,0-208.941-93.733-208.941-208.942
-            c0-115.208,93.729-208.941,208.941-208.941c115.208,0,208.938,93.733,208.938,208.941
-            C458.939,365.21,365.21,458.943,250.001,458.943z"
-      />
-      <path
-        d="M404.462,201.172c-0.028-0.195-0.076-0.382-0.109-0.577c-0.065-0.374-0.135-0.748-0.232-1.114
-            c-0.057-0.22-0.138-0.431-0.206-0.642c-0.106-0.326-0.212-0.651-0.342-0.968c-0.091-0.22-0.196-0.439-0.297-0.651
-            c-0.14-0.3-0.285-0.593-0.452-0.877c-0.122-0.212-0.251-0.416-0.377-0.618c-0.18-0.277-0.362-0.546-0.562-0.806
-            c-0.146-0.194-0.3-0.39-0.454-0.577c-0.212-0.243-0.432-0.487-0.664-0.716c-0.174-0.178-0.346-0.357-0.528-0.521
-            c-0.244-0.219-0.496-0.431-0.752-0.633c-0.198-0.155-0.395-0.31-0.602-0.456c-0.078-0.049-0.146-0.114-0.22-0.163L257.369,97.656
-            c-4.464-2.976-10.274-2.976-14.738,0l-141.295,94.196c-0.073,0.049-0.142,0.114-0.219,0.163c-0.208,0.146-0.403,0.301-0.598,0.456
-            c-0.26,0.203-0.512,0.415-0.752,0.633c-0.187,0.164-0.357,0.342-0.533,0.521c-0.231,0.229-0.451,0.473-0.658,0.716
-            c-0.159,0.188-0.313,0.383-0.459,0.577c-0.195,0.26-0.383,0.529-0.557,0.806c-0.134,0.203-0.26,0.406-0.382,0.618
-            c-0.163,0.284-0.309,0.577-0.451,0.877c-0.102,0.211-0.208,0.431-0.297,0.651c-0.13,0.317-0.236,0.642-0.341,0.968
-            c-0.07,0.211-0.146,0.422-0.208,0.642c-0.097,0.366-0.162,0.74-0.231,1.114c-0.032,0.195-0.081,0.382-0.106,0.577
-            c-0.077,0.569-0.122,1.146-0.122,1.732v94.197c0,0.585,0.044,1.162,0.122,1.74c0.025,0.188,0.074,0.382,0.106,0.568
-            c0.069,0.374,0.134,0.748,0.231,1.114c0.062,0.22,0.138,0.432,0.208,0.643c0.105,0.324,0.211,0.65,0.341,0.975
-            c0.089,0.222,0.195,0.433,0.297,0.645c0.143,0.3,0.289,0.592,0.451,0.885c0.122,0.204,0.248,0.406,0.382,0.61
-            c0.174,0.276,0.362,0.545,0.557,0.806c0.146,0.203,0.301,0.391,0.459,0.577c0.208,0.243,0.427,0.488,0.658,0.716
-            c0.175,0.178,0.346,0.357,0.533,0.52c0.24,0.221,0.492,0.432,0.752,0.635c0.195,0.155,0.391,0.31,0.598,0.454
-            c0.077,0.05,0.146,0.115,0.219,0.163l141.295,94.197c2.231,1.487,4.802,2.236,7.371,2.236c2.566,0,5.135-0.749,7.368-2.236
-            l141.295-94.197c0.074-0.048,0.142-0.113,0.22-0.163c0.207-0.145,0.403-0.299,0.602-0.454c0.256-0.203,0.508-0.414,0.752-0.635
-            c0.183-0.162,0.354-0.342,0.528-0.52c0.232-0.228,0.452-0.473,0.664-0.716c0.154-0.187,0.308-0.374,0.454-0.577
-            c0.2-0.261,0.383-0.529,0.562-0.806c0.126-0.204,0.255-0.406,0.377-0.61c0.167-0.293,0.312-0.585,0.452-0.885
-            c0.101-0.212,0.206-0.423,0.297-0.645c0.13-0.324,0.235-0.65,0.342-0.975c0.068-0.211,0.149-0.423,0.206-0.643
-            c0.098-0.366,0.167-0.74,0.232-1.114c0.033-0.187,0.081-0.381,0.109-0.568c0.073-0.578,0.119-1.155,0.119-1.74v-94.197
-            C404.581,202.318,404.535,201.741,404.462,201.172z M263.286,133.533l104.088,69.387l-46.493,31.103l-57.595-38.527V133.533z
-             M236.715,133.533v61.963l-57.592,38.527l-46.497-31.103L236.715,133.533z M121.99,227.771l33.238,22.231l-33.238,22.233V227.771z
-             M236.715,366.471l-104.088-69.388l46.497-31.094l57.592,38.52V366.471z M250.001,281.431l-46.988-31.429l46.988-31.428
-            l46.985,31.428L250.001,281.431z M263.286,366.471v-61.962l57.595-38.52l46.493,31.094L263.286,366.471z M378.01,272.234
-            l-33.233-22.233l33.233-22.231V272.234z"
-      />
+        d="M1004.57 319.408l-468-312c-15.974-9.83-33.022-9.92-49.142 0l-468 312C7.428 327.406 0 341.694 0 355.978v311.998c0 14.286 7.428 28.572 19.43 36.572l468 312.044c15.974 9.83 33.022 9.92 49.142 0l468-312.044c12-7.998 19.43-22.286 19.43-36.572V355.978c-0.002-14.284-7.43-28.572-19.432-36.57zM556 126.262l344.572 229.716-153.714 102.858L556 331.406V126.262z m-88 0v205.144l-190.858 127.43-153.714-102.858L468 126.262zM88 438.264l110.286 73.714L88 585.692v-147.428z m380 459.43L123.428 667.978l153.714-102.858L468 692.55v205.144z m44-281.716l-155.43-104 155.43-104 155.43 104-155.43 104z m44 281.716V692.55l190.858-127.43 153.714 102.858L556 897.694z m380-312.002l-110.286-73.714L936 438.264v147.428z"
+        p-id="2793"
+        fill="#555"
+      ></path>
     </g>
   </svg>
 </template>

diff --git a/src/client/app/components/Demo/OnlineEdit/icons/JsfiddleIcon.vue b/src/client/app/components/Demo/OnlineEdit/icons/JsfiddleIcon.vue
@@ -12,6 +12,7 @@
     <path
       d="M1028.571429 441.142857q63.428571 26.285714 102.571428 83.142857T1170.285714 650.857143q0 93.714286-67.428571 160.285714T940 877.714286q-2.285714 0-6.571429-0.285715t-6-0.285714H232q-97.142857-5.714286-164.571429-71.714286T0 645.142857q0-62.857143 31.428571-116t84-84q-6.857143-22.285714-6.857142-46.857143 0-65.714286 46.857142-112t113.714286-46.285714q54.285714 0 98.285714 33.142857 42.857143-88 127.142858-141.714286t186.571428-53.714285q94.857143 0 174.857143 46T982.571429 248.571429t46.571428 172q0 3.428571-0.285714 10.285714t-0.285714 10.285714zM267.428571 593.142857q0 69.714286 48 110.285714t118.857143 40.571429q78.285714 0 137.142857-56.571429-9.142857-11.428571-27.142857-32.285714T519.428571 626.285714q-38.285714 37.142857-82.285714 37.142857-31.428571 0-53.428571-19.142857T361.714286 594.285714q0-30.285714 22-49.714285t52.285714-19.428572q25.142857 0 48.285714 12t41.714286 31.428572 37.142857 42.857142 39.428572 46.857143 44 42.857143 55.428571 31.428572 69.428571 12q69.142857 0 116.857143-40.857143T936 594.857143q0-69.142857-48-109.714286t-118.285714-40.571428q-81.714286 0-137.714286 55.428571l53.142857 61.714286q37.714286-36.571429 81.142857-36.571429 29.714286 0 52.571429 18.857143t22.857143 48q0 32.571429-21.142857 52.285714t-53.714286 19.714286q-24.571429 0-47.142857-12t-41.142857-31.428571-37.428572-42.857143-39.714286-46.857143-44.285714-42.857143-55.142857-31.428571T434.285714 444.571429q-69.714286 0-118.285714 40.285714T267.428571 593.142857z"
       p-id="1953"
+      fill="#666"
     ></path>
   </svg>
 </template>

diff --git a/src/client/app/components/Demo/OnlineEdit/onlineEdit.css b/src/client/app/components/Demo/OnlineEdit/onlineEdit.css
@@ -1,4 +1,15 @@
 .demo-and-code-online-edit-wrapper {
   display: flex;
   align-items: center;
+  margin-bottom: 0;
+}
+
+.demo-and-code-online-edit-wrapper button {
+  width: 24px;
+  background: transparent;
+  border: 0;
+  padding: 4px;
+  cursor: pointer;
+  margin-right: 8px;
+  outline: none;
 }
diff --git a/src/client/app/components/Demo/OnlineEdit/utils.ts b/src/client/app/components/Demo/OnlineEdit/utils.ts
@@ -1,5 +1,3 @@
-import { CODE_SANDBOX_JS, CODE_SANDBOX_HTML } from './constants'
-
 export const getJsTmpl = (js: string) => {
   const vueAttrs = js
     .replace(/export\s+default\s*?\{\n*/, '')
@@ -18,51 +16,5 @@ export const getMatchedResult = (re: RegExp) => (str: string) => {
   return matched && matched[1].trim()
 }
 
-const urlToHtmlTag = (type: string) => (url: string) =>
-  type === 'js'
-    ? `<script src="${url}"></script>\n`
-    : type === 'css'
-    ? `<link rel="stylesheet" href="${url}">\n`
-    : 'Error type: js | css'
-
-function compress(input: string) {
-  return window
-    .btoa(input)
-    .replace(/\+/g, '-') // Convert '+' to '-'
-    .replace(/\//g, '_') // Convert '/' to '_'
-    .replace(/=+$/, '') // Remove ending '='
-}
-function getParameters(parameters: any) {
-  return compress(JSON.stringify(parameters))
-}
-
-export const getCodeSandboxTmpl = ({
-  js,
-  css,
-  html,
-  deps,
-  jsLibs,
-  cssLibs
-}: any) =>
-  getParameters({
-    files: {
-      'index.js': { content: CODE_SANDBOX_JS },
-      'App.vue': {
-        content:
-          `<template>\n\n${html}\n\n</template>\n\n` +
-          `<script>\n${js}\n</script>\n\n` +
-          `<style>\n${css}\n</style>\n`
-      },
-      'index.html': {
-        content:
-          cssLibs.map(urlToHtmlTag('css')) +
-          jsLibs.map(urlToHtmlTag('js')) +
-          CODE_SANDBOX_HTML
-      },
-      'package.json': {
-        content: {
-          dependencies: Object.assign({ vue: 'latest' }, deps)
-        }
-      }
-    }
-  })
+export const parseAndDecode = (str: string) =>
+  JSON.parse(decodeURIComponent(str))
diff --git a/src/client/app/components/Demo/demo.css b/src/client/app/components/Demo/demo.css
@@ -11,7 +11,7 @@
 .demo-actions {
   display: flex;
   height: 40px;
-  padding: 0 1em;
+  padding: 0 8px;
   align-items: center;
   justify-content: space-between;
   border-top: 1px dashed var(--border-color);
@@ -33,3 +33,9 @@
   border-top: 1px dashed var(--border-color);
   box-sizing: border-box;
 }
+
+
+.demo-platforms {
+  display: flex;
+  align-items: center;
+}
diff --git a/src/client/app/components/Demo/demo.vue b/src/client/app/components/Demo/demo.vue
@@ -22,13 +22,13 @@
         <codeSvg
           class="demo-actions-expand"
           @click="toggleExpand()"
-          title="展开123"
+          title="展开"
         />
       </div>
     </div>
     <div
       v-show="state.expand"
-      v-html="decodeURIComponent(htmlStr)"
+      v-html="decodedHtmlStr"
       :class="`language-${language} extra-class`"
     />
   </article>
@@ -40,16 +40,22 @@ import './demo.css'
 import copySvg from './icons/copy.vue'
 import codeSvg from './icons/code.vue'
 import OnlineEdit from './OnlineEdit'
+import { JS_RE, CSS_RE, HTML_RE } from './OnlineEdit/constants'
+import { getMatchedResult, parseAndDecode } from './OnlineEdit/utils'
 
 export default {
   props: {
     componentName: String,
     htmlStr: String,
+    codeStr: String,
     language: { default: 'vue', type: String },
     platforms: {
-      default: () => ['codepen', 'jsfiddle', 'codesandbox'],
+      default: () => ['codepen'],
       type: Array
-    }
+    },
+    jsLibsStr: { type: String, default: '[]' },
+    cssLibsStr: { type: String, default: '[]' },
+    codesandboxStr: { type: String, default: '{}' }
   },
   components: {
     copySvg,
@@ -63,11 +69,32 @@ export default {
 
     const toggleExpand = () => (state.expand = !state.expand)
 
-    // const copy = () =>
+    const decodedHtmlStr = computed(() => decodeURIComponent(props.htmlStr))
+    const decodedCodeStr = computed(() => decodeURIComponent(props.codeStr))
+
+    const parsedCode = computed(() => {
+      const js = getMatchedResult(JS_RE)(decodedCodeStr.value) || ''
+      const css = getMatchedResult(CSS_RE)(decodedCodeStr.value) || ''
+      const html =
+        getMatchedResult(HTML_RE)(decodedCodeStr.value) ||
+        decodedCodeStr.value
+          .replace(JS_RE, '')
+          .replace(CSS_RE, '')
+          .replace(HTML_RE, '')
+          .trim()
+
+      const jsLibs = parseAndDecode(props.jsLibsStr)
+      const cssLibs = parseAndDecode(props.cssLibsStr)
+      const codesandboxOptions = parseAndDecode(props.codesandboxStr)
+
+      return { js, css, html, jsLibs, cssLibs, codesandboxOptions }
+    })
 
     return {
       state,
-      toggleExpand
+      toggleExpand,
+      decodedHtmlStr,
+      parsedCode
     }
   }
 }

diff --git a/src/node/markdown/plugins/demo.ts b/src/node/markdown/plugins/demo.ts
@@ -37,16 +37,17 @@ export const demoPlugin = (md: MarkdownIt) => {
       }
 
       console.log(`srcPath=${srcPath}`)
-      const htmlStr = encodeURIComponent(
-        highlight(fs.readFileSync(src).toString(), language)
-      )
+      const codeStr = fs.readFileSync(src).toString()
+      const htmlStr = encodeURIComponent(highlight(codeStr, language))
 
       hoistedTags.script!.unshift(`import ${componentName} from '${src}' \n`)
       hoistedTags.components!.push(componentName)
 
       return content.replace(
         '>',
-        ` componentName="${componentName}" htmlStr="${htmlStr}" >
+        ` componentName="${componentName}" htmlStr="${htmlStr}" codeStr="${encodeURIComponent(
+          codeStr
+        )}" >
         <${componentName}></${componentName}>
         `
       )