├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── doc
    └── Vue隐藏技能——运行时渲染.md
├── husky.config.js
├── lint-staged.config.js
├── package.json
├── public
    ├── favicon.ico
    ├── iframe.html
    └── index.html
├── scripts
    └── preCommit.sh
├── src
    ├── app.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── banner.vue
    │   └── helloWorld.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   ├── index.js
    │   └── variable.js
    ├── utils
    │   ├── dom.js
    │   └── vm.js
    └── views
    │   ├── about.vue
    │   ├── customCode
    │       ├── codeEditor.vue
    │       ├── index.vue
    │       ├── mountCrossIframe.vue
    │       ├── mountSameIframe.vue
    │       ├── service.js
    │       ├── withComponent.vue
    │       └── withMount.vue
    │   └── home.vue
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
  1 | const level = process.env.NODE_ENV === 'production' ? 2 : 1
  2 | 
  3 | module.exports = {
  4 |   root: true,
  5 |   env: {
  6 |     node: true,
  7 |   },
  8 |   extends: [
  9 |     'plugin:vue/essential',
 10 |     '@vue/airbnb',
 11 |   ],
 12 |   parserOptions: {
 13 |     parser: 'babel-eslint',
 14 |   },
 15 |   rules: {
 16 |     // 'import/no-unresolved': 0,
 17 |     // 'import/newline-after-import': 0,
 18 |     // 'import/imports-first': 0,
 19 |     // 'import/extensions': 0,
 20 |     // 'import/no-dynamic-require': 0,
 21 |     // 'import/no-extraneous-dependencies': 0,
 22 |     // 'import/prefer-default-export': 0,
 23 |     // 'import/no-named-as-default': 0,
 24 |     // 'import/no-webpack-loader-syntax': 0,
 25 | 
 26 |     // 关闭的规则
 27 |     'vue/script-indent': 0,
 28 |     'import/extensions': 0,
 29 |     'import/prefer-default-export': 0,
 30 | 
 31 |     'arrow-parens': 0,
 32 |     'arrow-body-style': 0,
 33 |     'consistent-return': 0,
 34 |     'function-paren-newline': 0,
 35 |     'prefer-destructuring': 0,
 36 |     'prefer-promise-reject-errors': 0,
 37 |     'no-return-assign': 0,
 38 |     semi: 0,
 39 | 
 40 |     // 开发时关闭的规则
 41 |     'vue/html-indent': [level, 2, { baseIndent: 0, closeBracket: 1, alignAttributesVertically: false }],
 42 |     'vue/no-unused-components': level,
 43 | 
 44 |     'block-spacing': level,
 45 |     'brace-style': level,
 46 |     camelcase: level,
 47 |     'comma-spacing': level,
 48 |     'comma-dangle': level,
 49 |     indent: [level, 2, { SwitchCase: 1 }],
 50 |     'key-spacing': level,
 51 |     'max-len': level,
 52 |     'no-console': [level, { allow: ['warn', 'error', 'info'] }],
 53 |     'no-debugger': level,
 54 |     'no-empty': [level, { allowEmptyCatch: true }],
 55 |     'no-mixed-operators': level,
 56 |     'no-multiple-empty-lines': [level, { maxEOF: 2, max: 2, maxBOF: 1 }],
 57 |     'no-multi-spaces': [level, { ignoreEOLComments: true }],
 58 |     'no-param-reassign': level,
 59 |     'no-underscore-dangle': level,
 60 |     'no-unreachable': level,
 61 |     'no-unused-vars': level,
 62 |     'object-curly-newline': [level, { consistent: true }],
 63 |     'prefer-const': level,
 64 |     'padded-blocks': level,
 65 |     'quote-props': level,
 66 |     quotes: level,
 67 |     'spaced-comment': level,
 68 |     'space-before-blocks': level,
 69 |     'space-before-function-paren': level,
 70 |     'space-infix-ops': level,
 71 | 
 72 |     // 'arrow-spacing': 1,
 73 |     // camelcase: 0,
 74 |     // 'comma-dangle': [1, 'only-multiline'],
 75 |     // 'comma-spacing': 1,
 76 |     // eqeqeq: 1,
 77 |     // 'func-names': [1, 'never'],
 78 |     // 'guard-for-in': 1,
 79 |     // 'key-spacing': 1,
 80 |     // 'keyword-spacing': 1,
 81 |     // indent: [2, 2, { SwitchCase: 1 }],
 82 |     // 'max-len': 1,
 83 |     // 'new-cap': 1,
 84 |     // 'newline-per-chained-call': 0,
 85 |     // 'no-console': [
 86 |     //   level,
 87 |     //   {
 88 |     //     allow: ['warn', 'error', 'info'],
 89 |     //   },
 90 |     // ],
 91 |     // 'no-debugger': level,
 92 |     // 'no-empty-function': 1,
 93 |     // 'no-trailing-spaces': [2, {
 94 |     //   skipBlankLines: true
 95 |     // }],
 96 |     // 'no-new': 1,
 97 |     // 'no-mixed-operators': 0,
 98 |     // 'no-multiple-empty-lines': [1, { max: 2, maxEOF: 1, maxBOF: 1 }],
 99 |     // 'no-multi-str': 0,
100 |     // 'no-multi-spaces': [1, { ignoreEOLComments: true }],
101 |     // 'no-unused-vars': [2, { args: 'none' }],
102 |     // 'no-unused-expressions': [2, { allowShortCircuit: true }],
103 |     // 'no-underscore-dangle': [1, { allowAfterThis: true }],
104 |     // 'no-unneeded-ternary': 1,
105 |     // 'no-restricted-syntax': [1, 'DebuggerStatement'],
106 |     // 'no-plusplus': [1, { allowForLoopAfterthoughts: true }],
107 |     // 'no-param-reassign': 0,
108 |     // 'no-shadow': 0,
109 |     // 'object-shorthand': 0,
110 |     // 'object-curly-spacing': 1,
111 |     // 'object-curly-newline': [1, { consistent: true }],
112 |     // 'operator-linebreak': 0,
113 |     // 'one-var': 1,
114 |     // 'one-var-declaration-per-line': [1, 'initializations'],
115 |     // 'prefer-arrow-callback': 0,
116 |     // 'prefer-spread': 1,
117 |     // quotes: [1, 'single', {
118 |     //   avoidEscape: true,
119 |     //   allowTemplateLiterals: true
120 |     // }],
121 |     // 'quote-props': 1,
122 |     // radix: [1, 'as-needed'],
123 |     // 'spaced-comment': 1,
124 |     // 'space-infix-ops': 1,
125 |     // semi: 0,
126 |     // 'space-before-function-paren': [1, 'never'],
127 |     // 'space-before-blocks': 1,
128 |   },
129 | };
130 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 cof
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-demo
2 | 
3 | **vue demo 地址**： [https://merfais.github.io/vue-demo/#/](https://merfais.github.io/vue-demo/#/)
4 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset',
4 |   ],
5 | };
6 | 


--------------------------------------------------------------------------------
/doc/Vue隐藏技能——运行时渲染.md:
--------------------------------------------------------------------------------
  1 | ### 一语惊人
  2 | 
  3 | 前段时间接了一个需求：能不能让用户自制组件，从而达到定制渲染某个区域的目的。说实话接到这个需求心中一惊，感叹这个想法真是大胆呀，但作为打工人，秉承着只要思想不滑坡，办法总比困难多的打工魂，即使是刀山也得上呀，历经几日的摸索调研，发现其实VUE一早就支持了这么做，只不过时过境迁，渐渐被遗忘了这个隐藏的技能。
  4 | 
  5 | 大致说一下项目的背景：我们做了一个拖拽生成报表的系统，通过拖拽内置的组件供用户定制自己的报表形态，但毕竟内置的组件有限，可定制性不高，那么给用户开放一个code组件，让用户自己通过写`template` + `js` + `css`的方式自由定制岂不是妙哉。
  6 | 
  7 | ### 重提渐进式
  8 | 
  9 | 那么该怎么实现呢？我们先来看一vue官方的介绍
 10 | 
 11 | > [Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的`渐进式框架`。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。](https://cn.vuejs.org/v2/guide/index.html#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88)
 12 | 
 13 | 很多时候我们貌似已经忽略了`渐进式`这回事，现在基于VUE开发的项目大多都采用vue cli生成，以vue单文件的方式编码，webpack编译打包的形式发布。这与渐进式有什么关系呢，确实没有关系。
 14 | 
 15 | 渐进式其实指的在一个已存在的但并未使用vue的项目上接入vue，使用vue，直到所有的HTML渐渐替换为通过vue渲染完成，渐进开发，渐进迁移，这种方式在vue刚出现那几年比较多，现在或许在一些古老的项目也会出现。
 16 | 
 17 | 为什么要提`渐进式`呢？因为渐进式是不需要本地编译的，有没有get到点！对，就是`不需要本地编译，而是运行时编译`。
 18 | 
 19 | ### 本地编译与运行时编译
 20 | 
 21 | 用户想通过编写`template` + `js` + `css`的方式实现运行时渲染页面，那肯定是不能本地编译的（此处的编译指将vue文件编译为js资源文件），即不能把用户写的代码像编译源码一样打包成静态资源文件。
 22 | 
 23 | 这些代码只能原样持久化到数据库，每次打开页面再恢复回来，实时编译。毕竟不是纯js文件，是不能直接运行的，它需要一个运行时环境，运行时编译，这个环境就是 [vue的运行时 + 编译器](https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6)。
 24 | 
 25 | 有了思路也只是窥到了天机，神功练成还是要打磨细节。具体怎么做，容我一步步道来。
 26 | 
 27 | ### 技术干货
 28 | 
 29 | #### 第一步：需要一个运行时编译环境
 30 | 
 31 | 按[官方的介绍](https://learning.dcloud.io/#/?vid=2)，通过script标签引入vue就可以渐进式开发了，也就具备了运行时+编译器，如下
 32 | ```html
 33 | <!DOCTYPE html>
 34 | <html lang="en">
 35 | <head>
 36 |   <title>Document</title>
 37 |   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 38 | </head>
 39 | <body>
 40 |   <div id="app">{{message}}</div>
 41 |   <script type="text/javascript">
 42 |     var app = new Vue({
 43 |       el: '#app',
 44 |       data: {
 45 |         message: 'Hello Vue!'
 46 |       }
 47 |     })
 48 |   </script>
 49 | </body>
 50 | </html>
 51 | ```
 52 | 
 53 | 但通过vue单文件+webpack编译的方式，再引入一个vue就多余了，通过CLI也是可以的，只需要在vue.config.js中打开runtimeCompiler开关就行了，[详细看文档](https://cli.vuejs.org/zh/config/#runtimecompiler)。
 54 | 
 55 | 此时我们就有了一个运行时编译环境
 56 | 
 57 | #### 第二步：把用户的代码注册到系统中
 58 | 
 59 | 把代码渲染出来有两个方案
 60 | 
 61 | 
 62 | 1. 通过 [注册组件](https://cn.vuejs.org/v2/guide/components-registration.html) 的方式，把代码注册为vue实例的组件，注册组件又分 全局注册 和 局部注册 两种方式
 63 | 2. 通过挂载点直接挂载vue实例， 即通过`new Vue({ el: '#id' })`的方式
 64 | 
 65 | ##### 第一种方案：动态组件
 66 | 
 67 | 对于这种方式，在官方文档中，组件注册章节，最后给出了一个注意点
 68 | > 记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) `创建之前`发生。
 69 | 
 70 | 因此，并不能通过调用`Vue.component('my-component-name', {/* */})`的方式将用户的代码注册到系统中，因为运行时Vue实例已经创建完，用户的代码是在实例完Vue后才进来的，那我们只能通过局部注册的方式了，类似这样
 71 | ```jsx
 72 | var ComponentB = {
 73 |   components: {
 74 |     'component-a': {
 75 |       ...customJsLogic,
 76 |       name: 'custom-component',
 77 |       template: '<div>custom template</div>',
 78 |     }
 79 |   },
 80 |   // ...
 81 | }
 82 | ```
 83 | 
 84 | 但想一下，好像不太对，这还是在写源码，运行时定义了`ComponentB`组件怎么用呢，怎么把`ComponentB`在一个已经编译完页面上渲染出来呢？找不到入口点，把用户代码注入到`components`对象上也无法注册到系统中，无法渲染出来。
 85 | 
 86 | 就止步于此了吗？该怎么办呢？
 87 | 
 88 | 想一下为什么要在`components`中先注册(声明)下组件，然后才能使用？component本质上只不过是一个js object而已。其实主要是为了服务于template模板语法，当你在template中写了 `<compA propA='value'/>`，有了这个注册声明才能在编译时找到`compA`。如果不使用template，那么这个注册就可以省了。
 89 | 
 90 | 不使用template怎么渲染呢，使用[render函数](https://cn.vuejs.org/v2/guide/render-function.html)呀！
 91 | 
 92 | 在render函数中如果使用createElement就比较麻烦了，API很复杂，对于渲染一整段用户定义的template也略显吃力，使用jsx就方便多了，都1202年了，想必大家对jsx都应该有所了解。
 93 | 
 94 | 回到项目上，需要使用用户代码的地方不止一处，都用render函数写一遍略显臃肿，那么做一个code的容器，容器负责渲染用户的代码，使用地方把容器挂上就行了。
 95 | 
 96 | + 容器核心代码
 97 | 
 98 | ```javascript
 99 | export default {
100 |   name: 'customCode',
101 |   props: {
102 |     template: String,   // template模板
103 |     js: String,         // js逻辑
104 |     css: String,        // css样式
105 |   },
106 |   computed: {
107 |     className() {
108 |       // 生成唯一class，主要用于做scoped的样式
109 |       const uid = Math.random().toString(36).slice(2)
110 |       return `custom-code-${uid}`
111 |     },
112 |     scopedStyle() {
113 |       if (this.css) {
114 |         const scope = `.${this.className}`
115 |         const regex = /(^|\})\s*([^{]+)/g
116 |         // 为class加前缀，做类似scope的效果
117 |         return this.css.trim().replace(regex, (m, g1, g2) => {
118 |           return g1 ? `${g1} ${scope} ${g2}` : `${scope} ${g2}`
119 |         })
120 |       }
121 |       return ''
122 |     },
123 |     component() {
124 |       // 把代码字符串转成js对象
125 |       const component = safeStringToObject(this.js)
126 | 
127 |       // 去掉template的前后标签
128 |       const template = (this.template || '')
129 |         .replace(/^ *< *template *>|<\/ *template *> *$/g, '')
130 |         .trim()
131 | 
132 |       // 注入template或render，设定template优先级高于render
133 |       if (this.template) {
134 |         component.template = this.template
135 |         component.render = undefined
136 |       } else if (!component.render) {
137 |         component.render = '<div>未提供模板或render函数</div>'
138 |       }
139 | 
140 |       return component
141 |     },
142 |   },
143 |   render() {
144 |     const { component } = this
145 |     return <div class={this.className}>
146 |       <style>{this.scopedStyle}</style>
147 |       <component />
148 |     </div>
149 |   },
150 | }
151 | ```
152 | 
153 | + 容器使用
154 | 
155 | ```html
156 | <template>
157 |   <custom-code :js="js" :template="template" :css="css" />
158 | </template>
159 | ```
160 | 以上只是核心的逻辑部分，除了这些，在项目实战中还应考虑容错处理，错误大致可以分两种
161 | 
162 | 1. 用户代码语法错误
163 | 
164 |     主要是js部分，对于css和template的错误，浏览器有一定的纠错的机制，不至于崩了。
165 | 
166 |     这部分的处理主要借助于`safeStringToObject`这个函数，如果有语法错误，则返回Error，处理一下回显给用户，代码大致如下
167 | 
168 |     ```javascript
169 |     // component对象在result.value上取，如果result.error有值，则代表出现了错误
170 |     component() {
171 |       // 把代码字符串转成js对象
172 |       const result = safeStringToObject(this.js)
173 | 
174 |       const component = result.value
175 |       if (result.error) {
176 |         console.error('js 脚本错误', result.error)
177 |         result.error = {
178 |           msg: result.error.toString(),
179 |           type: 'js脚本错误',
180 |         }
181 |         result.value = { hasError: true }
182 |         return result
183 |       }
184 | 
185 |       // ...
186 | 
187 |       retrun result
188 |     }
189 |     ```
190 | 
191 | 2. 组件运行时错误
192 | 
193 |     既然把js逻辑交给了用户控制，那么像类型错误，从undefined中读值，把非函数变量当函数运行，甚至拼写错误等这些运行时错误就很有可能发生。
194 | 
195 |     这部分的处理需要通过在容器组件上添加 [`errorCaptured`这个官方钩子](https://cn.vuejs.org/v2/api/index.html#errorCaptured)，来捕获子组件的错误，因为并没有一个途径可以获取组件自身运行时错误的钩子。代码大致如下
196 | 
197 |     ```javascript
198 |     errorCaptured(err, vm, info) {
199 |       this.subCompErr = {
200 |         msg: err && err.toString && err.toString() || err,
201 |         type: '自定义组件运行时错误：',
202 |       }
203 |       console.error('自定义组件运行时错误：', err, vm, info)
204 |     },
205 |     ```
206 | 
207 | 结合错误处理，如果希望用户能看到错误信息，则render函数需要把错误展示出来，代码大致如下
208 | 
209 | ```Jsx
210 | render() {
211 |   const { error: compileErr, value: component } = this.component
212 |   const error = compileErr || this.subCompErr
213 |   let errorDom
214 |   if (error) {
215 |     errorDom = <div class='error-msg-wrapper'>
216 |       <div>{error.type}</div>
217 |       <div>{error.msg}</div>
218 |     </div>
219 |   }
220 |   return <div class='code-preview-wrapper'>
221 |     <div class={this.className}>
222 |       <style>{this.scopedStyle}</style>
223 |       <component />
224 |     </div>
225 |     {errorDom}
226 |   </div>
227 | },
228 | ```
229 | 
230 | 这里还有一个点，用户发现组件发生了错误后会修改代码，使其再次渲染，错误的回显需要特别处理下。
231 | 
232 | 对于js脚本错误，因component是计算属性，随着computed计算属性再次计算，如果js脚本没有错误，导出的component可重绘出来，
233 | 
234 | 但对于运行时错误，使用`this.subCompErr`内部变量保存，props修改了，这个值却不会被修改，因此需要打通props关联，通过添加watch的方式解决，这里为什么没有放在component的计算属性中做，一是违背计算属性设计原则，二是component可能并不仅仅依赖js,css,template这个props的变化，而`this.subCompErr`只需要和这个三个props关联，这么做会有多余的重置逻辑。
235 | 
236 | 还有一种场景就是子组件自身可能有定时刷新逻辑，定期或不定期的重绘，一旦发生了错误，也会导致一直显示错误信息，因为用户的代码拿不到`this.subCompErr`的值，因此也无法重置此值，这种情况，可通过注入`beforeUpdate`钩子解决，代码大致如下
237 | 
238 | ```javascript
239 | computed: {
240 |     component() {
241 |       // 把代码字符串转成js对象
242 |       const result = safeStringToObject(this.js)
243 |       const component = result.value
244 |       // ...
245 |       // 注入mixins
246 |       component.mixins = [{
247 |         // 注入 beforeUpdate 钩子，用于子组件重绘时，清理父组件捕获的异常
248 |         beforeUpdate: () => {
249 |           this.subCompErr = null
250 |         },
251 |       }]
252 |       // ...
253 |       return result
254 |     },
255 | },
256 | watch: {
257 |     js() {
258 |       // 当代码变化时，清空error，重绘
259 |       this.subCompErr = null
260 |     },
261 |     template() {
262 |       // 当代码变化时，清空error，重绘
263 |       this.subCompErr = null
264 |     },
265 |     css() {
266 |       // 当代码变化时，清空error，重绘
267 |       this.subCompErr = null
268 |     },
269 |   },
270 | ```
271 | **`完整的代码见`：[https://github.com/merfais/vue-demo/blob/main/src/views/customCode/withComponent.vue](https://github.com/merfais/vue-demo/blob/main/src/views/customCode/withComponent.vue)**
272 | 
273 | **`完整的demo见`：[https://merfais.github.io/vue-demo/#/custom-code](https://merfais.github.io/vue-demo/#/custom-code)**
274 | 
275 | ##### 第二种方案：动态实例
276 | 
277 | 我们知道在利用vue构建的系统中，页面由组件构成，页面本身其实也是组件，只是在部分参数和挂载方式上有些区别而已。这第二种方式就是将用户的代码视为一个page，通过new一个vm实例，再在DOM挂载点挂载vm(`new Vue(component).$mount('#id')`)的方式渲染。
278 | 
279 | 动态实例方案与动态组件方案大致相同，都要通过computed属性，生成`component`对象和`scopedStyle`对象进行渲染，但也有些许的区别，动态实例比动态组件需要多考虑以下几点：
280 | 
281 | 1. 需要一个稳定的挂载点
282 | 
283 | 	从vue2.0开始，vue实例的挂载策略变更为，[所有的挂载元素会被 Vue 生成的 DOM 替换](https://cn.vuejs.org/v2/api/#el)，在此策略下，一旦执行挂载，原来的DOM就会消失，不能再次挂载。但我们需要实现代码变更后能够重新渲染，这就要求挂载点要稳定存在，解决方案是对用户的template进行注入，每次渲染前，在template外层包一层带固定id的DOM
284 | 
285 | 2. 运行时错误捕获`errorCaptured`需要注入到`component`对象上，不再需要注入`beforeUpdate`钩子
286 | 
287 | 	因为通过`new Vue()`的方式创建了一个新的vm实例，不再是容器组件的子组件，所以容器组件上的`errorCaptured`无法捕获新vm的运行时错误，`new Vue(component)`中参数component是顶层组件，根据 [Vue错误传播规则](https://cn.vuejs.org/v2/api/#errorCaptured) 可知，在非特殊控制的情况下，顶层的 `errorCaptured` 会捕获到错误
288 | 
289 | 3. 首次挂载需要制造一定的延迟才能渲染
290 | 
291 | 	由于挂载点含在DOM在容器内，与计算属性导出的`component`对象在首次挂载时时序基本是一致的，导致挂载vm(`$mount('#id')`)时，DOM可能还没有渲染到文档流上，因此在首次渲染时需要一定的延迟后再挂载vm。
292 | 
293 | 以上的不同点，并未给渲染用户自定义代码带来任何优势，反而增加了限制，尤其 **需要稳定挂载点** 这一条，需要对用户提供的template做二次注入，包裹挂载点，才能实现用户修改组件后的实时渲染更新，因此，也不能支持用户定义render函数，因为无法获取未经运行的render函数的返回值，也就无法注入外层的挂载点。
294 | 
295 | 另外一点也需要注意，这种方式也是无法在容器组件中使用template定义渲染模板的，因为如果在template中写style标签会出现以下编译错误，但style标签是必须的，需要为自定义组件提供scoped的样式。（当然，也可以通过提供appendStyle函数实现动态添加style标签，但这样并没有更方便，因此没有必要）
296 | 
297 | ```shell
298 |   Errors compiling template:
299 | 
300 |   Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
301 | 
302 |   2  |  <span :class="className">
303 |   3  |    <span id="uid" />
304 |   4  |    <style>{this.scopedStyle}</style>
305 |      |    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
306 |   5  |  </span>
307 |      |  ^^^^^^^
308 | ```
309 | 
310 | 鉴于以上缺点，就不提供核心代码示范了，直接给源码和demo
311 | 
312 | **`完整的代码见`：[https://github.com/merfais/vue-demo/blob/main/src/views/customCode/withMount.vue](https://github.com/merfais/vue-demo/blob/main/src/views/customCode/withMount.vue)**
313 | 
314 | **`完整的demo见`：[https://merfais.github.io/vue-demo/#/custom-code](https://merfais.github.io/vue-demo/#/custom-code)**
315 | 
316 | 想一下，如果动态实例方案仅仅有以上缺点，那考虑这种方案有什么意义呢？其实，它的意义在于，动态实例方案主要应用于iframe渲染，而使用iframe渲染的目的则是为了隔离。
317 | 
318 | iframe会创建独立于主站的一个域，这种隔离可以很好地防止js污染和css污染，隔离方式又分为跨域隔离和非跨域隔离两种，跨域则意味着完全隔离，非跨域则是半隔离，其主要区别在于安全策略的限制，这个我们最后再说。
319 | 
320 | iframe是否跨域由iframe的src的值决定，设置同域的src或不设置src均符合同域策略，否则是跨域。对于没有设置src的iframe，页面只能加载一个空的iframe，因此还需要在iframe加载完后再动态加载依赖的资源，如：vuejs，其他运行时的依赖库（示例demo加载了ant-design-vue）等。如果设置了src，则可以将依赖通过script标签和link标签提前写到静态页面文件中，使依赖资源在加载iframe时自动完成加载。
321 | 
322 | 先介绍半隔离方式，即通过非跨域iframe渲染，首先需要渲染一个iframe，我们使用不设置src的方式，这样更具备通用性，可以用于任意的站点。核心代码如下
323 | 
324 | ```html
325 | <template>
326 |   <iframe ref='iframe' frameborder="0" scrolling="no" width="100%" />
327 | </template>
328 | ```
329 | 
330 | 由于是位于同域，主站与iframe可以互相读取window和document引用，因为，可以动态加载资源，核心代码如下
331 | 
332 | ```javascript
333 | methods: {
334 |   mountResource() {
335 |     // 添加依赖的css
336 |     appendLink('https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.css', this.iframeDoc)
337 |     // 添加依赖的js，保留handler用于首次渲染的异步控制
338 |     this.mountResourceHandler = appendScriptLink([{
339 |       src: 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js',
340 |       defer: true,
341 |     }, {
342 |       src: 'https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.js',
343 |       defer: true,
344 |     }], this.iframeDoc)
345 |   },
346 | },
347 | mounted() {
348 |   this.iframeDoc = this.$refs.iframe.contentDocument
349 |   this.mountResource()
350 | },
351 | ```
352 | 
353 | 接下来是组件对象组装和挂载，基本上和动态组件的大同小异，只是挂载不再通过render函数。先上核心代码，再说注意点。
354 | 
355 | ```javascript
356 |   computed: {
357 |     component() {
358 |       // 把代码字符串转成js对象
359 |       const component = safeStringToObject(this.js)
360 | 
361 |       // 关联css，为的是修改css后可自动重绘
362 |       component.css = this.css
363 | 
364 |       // 去掉template的前后标签
365 |       const template = (this.template || '')
366 |         .replace(/^ *< *template *>|<\/ *template *> *$/g, '')
367 |         .trim()
368 | 
369 |       // 注入template或render，设定template优先级高于render
370 |       if (template) {
371 |         component.template = template
372 |         component.render = undefined
373 |       } else if (!component.render) {
374 |         component.template = '<span>未提供模板或render函数</span>'
375 |       }
376 | 
377 |       return component
378 |     },
379 |   },
380 |   watch: {
381 |     component() {
382 |       if (this.hasInit) {
383 |         this.mountCode()
384 |       } else if (this.mountResourceHandler) {
385 |         this.mountResourceHandler.then(() => {
386 |           this.hasInit = true
387 |           this.mountCode()
388 |         })
389 |       }
390 |     },
391 |   },
392 |   methods: {
393 |     mountCode() {
394 |       // 添加css
395 |       const css = this.component.css
396 |       delete this.component.css
397 |       removeElement(this.styleId, this.iframeDoc)
398 |       this.styleId = appendStyle(css, this.iframeDoc)
399 | 
400 |       // 重建挂载点
401 |       if (this.iframeDoc.body.firstElementChild) {
402 |         this.iframeDoc.body.removeChild(this.iframeDoc.body.firstElementChild)
403 |       }
404 |       prependDom({ tag: 'div', id: 'app' }, this.iframeDoc)
405 | 
406 |       // 挂载实例
407 |       const Vue = this.iframeWin.Vue
408 |       new Vue(this.component).$mount('#app')
409 |     },
410 |   },
411 | ```
412 | 
413 | 注意点：
414 | 1. iframe的渲染到文档流后才能添加依赖资源，依赖资源加载完才能执行vm的挂载，首次加载时需要控制时序
415 | 2. vm挂载点的重建采用了永远添加在body的第一个子元素的方式，这么做的原因是一些第三方的库（如ant-design-vue）也会向body中动态添加element，虽然采用`docment.body.innerHTML=''`的方式可以快速且干净的清空body内容，但也会将第三方库添加的内容给干掉，导致第三方库全部或部分不可用。
416 | 3. 为了使css变化后也引发重绘，在计算属性`component`中也绑定了css的值，但这对于新建vm实例这个字段是无用的，也可以通过watch css的方式实现
417 | 
418 | 接下来考虑错误处理，对于iframe挂载的错误处理稍有不同，为了尽量不干预用户的代码，此模式下的错误渲染采用重建DOM，重新渲染vm的策略，即发生错误后，无论是静态的语法错误还是运行时错误，都重绘。当然这种做法也就丢失了组件自刷新的功能，因为一旦发生错误，原来的组件会被卸载，渲染为错误信息。核心代码如下
419 | 
420 | ```Jsx
421 |  computed: {
422 |     component() {
423 |       if (this.subCompErr) {
424 |         return this.renderError(this.subCompErr)
425 |       }
426 | 
427 |       // 把代码字符串转成js对象
428 |       const result = safeStringToObject(this.js)
429 |       if (result.error) {
430 |         return this.renderError({
431 |           type: 'js脚本错误',
432 |           msg: result.error.toString(),
433 |         })
434 |       }
435 | 
436 |       const component = result.value
437 | 
438 |       // 注入errorCaptured, 用于错误自定义组件运行时捕获
439 |       component.errorCaptured = (err, vm, info) => {
440 |         this.subCompErr = {
441 |           msg: err && err.toString && err.toString(),
442 |           type: '自定义组件运行时错误：',
443 |         }
444 |         console.error('自定义组件运行时错误：', err, vm, info)
445 |       }
446 | 
447 |       return component
448 |     },
449 |   },
450 |   watch: {
451 |     js() {
452 |       // 当代码变化时，清空error，重绘
453 |       this.subCompErr = null
454 |     },
455 |     template() {
456 |       // 当代码变化时，清空error，重绘
457 |       this.subCompErr = null
458 |     },
459 |     css() {
460 |       // 当代码变化时，清空error，重绘
461 |       this.subCompErr = null
462 |     },
463 |   },
464 |   methods: {
465 |     renderError({ type, msg }) {
466 |       return {
467 |         render() {
468 |           return <div style='color: red'>
469 |             <div>{type}</div>
470 |             <div>{msg}</div>
471 |           </div>
472 |         },
473 |       }
474 |     },
475 |   },
476 | ```
477 | 
478 | 除了错误处理，还需解决一下iframe的一些特性，比如边框，滚动条，默认宽高，其中比较棘手是iframe高度有默认值，并不会随着iframe的内容自适应高度，但对于自定义组件的渲染，需要动态计算高度，固定高度是不行的。
479 | 
480 | 边框，滚动条，宽度可通过修改iframe的属性解决，见上面的template代码。
481 | 
482 | 高度自适应的解决方案是通过`MutationObserver`观测iframe的body变化，在回调中计算挂载点（第一个子元素）的高度，然后再修改iframe本身的高度。之所以没有直接使用body的高度，是因为body有默认的高度，当被渲染的组件高度小于body高度时，直接使用body的高度是错的。 核心代码如下
483 | 
484 | ```javascript
485 | mounted() {
486 |   // 通过观察器观察iframe的body变化后修改iframe的高度，
487 |   // 使用iframe后垂直的margin重合效果会丢失
488 |   const observer = new MutationObserver(() => {
489 |     const firstEle = this.iframeDoc.body.firstElementChild
490 |     const rect = firstEle.getBoundingClientRect()
491 |     const marginTop = parseFloat(window.getComputedStyle(firstEle).marginTop, 10)
492 |     const marginBottom = parseFloat(window.getComputedStyle(firstEle).marginBottom, 10)
493 |     this.$refs.iframe.height = `${rect.height + marginTop + marginBottom}px`
494 |   })
495 |   observer.observe(this.iframeDoc.body, { childList: true })
496 | },
497 | ```
498 | 
499 | 使用iframe还存在一些局限性，最需要注意的一点就是由于iframe是独立的窗体，那么渲染出来的组件只能封在这个窗体内，因此，像一些本应该是全局的toast, modal, drawer都会被局限在iframe内，无法覆盖到全局上。
500 | 
501 | **`完整的代码见`：[https://github.com/merfais/vue-demo/blob/main/src/views/customCode/mountSameIframe.vue](https://github.com/merfais/vue-demo/blob/main/src/views/customCode/mountSameIframe.vue)**
502 | 
503 | **`完整的demo见`：[https://merfais.github.io/vue-demo/#/custom-code](https://merfais.github.io/vue-demo/#/custom-code)**
504 | 
505 | 至此非跨域iframe渲染全部逻辑介绍完毕，接下来看一下跨域iframe的渲染。跨域iframe与非跨域iframe的渲染过程基本是一致的，只是有由于跨域，隔离的更彻底。其主要体现在主域与iframe域不能互相读写对方的文档流document。
506 | 
507 | 此限制带来的变化有以下几点
508 | 
509 | 1. 依赖的资源需要提前内置在iframe内。
510 | 
511 | 	内置指的是将依赖的资源通过script，link标签添加到html文件中，随html一并加载。有一点还需要注意，如果挂载vm时需要依赖某些资源，需要添加资源加载的回调，加载成功后再通知主域挂载。
512 | 
513 | 2. iframe重新绘制需要各种元素操作只能由iframe自己完成
514 | 
515 | 	在非跨域iframe模式下所有的元素操作都在主域中完成，在跨域模式下这些操作和流程控制都需要以script编码的方式内置在html内，在接到主域的挂载消息后，完整挂载过程。
516 | 
517 | 3. 主域与iframe的通信需要通过`postMessage`。
518 | 
519 |  	为了通用性，调用`postMessage`时可以设置`origin = *`，但由于接收postMessage消息通过 `window.addEventListener("message", callback)`这种通用的方式，可能会接受来自多个域的非期待的消息，因此，需要对通信消息定制特殊协议格式，防止出现处理了未知消息而发生异常。
520 | 
521 | 	两者间通信是双向的，主站向iframe只需传递一种消息，即含组件完整内容的挂载消息，iframe接到消息后执行重绘渲染逻辑；iframe向主站传递两种消息，一是可以挂载的状态消息，主站接到消息后执行首次渲染逻辑，即发送首次挂载消息，二是body size变化的消息，主站接到消息后修改iframe的尺寸。
522 | 
523 | 在处理主域将组件内容通过`postMessage`传给iframe时，碰到了一个棘手的问题，postMessage对可传递的数据有限制，具体的限制可查看 [The structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)，这个限制导致`Function`类型的数据无法传过去，但组件很多功能需要使用函数才能实现，无法跨越这个限制，组件能力将损失过半或更甚。
524 | 
525 | 对于这个限制的解决方案是：对不支持的数据类型进行序列化，转成支持的类型，如string，渲染时再反序列化回来。核心代码如下
526 | 
527 | ```javascript
528 | // 序列化
529 | function serialize(data) {
530 |   // 对象深度递归
531 |   if (Object.prototype.toString.call(data) === '[object Object]') {
532 |     const result = {}
533 |     forEach(data, (item, key) => {
534 |       result[key] = this.serialize(item)
535 |     })
536 |     return result
537 |   }
538 |   if (Array.isArray(data)) {
539 |     return data.map(item => this.serialize(item))
540 |   }
541 |   // 函数前后打上特殊标记后转成string
542 |   if (typeof data === 'function') {
543 |     return encodeURI(`##${data.toString()}##`)
544 |   }
545 |   // 其他类型直接返回
546 |   return data
547 | }
548 | // 反序列化
549 | function deserialize(data) {
550 |   // 对象深度递归
551 |   if (Object.prototype.toString.call(data) === '[object Object]') {
552 |     const result = {}
553 |     Object.keys(data).forEach((key) => {
554 |       result[key] = this.deserialize(data[key])
555 |     })
556 |     return result
557 |   }
558 |   if (Array.isArray(data)) {
559 |     return data.map(item => this.deserialize(item))
560 |   }
561 |   // string类型尝试解析
562 |   if (typeof data === 'string') {
563 |     const str = decodeURI(data)
564 |     // 匹配特殊标记，匹配成功，反转为function
565 |     const matched = str.match(/^##([^#]*)##$/)
566 |     if (matched) {
567 |       // string转成function可以用eval也可用new Function
568 |       return newFn(matched[1])
569 |     }
570 |     return data
571 |   }
572 |   // 其他类型直接返回
573 |   return data
574 | }
575 | ```
576 | 
577 | 序列化方案看似完美，其实也有诸多的不便，毕竟是一种降级，需要特别注意的一点是，**闭包被破坏**，或者说是不支持闭包函数，举个例子:
578 | 
579 | ```jsx
580 | computed: {
581 |   component() {
582 |     // 把代码字符串转成js对象
583 |     const result = safeStringToObject(this.js)
584 |     if (result.error) {
585 |       return this.renderError({
586 |         type: 'js脚本错误',
587 |         msg: result.error.toString(),
588 |       })
589 |     }
590 |     // ...
591 |     return component
592 |   },
593 | },
594 | methods: {
595 |   renderError({ type, msg }) {
596 |     return {
597 |        // 这里用到了闭包，render函数使用了外层变量type和msg，
598 |        // renderError函数执行结束后这两个变量并不会释放，需等render函数执行后才会释放
599 |        render() {
600 |          return <div style='color: red'>
601 |            <div>{type}</div>
602 |            <div>{msg}</div>
603 |          </div>
604 |        }
605 |     }
606 |   },
607 | },
608 | ```
609 | 上面在生成 component 对象时调用了函数`renderError`，此函数返回了一个函数`render`，且使用了外层函数`renderError`的两个参数，正常情况下运行是没有问题的，`type`和`msg`的引用(引用计数)会等到`render`函数执行后才会释放(引用计数清零)。
610 | 
611 | 但 component 对象经过序列化后，其内部的函数被转成了字符串，因而丢失了函数的所有特性，闭包也因此丢失，经反序列化回来后，虽然还原了函数，但闭包关系无法恢复，因此，这种写法，在执行render时，`type`和`msg`两个参数会变为`undefined`。
612 | 
613 | 为了规避这种限制，应在导出 component 对象时避免使用含闭包的函数， 上例中的错误处理可通过以下方式解决
614 | 
615 | ```jsx
616 | computed: {
617 |   component() {
618 |     // 把代码字符串转成js对象
619 |     const result = safeStringToObject(this.js)
620 |     if (result.error) {
621 |       const template = this.genErrorTpl({
622 |         type: 'js脚本错误',
623 |         msg: result.error.toString(),
624 |       })
625 |       return { template }
626 |     }
627 |     // ...
628 |     return component
629 |   },
630 | },
631 | methods: {
632 |   genErrorTpl({ type, msg }) {
633 |     return `<div style='color: red'><div>${type}</div><div>${msg}</div></div>`
634 |   },
635 | }
636 | ```
637 | 
638 | 
639 | **`完整的代码见`：**
640 | 
641 |   + **`组件`：[https://github.com/merfais/vue-demo/blob/main/src/views/customCode/mountCrossIframe.vue](https://github.com/merfais/vue-demo/blob/main/src/views/customCode/mountCrossIframe.vue)**
642 |   + **`iframe`: [https://gitlab.com/merfais/static-page/-/blob/master/public/iframe.html](https://gitlab.com/merfais/static-page/-/blob/master/public/iframe.html)**
643 | 
644 | **`完整的demo见`：[https://merfais.github.io/vue-demo/#/custom-code](https://merfais.github.io/vue-demo/#/custom-code)**
645 | 
646 | ### XSS注入与安全
647 | 
648 | 通常情况下，在需要将用户输入持久化的系统中，都要考虑XSS的注入攻击，而防止注入的主要表现则是使用户输入的数据不被执行，或不能被执行。
649 | 
650 | 而前文介绍的要支持用户自定义组件的渲染，恰好就是要执行用户代码，可见，此功能势必会带来XSS注入风险。
651 | 
652 | 因此，在使用此功能时要慎重，在不同的应用场景中，要根据系统的安全级别，选取相应的方案。对比以上四种方案（1种动态组件，3种动态挂载）可做以下选择
653 | 
654 | 在一些相对安全（允许xss注入，注入后没有安全问题）的系统中，可以使用前三种方案中的任意一种，这三种都是可以通过注入获取用户cookie的。个人推荐使用第一种动态渲染方案，因为此方案灵活性和渲染完整度都是最高的。
655 | 
656 | 在一些不太安全（xss注入可能会泄露cookie中的身份信息）的系统中，推荐使用最后一种跨域组件挂载方案，通过完全隔离策略可以最大程度的降低风险，当然此方案也有很多的局限性。
657 | 
658 | 


--------------------------------------------------------------------------------
/husky.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   hooks: {
3 |     'pre-commit': 'lint-staged',
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/lint-staged.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   '*': [
3 |     './scripts/preCommit.sh',
4 |     'git add',
5 |   ],
6 | };
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "NODE_ENV=production eslint -c ./.eslintrc.js --ext js,jsx,vue --max-warnings=0 --no-error-on-unmatched-pattern ./",
 9 |     "lint:fix": "NODE_ENV=production eslint -c ./.eslintrc.js --fix --ext js,jsx,vue --max-warnings=0 --no-error-on-unmatched-pattern ./"
10 |   },
11 |   "dependencies": {
12 |     "ant-design-vue": "^1.7.2",
13 |     "codemirror": "^5.59.1",
14 |     "core-js": "^3.6.5",
15 |     "lodash": "^4.17.20",
16 |     "vue": "^2.6.11",
17 |     "vue-codemirror": "^4.0.6",
18 |     "vue-router": "^3.2.0",
19 |     "vuex": "^3.4.0"
20 |   },
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "~4.5.0",
23 |     "@vue/cli-plugin-eslint": "~4.5.0",
24 |     "@vue/cli-plugin-router": "~4.5.0",
25 |     "@vue/cli-plugin-vuex": "~4.5.0",
26 |     "@vue/cli-service": "~4.5.0",
27 |     "@vue/eslint-config-airbnb": "^5.0.2",
28 |     "babel-eslint": "^10.1.0",
29 |     "eslint": "^6.7.2",
30 |     "eslint-plugin-import": "^2.20.2",
31 |     "eslint-plugin-vue": "^6.2.2",
32 |     "husky": "^4.3.8",
33 |     "less": "^4.1.0",
34 |     "less-loader": "^7.2.1",
35 |     "lint-staged": "^10.5.3",
36 |     "vue-template-compiler": "^2.6.11"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/merfais/vue-demo/8748b2ecef8d62bdc06bb1c2a4caf7ac5f16c1c2/public/favicon.ico


--------------------------------------------------------------------------------
/public/iframe.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7 |     <link rel="icon" href="favicon.ico">
  8 |     <title>I'm iframe</title>
  9 |     <script>
 10 |       function onLoadVue() {
 11 |         window.parent.postMessage({
 12 |           event: 'mounted',
 13 |           data: { vue: true },
 14 |         }, '*')
 15 |       }
 16 |     </script>
 17 |     <link href="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.css" rel="stylesheet">
 18 |     <script defer src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
 19 |     <script defer src="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.js" onload="onLoadVue()"></script>
 20 |     <script>
 21 |     function appendStyle(data, doc = document) {
 22 |       const style = doc.createElement('style');
 23 |       style.id = Math.random().toString(36).slice(2);
 24 |       style.type = 'text/css';
 25 |       style.appendChild(doc.createTextNode(data));
 26 |       doc.head.appendChild(style);
 27 |       return style.id;
 28 |     }
 29 | 
 30 |     function appendScript(data, doc = document) {
 31 |       const script = doc.createElement('script');
 32 |       script.id = Math.random().toString(36).slice(2);
 33 |       script.type = 'text/javascript';
 34 |       script.appendChild(doc.createTextNode(data));
 35 |       doc.head.appendChild(script);
 36 |       return script.id;
 37 |     }
 38 | 
 39 |     function prependDom(data, doc = document) {
 40 |       const tag = typeof data === 'string' ? data : data.tag;
 41 |       const dom = doc.createElement(tag);
 42 |       Object.assign(dom, data)
 43 |       doc.body.prepend(dom);
 44 |     }
 45 | 
 46 |     function appendDom(data, doc = document) {
 47 |       const tag = typeof data === 'string' ? data : data.tag;
 48 |       const dom = doc.createElement(tag);
 49 |       Object.assign(dom, data)
 50 |       doc.body.appendChild(dom);
 51 |     }
 52 | 
 53 |     function removeElement(id, doc = document) {
 54 |       if (!id) {
 55 |         return
 56 |       }
 57 |       const ele = doc.getElementById(id);
 58 |       if (ele) {
 59 |         ele.parentNode.removeChild(ele);
 60 |       }
 61 |     }
 62 | 
 63 |     function newFn(code) {
 64 |       try {
 65 |         return new Function(`return ${code}`)()
 66 |         // eval(`var tmp = ${code}`)
 67 |         // return tmp
 68 |       } catch (e) {}
 69 |       try {
 70 |         return new Function(`return function ${code}`)()
 71 |         // eval(`var tmp = function ${code}`)
 72 |         // return tmp
 73 |       } catch(e) {}
 74 |     }
 75 | 
 76 |     function deserialize(data) {
 77 |       if (Object.prototype.toString.call(data) === '[object Object]') {
 78 |         const result = {}
 79 |         Object.keys(data).forEach((key) => {
 80 |           result[key] = this.deserialize(data[key])
 81 |         });
 82 |         return result;
 83 |       }
 84 |       if (typeof data === 'string') {
 85 |         const str = decodeURI(data)
 86 |         const matched = str.match(/^##([^#]*)##$/)
 87 |         if (matched) {
 88 |           return newFn(matched[1]);
 89 |         }
 90 |         return data;
 91 |       }
 92 |       if (Array.isArray(data)) {
 93 |         return data.map(item => this.deserialize(item))
 94 |       }
 95 |       return data;
 96 |     }
 97 | 
 98 |     function mountComponent(component, css = '') {
 99 |       removeElement(window._styleId);
100 |       window._styleId = appendStyle(css);
101 |       if (document.body.firstElementChild) {
102 |         document.body.removeChild(document.body.firstElementChild);
103 |       }
104 |       removeElement(window._err_id);
105 |       prependDom({ tag: 'div', id: 'app' })
106 |       new Vue(component).$mount('#app')
107 |     }
108 | 
109 |     function receiveMessage(event) {
110 |       let msg = event.data;
111 |       if (msg.event === 'mount' && msg.component) {
112 |         const component = deserialize(msg.component)
113 |         if (component
114 |           && (component.template || component.render)
115 |         ) {
116 |           mountComponent(component, msg.css || '')
117 |         }
118 |       }
119 |     }
120 | 
121 |     function renderError(error) {
122 |       const { type, msg } = error || {};
123 |       const component = {
124 |         template: `<div id='${window._err_id}'><div>${type}</div><div>${msg}</div></div>`,
125 |       }
126 |       removeElement(window._err_id)
127 |       appendDom({ tag: 'div', id: window._err_id })
128 |       new Vue(component).$mount(`#${window._err_id}`)
129 |     }
130 | 
131 |     window._vmid = Math.random().toString(36).slice(2)
132 |     window._err_id = `${window._vmid}_runtime_error`
133 |     appendStyle(`
134 |       #${window._err_id} {
135 |         color: red;
136 |         position: absolute;
137 |         top: 0;
138 |         left: 0;
139 |         right: 0;
140 |         bottom: 0;
141 |         background: #fff;
142 |       }
143 |     `)
144 | 
145 |     </script>
146 |   </head>
147 |   <body>
148 |     <div id="app"></div>
149 |     <noscript>
150 |       <strong>We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
151 |     </noscript>
152 |     <script>
153 |     const observer = new MutationObserver(() => {
154 |       const firstEle = document.body.firstElementChild
155 |       const rect = firstEle.getBoundingClientRect();
156 |       const marginTop = parseFloat(window.getComputedStyle(firstEle).marginTop, 10)
157 |       const marginBottom = parseFloat(window.getComputedStyle(firstEle).marginBottom, 10)
158 |       window.parent.postMessage({
159 |         event: 'mutationObserverBody',
160 |         data: { height: rect.height + marginTop + marginBottom },
161 |       }, '*')
162 |     });
163 |     observer.observe(document.body, { childList: true });
164 | 
165 |     window.addEventListener("message", receiveMessage, false);
166 |     </script>
167 |   </body>
168 | </html>
169 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/scripts/preCommit.sh:
--------------------------------------------------------------------------------
1 | #! /bin/bash
2 | 
3 | export NODE_ENV='production'
4 | git diff --cached --name-only | \
5 |   grep -E "src/.*\.(js|jsx|ts|tsx|vue)$" |\
6 |   grep -v 'mocker' |\
7 |   xargs eslint -c ./.eslintrc.js --max-warnings=0 --fix --no-error-on-unmatched-pattern
8 | exit $?
9 | 


--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div id="app">
 3 |   <banner />
 4 |   <router-view/>
 5 | </div>
 6 | </template>
 7 | <script>
 8 | import Banner from 'components/banner'
 9 | 
10 | export default {
11 |   components: {
12 |     Banner,
13 |   },
14 | }
15 | </script>
16 | <style lang='less' scoped>
17 | #app {
18 |   font-family: Avenir, Helvetica, Arial, sans-serif;
19 |   -webkit-font-smoothing: antialiased;
20 |   -moz-osx-font-smoothing: grayscale;
21 |   height: 100%;
22 |   display: flex;
23 |   flex-direction: column;
24 | }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/merfais/vue-demo/8748b2ecef8d62bdc06bb1c2a4caf7ac5f16c1c2/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/banner.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class='wrapper'>
  3 |   <div class='home'
  4 |     @click="onClickHome"
  5 |     >
  6 |     <a-icon type="home" />
  7 |   </div>
  8 |   <div class='source-code'>
  9 |     <span>源码地址:</span>
 10 |     <a class='code-link'
 11 |       :href='filePath'
 12 |       target="_blank"
 13 |       rel="noopener noreferrer"
 14 |       >
 15 |       {{filePath}}
 16 |     </a>
 17 |   </div>
 18 |   <div class='space' />
 19 |   <a class='link'
 20 |     :href='href'
 21 |     target="_blank"
 22 |     rel="noopener noreferrer"
 23 |     >
 24 |     <a-icon class='github-icon' type="github" />
 25 |     欢迎 star，watch，follow 一键三连
 26 |   </a>
 27 | </div>
 28 | </template>
 29 | <script>
 30 | import { routes } from '@/router';
 31 | 
 32 | export default {
 33 |   data() {
 34 |     return {
 35 |       routes,
 36 |       href: 'https://github.com/merfais/vue-demo',
 37 |     }
 38 |   },
 39 |   computed: {
 40 |     filePath() {
 41 |       if (!this.$store.state.filePath) {
 42 |         return 'https://github.com/merfais/vue-demo'
 43 |       }
 44 |       const prefix = 'https://github.com/merfais/vue-demo/blob/main/src/'
 45 |       return prefix + this.$store.state.filePath
 46 |     },
 47 |   },
 48 |   methods: {
 49 |     onClickHome() {
 50 |       this.$router.push('/')
 51 |     },
 52 |   },
 53 | }
 54 | </script>
 55 | <style lang="less" scoped>
 56 | .wrapper {
 57 |   height: 55px;
 58 |   display: flex;
 59 |   align-items: center;
 60 |   border-bottom: 1px solid #ccc;
 61 |   box-shadow: 0px 3px 4px rgba(0, 0, 0, .1);
 62 |   background: rgba(200, 200, 200, 0.3);
 63 |   padding: 10px 20px;
 64 |   margin-bottom: 9px;
 65 | 
 66 |   .home {
 67 |     padding: 10px;
 68 |     font-size: 24px;
 69 |     cursor: pointer;
 70 | 
 71 |     &:hover {
 72 |       color: #1890ff;
 73 |     }
 74 |   }
 75 | 
 76 |   .space {
 77 |     flex-grow: 1;
 78 |   }
 79 | 
 80 |   .source-code {
 81 |     padding-left: 20px;
 82 |     font-size: 14px;
 83 | 
 84 |     .code-link {
 85 |       border-bottom: 1px solid #1890ff;
 86 |     }
 87 |   }
 88 | 
 89 |   .link {
 90 |     font-size: 18px;
 91 |     font-style: italic;
 92 |     border-bottom: 1px solid #1890ff;
 93 |     text-shadow: 1px 1px white, -1px -1px #444,
 94 |                   0.1em 0.1em 0.5em #333;
 95 |   }
 96 | 
 97 |   .github-icon {
 98 |     font-size: 30px;
 99 |     color: #555;
100 |   }
101 | }
102 | </style>
103 | 


--------------------------------------------------------------------------------
/src/components/helloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="hello">
 3 |   <h1>{{ msg }}</h1>
 4 |   <p>
 5 |     For a guide and recipes on how to configure / customize this project,<br>
 6 |     check out the
 7 |     <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |   </p>
 9 |   <h3>Installed CLI Plugins</h3>
10 |   <ul>
11 |     <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |     <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
13 |     <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
14 |     <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
15 |   </ul>
16 |   <h3>Essential Links</h3>
17 |   <ul>
18 |     <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
19 |     <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
20 |     <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
21 |     <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
22 |     <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
23 |   </ul>
24 |   <h3>Ecosystem</h3>
25 |   <ul>
26 |     <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
27 |     <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
28 |     <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
29 |     <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
30 |     <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
31 |   </ul>
32 | </div>
33 | </template>
34 | 
35 | <script>
36 | export default {
37 |   name: 'HelloWorld',
38 |   props: {
39 |     msg: String,
40 |   },
41 | };
42 | </script>
43 | 
44 | <!-- Add "scoped" attribute to limit CSS to this component only -->
45 | <style scoped>
46 | h3 {
47 |   margin: 40px 0 0;
48 | }
49 | ul {
50 |   list-style-type: none;
51 |   padding: 0;
52 | }
53 | li {
54 |   display: inline-block;
55 |   margin: 0 10px;
56 | }
57 | a {
58 |   color: #42b983;
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Antd from 'ant-design-vue';
 3 | import 'ant-design-vue/dist/antd.css';
 4 | import Codemirror from 'vue-codemirror';
 5 | import 'codemirror/lib/codemirror.css';
 6 | import App from './app.vue';
 7 | import router from './router';
 8 | import store from './store';
 9 | 
10 | Vue.config.productionTip = false;
11 | 
12 | Vue.use(Antd);
13 | Vue.use(Codemirror, /* {
14 |   options: { theme: 'base16-dark', ... },
15 |   events: ['scroll', ...]
16 | } */);
17 | 
18 | new Vue({
19 |   router,
20 |   store,
21 |   render: (h) => h(App),
22 | }).$mount('#app');
23 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueRouter from 'vue-router';
 3 | 
 4 | Vue.use(VueRouter);
 5 | 
 6 | export const routes = [
 7 |   {
 8 |     path: '/',
 9 |     name: 'Home',
10 |     component: () => import(/* webpackChunkName: "home" */ '@/views/home.vue'),
11 |   },
12 |   {
13 |     path: '/custom-code',
14 |     name: 'CustomCode',
15 |     component: () => import(/* webpackChunkName customCode */ '@/views/customCode/index.vue'),
16 |   },
17 | ];
18 | 
19 | const router = new VueRouter({
20 |   routes,
21 | });
22 | 
23 | export default router;
24 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import variable from './variable'
 4 | 
 5 | Vue.use(Vuex)
 6 | 
 7 | export default new Vuex.Store({
 8 |   state: {
 9 |     filePath: '',
10 |     pageName: '',
11 |   },
12 |   mutations: {
13 |     setState(state, payload) {
14 |       Object.assign(state, payload)
15 |     },
16 |   },
17 |   actions: {
18 |   },
19 |   modules: {
20 |     variable,
21 |   },
22 | })
23 | 


--------------------------------------------------------------------------------
/src/store/variable.js:
--------------------------------------------------------------------------------
 1 | import map from 'lodash/map'
 2 | 
 3 | const variable = {
 4 |   namespaced: true,
 5 |   state: {
 6 |     map: {
 7 |       varA: 1,
 8 |     },
 9 |   },
10 |   getters: {
11 |     list(state, getters) {
12 |       return map(state.map, (item) => {
13 |         const getterKey = `${item.key}/value`
14 |         let value = ''
15 |         try {
16 |           value = JSON.stringify(getters[getterKey])
17 |         } catch (e) {}
18 |         return {
19 |           key: item.key,
20 |           type: item.type,
21 |           name: item.name,
22 |           value,
23 |         }
24 |       })
25 |     },
26 |   },
27 |   mutations: {
28 |     setState(state, payload) {
29 |       Object.assign(state, payload)
30 |     },
31 |   },
32 |   actions: {
33 |   },
34 | }
35 | 
36 | export default variable
37 | 


--------------------------------------------------------------------------------
/src/utils/dom.js:
--------------------------------------------------------------------------------
 1 | export function appendLink(href, doc = document) {
 2 |   const link = doc.createElement('link');
 3 |   link.rel = 'stylesheet';
 4 |   link.type = 'text/css';
 5 |   link.href = href;
 6 |   link.media = 'all';
 7 |   doc.head.appendChild(link);
 8 | }
 9 | 
10 | export function appendScriptLink(data, doc = document) {
11 |   const list = !Array.isArray(data) ? [data] : data;
12 |   return Promise.all(list.map(item => new Promise(resolve => {
13 |     const script = doc.createElement('script');
14 |     script.type = 'text/javascript';
15 |     script.onload = resolve;
16 |     Object.assign(script, item);
17 |     doc.head.appendChild(script);
18 |   })))
19 | }
20 | 
21 | export function appendStyle(data, doc = document) {
22 |   const style = doc.createElement('style');
23 |   style.id = Math.random().toString(36).slice(2);
24 |   style.type = 'text/css';
25 |   style.appendChild(doc.createTextNode(data));
26 |   doc.head.appendChild(style);
27 |   return style.id;
28 | }
29 | 
30 | export function appendScript(data, doc = document) {
31 |   const script = doc.createElement('script');
32 |   script.id = Math.random().toString(36).slice(2);
33 |   script.type = 'text/javascript';
34 |   script.appendChild(doc.createTextNode(data));
35 |   doc.head.appendChild(script);
36 |   return script.id;
37 | }
38 | 
39 | export function prependDom(data, doc = document) {
40 |   const tag = typeof data === 'string' ? data : data.tag;
41 |   const dom = doc.createElement(tag);
42 |   Object.assign(dom, data)
43 |   doc.body.prepend(dom);
44 | }
45 | 
46 | export function removeElement(id, doc = document) {
47 |   if (!id) {
48 |     return
49 |   }
50 |   const ele = doc.getElementById(id);
51 |   if (ele) {
52 |     ele.parentNode.removeChild(ele);
53 |   }
54 | }
55 | 
56 | 


--------------------------------------------------------------------------------
/src/utils/vm.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 将字符串转换成代码对象
 3 |  * @param code 代码
 4 |  * @param value 默认值
 5 |  * @param params scoped变量，上下文变量，类似全局变量
 6 |  */
 7 | export function stringToCode(code, value, params) {
 8 |   const result = { value, error: null }
 9 |   try {
10 |     result.value = new Function('context', `return ${code}`)(params) || value // eslint-disable-line no-new-func
11 |   } catch (e) {
12 |     console.error('js脚本错误：', e)
13 |     result.error = e
14 |   }
15 |   return result
16 | }
17 | 
18 | /**
19 |  * 执行一段字符串格式的函数
20 |  */
21 | export function runFnInVm(code, params, globalParams) {
22 |   const NOOP = args => args
23 |   const result = stringToCode(code, NOOP, globalParams)
24 |   const fn = result.value
25 |   result.value = params
26 |   if (result.error) {
27 |     return result
28 |   }
29 |   if (typeof fn !== 'function') {
30 |     console.error('非法的js脚本函数', fn)
31 |     result.error = new Error('非法的js脚本函数')
32 |     return result
33 |   }
34 |   try {
35 |     result.value = fn.call(fn, params)
36 |   } catch (e) {
37 |     console.error('js脚本执行错误：', e)
38 |     result.error = e
39 |   }
40 |   return result
41 | }
42 | 


--------------------------------------------------------------------------------
/src/views/about.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | <div class="about">
3 |   <h1>This is an about page</h1>
4 | </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/customCode/codeEditor.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import 'codemirror/mode/javascript/javascript.js'
 3 | import 'codemirror/mode/css/css.js'
 4 | import 'codemirror/mode/vue/vue.js'
 5 | import 'codemirror/theme/monokai.css'
 6 | 
 7 | // styleSelectedText
 8 | import 'codemirror/addon/selection/mark-selection.js'
 9 | // hint
10 | import 'codemirror/addon/hint/show-hint.js'
11 | import 'codemirror/addon/hint/show-hint.css'
12 | import 'codemirror/addon/hint/javascript-hint.js'
13 | import 'codemirror/addon/selection/active-line.js'
14 | // highlightSelectionMatches
15 | import 'codemirror/addon/scroll/annotatescrollbar.js'
16 | import 'codemirror/addon/search/matchesonscrollbar.js'
17 | import 'codemirror/addon/search/match-highlighter.js'
18 | // keyMap
19 | import 'codemirror/mode/clike/clike.js'
20 | import 'codemirror/addon/edit/matchbrackets.js'
21 | import 'codemirror/addon/comment/comment.js'
22 | import 'codemirror/addon/dialog/dialog.js'
23 | import 'codemirror/addon/dialog/dialog.css'
24 | import 'codemirror/addon/search/searchcursor.js'
25 | import 'codemirror/addon/search/search.js'
26 | import 'codemirror/keymap/sublime.js'
27 | // foldGutter
28 | import 'codemirror/addon/fold/foldgutter.css'
29 | import 'codemirror/addon/fold/brace-fold.js'
30 | import 'codemirror/addon/fold/comment-fold.js'
31 | import 'codemirror/addon/fold/foldcode.js'
32 | import 'codemirror/addon/fold/foldgutter.js'
33 | import 'codemirror/addon/fold/indent-fold.js'
34 | import 'codemirror/addon/fold/markdown-fold.js'
35 | import 'codemirror/addon/fold/xml-fold.js'
36 | 
37 | 
38 | export default {
39 |   name: 'CodeEditor',
40 |   inheritAttrs: false,
41 |   props: {
42 |     options: Object,
43 |     mode: String,
44 |   },
45 |   data() {
46 |     return {
47 |     }
48 |   },
49 |   methods: {
50 |   },
51 |   computed: {
52 |     cmOptions() {
53 |       return {
54 |         tabSize: 2,
55 |         lineNumbers: true,
56 |         line: true,
57 |         ...this.options,
58 |         mode: this.mode,
59 |       }
60 |     },
61 |   },
62 |   render() {
63 |     return <codemirror
64 |       class='code-editor-wrapper'
65 |       options={this.cmOptions}
66 |       props={this.$attrs}
67 |       on={this.$listeners}
68 |     />
69 |   },
70 |   mounted() {
71 |   },
72 | }
73 | </script>
74 | <style lang="less" scoped>
75 | .code-editor-wrapper {
76 |   height: 100%;
77 |   text-align: left;
78 |   overflow: auto;
79 | 
80 |   /deep/ .CodeMirror {
81 |     height: 100%;
82 |   }
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/src/views/customCode/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class='wrapper'>
  3 |   <div class='panel code-panel'>
  4 |     <a-tabs
  5 |       class='tabs-wrapper'
  6 |       >
  7 |       <a-tab-pane
  8 |         v-for="item in tabs"
  9 |         :key="item.key"
 10 |         :tab="item.tab"
 11 |         >
 12 |         <code-editor
 13 |           class='code-wrapper'
 14 |           v-model="item.value"
 15 |           :mode="item.mode"
 16 |           />
 17 |       </a-tab-pane>
 18 |     </a-tabs>
 19 |   </div>
 20 |   <div class="preview-btn-wrapper">
 21 |     <a-button
 22 |       @click="onClickPreview"
 23 |       >
 24 |       预览 >>
 25 |     </a-button>
 26 |   </div>
 27 |   <div class='panel preview-panel'>
 28 |     <a-alert message="通过动态子组件的方式渲染" type="info" show-icon />
 29 |     <with-component v-bind="previewData"/>
 30 |     <a-divider/>
 31 |     <a-alert message="通过实例化Vue挂载DOM的方式渲染" type="info" show-icon />
 32 |     <with-mount v-bind="previewData"/>
 33 |     <a-divider/>
 34 |     <a-alert message="通过实例化Vue挂载到iframe的方式渲染" type="info" show-icon />
 35 |     <mount-same-iframe v-bind="previewData"/>
 36 |     <a-divider/>
 37 |     <a-alert message="通过实例化Vue挂载到iframe的方式渲染" type="info" show-icon />
 38 |     <mount-cross-iframe v-bind="previewData"/>
 39 |     <a-divider/>
 40 |   </div>
 41 | </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | import CodeEditor from './codeEditor'
 46 | import WithComponent from './withComponent'
 47 | import WithMount from './withMount'
 48 | import MountSameIframe from './mountSameIframe'
 49 | import MountCrossIframe from './mountCrossIframe'
 50 | import {
 51 |   template,
 52 |   js,
 53 |   css,
 54 | } from './service'
 55 | 
 56 | export default {
 57 |   name: '',
 58 |   components: {
 59 |     CodeEditor,
 60 |     WithComponent,
 61 |     WithMount,
 62 |     MountSameIframe,
 63 |     MountCrossIframe,
 64 |   },
 65 |   data() {
 66 |     return {
 67 |       previewData: {
 68 |         js: '',
 69 |         template: '',
 70 |         css: '',
 71 |       },
 72 |       tabs: {
 73 |         template: {
 74 |           key: 'template',
 75 |           tab: '模板',
 76 |           value: template,
 77 |           mode: 'text/x-vue',
 78 |         },
 79 |         js: {
 80 |           key: 'js',
 81 |           tab: '代码',
 82 |           value: js,
 83 |           mode: 'text/javascript',
 84 |         },
 85 |         css: {
 86 |           key: 'css',
 87 |           tab: '样式',
 88 |           value: css,
 89 |           mode: 'text/css',
 90 |         },
 91 |       },
 92 |     }
 93 |   },
 94 |   methods: {
 95 |     onClickPreview() {
 96 |       this.previewData = {
 97 |         template: this.tabs.template.value,
 98 |         js: this.tabs.js.value,
 99 |         css: this.tabs.css.value,
100 |         sed: Math.random(),
101 |       }
102 |     },
103 |   },
104 |   created() {
105 |     this.$store.commit('setState', {
106 |       filePath: 'views/customCode/index.vue',
107 |       pageName: '',
108 |     })
109 |   },
110 |   mounted() {
111 |     this.previewData = {
112 |       template: this.tabs.template.value,
113 |       js: this.tabs.js.value,
114 |       css: this.tabs.css.value,
115 |     }
116 |     setInterval(() => {
117 |       let { varA } = this.$store.state.variable.map
118 |       varA += 1
119 |       this.$store.commit('variable/setState', { map: { varA } })
120 |     }, 1000 * 10)
121 |   },
122 | }
123 | </script>
124 | 
125 | <style lang="less" scoped>
126 | .wrapper {
127 |   display: flex;
128 |   align-items: center;
129 |   padding: 10px;
130 |   flex-grow: 1;
131 | 
132 |   .panel {
133 |     border: 1px solid #ccc;
134 |     height: 100%;
135 |     text-align: left;
136 |     overflow: auto;
137 |     flex-grow: 1;
138 |     max-width: 700px;
139 |   }
140 | 
141 |   .preview-btn-wrapper {
142 |     margin: 10px;
143 |   }
144 | 
145 |   .tabs-wrapper {
146 |     height: 100%;
147 | 
148 |     .code-wrapper {
149 |       height: 100%;
150 |     }
151 |   }
152 | }
153 | 
154 | /deep/ .ant-tabs-bar {
155 |   margin: 0;
156 | }
157 | 
158 | /deep/ .ant-tabs-content {
159 |   height: calc(100% - 45px);
160 | }
161 | /deep/ .ant-tabs-tabpane {
162 |   overflow: auto;
163 | }
164 | </style>
165 | 


--------------------------------------------------------------------------------
/src/views/customCode/mountCrossIframe.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <iframe
  3 |   ref="iframe"
  4 |   src='https://merfais.gitlab.io/static-page/iframe.html'
  5 |   frameborder="0"
  6 |   scrolling="no"
  7 |   width="100%"
  8 |   />
  9 | </template>
 10 | <script>
 11 | import has from 'lodash/has'
 12 | import forEach from 'lodash/forEach'
 13 | import { runFnInVm } from '@/utils/vm'
 14 | 
 15 | export default {
 16 |   name: 'codePreview',
 17 |   props: {
 18 |     template: String,
 19 |     js: String,
 20 |     css: String,
 21 |   },
 22 |   data() {
 23 |     return {
 24 |     }
 25 |   },
 26 |   computed: {
 27 |     component() {
 28 |       let template = (this.template || '')
 29 |         .replace(/^ *< *template *>|<\/ *template *> *$/g, '')
 30 |         .trim()
 31 | 
 32 |       const js = (this.js || '').trim()
 33 |       const result = runFnInVm(js, {})
 34 |       result.css = this.css
 35 |       const component = result.value
 36 |       if (result.error) {
 37 |         template = this.genErrorTpl({
 38 |           type: 'js脚本错误',
 39 |           msg: result.error.toString(),
 40 |         })
 41 |       }
 42 | 
 43 |       // 如果需要注入一些变量，则对被注入的字段进行检测
 44 |       // 防止用户代码中定义了此字段，导致冲突
 45 |       const error = this.checkVariableField(component)
 46 |       if (error) {
 47 |         template = this.genErrorTpl(error)
 48 |       }
 49 | 
 50 |       // 注入template或render，设定template优先级高于render
 51 |       if (template) {
 52 |         component.template = template
 53 |         component.render = undefined
 54 |       } else if (!component.render) {
 55 |         component.template = '<span>未提供模板或render函数</span>'
 56 |       }
 57 | 
 58 |       // 注入errorCaptured, 用于错误自定义组件运行时捕获
 59 |       component.errorCaptured = (err, vm, info) => {
 60 |         // 调用iframe域的renderError方法
 61 |         window.renderError({
 62 |           msg: err && err.toString && err.toString(),
 63 |           type: '自定义组件运行时错误：',
 64 |         })
 65 |         console.error('自定义组件运行时错误：', err, vm, info)
 66 |       }
 67 | 
 68 |       // 通过propsData注入一些变量，比如store中的一些字段，
 69 |       // 当store中的变量发生变化时，也会引发组件重绘
 70 |       const map = {}
 71 |       const keys = Object.keys(this.$store.state.variable.map)
 72 |       forEach(keys, (key) => {
 73 |         map[key] = this.$store.state.variable.map[key]
 74 |       })
 75 |       component.props = ['variable']
 76 |       component.propsData = { variable: map }
 77 | 
 78 |       return component
 79 |     },
 80 |   },
 81 |   watch: {
 82 |     component() {
 83 |       if (this.resolve) {
 84 |         this.mountCode()
 85 |       } else {
 86 |         new Promise((resolve) => {
 87 |           this.resolve = resolve
 88 |         }).then(() => {
 89 |           this.mountCode()
 90 |         })
 91 |       }
 92 |     },
 93 |   },
 94 |   methods: {
 95 |     genErrorTpl({ type, msg }) {
 96 |       return `<div style='color: red'><div>${type}</div><div>${msg}</div></div>`
 97 |     },
 98 |     checkVariableField(component) {
 99 |       // 如果需要注入一些变量，比如名字叫variable
100 |       let data = component.data
101 |       if (typeof data === 'function') {
102 |         // 如果data是函数，执行后取data的结果
103 |         // 用于行为无法预知，可能定义了错误的data，需要trycatch防崩
104 |         // catch的异常不用关心
105 |         try {
106 |           data = data()
107 |         } catch (e) {}
108 |       }
109 |       if (has(component, 'computed.variable')
110 |           || has(data, 'variable')
111 |       ) {
112 |         return {
113 |           type: '功能限制',
114 |           msg: '禁止自定义名称是variable的computed或data，会影响系统变量的使用',
115 |         }
116 |       }
117 |     },
118 |     serialize(data) {
119 |       if (Object.prototype.toString.call(data) === '[object Object]') {
120 |         const result = {}
121 |         forEach(data, (item, key) => {
122 |           result[key] = this.serialize(item)
123 |         })
124 |         return result
125 |       }
126 |       if (typeof data === 'function') {
127 |         return encodeURI(`##${data.toString()}##`)
128 |       }
129 |       if (Array.isArray(data)) {
130 |         return data.map(item => this.serialize(item))
131 |       }
132 |       return data
133 |     },
134 |     mountCode() {
135 |       this.$refs.iframe.contentWindow.postMessage({
136 |         event: 'mount',
137 |         component: this.serialize(this.component),
138 |         css: this.css,
139 |       }, '*')
140 |     },
141 |   },
142 |   beforeCreate() {
143 |     window.addEventListener('message', (event) => {
144 |       const msg = event.data
145 |       if (msg.event === 'mutationObserverBody' && msg.data && msg.data.height) {
146 |         this.$refs.iframe.height = `${msg.data.height}px`
147 |       } else if (msg.event === 'mounted' && msg.data && msg.data.vue) {
148 |         this.resolve()
149 |       }
150 |     }, false)
151 |   },
152 |   mounted() {
153 |   },
154 | }
155 | </script>
156 | <style lang='less' scoped>
157 | </style>
158 | 


--------------------------------------------------------------------------------
/src/views/customCode/mountSameIframe.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <iframe
  3 |   ref='iframe'
  4 |   frameborder="0"
  5 |   scrolling="no"
  6 |   width="100%"
  7 |   />
  8 | </template>
  9 | <script>
 10 | import has from 'lodash/has'
 11 | import forEach from 'lodash/forEach'
 12 | import { runFnInVm } from '@/utils/vm'
 13 | import {
 14 |   appendScriptLink,
 15 |   appendLink,
 16 |   prependDom,
 17 |   appendStyle,
 18 |   removeElement,
 19 | } from '@/utils/dom'
 20 | 
 21 | export default {
 22 |   name: 'codePreview',
 23 |   props: {
 24 |     template: String,
 25 |     js: String,
 26 |     css: String,
 27 |   },
 28 |   data() {
 29 |     return {
 30 |       subCompErr: null,
 31 |     }
 32 |   },
 33 |   computed: {
 34 |     component() {
 35 |       if (this.subCompErr) {
 36 |         return this.renderError(this.subCompErr)
 37 |       }
 38 |       const js = (this.js || '').trim()
 39 |       const result = runFnInVm(js, {})
 40 |       result.css = this.css
 41 |       const component = result.value
 42 |       if (result.error) {
 43 |         return this.renderError({
 44 |           type: 'js脚本错误',
 45 |           msg: result.error.toString(),
 46 |         })
 47 |       }
 48 | 
 49 |       // 如果需要注入一些变量，则对被注入的字段进行检测
 50 |       // 防止用户代码中定义了此字段，导致冲突
 51 |       const error = this.checkVariableField(component)
 52 |       if (error) {
 53 |         return this.renderError(error)
 54 |       }
 55 | 
 56 |       const template = (this.template || '')
 57 |         .replace(/^ *< *template *>|<\/ *template *> *$/g, '')
 58 |         .trim()
 59 | 
 60 |       // 注入template或render，设定template优先级高于render
 61 |       if (template) {
 62 |         component.template = template
 63 |         component.render = undefined
 64 |       } else if (!component.render) {
 65 |         component.template = '<span>未提供模板或render函数</span>'
 66 |       }
 67 | 
 68 |       // 注入errorCaptured, 用于错误自定义组件运行时捕获
 69 |       component.errorCaptured = (err, vm, info) => {
 70 |         this.subCompErr = {
 71 |           msg: err && err.toString && err.toString(),
 72 |           type: '自定义组件运行时错误：',
 73 |         }
 74 |         console.error('自定义组件运行时错误：', err, vm, info)
 75 |       }
 76 | 
 77 |       // 通过computed注入一些变量，比如store中的一些字段，
 78 |       // 当store中的变量发生变化时，也会引发组件重绘
 79 |       const computed = component.computed || {}
 80 |       const keys = Object.keys(this.$store.state.variable.map)
 81 |       computed.variable = () => {
 82 |         const map = {}
 83 |         forEach(keys, (key) => {
 84 |           map[key] = this.$store.state.variable.map[key]
 85 |         })
 86 |         return map
 87 |       }
 88 |       component.computed = computed
 89 | 
 90 |       return component
 91 |     },
 92 |   },
 93 |   watch: {
 94 |     js() {
 95 |       // 当代码变化时，清空error，重绘
 96 |       this.subCompErr = null
 97 |     },
 98 |     template() {
 99 |       // 当代码变化时，清空error，重绘
100 |       this.subCompErr = null
101 |     },
102 |     css() {
103 |       // 当代码变化时，清空error，重绘
104 |       this.subCompErr = null
105 |     },
106 |     component() {
107 |       if (this.hasInit) {
108 |         this.mountCode()
109 |       } else {
110 |         this.mountResourceHandler.then(() => {
111 |           this.hasInit = true
112 |           this.mountCode()
113 |         })
114 |       }
115 |     },
116 |   },
117 |   methods: {
118 |     renderError({ type, msg }) {
119 |       return {
120 |         render() {
121 |           return <div style='color: red'>
122 |             <div>{type}</div>
123 |             <div>{msg}</div>
124 |           </div>
125 |         },
126 |       }
127 |     },
128 |     checkVariableField(component) {
129 |       // 如果需要注入一些变量，比如名字叫variable
130 |       let data = component.data
131 |       if (typeof data === 'function') {
132 |         // 如果data是函数，执行后取data的结果
133 |         // 用于行为无法预知，可能定义了错误的data，需要trycatch防崩
134 |         // catch的异常不用关心
135 |         try {
136 |           data = data()
137 |         } catch (e) {}
138 |       }
139 |       if (has(component, 'computed.variable')
140 |           || has(data, 'variable')
141 |       ) {
142 |         return {
143 |           type: '功能限制',
144 |           msg: '禁止自定义名称是variable的computed或data，会影响系统变量的使用',
145 |         }
146 |       }
147 |     },
148 |     mountResource() {
149 |       appendLink('https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.css', this.iframeDoc)
150 |       this.mountResourceHandler = appendScriptLink([{
151 |         src: 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js',
152 |         defer: true,
153 |       }, {
154 |         src: 'https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.js',
155 |         defer: true,
156 |       }], this.iframeDoc)
157 |     },
158 |     mountCode() {
159 |       removeElement(this.styleId, this.iframeDoc)
160 |       this.styleId = appendStyle(this.css, this.iframeDoc)
161 |       if (this.iframeDoc.body.firstElementChild) {
162 |         this.iframeDoc.body.removeChild(this.iframeDoc.body.firstElementChild)
163 |       }
164 |       prependDom({ tag: 'div', id: 'app' }, this.iframeDoc)
165 |       const Vue = this.iframeWin.Vue
166 |       this.iframeWin.antd.install(Vue)
167 |       new Vue(this.component).$mount('#app')
168 |     },
169 |   },
170 |   mounted() {
171 |     this.iframeWin = this.$refs.iframe.contentWindow
172 |     this.iframeDoc = this.$refs.iframe.contentDocument
173 |     this.mountResource()
174 |     // 通过观察器观察iframe的body变化后修改iframe的高度，
175 |     // 使用iframe会丢失margin叠加效果
176 |     const observer = new MutationObserver(() => {
177 |       const firstEle = this.iframeDoc.body.firstElementChild
178 |       const rect = firstEle.getBoundingClientRect()
179 |       const marginTop = parseFloat(window.getComputedStyle(firstEle).marginTop, 10)
180 |       const marginBottom = parseFloat(window.getComputedStyle(firstEle).marginBottom, 10)
181 |       this.$refs.iframe.height = `${rect.height + marginTop + marginBottom}px`
182 |     })
183 |     observer.observe(this.iframeDoc.body, { childList: true })
184 |   },
185 | }
186 | </script>
187 | <style lang='less' scoped>
188 | </style>
189 | 


--------------------------------------------------------------------------------
/src/views/customCode/service.js:
--------------------------------------------------------------------------------
 1 | export const template = `<template>
 2 |   <div class='wrapper'>
 3 |     <a-button @click="onClick">
 4 |       点我
 5 |     </a-button>
 6 |     <span v-for="(item, key) in variable" :key="key">{{item}}</span>
 7 |   </div>
 8 | </template>`
 9 | 
10 | 
11 | export const js = `function generate() {
12 |   return {
13 |     name: 'customCode',
14 |     methods: {
15 |       onClick() {
16 |         const cookie = window.parent.document.cookie
17 |         this.$message.info(\`消息提示: cookie = \${cookie}\`)
18 |       }
19 |     },
20 |   };
21 | }`
22 | 
23 | export const css = `.wrapper {
24 |   margin: 10px;
25 |   padding: 10px;
26 |   border: 1px solid #ccc;
27 | }
28 | `
29 | 


--------------------------------------------------------------------------------
/src/views/customCode/withComponent.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import forEach from 'lodash/forEach'
  3 | import has from 'lodash/has'
  4 | import { runFnInVm } from '@/utils/vm'
  5 | 
  6 | export default {
  7 |   name: 'codePreview',
  8 |   props: {
  9 |     template: String,
 10 |     js: String,
 11 |     css: String,
 12 |   },
 13 |   data() {
 14 |     return {
 15 |       subCompErr: null,
 16 |     }
 17 |   },
 18 |   computed: {
 19 |     className() {
 20 |       // 生成唯一class，主要用于做scoped的样式
 21 |       const uid = Math.random().toString(36).slice(2)
 22 |       return `custom-code-${uid}`
 23 |     },
 24 |     scopedStyle() {
 25 |       if (this.css) {
 26 |         const scope = `.${this.className}`
 27 |         const regex = /(^|\})\s*([^{]+)/g
 28 |         // 为class加前缀，做类似scope的效果
 29 |         return this.css.trim().replace(regex, (m, g1, g2) => {
 30 |           return g1 ? `${g1} ${scope} ${g2}` : `${scope} ${g2}`
 31 |         })
 32 |       }
 33 |       return ''
 34 |     },
 35 |     component() {
 36 |       const js = (this.js || '').trim()
 37 |       const result = runFnInVm(js, {})
 38 |       const component = result.value
 39 |       if (result.error) {
 40 |         result.error = {
 41 |           msg: result.error.toString(),
 42 |           type: 'js脚本错误',
 43 |         }
 44 |         result.value = { hasError: true }
 45 |         return result
 46 |       }
 47 | 
 48 |       // 如果需要注入一些变量，则对被注入的字段进行检测
 49 |       // 防止用户代码中定义了此字段，导致冲突
 50 |       const resultTmp = this.checkVariableField(component)
 51 |       if (resultTmp) {
 52 |         return resultTmp
 53 |       }
 54 | 
 55 |       const template = (this.template || '')
 56 |         .replace(/^ *< *template *>|<\/ *template *> *$/g, '')
 57 |         .trim()
 58 | 
 59 |       // 注入template或render，设定template优先级高于render
 60 |       if (template) {
 61 |         component.template = template
 62 |         component.render = undefined
 63 |       } else if (!component.render) {
 64 |         component.template = '<span>未提供模板或render函数</span>'
 65 |       }
 66 | 
 67 |       // 注入mixins
 68 |       component.mixins = [{
 69 |         // 注入 beforeUpdate 钩子，用于子组件重绘时，清理父组件捕获的异常
 70 |         beforeUpdate: () => {
 71 |           this.subCompErr = null
 72 |         },
 73 |       }]
 74 | 
 75 |       // 通过computed注入一些变量，比如store中的一些字段，
 76 |       // 当store中的变量发生变化时，也会引发组件重绘
 77 |       const computed = component.computed || {}
 78 |       computed.variable = function variable() {
 79 |         const map = {}
 80 |         forEach(this.$store.state.variable.map, (value, key) => {
 81 |           map[key] = value
 82 |         })
 83 |         return map
 84 |       }
 85 |       component.computed = computed
 86 | 
 87 |       return result
 88 |     },
 89 |   },
 90 |   watch: {
 91 |     js() {
 92 |       // 当代码变化时，清空error，重绘
 93 |       this.subCompErr = null
 94 |     },
 95 |     template() {
 96 |       // 当代码变化时，清空error，重绘
 97 |       this.subCompErr = null
 98 |     },
 99 |     css() {
100 |       // 当代码变化时，清空error，重绘
101 |       this.subCompErr = null
102 |     },
103 |   },
104 |   methods: {
105 |     checkVariableField(component) {
106 |       // 如果需要注入一些变量，比如名字叫variable
107 |       let data = component.data
108 |       if (typeof data === 'function') {
109 |         // 如果data是函数，执行后取data的结果
110 |         // 用于行为无法预知，可能定义了错误的data，需要trycatch防崩
111 |         // catch的异常不用关心
112 |         try {
113 |           data = data()
114 |         } catch (e) {}
115 |       }
116 |       if (has(component, 'computed.variable')
117 |           || has(data, 'variable')
118 |       ) {
119 |         return {
120 |           error: {
121 |             type: '功能限制',
122 |             msg: '禁止自定义名称是variable的computed或data，会影响系统变量的使用',
123 |           },
124 |           value: { hasError: true },
125 |         }
126 |       }
127 |     },
128 |   },
129 |   render() {
130 |     const { error: compileErr, value: component } = this.component
131 |     const error = compileErr || this.subCompErr
132 |     let errorDom
133 |     if (error) {
134 |       errorDom = <div class='error-msg-wrapper'
135 |         style={{ position: !component.hasError ? 'absolute' : '' }}
136 |       >
137 |         <div>{error.type}</div>
138 |         <div>{error.msg}</div>
139 |       </div>
140 |     }
141 |     return <div class='code-preview-wrapper'>
142 |       <div class={this.className}>
143 |         <style>{this.scopedStyle}</style>
144 |         <component />
145 |       </div>
146 |       {errorDom}
147 |     </div>
148 |   },
149 |   mounted() {
150 |   },
151 |   errorCaptured(err, vm, info) {
152 |     this.subCompErr = {
153 |       msg: err && err.toString && err.toString(),
154 |       type: '自定义组件运行时错误：',
155 |     }
156 |     console.error('自定义组件运行时错误：', err, vm, info)
157 |   },
158 | }
159 | </script>
160 | <style lang='less' scoped>
161 | .code-preview-wrapper {
162 |   position: relative;
163 | 
164 |   .error-msg-wrapper {
165 |     top: 0;
166 |     left: 0;
167 |     right: 0;
168 |     bottom: 0;
169 |     z-index: 1;
170 |     background: #fff;
171 |     color: red;
172 |   }
173 | }
174 | </style>
175 | 


--------------------------------------------------------------------------------
/src/views/customCode/withMount.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import Vue from 'vue'
  3 | import has from 'lodash/has'
  4 | import forEach from 'lodash/forEach'
  5 | import { runFnInVm } from '@/utils/vm'
  6 | 
  7 | export default {
  8 |   name: 'codePreview',
  9 |   props: {
 10 |     template: String,
 11 |     js: String,
 12 |     css: String,
 13 |   },
 14 |   data() {
 15 |     return {
 16 |       uid: '', // Math.random().toString(36).slice(2),
 17 |       subCompErr: null,
 18 |     }
 19 |   },
 20 |   computed: {
 21 |     className() {
 22 |       return `custom-code-${this.uid}`
 23 |     },
 24 |     scopedStyle() {
 25 |       if (this.css) {
 26 |         const scope = `.${this.className}`
 27 |         const regex = /(^|\})\s*([^{]+)/g
 28 |         // 为class加前缀，做类似scope的效果
 29 |         return this.css.trim().replace(regex, (m, g1, g2) => {
 30 |           return g1 ? `${g1} ${scope} ${g2}` : `${scope} ${g2}`
 31 |         })
 32 |       }
 33 |       return ''
 34 |     },
 35 |     component() {
 36 |       const js = (this.js || '').trim()
 37 |       const result = runFnInVm(js, {})
 38 |       const component = result.value
 39 |       if (result.error) {
 40 |         result.error = {
 41 |           msg: result.error.toString(),
 42 |           type: 'js脚本错误',
 43 |         }
 44 |         result.value = { template: `<span id=${this.uid} />` }
 45 |         return result
 46 |       }
 47 | 
 48 |       // 如果需要注入一些变量，则对被注入的字段进行检测
 49 |       // 防止用户代码中定义了此字段，导致冲突
 50 |       // const resultTmp = this.checkVariableField(component)
 51 |       // if (resultTmp) {
 52 |       //   return resultTmp
 53 |       // }
 54 | 
 55 |       const template = (this.template || '')
 56 |         .replace(/^ *< *template *>|<\/ *template *> *$/g, '')
 57 |         .trim()
 58 | 
 59 |       // 需要对template注入含挂载id的外层dom，否则因丢失挂载id，无法刷新
 60 |       if (template) {
 61 |         component.template = `<span id=${this.uid}>${template}</span>`
 62 |       } else {
 63 |         component.template = `<span id=${this.uid}>未提供模板</span>`
 64 |       }
 65 | 
 66 |       // 因无法对render函数返回的dom注入含挂载id的外层dom，
 67 |       // 因此不支持此接口
 68 |       if (component.render) {
 69 |         return {
 70 |           error: {
 71 |             type: '功能限制',
 72 |             msg: '不支持render函数',
 73 |           },
 74 |           value: { template: `<span id=${this.uid} />` },
 75 |         }
 76 |       }
 77 | 
 78 |       // 注入errorCaptured, 用于错误自定义组件运行时捕获
 79 |       component.errorCaptured = (err, vm, info) => {
 80 |         this.subCompErr = {
 81 |           msg: err && err.toString && err.toString(),
 82 |           type: '自定义组件运行时错误：',
 83 |         }
 84 |         console.error('自定义组件运行时错误：', err, vm, info)
 85 |       }
 86 | 
 87 |       // 通过computed注入一些变量，比如store中的一些字段，
 88 |       // 当store中的变量发生变化时，也会引发组件重绘
 89 |       const computed = component.computed || {}
 90 |       computed.variable = () => {
 91 |         const map = {}
 92 |         forEach(this.$store.state.variable.map, (value, key) => {
 93 |           map[key] = value
 94 |         })
 95 |         return map
 96 |       }
 97 |       component.computed = computed
 98 | 
 99 |       return result
100 |     },
101 |   },
102 |   watch: {
103 |     component() {
104 |       this.mounteCode()
105 |     },
106 |     css() {
107 |       // 当代码变化时，清空error，重绘
108 |       this.subCompErr = null
109 |     },
110 |   },
111 |   methods: {
112 |     checkVariableField(component) {
113 |       // 如果需要注入一些变量，比如名字叫variable
114 |       let data = component.data
115 |       if (typeof data === 'function') {
116 |         // 如果data是函数，执行后取data的结果
117 |         // 用于行为无法预知，可能定义了错误的data，需要trycatch防崩
118 |         // catch的异常不用关心
119 |         try {
120 |           data = data()
121 |         } catch (e) {}
122 |       }
123 |       if (has(component, 'computed.variable')
124 |           || has(data, 'variable')
125 |       ) {
126 |         return {
127 |           error: {
128 |             type: '功能限制',
129 |             msg: '禁止自定义名称是variable的computed或data，会影响系统变量的使用',
130 |           },
131 |           value: { template: `<span id=${this.uid} />` },
132 |         }
133 |       }
134 |     },
135 |     mounteCode() {
136 |       this.subCompErr = null
137 |       const { value: component } = this.component
138 |       if (this.firstMounted) {
139 |         // 首次挂载组件时, 挂载点的dom有一定的延迟，延迟时间未知
140 |         // 需要一个相对长一点的异步
141 |         this.firstMounted = false
142 |         setTimeout(() => {
143 |           new Vue(component).$mount(`#${this.uid}`)
144 |         }, 50)
145 |       } else {
146 |         new Vue(component).$mount(`#${this.uid}`)
147 |       }
148 |     },
149 |   },
150 |   render() {
151 |     const error = this.component.error || this.subCompErr
152 |     let errorDom
153 |     if (error) {
154 |       errorDom = <div class='error-msg-wrapper'
155 |         style={{ position: !this.component.error ? 'absolute' : '' }}
156 |       >
157 |         <div>{error.type}</div>
158 |         <div>{error.msg}</div>
159 |       </div>
160 |     }
161 |     return <div class={['code-preview-wrapper', this.className]}>
162 |       <style>{this.scopedStyle}</style>
163 |       <span id={this.uid} />
164 |       {errorDom}
165 |     </div>
166 |   },
167 |   mounted() {
168 |     this.firstMounted = true
169 |     this.uid = `id_${Math.random().toString(36).slice(2)}`
170 |   },
171 | }
172 | </script>
173 | <style lang='less' scoped>
174 | .code-preview-wrapper {
175 |   position: relative;
176 | 
177 |   .error-msg-wrapper {
178 |     top: 0;
179 |     left: 0;
180 |     right: 0;
181 |     bottom: 0;
182 |     z-index: 1;
183 |     background: #fff;
184 |     color: red;
185 |   }
186 | }
187 | </style>
188 | 


--------------------------------------------------------------------------------
/src/views/home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="home-wrapper">
 3 |   <div class='name-wrapper'>
 4 |     <img class='logo' alt="Vue logo" src="../assets/logo.png">
 5 |     <label class='name'>vue-demo</label>
 6 |   </div>
 7 |   <div class='nav-wrapper'>
 8 |     <div v-for="item in demoLinks"
 9 |       :key="item.name"
10 |       class="item-wrapper"
11 |       >
12 |       <a-icon class='pre-icon' type="swap-right" />
13 |       <router-link :to="item.link">{{item.name}}</router-link>
14 |     </div>
15 |   </div>
16 | </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   name: 'Home',
22 |   data() {
23 |     return {
24 |       demoLinks: [{
25 |         name: '在线编代码编辑，实时预览',
26 |         link: '/custom-code',
27 |       }],
28 |     };
29 |   },
30 |   created() {
31 |     this.$store.commit('setState', { filePath: '' });
32 |   },
33 | };
34 | </script>
35 | 
36 | <style lang='less' scoped>
37 | .name-wrapper {
38 |   display: flex;
39 |   justify-content: center;
40 |   align-items: center;
41 | 
42 |   .logo {
43 |     margin: 10px 10px 0 0;
44 |     height: 70px;
45 |     width: 70px;
46 |   }
47 | 
48 |   .name {
49 |     font-size: 80px;
50 |     font-weight: 700;
51 |     font-style: italic;
52 |   }
53 | }
54 | .nav-wrapper {
55 |   padding: 30px;
56 |   text-align: center;
57 |   font-size: 20px;
58 | 
59 |   .item-wrapper {
60 |     display: flex;
61 |     align-items: center;
62 |     padding-left: 100px;
63 | 
64 |     &:hover {
65 |       color: #1890ff;
66 |     }
67 | 
68 |     a {
69 |       font-weight: bold;
70 |       color: #2c3e50;
71 |     }
72 | 
73 |     a:hover {
74 |       color: #1890ff;
75 |       border-bottom: 1px solid #1890ff;
76 |     }
77 | 
78 |     a.router-link-exact-active {
79 |       color: #42b983;
80 |     }
81 | 
82 |     .pre-icon {
83 |       font-size: 40px;
84 |       font-weight: 600;
85 |       padding-right: 20px;
86 |     }
87 |   }
88 | }
89 | </style>
90 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | const devServer = {
 4 |   port: 8000,
 5 |   watchOptions: {
 6 |     // poll: true,
 7 |   },
 8 |   disableHostCheck: true,
 9 | };
10 | 
11 | const chainWebpack = (config) => {
12 |   config.resolve.alias
13 |     .set('@', path.resolve(__dirname, 'src'))
14 |     .set('src', path.resolve(__dirname, 'src'))
15 |     .set('plugins', path.resolve(__dirname, 'src/plugins'))
16 |     .set('components', path.resolve(__dirname, 'src/components'))
17 |     .set('router', path.resolve(__dirname, 'src/router'))
18 |     .set('store', path.resolve(__dirname, 'src/store'))
19 |     .set('services', path.resolve(__dirname, 'src/services'))
20 |     .set('network', path.resolve(__dirname, 'src/network'))
21 |     .set('utils', path.resolve(__dirname, 'src/utils'))
22 |     .set('pages', path.resolve(__dirname, 'src/pages'))
23 |     .set('views', path.resolve(__dirname, 'src/views'));
24 | 
25 |   if (process.env.NODE_ENV === 'development') {
26 |     config.devtool(false);
27 |   }
28 | };
29 | 
30 | const pages = {
31 |   index: {
32 |     // page 的入口
33 |     entry: 'src/main.js',
34 |     // 模板来源
35 |     template: 'public/index.html',
36 |     // 在 dist/index.html 的输出
37 |     filename: 'index.html',
38 |     // 当使用 title 选项时，
39 |     // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
40 |     title: 'demo',
41 |     // 在这个页面中包含的块，默认情况下会包含
42 |     // 提取出来的通用 chunk 和 vendor chunk。
43 |     chunks: ['chunk-vendors', 'chunk-common', 'index'],
44 |   },
45 | };
46 | 
47 | module.exports = {
48 |   pages,
49 |   publicPath: './',
50 |   chainWebpack,
51 |   devServer,
52 |   // lintOnSave: false,
53 |   runtimeCompiler: true,
54 |   productionSourceMap: false,
55 | };
56 | 


--------------------------------------------------------------------------------