├── .browserslistrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── build
    └── rollup.config.js
├── dev
    ├── demo.vue
    ├── serve.js
    └── serve.vue
├── dist
    ├── vue-live-demo.esm.js
    ├── vue-live-demo.min.js
    └── vue-live-demo.ssr.js
├── docs
    ├── css
    │   ├── app.d2debdf5.css
    │   └── chunk-vendors.80b6bb14.css
    ├── index.html
    └── js
    │   ├── app.59141d7f.js
    │   ├── app.59141d7f.js.map
    │   ├── chunk-vendors.2b114182.js
    │   └── chunk-vendors.2b114182.js.map
├── package-lock.json
├── package.json
├── src
    ├── VueLiveDemo.vue
    ├── VueLiveEditor.vue
    ├── VueLivePreview.vue
    └── entry.js
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | current node
2 | last 2 versions and > 2%
3 | ie > 10
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_size = 2
 7 | indent_style = space
 8 | end_of_line = lf
 9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | dist
 2 | node_modules
 3 | *.js.map
 4 | *.d.ts
 5 | .yarn
 6 | logs
 7 | *.log
 8 | npm-debug.log*
 9 | yarn-debug.log*
10 | yarn-error.log*
11 | firelayer-debug.log*
12 | .cache
13 | .DS_Store
14 | Thumbs.db
15 | docs
16 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   root: true,
3 |   extends: [
4 |     '@indielayer/eslint-config-vue'
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | .cache
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020, Indielayer
 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
13 | all 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
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <a href="https://indielayer.com/">
 2 |   <img src="https://user-images.githubusercontent.com/3942799/90314498-25807a80-df0c-11ea-9e3a-b2b919bc9f10.png" alt="Indielayer" width="300" />
 3 | </a>
 4 | 
 5 | > Building digital products and empowering online companies
 6 | 
 7 | <br/>
 8 | 
 9 | # Vue Live Demo - SFC Editor
10 | 
11 | [![npm (scoped with tag)](https://flat.badgen.net/npm/v/@indielayer/vue-live-demo)](https://npmjs.com/package/@indielayer/vue-live-demo)
12 | [![npm](https://flat.badgen.net/npm/dt/@indielayer/vue-live-demo)](https://npmjs.com/package/@indielayer/vue-live-demo)
13 | 
14 | Vue Live Demo used on Indielayer
15 | 
16 | DEMO - [https://indielayer.github.io/vue-live-demo/](https://indielayer.github.io/vue-live-demo/)
17 | 
18 | ## Getting Started
19 | 
20 | Do you want to add to your own projects? There you go:
21 | 
22 | 1. Add this package to your dependencies
23 | 
24 | ```bash
25 | $ npm i @indielayer/vue-live-demo
26 | # or
27 | $ yarn add @indielayer/vue-live-demo
28 | ```
29 | 
30 | 2. Usage:
31 | 
32 | ```html
33 | <template>
34 |   <div style="padding-top: 100px">
35 | 
36 |     <vue-live-demo
37 |       :code="code"
38 |       :show-code="showCode"
39 |       :components="components"
40 |     />
41 | 
42 |   </div>
43 | </template>
44 | 
45 | <script>
46 | import VueLiveDemo from '@indielayer/vue-live-demo'
47 | 
48 | // Components you wish to add on the demo
49 | // import RandomComponent from './RandomComponent.vue'
50 | 
51 | export default {
52 |   components: {
53 |     VueLiveDemo
54 |   },
55 |   data() {
56 |     return {
57 |       // components you wish to add on the demo
58 |       components: {
59 |         // RandomComponent,
60 |       },
61 |       code: `<template><div>hello</div></template>`,
62 |       showCode: true
63 |     }
64 |   }
65 | }
66 | </script>
67 | ```
68 | 
69 | ### Missing features - TODO
70 | 
71 | - `import` other scripts in the Single File Component
72 | 
73 | 
74 | ## License
75 | 
76 | [MIT license](https://github.com/indielayer/vue-live-demo/blob/master/LICENSE) - Indielayer
77 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | const devPresets = ['@vue/babel-preset-app']
2 | const buildPresets = ['@babel/preset-env']
3 | 
4 | module.exports = {
5 |   presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets)
6 | }
7 | 


--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
  1 | // rollup.config.js
  2 | import fs from 'fs'
  3 | import path from 'path'
  4 | import vue from 'rollup-plugin-vue'
  5 | import alias from '@rollup/plugin-alias'
  6 | import commonjs from '@rollup/plugin-commonjs'
  7 | import replace from '@rollup/plugin-replace'
  8 | import babel from 'rollup-plugin-babel'
  9 | import { terser } from 'rollup-plugin-terser'
 10 | import minimist from 'minimist'
 11 | 
 12 | // Get browserslist config and remove ie from es build targets
 13 | const esbrowserslist = fs.readFileSync('./.browserslistrc')
 14 |   .toString()
 15 |   .split('\n')
 16 |   .filter((entry) => entry && entry.substring(0, 2) !== 'ie')
 17 | 
 18 | const argv = minimist(process.argv.slice(2))
 19 | 
 20 | const projectRoot = path.resolve(__dirname, '..')
 21 | 
 22 | const baseConfig = {
 23 |   input: 'src/entry.js',
 24 |   plugins: {
 25 |     preVue: [
 26 |       alias({
 27 |         resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 28 |         entries: {
 29 |           '@': path.resolve(projectRoot, 'src')
 30 |         }
 31 |       })
 32 |     ],
 33 |     replace: {
 34 |       'process.env.NODE_ENV': JSON.stringify('production'),
 35 |       'process.env.ES_BUILD': JSON.stringify('false')
 36 |     },
 37 |     vue: {
 38 |       css: true,
 39 |       template: {
 40 |         isProduction: true
 41 |       }
 42 |     },
 43 |     babel: {
 44 |       exclude: 'node_modules/**',
 45 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
 46 |     }
 47 |   }
 48 | }
 49 | 
 50 | // ESM/UMD/IIFE shared settings: externals
 51 | // Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
 52 | const external = [
 53 |   // list external dependencies, exactly the way it is written in the import statement.
 54 |   // eg. 'jquery'
 55 |   'vue',
 56 |   'vue-template-compiler/browser',
 57 |   'codemirror',
 58 |   '@emmetio/codemirror-plugin',
 59 |   'codemirror/lib/codemirror.css',
 60 |   'codemirror/theme/monokai.css',
 61 |   'codemirror/addon/selection/active-line',
 62 |   'codemirror/addon/edit/matchbrackets',
 63 |   'codemirror/mode/vue/vue',
 64 |   'lodash/debounce'
 65 | ]
 66 | 
 67 | // UMD/IIFE shared settings: output.globals
 68 | // Refer to https://rollupjs.org/guide/en#output-globals for details
 69 | const globals = {
 70 |   // Provide global variable names to replace your external imports
 71 |   // eg. jquery: '$'
 72 |   vue: 'Vue',
 73 |   'lodash/debounce': 'debounce',
 74 |   'codemirror': 'CodeMirror',
 75 |   '@emmetio/codemirror-plugin': 'emmet',
 76 |   'vue-template-compiler/browser': 'browser'
 77 | }
 78 | 
 79 | // Customize configs for individual targets
 80 | const buildFormats = []
 81 | 
 82 | if (!argv.format || argv.format === 'es') {
 83 |   const esConfig = {
 84 |     ...baseConfig,
 85 |     external,
 86 |     output: {
 87 |       file: 'dist/vue-live-demo.esm.js',
 88 |       format: 'esm',
 89 |       exports: 'named'
 90 |     },
 91 |     plugins: [
 92 |       replace({
 93 |         ...baseConfig.plugins.replace,
 94 |         'process.env.ES_BUILD': JSON.stringify('true')
 95 |       }),
 96 |       ...baseConfig.plugins.preVue,
 97 |       vue(baseConfig.plugins.vue),
 98 |       babel({
 99 |         ...baseConfig.plugins.babel,
100 |         presets: [
101 |           [
102 |             '@babel/preset-env',
103 |             {
104 |               targets: esbrowserslist
105 |             }
106 |           ]
107 |         ]
108 |       }),
109 |       commonjs()
110 |     ]
111 |   }
112 | 
113 |   buildFormats.push(esConfig)
114 | }
115 | 
116 | if (!argv.format || argv.format === 'cjs') {
117 |   const umdConfig = {
118 |     ...baseConfig,
119 |     external,
120 |     output: {
121 |       compact: true,
122 |       file: 'dist/vue-live-demo.ssr.js',
123 |       format: 'cjs',
124 |       name: 'VueLiveDemo',
125 |       exports: 'named',
126 |       globals
127 |     },
128 |     plugins: [
129 |       replace(baseConfig.plugins.replace),
130 |       ...baseConfig.plugins.preVue,
131 |       vue({
132 |         ...baseConfig.plugins.vue,
133 |         template: {
134 |           ...baseConfig.plugins.vue.template,
135 |           optimizeSSR: true
136 |         }
137 |       }),
138 |       babel(baseConfig.plugins.babel),
139 |       commonjs()
140 |     ]
141 |   }
142 | 
143 |   buildFormats.push(umdConfig)
144 | }
145 | 
146 | if (!argv.format || argv.format === 'iife') {
147 |   const unpkgConfig = {
148 |     ...baseConfig,
149 |     external,
150 |     output: {
151 |       compact: true,
152 |       file: 'dist/vue-live-demo.min.js',
153 |       format: 'iife',
154 |       name: 'VueLiveDemo',
155 |       exports: 'named',
156 |       globals
157 |     },
158 |     plugins: [
159 |       replace(baseConfig.plugins.replace),
160 |       ...baseConfig.plugins.preVue,
161 |       vue(baseConfig.plugins.vue),
162 |       babel(baseConfig.plugins.babel),
163 |       commonjs(),
164 |       terser({
165 |         output: {
166 |           ecma: 5
167 |         }
168 |       })
169 |     ]
170 |   }
171 | 
172 |   buildFormats.push(unpkgConfig)
173 | }
174 | 
175 | // Export config
176 | export default buildFormats
177 | 


--------------------------------------------------------------------------------
/dev/demo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h2>Preview - Groceries List</h2>
 4 |     <ul>
 5 |       <li v-for="(item, index) in list" :key="index">
 6 |         {{ item }}
 7 |       </li>
 8 |     </ul>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   data() {
15 |     return {
16 |       list: ['Apples', 'Fish', 'Oranges', 'Spaceships']
17 |     }
18 |   }
19 | }
20 | </script>
21 | 
22 | <style scoped>
23 |   ul {
24 |     list-style: square;
25 |   }
26 | 
27 |   ul li {
28 |     font-weight: bold;
29 |   }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/dev/serve.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Dev from './serve.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: (h) => h(Dev)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/dev/serve.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Vue from 'vue'
 3 | import VueLiveDemo from '@/VueLiveDemo.vue'
 4 | import DemoSnippet from '!!raw-loader!./demo.vue'
 5 | 
 6 | export default Vue.extend({
 7 |   name: 'ServeDev',
 8 |   components: {
 9 |     VueLiveDemo
10 |   },
11 |   data() {
12 |     return {
13 |       code: DemoSnippet,
14 |       showCode: true
15 |     }
16 |   }
17 | })
18 | </script>
19 | 
20 | <template>
21 |   <div id="app">
22 |     <div class="wrapper">
23 |       <h1>Vue Live Demo</h1>
24 |       <p>A component for live editing Vue single file components in the browser with real time preview.</p>
25 |       <a href="https://github.com/indielayer/vue-live-demo">https://github.com/indielayer/vue-live-demo</a>
26 | 
27 |       <vue-live-demo class="demo" :code="code" :show-code="showCode" />
28 |     </div>
29 |   </div>
30 | </template>
31 | 
32 | <style>
33 | #app {
34 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
35 |     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
36 | }
37 | 
38 | .wrapper {
39 |   max-width: 1200px;
40 |   margin: auto;
41 | }
42 | 
43 | .demo {
44 |   margin-top: 100px;
45 | }
46 | 
47 | .CodeMirror {
48 |   height: 500px;
49 | }
50 | </style>
51 | 


--------------------------------------------------------------------------------
/dist/vue-live-demo.esm.js:
--------------------------------------------------------------------------------
  1 | import CodeMirror from 'codemirror';
  2 | import emmet from '@emmetio/codemirror-plugin';
  3 | import 'codemirror/lib/codemirror.css';
  4 | import 'codemirror/theme/monokai.css';
  5 | import 'codemirror/addon/selection/active-line';
  6 | import 'codemirror/addon/edit/matchbrackets';
  7 | import 'codemirror/mode/vue/vue';
  8 | import debounce from 'lodash/debounce';
  9 | import { parseComponent, compile } from 'vue-template-compiler/browser';
 10 | 
 11 | //
 12 | emmet(CodeMirror);
 13 | var script = {
 14 |   props: {
 15 |     code: {
 16 |       type: String,
 17 |       default: ''
 18 |     }
 19 |   },
 20 | 
 21 |   data() {
 22 |     return {
 23 |       editor: null,
 24 |       copyLabel: 'Copy',
 25 |       originalCode: this.code
 26 |     };
 27 |   },
 28 | 
 29 |   mounted() {
 30 |     this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
 31 |       mode: 'vue',
 32 |       theme: 'monokai',
 33 |       value: '<template></template>',
 34 |       lineNumbers: true,
 35 |       lineWrapping: true,
 36 |       tabSize: 2,
 37 |       autofocus: false,
 38 |       line: true,
 39 |       styleActiveLine: true,
 40 |       matchBrackets: true,
 41 |       extraKeys: {
 42 |         Tab: 'emmetExpandAbbreviation',
 43 |         Enter: 'emmetInsertLineBreak'
 44 |       }
 45 |     });
 46 |     this.editor.on('change', debounce(() => {
 47 |       this.$emit('change', this.editor.getValue());
 48 |     }, 400));
 49 |     this.editor.setValue(this.code);
 50 |   },
 51 | 
 52 |   methods: {
 53 |     copyCode() {
 54 |       const el = document.createElement('textarea');
 55 |       el.value = this.editor.getValue();
 56 |       document.body.appendChild(el);
 57 |       el.select();
 58 |       document.execCommand('copy');
 59 |       document.body.removeChild(el);
 60 |       this.copyLabel = 'Copied!';
 61 |       setTimeout(() => {
 62 |         this.copyLabel = 'Copy';
 63 |       }, 3000);
 64 |     },
 65 | 
 66 |     resetCode() {
 67 |       this.editor.setValue(this.originalCode);
 68 |       this.$emit('change', this.editor.getValue());
 69 |     }
 70 | 
 71 |   }
 72 | };
 73 | 
 74 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
 75 |     if (typeof shadowMode !== 'boolean') {
 76 |         createInjectorSSR = createInjector;
 77 |         createInjector = shadowMode;
 78 |         shadowMode = false;
 79 |     }
 80 |     // Vue.extend constructor export interop.
 81 |     const options = typeof script === 'function' ? script.options : script;
 82 |     // render functions
 83 |     if (template && template.render) {
 84 |         options.render = template.render;
 85 |         options.staticRenderFns = template.staticRenderFns;
 86 |         options._compiled = true;
 87 |         // functional template
 88 |         if (isFunctionalTemplate) {
 89 |             options.functional = true;
 90 |         }
 91 |     }
 92 |     // scopedId
 93 |     if (scopeId) {
 94 |         options._scopeId = scopeId;
 95 |     }
 96 |     let hook;
 97 |     if (moduleIdentifier) {
 98 |         // server build
 99 |         hook = function (context) {
100 |             // 2.3 injection
101 |             context =
102 |                 context || // cached call
103 |                     (this.$vnode && this.$vnode.ssrContext) || // stateful
104 |                     (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
105 |             // 2.2 with runInNewContext: true
106 |             if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
107 |                 context = __VUE_SSR_CONTEXT__;
108 |             }
109 |             // inject component styles
110 |             if (style) {
111 |                 style.call(this, createInjectorSSR(context));
112 |             }
113 |             // register component module identifier for async chunk inference
114 |             if (context && context._registeredComponents) {
115 |                 context._registeredComponents.add(moduleIdentifier);
116 |             }
117 |         };
118 |         // used by ssr in case component is cached and beforeCreate
119 |         // never gets called
120 |         options._ssrRegister = hook;
121 |     }
122 |     else if (style) {
123 |         hook = shadowMode
124 |             ? function (context) {
125 |                 style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
126 |             }
127 |             : function (context) {
128 |                 style.call(this, createInjector(context));
129 |             };
130 |     }
131 |     if (hook) {
132 |         if (options.functional) {
133 |             // register for functional component in vue file
134 |             const originalRender = options.render;
135 |             options.render = function renderWithStyleInjection(h, context) {
136 |                 hook.call(context);
137 |                 return originalRender(h, context);
138 |             };
139 |         }
140 |         else {
141 |             // inject component registration as beforeCreate hook
142 |             const existing = options.beforeCreate;
143 |             options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
144 |         }
145 |     }
146 |     return script;
147 | }
148 | 
149 | const isOldIE = typeof navigator !== 'undefined' &&
150 |     /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
151 | function createInjector(context) {
152 |     return (id, style) => addStyle(id, style);
153 | }
154 | let HEAD;
155 | const styles = {};
156 | function addStyle(id, css) {
157 |     const group = isOldIE ? css.media || 'default' : id;
158 |     const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
159 |     if (!style.ids.has(id)) {
160 |         style.ids.add(id);
161 |         let code = css.source;
162 |         if (css.map) {
163 |             // https://developer.chrome.com/devtools/docs/javascript-debugging
164 |             // this makes source maps inside style tags work properly in Chrome
165 |             code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
166 |             // http://stackoverflow.com/a/26603875
167 |             code +=
168 |                 '\n/*# sourceMappingURL=data:application/json;base64,' +
169 |                     btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
170 |                     ' */';
171 |         }
172 |         if (!style.element) {
173 |             style.element = document.createElement('style');
174 |             style.element.type = 'text/css';
175 |             if (css.media)
176 |                 style.element.setAttribute('media', css.media);
177 |             if (HEAD === undefined) {
178 |                 HEAD = document.head || document.getElementsByTagName('head')[0];
179 |             }
180 |             HEAD.appendChild(style.element);
181 |         }
182 |         if ('styleSheet' in style.element) {
183 |             style.styles.push(code);
184 |             style.element.styleSheet.cssText = style.styles
185 |                 .filter(Boolean)
186 |                 .join('\n');
187 |         }
188 |         else {
189 |             const index = style.ids.size - 1;
190 |             const textNode = document.createTextNode(code);
191 |             const nodes = style.element.childNodes;
192 |             if (nodes[index])
193 |                 style.element.removeChild(nodes[index]);
194 |             if (nodes.length)
195 |                 style.element.insertBefore(textNode, nodes[index]);
196 |             else
197 |                 style.element.appendChild(textNode);
198 |         }
199 |     }
200 | }
201 | 
202 | /* script */
203 | const __vue_script__ = script;
204 | /* template */
205 | 
206 | var __vue_render__ = function () {
207 |   var _vm = this;
208 | 
209 |   var _h = _vm.$createElement;
210 | 
211 |   var _c = _vm._self._c || _h;
212 | 
213 |   return _c('div', {
214 |     staticClass: "editor"
215 |   }, [_c('div', {
216 |     staticClass: "editor-actions"
217 |   }, [_c('button', {
218 |     staticClass: "btn-reset",
219 |     on: {
220 |       "click": _vm.resetCode
221 |     }
222 |   }, [_vm._v("Reset")]), _vm._v(" "), _c('button', {
223 |     on: {
224 |       "click": _vm.copyCode
225 |     }
226 |   }, [_vm._v(_vm._s(_vm.copyLabel))])]), _vm._v(" "), _c('textarea', {
227 |     ref: "textarea"
228 |   })]);
229 | };
230 | 
231 | var __vue_staticRenderFns__ = [];
232 | /* style */
233 | 
234 | const __vue_inject_styles__ = function (inject) {
235 |   if (!inject) return;
236 |   inject("data-v-754b1f23_0", {
237 |     source: ".CodeMirror{font-family:Consolas,Monaco,\"Andale Mono\",\"Ubuntu Mono\",monospace;font-size:.875rem;font-weight:700;border-radius:6px;background-color:#101c23;flex:1}.CodeMirror-gutters{background-color:#101c23}.CodeMirror-activeline-background{background-color:#050a0d}.CodeMirror-scroll{padding:8px}",
238 |     map: undefined,
239 |     media: undefined
240 |   }), inject("data-v-754b1f23_1", {
241 |     source: ".editor[data-v-754b1f23]{position:relative;border-radius:6px;width:100%;display:flex;flex-direction:column}.editor-actions[data-v-754b1f23]{position:absolute;top:-34px;right:0}button[data-v-754b1f23]{text-transform:none;color:#fff;cursor:pointer;border-style:none;height:44px;min-width:78px;padding:0 20px;transition:all .2s;font-size:.875rem;font-weight:700;border-radius:6px;background-color:#282824;margin-left:8px}button[data-v-754b1f23]:focus{outline:0}button[data-v-754b1f23]:hover{transform:translateY(-14px)}button[data-v-754b1f23]:active{transform:translateY(-24px)}.btn-reset[data-v-754b1f23]{background-color:#4a4a45}",
242 |     map: undefined,
243 |     media: undefined
244 |   });
245 | };
246 | /* scoped */
247 | 
248 | 
249 | const __vue_scope_id__ = "data-v-754b1f23";
250 | /* module identifier */
251 | 
252 | const __vue_module_identifier__ = undefined;
253 | /* functional template */
254 | 
255 | const __vue_is_functional_template__ = false;
256 | /* style inject SSR */
257 | 
258 | /* style inject shadow dom */
259 | 
260 | const __vue_component__ = /*#__PURE__*/normalizeComponent({
261 |   render: __vue_render__,
262 |   staticRenderFns: __vue_staticRenderFns__
263 | }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
264 | 
265 | //
266 | var script$1 = {
267 |   errorCaptured(err) {
268 |     this.handleError(err);
269 |   },
270 | 
271 |   props: {
272 |     code: {
273 |       type: String,
274 |       required: true
275 |     },
276 |     components: {
277 |       type: Object,
278 |       default: () => ({})
279 |     }
280 |   },
281 | 
282 |   data() {
283 |     return {
284 |       scope: this.generateScope(),
285 |       previewedComponent: undefined,
286 |       iteration: 0,
287 |       error: false
288 |     };
289 |   },
290 | 
291 |   watch: {
292 |     code(value) {
293 |       this.renderComponent(value.trim());
294 |     }
295 | 
296 |   },
297 | 
298 |   created() {
299 |     this.renderComponent(this.code.trim());
300 |   },
301 | 
302 |   methods: {
303 |     generateScope() {
304 |       return 'v-xxxxxxxx'.replace(/[xy]/g, c => {
305 |         const r = Math.random() * 16 | 0;
306 |         const v = c === 'x' ? r : r & 0x3 | 0x8;
307 |         return v.toString(16);
308 |       });
309 |     },
310 | 
311 |     scopeStyle(style) {
312 |       return style.trim().replace(/(^|\})\s*([^{]+)/g, (m, g1, g2) => {
313 |         return g1 ? `${g1} .${this.scope} ${g2}` : `.${this.scope} ${g2}`;
314 |       });
315 |     },
316 | 
317 |     handleError(e) {
318 |       this.error = e.message;
319 |     },
320 | 
321 |     renderComponent(code) {
322 |       let appComponent = {};
323 | 
324 |       try {
325 |         const parsed = parseComponent(code);
326 |         appComponent = {
327 |           template: parsed.template ? parsed.template.content : code
328 |         };
329 | 
330 |         if (parsed.script) {
331 |           let {
332 |             content
333 |           } = parsed.script; // ignore all imports
334 | 
335 |           content = content.replace(/^import.*$/m, ''); // ignore components property
336 | 
337 |           content = content.replace(/components:\s?{[\s\S]*?},?/, ''); // eslint-disable-next-line no-eval
338 | 
339 |           const componentScript = eval(`(function() { ${content.replace('export default', 'return')} })`); // const componentScript = new Function(parsed.script.content.replace('export default', 'return'))
340 | 
341 |           const componentProperties = componentScript(); // check data() for return object
342 | 
343 |           if (componentProperties && componentProperties.data && typeof componentProperties.data() !== 'object') componentProperties.data = undefined;
344 |           appComponent = Object.assign({
345 |             template: parsed.template.content
346 |           }, componentProperties);
347 |         }
348 | 
349 |         if (parsed.styles && parsed.styles.length > 0) {
350 |           const styles = parsed.styles.map(s => s.content).join(' ');
351 | 
352 |           if (!this.elStyle) {
353 |             const head = document.head || document.getElementsByTagName('head')[0];
354 |             this.elStyle = document.createElement('style');
355 |             this.elStyle.type = 'text/css';
356 |             head.appendChild(this.elStyle);
357 |           }
358 | 
359 |           this.elStyle.innerHTML = this.scopeStyle(styles);
360 |         }
361 | 
362 |         const {
363 |           render,
364 |           staticRenderFns
365 |         } = compile(appComponent.template); // eslint-disable-next-line no-new-func
366 | 
367 |         appComponent.render = new Function(render); // eslint-disable-next-line no-new-func
368 | 
369 |         appComponent.staticRenderFns = staticRenderFns.map(s => new Function(s));
370 |       } catch (e) {
371 |         this.handleError(e);
372 |         return;
373 |       }
374 | 
375 |       appComponent.components = this.components;
376 | 
377 |       if (appComponent.template || appComponent.render) {
378 |         this.previewedComponent = appComponent;
379 |         this.iteration = this.iteration + 1;
380 |         this.error = false;
381 |       } else {
382 |         this.handleError({
383 |           message: 'No template or render function specified'
384 |         });
385 |       }
386 |     }
387 | 
388 |   }
389 | };
390 | 
391 | /* script */
392 | const __vue_script__$1 = script$1;
393 | /* template */
394 | 
395 | var __vue_render__$1 = function () {
396 |   var _vm = this;
397 | 
398 |   var _h = _vm.$createElement;
399 | 
400 |   var _c = _vm._self._c || _h;
401 | 
402 |   return _vm.error ? _c('pre', {
403 |     class: _vm.$style.error
404 |   }, [_vm._v(_vm._s(_vm.error))]) : _vm.previewedComponent ? _c(_vm.previewedComponent, {
405 |     key: _vm.iteration,
406 |     tag: "component",
407 |     class: _vm.scope
408 |   }) : _vm._e();
409 | };
410 | 
411 | var __vue_staticRenderFns__$1 = [];
412 | /* style */
413 | 
414 | const __vue_inject_styles__$1 = function (inject) {
415 |   if (!inject) return;
416 |   inject("data-v-602b2eea_0", {
417 |     source: ".src-error-fOY1{font-family:Consolas,Monaco,\"Andale Mono\",\"Ubuntu Mono\",monospace;font-size:.875rem;color:red;text-align:left;font-weight:700;overflow:auto;white-space:pre-wrap}",
418 |     map: undefined,
419 |     media: undefined
420 |   });
421 |   Object.defineProperty(this, "$style", {
422 |     value: {
423 |       "error": "src-error-fOY1"
424 |     }
425 |   });
426 | };
427 | /* scoped */
428 | 
429 | 
430 | const __vue_scope_id__$1 = undefined;
431 | /* module identifier */
432 | 
433 | const __vue_module_identifier__$1 = undefined;
434 | /* functional template */
435 | 
436 | const __vue_is_functional_template__$1 = false;
437 | /* style inject SSR */
438 | 
439 | /* style inject shadow dom */
440 | 
441 | const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
442 |   render: __vue_render__$1,
443 |   staticRenderFns: __vue_staticRenderFns__$1
444 | }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, createInjector, undefined, undefined);
445 | 
446 | //
447 | var script$2 = {
448 |   components: {
449 |     VueLiveEditor: __vue_component__,
450 |     VueLivePreview: __vue_component__$1
451 |   },
452 |   props: {
453 |     code: {
454 |       type: String,
455 |       default: ''
456 |     },
457 |     showCode: {
458 |       type: Boolean,
459 |       default: false
460 |     },
461 |     components: {
462 |       type: Object,
463 |       default: () => ({})
464 |     }
465 |   },
466 | 
467 |   data() {
468 |     return {
469 |       previewCode: this.code
470 |     };
471 |   }
472 | 
473 | };
474 | 
475 | /* script */
476 | const __vue_script__$2 = script$2;
477 | /* template */
478 | 
479 | var __vue_render__$2 = function () {
480 |   var _vm = this;
481 | 
482 |   var _h = _vm.$createElement;
483 | 
484 |   var _c = _vm._self._c || _h;
485 | 
486 |   return _c('div', {
487 |     staticClass: "editor-layout"
488 |   }, [_c('div', {
489 |     staticClass: "editor-preview",
490 |     class: {
491 |       'editor-layout-col': _vm.showCode
492 |     }
493 |   }, [_c('vue-live-preview', {
494 |     attrs: {
495 |       "code": _vm.previewCode,
496 |       "components": _vm.components
497 |     }
498 |   })], 1), _vm._v(" "), _vm.showCode ? _c('div', {
499 |     staticClass: "editor-layout-col editor-code"
500 |   }, [_c('vue-live-editor', {
501 |     attrs: {
502 |       "code": _vm.previewCode
503 |     },
504 |     on: {
505 |       "change": function (c) {
506 |         return _vm.previewCode = c;
507 |       }
508 |     }
509 |   })], 1) : _vm._e()]);
510 | };
511 | 
512 | var __vue_staticRenderFns__$2 = [];
513 | /* style */
514 | 
515 | const __vue_inject_styles__$2 = function (inject) {
516 |   if (!inject) return;
517 |   inject("data-v-6154bfcc_0", {
518 |     source: ".editor-layout[data-v-6154bfcc]{display:flex;width:100%;min-width:0;max-width:100%;flex-direction:column}.editor-preview[data-v-6154bfcc]{width:100%;max-width:100%}.editor-code[data-v-6154bfcc]{margin-top:42px;display:flex}@media (min-width:960px){.editor-layout[data-v-6154bfcc]{flex-direction:row}.editor-layout-col[data-v-6154bfcc]{width:50%;max-width:50%}.editor-code[data-v-6154bfcc]{margin-top:0;margin-left:14px;margin-right:2px}}",
519 |     map: undefined,
520 |     media: undefined
521 |   });
522 | };
523 | /* scoped */
524 | 
525 | 
526 | const __vue_scope_id__$2 = "data-v-6154bfcc";
527 | /* module identifier */
528 | 
529 | const __vue_module_identifier__$2 = undefined;
530 | /* functional template */
531 | 
532 | const __vue_is_functional_template__$2 = false;
533 | /* style inject SSR */
534 | 
535 | /* style inject shadow dom */
536 | 
537 | const __vue_component__$2 = /*#__PURE__*/normalizeComponent({
538 |   render: __vue_render__$2,
539 |   staticRenderFns: __vue_staticRenderFns__$2
540 | }, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, createInjector, undefined, undefined);
541 | 
542 | // Import vue component
543 | 
544 | const install = function installVueLiveDemo(Vue) {
545 |   if (install.installed) return;
546 |   install.installed = true;
547 |   Vue.component('VueLiveDemo', __vue_component__$2);
548 | }; // Create module definition for Vue.use()
549 | // to be registered via Vue.use() as well as Vue.component()
550 | 
551 | 
552 | __vue_component__$2.install = install; // Export component by default
553 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
554 | // export const RollupDemoDirective = component;
555 | 
556 | export default __vue_component__$2;
557 | 


--------------------------------------------------------------------------------
/dist/vue-live-demo.min.js:
--------------------------------------------------------------------------------
1 | var VueLiveDemo=function(exports,CodeMirror,emmet,codemirror_css,monokai_css,activeLine,matchbrackets,vue,debounce,browser){"use strict";CodeMirror=CodeMirror&&Object.prototype.hasOwnProperty.call(CodeMirror,"default")?CodeMirror.default:CodeMirror,emmet=emmet&&Object.prototype.hasOwnProperty.call(emmet,"default")?emmet.default:emmet,debounce=debounce&&Object.prototype.hasOwnProperty.call(debounce,"default")?debounce.default:debounce,emmet(CodeMirror);var script={props:{code:{type:String,default:""}},data:function(){return{editor:null,copyLabel:"Copy",originalCode:this.code}},mounted:function(){var e=this;this.editor=CodeMirror.fromTextArea(this.$refs.textarea,{mode:"vue",theme:"monokai",value:"<template></template>",lineNumbers:!0,lineWrapping:!0,tabSize:2,autofocus:!1,line:!0,styleActiveLine:!0,matchBrackets:!0,extraKeys:{Tab:"emmetExpandAbbreviation",Enter:"emmetInsertLineBreak"}}),this.editor.on("change",debounce((function(){e.$emit("change",e.editor.getValue())}),400)),this.editor.setValue(this.code)},methods:{copyCode:function(){var e=this,t=document.createElement("textarea");t.value=this.editor.getValue(),document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t),this.copyLabel="Copied!",setTimeout((function(){e.copyLabel="Copy"}),3e3)},resetCode:function(){this.editor.setValue(this.originalCode),this.$emit("change",this.editor.getValue())}}};function normalizeComponent(e,t,o,n,r,i,a,s,c,d){"boolean"!=typeof a&&(c=s,s=a,a=!1);const _="function"==typeof o?o.options:o;let l;if(e&&e.render&&(_.render=e.render,_.staticRenderFns=e.staticRenderFns,_._compiled=!0,r&&(_.functional=!0)),n&&(_._scopeId=n),i?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},_._ssrRegister=l):t&&(l=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),l)if(_.functional){const e=_.render;_.render=function(t,o){return l.call(o),e(t,o)}}else{const e=_.beforeCreate;_.beforeCreate=e?[].concat(e,l):[l]}return o}const isOldIE="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function createInjector(e){return(e,t)=>addStyle(e,t)}let HEAD;const styles={};function addStyle(e,t){const o=isOldIE?t.media||"default":e,n=styles[o]||(styles[o]={ids:new Set,styles:[]});if(!n.ids.has(e)){n.ids.add(e);let o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",t.media&&n.element.setAttribute("media",t.media),void 0===HEAD&&(HEAD=document.head||document.getElementsByTagName("head")[0]),HEAD.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(o),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{const e=n.ids.size-1,t=document.createTextNode(o),r=n.element.childNodes;r[e]&&n.element.removeChild(r[e]),r.length?n.element.insertBefore(t,r[e]):n.element.appendChild(t)}}}var __vue_script__=script,__vue_render__=function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"editor"},[o("div",{staticClass:"editor-actions"},[o("button",{staticClass:"btn-reset",on:{click:e.resetCode}},[e._v("Reset")]),e._v(" "),o("button",{on:{click:e.copyCode}},[e._v(e._s(e.copyLabel))])]),e._v(" "),o("textarea",{ref:"textarea"})])},__vue_staticRenderFns__=[],__vue_inject_styles__=function(e){e&&(e("data-v-754b1f23_0",{source:'.CodeMirror{font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:.875rem;font-weight:700;border-radius:6px;background-color:#101c23;flex:1}.CodeMirror-gutters{background-color:#101c23}.CodeMirror-activeline-background{background-color:#050a0d}.CodeMirror-scroll{padding:8px}',map:void 0,media:void 0}),e("data-v-754b1f23_1",{source:".editor[data-v-754b1f23]{position:relative;border-radius:6px;width:100%;display:flex;flex-direction:column}.editor-actions[data-v-754b1f23]{position:absolute;top:-34px;right:0}button[data-v-754b1f23]{text-transform:none;color:#fff;cursor:pointer;border-style:none;height:44px;min-width:78px;padding:0 20px;transition:all .2s;font-size:.875rem;font-weight:700;border-radius:6px;background-color:#282824;margin-left:8px}button[data-v-754b1f23]:focus{outline:0}button[data-v-754b1f23]:hover{transform:translateY(-14px)}button[data-v-754b1f23]:active{transform:translateY(-24px)}.btn-reset[data-v-754b1f23]{background-color:#4a4a45}",map:void 0,media:void 0}))},__vue_scope_id__="data-v-754b1f23",__vue_module_identifier__=void 0,__vue_is_functional_template__=!1,__vue_component__=normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,!1,createInjector,void 0,void 0);function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var script$1={errorCaptured:function(e){this.handleError(e)},props:{code:{type:String,required:!0},components:{type:Object,default:function(){return{}}}},data:function(){return{scope:this.generateScope(),previewedComponent:void 0,iteration:0,error:!1}},watch:{code:function(e){this.renderComponent(e.trim())}},created:function(){this.renderComponent(this.code.trim())},methods:{generateScope:function(){return"v-xxxxxxxx".replace(/[xy]/g,(function(e){var t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)}))},scopeStyle:function(e){var t=this;return e.trim().replace(/(^|\})\s*([^{]+)/g,(function(e,o,n){return o?"".concat(o," .").concat(t.scope," ").concat(n):".".concat(t.scope," ").concat(n)}))},handleError:function(e){this.error=e.message},renderComponent:function renderComponent(code){var appComponent={};try{var parsed=browser.parseComponent(code);if(appComponent={template:parsed.template?parsed.template.content:code},parsed.script){var content=parsed.script.content;content=content.replace(/^import.*$/m,""),content=content.replace(/components:\s?{[\s\S]*?},?/,"");var componentScript=eval("(function() { ".concat(content.replace("export default","return")," })")),componentProperties=componentScript();componentProperties&&componentProperties.data&&"object"!==_typeof(componentProperties.data())&&(componentProperties.data=void 0),appComponent=Object.assign({template:parsed.template.content},componentProperties)}if(parsed.styles&&parsed.styles.length>0){var styles=parsed.styles.map((function(e){return e.content})).join(" ");if(!this.elStyle){var head=document.head||document.getElementsByTagName("head")[0];this.elStyle=document.createElement("style"),this.elStyle.type="text/css",head.appendChild(this.elStyle)}this.elStyle.innerHTML=this.scopeStyle(styles)}var _compile=browser.compile(appComponent.template),render=_compile.render,staticRenderFns=_compile.staticRenderFns;appComponent.render=new Function(render),appComponent.staticRenderFns=staticRenderFns.map((function(e){return new Function(e)}))}catch(e){return void this.handleError(e)}appComponent.components=this.components,appComponent.template||appComponent.render?(this.previewedComponent=appComponent,this.iteration=this.iteration+1,this.error=!1):this.handleError({message:"No template or render function specified"})}}},__vue_script__$1=script$1,__vue_render__$1=function(){var e=this,t=e.$createElement,o=e._self._c||t;return e.error?o("pre",{class:e.$style.error},[e._v(e._s(e.error))]):e.previewedComponent?o(e.previewedComponent,{key:e.iteration,tag:"component",class:e.scope}):e._e()},__vue_staticRenderFns__$1=[],__vue_inject_styles__$1=function(e){e&&(e("data-v-602b2eea_0",{source:'.src-error-fOY1{font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:.875rem;color:red;text-align:left;font-weight:700;overflow:auto;white-space:pre-wrap}',map:void 0,media:void 0}),Object.defineProperty(this,"$style",{value:{error:"src-error-fOY1"}}))},__vue_scope_id__$1=void 0,__vue_module_identifier__$1=void 0,__vue_is_functional_template__$1=!1,__vue_component__$1=normalizeComponent({render:__vue_render__$1,staticRenderFns:__vue_staticRenderFns__$1},__vue_inject_styles__$1,__vue_script__$1,__vue_scope_id__$1,__vue_is_functional_template__$1,__vue_module_identifier__$1,!1,createInjector,void 0,void 0),script$2={components:{VueLiveEditor:__vue_component__,VueLivePreview:__vue_component__$1},props:{code:{type:String,default:""},showCode:{type:Boolean,default:!1},components:{type:Object,default:function(){return{}}}},data:function(){return{previewCode:this.code}}},__vue_script__$2=script$2,__vue_render__$2=function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"editor-layout"},[o("div",{staticClass:"editor-preview",class:{"editor-layout-col":e.showCode}},[o("vue-live-preview",{attrs:{code:e.previewCode,components:e.components}})],1),e._v(" "),e.showCode?o("div",{staticClass:"editor-layout-col editor-code"},[o("vue-live-editor",{attrs:{code:e.previewCode},on:{change:function(t){return e.previewCode=t}}})],1):e._e()])},__vue_staticRenderFns__$2=[],__vue_inject_styles__$2=function(e){e&&e("data-v-6154bfcc_0",{source:".editor-layout[data-v-6154bfcc]{display:flex;width:100%;min-width:0;max-width:100%;flex-direction:column}.editor-preview[data-v-6154bfcc]{width:100%;max-width:100%}.editor-code[data-v-6154bfcc]{margin-top:42px;display:flex}@media (min-width:960px){.editor-layout[data-v-6154bfcc]{flex-direction:row}.editor-layout-col[data-v-6154bfcc]{width:50%;max-width:50%}.editor-code[data-v-6154bfcc]{margin-top:0;margin-left:14px;margin-right:2px}}",map:void 0,media:void 0})},__vue_scope_id__$2="data-v-6154bfcc",__vue_module_identifier__$2=void 0,__vue_is_functional_template__$2=!1,__vue_component__$2=normalizeComponent({render:__vue_render__$2,staticRenderFns:__vue_staticRenderFns__$2},__vue_inject_styles__$2,__vue_script__$2,__vue_scope_id__$2,__vue_is_functional_template__$2,__vue_module_identifier__$2,!1,createInjector,void 0,void 0),install=function(e){install.installed||(install.installed=!0,e.component("VueLiveDemo",__vue_component__$2))},plugin={install:install},GlobalVue=null;return"undefined"!=typeof window?GlobalVue=window.Vue:"undefined"!=typeof global&&(GlobalVue=global.Vue),GlobalVue&&GlobalVue.use(plugin),__vue_component__$2.install=install,exports.default=__vue_component__$2,exports}({},CodeMirror,emmet,null,null,null,null,null,debounce,browser);


--------------------------------------------------------------------------------
/dist/vue-live-demo.ssr.js:
--------------------------------------------------------------------------------
  1 | 'use strict';Object.defineProperty(exports,'__esModule',{value:true});function _interopDefault(e){return(e&&(typeof e==='object')&&'default'in e)?e['default']:e}var CodeMirror=_interopDefault(require('codemirror')),emmet=_interopDefault(require('@emmetio/codemirror-plugin'));require('codemirror/lib/codemirror.css'),require('codemirror/theme/monokai.css'),require('codemirror/addon/selection/active-line'),require('codemirror/addon/edit/matchbrackets'),require('codemirror/mode/vue/vue');var debounce=_interopDefault(require('lodash/debounce')),browser=require('vue-template-compiler/browser');//
  2 | emmet(CodeMirror);
  3 | var script = {
  4 |   props: {
  5 |     code: {
  6 |       type: String,
  7 |       default: ''
  8 |     }
  9 |   },
 10 |   data: function data() {
 11 |     return {
 12 |       editor: null,
 13 |       copyLabel: 'Copy',
 14 |       originalCode: this.code
 15 |     };
 16 |   },
 17 |   mounted: function mounted() {
 18 |     var _this = this;
 19 | 
 20 |     this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
 21 |       mode: 'vue',
 22 |       theme: 'monokai',
 23 |       value: '<template></template>',
 24 |       lineNumbers: true,
 25 |       lineWrapping: true,
 26 |       tabSize: 2,
 27 |       autofocus: false,
 28 |       line: true,
 29 |       styleActiveLine: true,
 30 |       matchBrackets: true,
 31 |       extraKeys: {
 32 |         Tab: 'emmetExpandAbbreviation',
 33 |         Enter: 'emmetInsertLineBreak'
 34 |       }
 35 |     });
 36 |     this.editor.on('change', debounce(function () {
 37 |       _this.$emit('change', _this.editor.getValue());
 38 |     }, 400));
 39 |     this.editor.setValue(this.code);
 40 |   },
 41 |   methods: {
 42 |     copyCode: function copyCode() {
 43 |       var _this2 = this;
 44 | 
 45 |       var el = document.createElement('textarea');
 46 |       el.value = this.editor.getValue();
 47 |       document.body.appendChild(el);
 48 |       el.select();
 49 |       document.execCommand('copy');
 50 |       document.body.removeChild(el);
 51 |       this.copyLabel = 'Copied!';
 52 |       setTimeout(function () {
 53 |         _this2.copyLabel = 'Copy';
 54 |       }, 3000);
 55 |     },
 56 |     resetCode: function resetCode() {
 57 |       this.editor.setValue(this.originalCode);
 58 |       this.$emit('change', this.editor.getValue());
 59 |     }
 60 |   }
 61 | };function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
 62 |     if (typeof shadowMode !== 'boolean') {
 63 |         createInjectorSSR = createInjector;
 64 |         createInjector = shadowMode;
 65 |         shadowMode = false;
 66 |     }
 67 |     // Vue.extend constructor export interop.
 68 |     const options = typeof script === 'function' ? script.options : script;
 69 |     // render functions
 70 |     if (template && template.render) {
 71 |         options.render = template.render;
 72 |         options.staticRenderFns = template.staticRenderFns;
 73 |         options._compiled = true;
 74 |         // functional template
 75 |         if (isFunctionalTemplate) {
 76 |             options.functional = true;
 77 |         }
 78 |     }
 79 |     // scopedId
 80 |     if (scopeId) {
 81 |         options._scopeId = scopeId;
 82 |     }
 83 |     let hook;
 84 |     if (moduleIdentifier) {
 85 |         // server build
 86 |         hook = function (context) {
 87 |             // 2.3 injection
 88 |             context =
 89 |                 context || // cached call
 90 |                     (this.$vnode && this.$vnode.ssrContext) || // stateful
 91 |                     (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
 92 |             // 2.2 with runInNewContext: true
 93 |             if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
 94 |                 context = __VUE_SSR_CONTEXT__;
 95 |             }
 96 |             // inject component styles
 97 |             if (style) {
 98 |                 style.call(this, createInjectorSSR(context));
 99 |             }
100 |             // register component module identifier for async chunk inference
101 |             if (context && context._registeredComponents) {
102 |                 context._registeredComponents.add(moduleIdentifier);
103 |             }
104 |         };
105 |         // used by ssr in case component is cached and beforeCreate
106 |         // never gets called
107 |         options._ssrRegister = hook;
108 |     }
109 |     else if (style) {
110 |         hook = shadowMode
111 |             ? function (context) {
112 |                 style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
113 |             }
114 |             : function (context) {
115 |                 style.call(this, createInjector(context));
116 |             };
117 |     }
118 |     if (hook) {
119 |         if (options.functional) {
120 |             // register for functional component in vue file
121 |             const originalRender = options.render;
122 |             options.render = function renderWithStyleInjection(h, context) {
123 |                 hook.call(context);
124 |                 return originalRender(h, context);
125 |             };
126 |         }
127 |         else {
128 |             // inject component registration as beforeCreate hook
129 |             const existing = options.beforeCreate;
130 |             options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
131 |         }
132 |     }
133 |     return script;
134 | }function createInjectorSSR(context) {
135 |     if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
136 |         context = __VUE_SSR_CONTEXT__;
137 |     }
138 |     if (!context)
139 |         return () => { };
140 |     if (!('styles' in context)) {
141 |         context._styles = context._styles || {};
142 |         Object.defineProperty(context, 'styles', {
143 |             enumerable: true,
144 |             get: () => context._renderStyles(context._styles)
145 |         });
146 |         context._renderStyles = context._renderStyles || renderStyles;
147 |     }
148 |     return (id, style) => addStyle(id, style, context);
149 | }
150 | function addStyle(id, css, context) {
151 |     const group =  css.media || 'default' ;
152 |     const style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
153 |     if (!style.ids.includes(id)) {
154 |         style.media = css.media;
155 |         style.ids.push(id);
156 |         let code = css.source;
157 |         style.css += code + '\n';
158 |     }
159 | }
160 | function renderStyles(styles) {
161 |     let css = '';
162 |     for (const key in styles) {
163 |         const style = styles[key];
164 |         css +=
165 |             '<style data-vue-ssr-id="' +
166 |                 Array.from(style.ids).join(' ') +
167 |                 '"' +
168 |                 (style.media ? ' media="' + style.media + '"' : '') +
169 |                 '>' +
170 |                 style.css +
171 |                 '</style>';
172 |     }
173 |     return css;
174 | }/* script */
175 | var __vue_script__ = script;
176 | /* template */
177 | 
178 | var __vue_render__ = function __vue_render__() {
179 |   var _vm = this;
180 | 
181 |   var _h = _vm.$createElement;
182 | 
183 |   var _c = _vm._self._c || _h;
184 | 
185 |   return _c('div', {
186 |     staticClass: "editor"
187 |   }, [_vm._ssrNode("<div class=\"editor-actions\" data-v-754b1f23><button class=\"btn-reset\" data-v-754b1f23>Reset</button> <button data-v-754b1f23>" + _vm._ssrEscape(_vm._s(_vm.copyLabel)) + "</button></div> <textarea data-v-754b1f23></textarea>")]);
188 | };
189 | 
190 | var __vue_staticRenderFns__ = [];
191 | /* style */
192 | 
193 | var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
194 |   if (!inject) return;
195 |   inject("data-v-754b1f23_0", {
196 |     source: ".CodeMirror{font-family:Consolas,Monaco,\"Andale Mono\",\"Ubuntu Mono\",monospace;font-size:.875rem;font-weight:700;border-radius:6px;background-color:#101c23;flex:1}.CodeMirror-gutters{background-color:#101c23}.CodeMirror-activeline-background{background-color:#050a0d}.CodeMirror-scroll{padding:8px}",
197 |     map: undefined,
198 |     media: undefined
199 |   }), inject("data-v-754b1f23_1", {
200 |     source: ".editor[data-v-754b1f23]{position:relative;border-radius:6px;width:100%;display:flex;flex-direction:column}.editor-actions[data-v-754b1f23]{position:absolute;top:-34px;right:0}button[data-v-754b1f23]{text-transform:none;color:#fff;cursor:pointer;border-style:none;height:44px;min-width:78px;padding:0 20px;transition:all .2s;font-size:.875rem;font-weight:700;border-radius:6px;background-color:#282824;margin-left:8px}button[data-v-754b1f23]:focus{outline:0}button[data-v-754b1f23]:hover{transform:translateY(-14px)}button[data-v-754b1f23]:active{transform:translateY(-24px)}.btn-reset[data-v-754b1f23]{background-color:#4a4a45}",
201 |     map: undefined,
202 |     media: undefined
203 |   });
204 | };
205 | /* scoped */
206 | 
207 | 
208 | var __vue_scope_id__ = "data-v-754b1f23";
209 | /* module identifier */
210 | 
211 | var __vue_module_identifier__ = "data-v-754b1f23";
212 | /* functional template */
213 | 
214 | var __vue_is_functional_template__ = false;
215 | /* style inject shadow dom */
216 | 
217 | var __vue_component__ = /*#__PURE__*/normalizeComponent({
218 |   render: __vue_render__,
219 |   staticRenderFns: __vue_staticRenderFns__
220 | }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, createInjectorSSR, undefined);function _typeof(obj) {
221 |   "@babel/helpers - typeof";
222 | 
223 |   if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
224 |     _typeof = function (obj) {
225 |       return typeof obj;
226 |     };
227 |   } else {
228 |     _typeof = function (obj) {
229 |       return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
230 |     };
231 |   }
232 | 
233 |   return _typeof(obj);
234 | }var script$1 = {
235 |   errorCaptured: function errorCaptured(err) {
236 |     this.handleError(err);
237 |   },
238 |   props: {
239 |     code: {
240 |       type: String,
241 |       required: true
242 |     },
243 |     components: {
244 |       type: Object,
245 |       default: function _default() {
246 |         return {};
247 |       }
248 |     }
249 |   },
250 |   data: function data() {
251 |     return {
252 |       scope: this.generateScope(),
253 |       previewedComponent: undefined,
254 |       iteration: 0,
255 |       error: false
256 |     };
257 |   },
258 |   watch: {
259 |     code: function code(value) {
260 |       this.renderComponent(value.trim());
261 |     }
262 |   },
263 |   created: function created() {
264 |     this.renderComponent(this.code.trim());
265 |   },
266 |   methods: {
267 |     generateScope: function generateScope() {
268 |       return 'v-xxxxxxxx'.replace(/[xy]/g, function (c) {
269 |         var r = Math.random() * 16 | 0;
270 |         var v = c === 'x' ? r : r & 0x3 | 0x8;
271 |         return v.toString(16);
272 |       });
273 |     },
274 |     scopeStyle: function scopeStyle(style) {
275 |       var _this = this;
276 | 
277 |       return style.trim().replace(/(^|\})\s*([^{]+)/g, function (m, g1, g2) {
278 |         return g1 ? "".concat(g1, " .").concat(_this.scope, " ").concat(g2) : ".".concat(_this.scope, " ").concat(g2);
279 |       });
280 |     },
281 |     handleError: function handleError(e) {
282 |       this.error = e.message;
283 |     },
284 |     renderComponent: function renderComponent(code) {
285 |       var appComponent = {};
286 | 
287 |       try {
288 |         var parsed = browser.parseComponent(code);
289 |         appComponent = {
290 |           template: parsed.template ? parsed.template.content : code
291 |         };
292 | 
293 |         if (parsed.script) {
294 |           var content = parsed.script.content; // ignore all imports
295 | 
296 |           content = content.replace(/^import.*$/m, ''); // ignore components property
297 | 
298 |           content = content.replace(/components:\s?{[\s\S]*?},?/, ''); // eslint-disable-next-line no-eval
299 | 
300 |           var componentScript = eval("(function() { ".concat(content.replace('export default', 'return'), " })")); // const componentScript = new Function(parsed.script.content.replace('export default', 'return'))
301 | 
302 |           var componentProperties = componentScript(); // check data() for return object
303 | 
304 |           if (componentProperties && componentProperties.data && _typeof(componentProperties.data()) !== 'object') componentProperties.data = undefined;
305 |           appComponent = Object.assign({
306 |             template: parsed.template.content
307 |           }, componentProperties);
308 |         }
309 | 
310 |         if (parsed.styles && parsed.styles.length > 0) {
311 |           var styles = parsed.styles.map(function (s) {
312 |             return s.content;
313 |           }).join(' ');
314 | 
315 |           if (!this.elStyle) {
316 |             var head = document.head || document.getElementsByTagName('head')[0];
317 |             this.elStyle = document.createElement('style');
318 |             this.elStyle.type = 'text/css';
319 |             head.appendChild(this.elStyle);
320 |           }
321 | 
322 |           this.elStyle.innerHTML = this.scopeStyle(styles);
323 |         }
324 | 
325 |         var _compile = browser.compile(appComponent.template),
326 |             render = _compile.render,
327 |             staticRenderFns = _compile.staticRenderFns; // eslint-disable-next-line no-new-func
328 | 
329 | 
330 |         appComponent.render = new Function(render); // eslint-disable-next-line no-new-func
331 | 
332 |         appComponent.staticRenderFns = staticRenderFns.map(function (s) {
333 |           return new Function(s);
334 |         });
335 |       } catch (e) {
336 |         this.handleError(e);
337 |         return;
338 |       }
339 | 
340 |       appComponent.components = this.components;
341 | 
342 |       if (appComponent.template || appComponent.render) {
343 |         this.previewedComponent = appComponent;
344 |         this.iteration = this.iteration + 1;
345 |         this.error = false;
346 |       } else {
347 |         this.handleError({
348 |           message: 'No template or render function specified'
349 |         });
350 |       }
351 |     }
352 |   }
353 | };/* script */
354 | var __vue_script__$1 = script$1;
355 | /* template */
356 | 
357 | var __vue_render__$1 = function __vue_render__() {
358 |   var _vm = this;
359 | 
360 |   var _h = _vm.$createElement;
361 | 
362 |   var _c = _vm._self._c || _h;
363 | 
364 |   return _vm.error ? _c('pre', {
365 |     class: _vm.$style.error
366 |   }, [_vm._ssrNode(_vm._ssrEscape(_vm._s(_vm.error)))], 2) : _vm.previewedComponent ? _c(_vm.previewedComponent, {
367 |     key: _vm.iteration,
368 |     tag: "component",
369 |     class: _vm.scope
370 |   }) : _vm._e();
371 | };
372 | 
373 | var __vue_staticRenderFns__$1 = [];
374 | /* style */
375 | 
376 | var __vue_inject_styles__$1 = function __vue_inject_styles__(inject) {
377 |   if (!inject) return;
378 |   inject("data-v-602b2eea_0", {
379 |     source: ".src-error-fOY1{font-family:Consolas,Monaco,\"Andale Mono\",\"Ubuntu Mono\",monospace;font-size:.875rem;color:red;text-align:left;font-weight:700;overflow:auto;white-space:pre-wrap}",
380 |     map: undefined,
381 |     media: undefined
382 |   });
383 |   Object.defineProperty(this, "$style", {
384 |     value: {
385 |       "error": "src-error-fOY1"
386 |     }
387 |   });
388 | };
389 | /* scoped */
390 | 
391 | 
392 | var __vue_scope_id__$1 = undefined;
393 | /* module identifier */
394 | 
395 | var __vue_module_identifier__$1 = "data-v-602b2eea";
396 | /* functional template */
397 | 
398 | var __vue_is_functional_template__$1 = false;
399 | /* style inject shadow dom */
400 | 
401 | var __vue_component__$1 = /*#__PURE__*/normalizeComponent({
402 |   render: __vue_render__$1,
403 |   staticRenderFns: __vue_staticRenderFns__$1
404 | }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, createInjectorSSR, undefined);//
405 | var script$2 = {
406 |   components: {
407 |     VueLiveEditor: __vue_component__,
408 |     VueLivePreview: __vue_component__$1
409 |   },
410 |   props: {
411 |     code: {
412 |       type: String,
413 |       default: ''
414 |     },
415 |     showCode: {
416 |       type: Boolean,
417 |       default: false
418 |     },
419 |     components: {
420 |       type: Object,
421 |       default: function _default() {
422 |         return {};
423 |       }
424 |     }
425 |   },
426 |   data: function data() {
427 |     return {
428 |       previewCode: this.code
429 |     };
430 |   }
431 | };/* script */
432 | var __vue_script__$2 = script$2;
433 | /* template */
434 | 
435 | var __vue_render__$2 = function __vue_render__() {
436 |   var _vm = this;
437 | 
438 |   var _h = _vm.$createElement;
439 | 
440 |   var _c = _vm._self._c || _h;
441 | 
442 |   return _c('div', {
443 |     staticClass: "editor-layout"
444 |   }, [_vm._ssrNode("<div" + _vm._ssrClass("editor-preview", {
445 |     'editor-layout-col': _vm.showCode
446 |   }) + " data-v-6154bfcc>", "</div>", [_c('vue-live-preview', {
447 |     attrs: {
448 |       "code": _vm.previewCode,
449 |       "components": _vm.components
450 |     }
451 |   })], 1), _vm._ssrNode(" "), _vm.showCode ? _vm._ssrNode("<div class=\"editor-layout-col editor-code\" data-v-6154bfcc>", "</div>", [_c('vue-live-editor', {
452 |     attrs: {
453 |       "code": _vm.previewCode
454 |     },
455 |     on: {
456 |       "change": function change(c) {
457 |         return _vm.previewCode = c;
458 |       }
459 |     }
460 |   })], 1) : _vm._e()], 2);
461 | };
462 | 
463 | var __vue_staticRenderFns__$2 = [];
464 | /* style */
465 | 
466 | var __vue_inject_styles__$2 = function __vue_inject_styles__(inject) {
467 |   if (!inject) return;
468 |   inject("data-v-6154bfcc_0", {
469 |     source: ".editor-layout[data-v-6154bfcc]{display:flex;width:100%;min-width:0;max-width:100%;flex-direction:column}.editor-preview[data-v-6154bfcc]{width:100%;max-width:100%}.editor-code[data-v-6154bfcc]{margin-top:42px;display:flex}@media (min-width:960px){.editor-layout[data-v-6154bfcc]{flex-direction:row}.editor-layout-col[data-v-6154bfcc]{width:50%;max-width:50%}.editor-code[data-v-6154bfcc]{margin-top:0;margin-left:14px;margin-right:2px}}",
470 |     map: undefined,
471 |     media: undefined
472 |   });
473 | };
474 | /* scoped */
475 | 
476 | 
477 | var __vue_scope_id__$2 = "data-v-6154bfcc";
478 | /* module identifier */
479 | 
480 | var __vue_module_identifier__$2 = "data-v-6154bfcc";
481 | /* functional template */
482 | 
483 | var __vue_is_functional_template__$2 = false;
484 | /* style inject shadow dom */
485 | 
486 | var __vue_component__$2 = /*#__PURE__*/normalizeComponent({
487 |   render: __vue_render__$2,
488 |   staticRenderFns: __vue_staticRenderFns__$2
489 | }, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, createInjectorSSR, undefined);// Import vue component
490 | 
491 | var install = function installVueLiveDemo(Vue) {
492 |   if (install.installed) return;
493 |   install.installed = true;
494 |   Vue.component('VueLiveDemo', __vue_component__$2);
495 | }; // Create module definition for Vue.use()
496 | 
497 | 
498 | var plugin = {
499 |   install: install
500 | }; // To auto-install on non-es builds, when vue is found
501 | // eslint-disable-next-line no-redeclare
502 | 
503 | /* global window, global */
504 | 
505 | {
506 |   var GlobalVue = null;
507 | 
508 |   if (typeof window !== 'undefined') {
509 |     GlobalVue = window.Vue;
510 |   } else if (typeof global !== 'undefined') {
511 |     GlobalVue = global.Vue;
512 |   }
513 | 
514 |   if (GlobalVue) {
515 |     GlobalVue.use(plugin);
516 |   }
517 | } // Inject install function into component - allows component
518 | // to be registered via Vue.use() as well as Vue.component()
519 | 
520 | 
521 | __vue_component__$2.install = install; // Export component by default
522 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
523 | // export const RollupDemoDirective = component;
524 | exports.default=__vue_component__$2;


--------------------------------------------------------------------------------
/docs/css/app.d2debdf5.css:
--------------------------------------------------------------------------------
1 | .CodeMirror{font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:.875rem;font-weight:700;border-radius:6px;flex:1}.CodeMirror,.CodeMirror-gutters{background-color:#101c23}.CodeMirror-activeline-background{background-color:#050a0d}.CodeMirror-scroll{padding:8px}.editor[data-v-0bc6ff90]{position:relative;border-radius:6px;width:100%;display:flex;flex-direction:column}.editor-actions[data-v-0bc6ff90]{position:absolute;top:-34px;right:0}button[data-v-0bc6ff90]{text-transform:none;color:#fff;cursor:pointer;border-style:none;height:44px;min-width:78px;padding:0 20px;transition:all .2s;font-size:.875rem;font-weight:700;border-radius:6px;background-color:#282824;margin-left:8px}button[data-v-0bc6ff90]:focus{outline:none}button[data-v-0bc6ff90]:hover{transform:translateY(-14px)}button[data-v-0bc6ff90]:active{transform:translateY(-24px)}.btn-reset[data-v-0bc6ff90]{background-color:#4a4a45}.VueLivePreview_error_fOY1Q{font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:.875rem;color:red;text-align:left;font-weight:700;overflow:auto;white-space:pre-wrap}.editor-layout[data-v-ce415dbe]{display:flex;width:100%;min-width:0;max-width:100%;flex-direction:column}.editor-preview[data-v-ce415dbe]{width:100%;max-width:100%}.editor-code[data-v-ce415dbe]{margin-top:42px;display:flex}@media (min-width:960px){.editor-layout[data-v-ce415dbe]{flex-direction:row}.editor-layout-col[data-v-ce415dbe]{width:50%;max-width:50%}.editor-code[data-v-ce415dbe]{margin-top:0;margin-left:14px;margin-right:2px}}#app{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.wrapper{max-width:1200px;margin:auto}.demo{margin-top:100px}.CodeMirror{height:500px}


--------------------------------------------------------------------------------
/docs/css/chunk-vendors.80b6bb14.css:
--------------------------------------------------------------------------------
1 | .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}.CodeMirror-lines{padding:4px 0}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-fat-cursor-mark{background-color:rgba(20,255,20,.5);animation:blink 1.06s steps(1) infinite}.cm-animate-fat-cursor{width:auto;border:0;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-rulers{position:absolute;left:0;right:0;top:-50px;bottom:0;overflow:hidden}.CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-type,.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:none;position:relative}.CodeMirror-sizer{position:relative;border-right:50px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:none!important;border:none!important}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-gutter-wrapper ::selection{background-color:transparent}.CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like{border-radius:0;border-width:0;background:transparent;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;font-variant-ligatures:contextual}.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}.CodeMirror-rtl pre{direction:rtl}.CodeMirror-code{outline:none}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute;pointer-events:none}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background-color:#ffa;background-color:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:""}span.CodeMirror-selectedtext{background:none}.cm-s-monokai.CodeMirror{background:#272822;color:#f8f8f2}.cm-s-monokai div.CodeMirror-selected{background:#49483e}.cm-s-monokai .CodeMirror-line::selection,.cm-s-monokai .CodeMirror-line>span::selection,.cm-s-monokai .CodeMirror-line>span>span::selection{background:rgba(73,72,62,.99)}.cm-s-monokai .CodeMirror-line::-moz-selection,.cm-s-monokai .CodeMirror-line>span::-moz-selection,.cm-s-monokai .CodeMirror-line>span>span::-moz-selection{background:rgba(73,72,62,.99)}.cm-s-monokai .CodeMirror-gutters{background:#272822;border-right:0}.cm-s-monokai .CodeMirror-guttermarker{color:#fff}.cm-s-monokai .CodeMirror-guttermarker-subtle,.cm-s-monokai .CodeMirror-linenumber{color:#d0d0d0}.cm-s-monokai .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-monokai span.cm-comment{color:#75715e}.cm-s-monokai span.cm-atom,.cm-s-monokai span.cm-number{color:#ae81ff}.cm-s-monokai span.cm-comment.cm-attribute{color:#97b757}.cm-s-monokai span.cm-comment.cm-def{color:#bc9262}.cm-s-monokai span.cm-comment.cm-tag{color:#bc6283}.cm-s-monokai span.cm-comment.cm-type{color:#5998a6}.cm-s-monokai span.cm-attribute,.cm-s-monokai span.cm-property{color:#a6e22e}.cm-s-monokai span.cm-keyword{color:#f92672}.cm-s-monokai span.cm-builtin{color:#66d9ef}.cm-s-monokai span.cm-string{color:#e6db74}.cm-s-monokai span.cm-variable{color:#f8f8f2}.cm-s-monokai span.cm-variable-2{color:#9effff}.cm-s-monokai span.cm-type,.cm-s-monokai span.cm-variable-3{color:#66d9ef}.cm-s-monokai span.cm-def{color:#fd971f}.cm-s-monokai span.cm-bracket{color:#f8f8f2}.cm-s-monokai span.cm-tag{color:#f92672}.cm-s-monokai span.cm-header,.cm-s-monokai span.cm-link{color:#ae81ff}.cm-s-monokai span.cm-error{background:#f92672;color:#f8f8f0}.cm-s-monokai .CodeMirror-activeline-background{background:#373831}.cm-s-monokai .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Vue App</title><link href=/vue-live-demo/css/app.d2debdf5.css rel=preload as=style><link href=/vue-live-demo/css/chunk-vendors.80b6bb14.css rel=preload as=style><link href=/vue-live-demo/js/app.59141d7f.js rel=preload as=script><link href=/vue-live-demo/js/chunk-vendors.2b114182.js rel=preload as=script><link href=/vue-live-demo/css/chunk-vendors.80b6bb14.css rel=stylesheet><link href=/vue-live-demo/css/app.d2debdf5.css rel=stylesheet></head><body><div id=app></div><script src=/vue-live-demo/js/chunk-vendors.2b114182.js></script><script src=/vue-live-demo/js/app.59141d7f.js></script></body></html>


--------------------------------------------------------------------------------
/docs/js/app.59141d7f.js:
--------------------------------------------------------------------------------
1 | (function(e){function t(t){for(var o,a,c=t[0],s=t[1],p=t[2],u=0,d=[];u<c.length;u++)a=c[u],Object.prototype.hasOwnProperty.call(r,a)&&r[a]&&d.push(r[a][0]),r[a]=0;for(o in s)Object.prototype.hasOwnProperty.call(s,o)&&(e[o]=s[o]);l&&l(t);while(d.length)d.shift()();return i.push.apply(i,p||[]),n()}function n(){for(var e,t=0;t<i.length;t++){for(var n=i[t],o=!0,c=1;c<n.length;c++){var s=n[c];0!==r[s]&&(o=!1)}o&&(i.splice(t--,1),e=a(a.s=n[0]))}return e}var o={},r={app:0},i=[];function a(t){if(o[t])return o[t].exports;var n=o[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,a),n.l=!0,n.exports}a.m=e,a.c=o,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)a.d(n,o,function(t){return e[t]}.bind(null,o));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/vue-live-demo/";var c=window["webpackJsonp"]=window["webpackJsonp"]||[],s=c.push.bind(c);c.push=t,c=c.slice();for(var p=0;p<c.length;p++)t(c[p]);var l=s;i.push(["8c94","chunk-vendors"]),n()})({"29e9":function(e,t,n){"use strict";var o=n("9963"),r=n.n(o);r.a},"3c93":function(module,__webpack_exports__,__webpack_require__){"use strict";var vue_template_compiler_browser__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("5ce8"),vue_template_compiler_browser__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(vue_template_compiler_browser__WEBPACK_IMPORTED_MODULE_0__);function _typeof(e){return _typeof="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"===typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_typeof(e)}__webpack_exports__["a"]={errorCaptured:function(e){this.handleError(e)},props:{code:{type:String,required:!0},components:{type:Object,default:function(){return{}}}},data:function(){return{scope:this.generateScope(),previewedComponent:void 0,iteration:0,error:!1}},watch:{code:function(e){this.renderComponent(e.trim())}},created:function(){this.renderComponent(this.code.trim())},methods:{generateScope:function(){return"v-xxxxxxxx".replace(/[xy]/g,(function(e){var t=16*Math.random()|0,n="x"===e?t:3&t|8;return n.toString(16)}))},scopeStyle:function(e){var t=this;return e.trim().replace(/(^|\})\s*([^{]+)/g,(function(e,n,o){return n?"".concat(n," .").concat(t.scope," ").concat(o):".".concat(t.scope," ").concat(o)}))},handleError:function(e){this.error=e.message},renderComponent:function renderComponent(code){var appComponent={};try{var parsed=Object(vue_template_compiler_browser__WEBPACK_IMPORTED_MODULE_0__["parseComponent"])(code);if(appComponent={template:parsed.template?parsed.template.content:code},parsed.script){var content=parsed.script.content;content=content.replace(/^import.*$/m,""),content=content.replace(/components:\s?{[\s\S]*?},?/,"");var componentScript=eval("(function() { ".concat(content.replace("export default","return")," })")),componentProperties=componentScript();componentProperties&&componentProperties.data&&"object"!==_typeof(componentProperties.data())&&(componentProperties.data=void 0),appComponent=Object.assign({template:parsed.template.content},componentProperties)}if(parsed.styles&&parsed.styles.length>0){var styles=parsed.styles.map((function(e){return e.content})).join(" ");if(!this.elStyle){var head=document.head||document.getElementsByTagName("head")[0];this.elStyle=document.createElement("style"),this.elStyle.type="text/css",head.appendChild(this.elStyle)}this.elStyle.innerHTML=this.scopeStyle(styles)}var _compile=Object(vue_template_compiler_browser__WEBPACK_IMPORTED_MODULE_0__["compile"])(appComponent.template),render=_compile.render,staticRenderFns=_compile.staticRenderFns;appComponent.render=new Function(render),appComponent.staticRenderFns=staticRenderFns.map((function(e){return new Function(e)}))}catch(e){return void this.handleError(e)}appComponent.components=this.components,appComponent.template||appComponent.render?(this.previewedComponent=appComponent,this.iteration=this.iteration+1,this.error=!1):this.handleError({message:"No template or render function specified"})}}}},"74c6":function(e,t,n){},8524:function(e,t,n){},"8c94":function(e,t,n){"use strict";n.r(t);var o=n("2b0e"),r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"app"}},[n("div",{staticClass:"wrapper"},[n("h1",[e._v("Vue Live Demo")]),n("p",[e._v("A component for live editing Vue single file components in the browser with real time preview.")]),n("a",{attrs:{href:"https://github.com/indielayer/vue-live-demo"}},[e._v("https://github.com/indielayer/vue-live-demo")]),n("vue-live-demo",{staticClass:"demo",attrs:{code:e.code,"show-code":e.showCode}})],1)])},i=[],a=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"editor-layout"},[n("div",{staticClass:"editor-preview",class:{"editor-layout-col":e.showCode}},[n("vue-live-preview",{attrs:{code:e.previewCode,components:e.components}})],1),e.showCode?n("div",{staticClass:"editor-layout-col editor-code"},[n("vue-live-editor",{attrs:{code:e.previewCode},on:{change:function(t){return e.previewCode=t}}})],1):e._e()])},c=[],s=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"editor"},[n("div",{staticClass:"editor-actions"},[n("button",{staticClass:"btn-reset",on:{click:e.resetCode}},[e._v("Reset")]),n("button",{on:{click:e.copyCode}},[e._v(e._s(e.copyLabel))])]),n("textarea",{ref:"textarea"})])},p=[],l=n("56b3"),u=n.n(l),d=n("49e7"),m=(n("a7be"),n("7a7a"),n("31c5"),n("8c33"),n("693d"),n("b047")),f=n.n(m);Object(d["a"])(u.a);var _={props:{code:{type:String,default:""}},data:function(){return{editor:null,copyLabel:"Copy",originalCode:this.code}},mounted:function(){var e=this;this.editor=u.a.fromTextArea(this.$refs.textarea,{mode:"vue",theme:"monokai",value:"<template></template>",lineNumbers:!0,lineWrapping:!0,tabSize:2,autofocus:!1,line:!0,styleActiveLine:!0,matchBrackets:!0,extraKeys:{Tab:"emmetExpandAbbreviation",Enter:"emmetInsertLineBreak"}}),this.editor.on("change",f()((function(){e.$emit("change",e.editor.getValue())}),400)),this.editor.setValue(this.code)},methods:{copyCode:function(){var e=this,t=document.createElement("textarea");t.value=this.editor.getValue(),document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t),this.copyLabel="Copied!",setTimeout((function(){e.copyLabel="Copy"}),3e3)},resetCode:function(){this.editor.setValue(this.originalCode),this.$emit("change",this.editor.getValue())}}},v=_,h=(n("c939"),n("29e9"),n("2877")),y=Object(h["a"])(v,s,p,!1,null,"0bc6ff90",null),b=y.exports,C=function(){var e=this,t=e.$createElement,n=e._self._c||t;return e.error?n("pre",{class:e.$style.error},[e._v(e._s(e.error))]):e.previewedComponent?n(e.previewedComponent,{key:e.iteration,tag:"component",class:e.scope}):e._e()},w=[],g=n("3c93"),x=g["a"],O=n("ae13");function E(e){this["$style"]=O["default"].locals||O["default"]}var S=Object(h["a"])(x,C,w,!1,E,null,null),P=S.exports,j={components:{VueLiveEditor:b,VueLivePreview:P},props:{code:{type:String,default:""},showCode:{type:Boolean,default:!1},components:{type:Object,default:function(){return{}}}},data:function(){return{previewCode:this.code}}},L=j,M=(n("ea1e"),Object(h["a"])(L,a,c,!1,null,"ce415dbe",null)),k=M.exports,D="<template>\n  <div>\n    <h2>Preview - Groceries List</h2>\n    <ul>\n      <li v-for=\"(item, index) in list\" :key=\"index\">\n        {{ item }}\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      list: ['Apples', 'Fish', 'Oranges', 'Spaceships']\n    }\n  }\n}\n<\/script>\n\n<style scoped>\n  ul {\n    list-style: square;\n  }\n\n  ul li {\n    font-weight: bold;\n  }\n</style>\n",T=o["a"].extend({name:"ServeDev",components:{VueLiveDemo:k},data:function(){return{code:D,showCode:!0}}}),V=T,$=(n("cf01"),Object(h["a"])(V,r,i,!1,null,null,null)),A=$.exports;o["a"].config.productionTip=!1,new o["a"]({render:function(e){return e(A)}}).$mount("#app")},"8eca":function(e,t,n){},9963:function(e,t,n){},ae13:function(e,t,n){"use strict";var o=n("baf4"),r=n.n(o);t["default"]=r.a},baf4:function(e,t,n){e.exports={error:"VueLivePreview_error_fOY1Q"}},c939:function(e,t,n){"use strict";var o=n("74c6"),r=n.n(o);r.a},cf01:function(e,t,n){"use strict";var o=n("8524"),r=n.n(o);r.a},ea1e:function(e,t,n){"use strict";var o=n("8eca"),r=n.n(o);r.a}});
2 | //# sourceMappingURL=app.59141d7f.js.map


--------------------------------------------------------------------------------
/docs/js/app.59141d7f.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/VueLiveEditor.vue?f383","webpack:///src/VueLivePreview.vue","webpack:///./dev/serve.vue?4263","webpack:///./src/VueLiveDemo.vue?8703","webpack:///./src/VueLiveEditor.vue?b711","webpack:///src/VueLiveEditor.vue","webpack:///./src/VueLiveEditor.vue?875c","webpack:///./src/VueLiveEditor.vue","webpack:///./src/VueLivePreview.vue?1c5c","webpack:///./src/VueLivePreview.vue?13bf","webpack:///./src/VueLivePreview.vue","webpack:///src/VueLiveDemo.vue","webpack:///./src/VueLiveDemo.vue?9d04","webpack:///./src/VueLiveDemo.vue","webpack:///./dev/demo.vue","webpack:///dev/serve.vue","webpack:///./dev/serve.vue?534d","webpack:///./dev/serve.vue","webpack:///./dev/serve.js","webpack:///./src/VueLivePreview.vue?1b27","webpack:///./src/VueLivePreview.vue?dc26","webpack:///./src/VueLiveEditor.vue?c519","webpack:///./dev/serve.vue?d4b8","webpack:///./src/VueLiveDemo.vue?c0f9"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","errorCaptured","this","handleError","err","props","code","type","String","required","components","default","scope","generateScope","previewedComponent","undefined","iteration","error","watch","renderComponent","trim","created","methods","replace","v","toString","scopeStyle","style","g1","e","message","appComponent","template","parsed","content","script","componentProperties","assign","styles","elStyle","document","createElement","head","appendChild","innerHTML","render","Function","staticRenderFns","map","_vm","_h","$createElement","_c","_self","attrs","staticClass","_v","showCode","class","previewCode","on","_e","resetCode","copyCode","_s","copyLabel","ref","editor","originalCode","mounted","theme","lineNumbers","lineWrapping","tabSize","autofocus","line","styleActiveLine","matchBrackets","extraKeys","Tab","Enter","setValue","el","getValue","body","select","execCommand","removeChild","setTimeout","$emit","component","$style","tag","injectStyles","context","locals","VueLiveEditor","VueLivePreview","Boolean","VueLiveDemo","Vue","config","productionTip","h","Dev","$mount"],"mappings":"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","file":"js/app.59141d7f.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"app\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/vue-live-demo/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([\"8c94\",\"chunk-vendors\"]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","import mod from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLiveEditor.vue?vue&type=style&index=1&id=0bc6ff90&scoped=true&lang=css&\"; export default mod; export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLiveEditor.vue?vue&type=style&index=1&id=0bc6ff90&scoped=true&lang=css&\"","<template>\n  <pre v-if=\"error\" :class=\"$style.error\">{{ error }}</pre>\n  <component\n    :is=\"previewedComponent\"\n    v-else-if=\"previewedComponent\"\n    :key=\"iteration\"\n    :class=\"scope\"\n  />\n</template>\n\n<script>\nimport { parseComponent, compile } from 'vue-template-compiler/browser'\n\nexport default {\n  errorCaptured(err) {\n    this.handleError(err)\n  },\n  props: {\n    code: {\n      type: String,\n      required: true\n    },\n    components: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  data() {\n    return {\n      scope: this.generateScope(),\n      previewedComponent: undefined,\n      iteration: 0,\n      error: false\n    }\n  },\n  watch: {\n    code(value) {\n      this.renderComponent(value.trim())\n    }\n  },\n  created() {\n    this.renderComponent(this.code.trim())\n  },\n  methods: {\n    generateScope() {\n      return 'v-xxxxxxxx'.replace(/[xy]/g, (c) => {\n        const r = (Math.random() * 16) | 0\n        const v = c === 'x' ? r : (r & 0x3) | 0x8\n\n        return v.toString(16)\n      })\n    },\n    scopeStyle (style) {\n      return style.trim().replace(/(^|\\})\\s*([^{]+)/g, (m, g1, g2) => {\n        return g1 ? `${g1} .${this.scope} ${g2}` : `.${this.scope} ${g2}`\n      })\n    },\n    handleError(e) {\n      this.error = e.message\n    },\n    renderComponent(code) {\n      let appComponent = {}\n\n      try {\n        const parsed = parseComponent(code)\n\n        appComponent = {\n          template: parsed.template ? parsed.template.content : code\n        }\n\n        if (parsed.script) {\n          let { content } = parsed.script\n\n          // ignore all imports\n          content = content.replace(/^import.*$/m, '')\n\n          // ignore components property\n          content = content.replace(/components:\\s?{[\\s\\S]*?},?/, '')\n\n          // eslint-disable-next-line no-eval\n          const componentScript = eval(`(function() { ${content.replace('export default', 'return')} })`)\n          // const componentScript = new Function(parsed.script.content.replace('export default', 'return'))\n\n          const componentProperties = componentScript()\n\n          // check data() for return object\n          if (componentProperties && componentProperties.data && typeof componentProperties.data() !== 'object') componentProperties.data = undefined\n\n          appComponent = Object.assign({ template: parsed.template.content }, componentProperties)\n        }\n\n        if (parsed.styles && parsed.styles.length > 0) {\n          const styles = parsed.styles.map((s) => s.content).join(' ')\n\n          if (!this.elStyle) {\n            const head = document.head || document.getElementsByTagName('head')[0]\n\n            this.elStyle = document.createElement('style')\n            this.elStyle.type = 'text/css'\n            head.appendChild(this.elStyle)\n          }\n\n          this.elStyle.innerHTML = this.scopeStyle(styles)\n        }\n\n        const { render, staticRenderFns } = compile(appComponent.template)\n\n        // eslint-disable-next-line no-new-func\n        appComponent.render = new Function(render)\n        // eslint-disable-next-line no-new-func\n        appComponent.staticRenderFns = staticRenderFns.map((s) => new Function(s))\n      } catch (e) {\n        this.handleError(e)\n\n        return\n      }\n\n      appComponent.components = this.components\n\n      if (appComponent.template || appComponent.render) {\n        this.previewedComponent = appComponent\n        this.iteration = this.iteration + 1\n        this.error = false\n      } else {\n        this.handleError({\n          message: 'No template or render function specified'\n        })\n      }\n    }\n  }\n}\n</script>\n\n<style module>\n.error {\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  font-size: 0.875rem;\n  color: red;\n  text-align: left;\n  font-weight: bold;\n  overflow: auto;\n  white-space: pre-wrap;\n}\n</style>\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('div',{staticClass:\"wrapper\"},[_c('h1',[_vm._v(\"Vue Live Demo\")]),_c('p',[_vm._v(\"A component for live editing Vue single file components in the browser with real time preview.\")]),_c('a',{attrs:{\"href\":\"https://github.com/indielayer/vue-live-demo\"}},[_vm._v(\"https://github.com/indielayer/vue-live-demo\")]),_c('vue-live-demo',{staticClass:\"demo\",attrs:{\"code\":_vm.code,\"show-code\":_vm.showCode}})],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"editor-layout\"},[_c('div',{staticClass:\"editor-preview\",class:{ 'editor-layout-col': _vm.showCode }},[_c('vue-live-preview',{attrs:{\"code\":_vm.previewCode,\"components\":_vm.components}})],1),(_vm.showCode)?_c('div',{staticClass:\"editor-layout-col editor-code\"},[_c('vue-live-editor',{attrs:{\"code\":_vm.previewCode},on:{\"change\":function (c) { return _vm.previewCode = c; }}})],1):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"editor\"},[_c('div',{staticClass:\"editor-actions\"},[_c('button',{staticClass:\"btn-reset\",on:{\"click\":_vm.resetCode}},[_vm._v(\"Reset\")]),_c('button',{on:{\"click\":_vm.copyCode}},[_vm._v(_vm._s(_vm.copyLabel))])]),_c('textarea',{ref:\"textarea\"})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"editor\">\n    <div class=\"editor-actions\">\n      <button class=\"btn-reset\" @click=\"resetCode\">Reset</button>\n      <button @click=\"copyCode\">{{ copyLabel }}</button>\n    </div>\n    <textarea ref=\"textarea\"></textarea>\n  </div>\n</template>\n\n<script>\nimport CodeMirror from 'codemirror'\nimport emmet from '@emmetio/codemirror-plugin'\nimport 'codemirror/lib/codemirror.css'\nimport 'codemirror/theme/monokai.css'\nimport 'codemirror/addon/selection/active-line'\nimport 'codemirror/addon/edit/matchbrackets'\nimport 'codemirror/mode/vue/vue'\nimport debounce from 'lodash/debounce'\n\nemmet(CodeMirror)\n\nexport default {\n  props: {\n    code: {\n      type: String,\n      default: ''\n    }\n  },\n  data() {\n    return {\n      editor: null,\n      copyLabel: 'Copy',\n      originalCode: this.code\n    }\n  },\n  mounted() {\n    this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {\n      mode: 'vue',\n      theme: 'monokai',\n      value: '<template></template>',\n      lineNumbers: true,\n      lineWrapping: true,\n      tabSize: 2,\n      autofocus: false,\n      line: true,\n      styleActiveLine: true,\n      matchBrackets: true,\n      extraKeys: {\n        Tab: 'emmetExpandAbbreviation',\n        Enter: 'emmetInsertLineBreak'\n      }\n    })\n\n    this.editor.on('change',\n      debounce(() => {\n        this.$emit('change', this.editor.getValue())\n      }, 400)\n    )\n\n    this.editor.setValue(this.code)\n  },\n  methods: {\n    copyCode() {\n      const el = document.createElement('textarea')\n\n      el.value = this.editor.getValue()\n      document.body.appendChild(el)\n      el.select()\n      document.execCommand('copy')\n      document.body.removeChild(el)\n\n      this.copyLabel = 'Copied!'\n\n      setTimeout(() => {\n        this.copyLabel = 'Copy'\n      }, 3000)\n    },\n    resetCode() {\n      this.editor.setValue(this.originalCode)\n      this.$emit('change', this.editor.getValue())\n    }\n  }\n}\n</script>\n\n<style>\n.CodeMirror {\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  font-size: 0.875rem;\n  font-weight: bold;\n  border-radius: 6px;\n  background-color: #101c23;\n  flex: 1;\n}\n\n.CodeMirror-gutters {\n  background-color: #101c23;\n}\n\n.CodeMirror-activeline-background {\n  background-color: #050a0d;\n}\n\n.CodeMirror-scroll {\n  padding: 8px;\n}\n</style>\n\n<style scoped>\n.editor {\n  position: relative;\n  border-radius: 6px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n.editor-actions {\n  position: absolute;\n  top: -34px;\n  right: 0;\n}\n\nbutton {\n  text-transform: none;\n  color: #fff;\n  cursor: pointer;\n  border-style: none;\n  height: 44px;\n  min-width: 78px;\n  padding: 0 20px;\n  transition: all 0.2s;\n  font-size: 0.875rem;\n  font-weight: bold;\n  border-radius: 6px;\n  background-color: #282824;\n  margin-left: 8px;\n}\n\nbutton:focus {\n  outline: none;\n}\n\nbutton:hover {\n  transform: translateY(-14px);\n}\n\nbutton:active {\n  transform: translateY(-24px);\n}\n\n.btn-reset {\n  background-color: #4a4a45;\n}\n</style>\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLiveEditor.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLiveEditor.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VueLiveEditor.vue?vue&type=template&id=0bc6ff90&scoped=true&\"\nimport script from \"./VueLiveEditor.vue?vue&type=script&lang=js&\"\nexport * from \"./VueLiveEditor.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VueLiveEditor.vue?vue&type=style&index=0&lang=css&\"\nimport style1 from \"./VueLiveEditor.vue?vue&type=style&index=1&id=0bc6ff90&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"0bc6ff90\",\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.error)?_c('pre',{class:_vm.$style.error},[_vm._v(_vm._s(_vm.error))]):(_vm.previewedComponent)?_c(_vm.previewedComponent,{key:_vm.iteration,tag:\"component\",class:_vm.scope}):_vm._e()}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLivePreview.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLivePreview.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VueLivePreview.vue?vue&type=template&id=2f3bb233&\"\nimport script from \"./VueLivePreview.vue?vue&type=script&lang=js&\"\nexport * from \"./VueLivePreview.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VueLivePreview.vue?vue&type=style&index=0&module=true&lang=css&\"\n\n\n\n\nfunction injectStyles (context) {\n  \n  this[\"$style\"] = (style0.locals || style0)\n\n}\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  injectStyles,\n  null,\n  null\n  \n)\n\nexport default component.exports","<template>\n  <div class=\"editor-layout\">\n    <div class=\"editor-preview\" :class=\"{ 'editor-layout-col': showCode }\">\n      <vue-live-preview :code=\"previewCode\" :components=\"components\" />\n    </div>\n    <div v-if=\"showCode\" class=\"editor-layout-col editor-code\">\n      <vue-live-editor :code=\"previewCode\" @change=\"(c) => previewCode = c\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport VueLiveEditor from '@/VueLiveEditor'\nimport VueLivePreview from '@/VueLivePreview'\n\nexport default {\n  components: {\n    VueLiveEditor,\n    VueLivePreview\n  },\n  props: {\n    code: {\n      type: String,\n      default: ''\n    },\n    showCode: {\n      type: Boolean,\n      default: false\n    },\n    components: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  data() {\n    return {\n      previewCode: this.code\n    }\n  }\n}\n</script>\n\n<style scoped>\n.editor-layout {\n  display: flex;\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n  flex-direction: column;\n}\n\n.editor-preview {\n  width: 100%;\n  max-width: 100%;\n}\n\n.editor-code {\n  margin-top: 42px;\n  display: flex;\n}\n\n@media (min-width: 960px) {\n  .editor-layout {\n    flex-direction: row;\n  }\n\n  .editor-layout-col {\n    width: 50%;\n    max-width: 50%;\n  }\n\n  .editor-code {\n    margin-top: 0;\n    margin-left: 14px;\n    margin-right: 2px;\n  }\n}\n</style>\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLiveDemo.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLiveDemo.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VueLiveDemo.vue?vue&type=template&id=ce415dbe&scoped=true&\"\nimport script from \"./VueLiveDemo.vue?vue&type=script&lang=js&\"\nexport * from \"./VueLiveDemo.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VueLiveDemo.vue?vue&type=style&index=0&id=ce415dbe&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"ce415dbe\",\n  null\n  \n)\n\nexport default component.exports","export default \"<template>\\n  <div>\\n    <h2>Preview - Groceries List</h2>\\n    <ul>\\n      <li v-for=\\\"(item, index) in list\\\" :key=\\\"index\\\">\\n        {{ item }}\\n      </li>\\n    </ul>\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data() {\\n    return {\\n      list: ['Apples', 'Fish', 'Oranges', 'Spaceships']\\n    }\\n  }\\n}\\n</script>\\n\\n<style scoped>\\n  ul {\\n    list-style: square;\\n  }\\n\\n  ul li {\\n    font-weight: bold;\\n  }\\n</style>\\n\";","<script>\nimport Vue from 'vue'\nimport VueLiveDemo from '@/VueLiveDemo.vue'\nimport DemoSnippet from '!!raw-loader!./demo.vue'\n\nexport default Vue.extend({\n  name: 'ServeDev',\n  components: {\n    VueLiveDemo\n  },\n  data() {\n    return {\n      code: DemoSnippet,\n      showCode: true\n    }\n  }\n})\n</script>\n\n<template>\n  <div id=\"app\">\n    <div class=\"wrapper\">\n      <h1>Vue Live Demo</h1>\n      <p>A component for live editing Vue single file components in the browser with real time preview.</p>\n      <a href=\"https://github.com/indielayer/vue-live-demo\">https://github.com/indielayer/vue-live-demo</a>\n\n      <vue-live-demo class=\"demo\" :code=\"code\" :show-code=\"showCode\" />\n    </div>\n  </div>\n</template>\n\n<style>\n#app {\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen,\n    Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n}\n\n.wrapper {\n  max-width: 1200px;\n  margin: auto;\n}\n\n.demo {\n  margin-top: 100px;\n}\n\n.CodeMirror {\n  height: 500px;\n}\n</style>\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./serve.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./serve.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./serve.vue?vue&type=template&id=148db0ef&\"\nimport script from \"./serve.vue?vue&type=script&lang=js&\"\nexport * from \"./serve.vue?vue&type=script&lang=js&\"\nimport style0 from \"./serve.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","import Vue from 'vue'\nimport Dev from './serve.vue'\n\nVue.config.productionTip = false\n\nnew Vue({\n  render: (h) => h(Dev)\n}).$mount('#app')\n","import mod from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-0-0!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-0-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-0-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLivePreview.vue?vue&type=style&index=0&module=true&lang=css&\"; export default mod; export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-0-0!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-0-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-0-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLivePreview.vue?vue&type=style&index=0&module=true&lang=css&\"","// extracted by mini-css-extract-plugin\nmodule.exports = {\"error\":\"VueLivePreview_error_fOY1Q\"};","import mod from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLiveEditor.vue?vue&type=style&index=0&lang=css&\"; export default mod; export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLiveEditor.vue?vue&type=style&index=0&lang=css&\"","import mod from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./serve.vue?vue&type=style&index=0&lang=css&\"; export default mod; export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./serve.vue?vue&type=style&index=0&lang=css&\"","import mod from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLiveDemo.vue?vue&type=style&index=0&id=ce415dbe&scoped=true&lang=css&\"; export default mod; export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./VueLiveDemo.vue?vue&type=style&index=0&id=ce415dbe&scoped=true&lang=css&\""],"sourceRoot":""}


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@indielayer/vue-live-demo",
 3 |   "version": "1.1.2",
 4 |   "description": "A component for live editing Vue single file components in the browser with real time preview.",
 5 |   "keywords": [
 6 |     "vue",
 7 |     "live",
 8 |     "code",
 9 |     "preview",
10 |     "sfc",
11 |     "browser",
12 |     "editor",
13 |     "vue live editor"
14 |   ],
15 |   "main": "dist/vue-live-demo.ssr.js",
16 |   "browser": "dist/vue-live-demo.esm.js",
17 |   "module": "dist/vue-live-demo.esm.js",
18 |   "unpkg": "dist/vue-live-demo.min.js",
19 |   "files": [
20 |     "dist/*",
21 |     "src/**/*.vue"
22 |   ],
23 |   "scripts": {
24 |     "dev": "npm run serve",
25 |     "docs": "vue-cli-service build dev/serve.js --dest docs",
26 |     "serve": "vue-cli-service serve dev/serve.js",
27 |     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
28 |     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
29 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
30 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
31 |     "lint": "eslint --cache --cache-location=.cache/eslint --ignore-path .eslintignore --ext .js,.jsx,.ts,.tsx,.mjs,.vue --report-unused-disable-directives ."
32 |   },
33 |   "dependencies": {
34 |     "@emmetio/codemirror-plugin": "^1.1.2",
35 |     "codemirror": "^5.54.0",
36 |     "lodash": "^4.17.15",
37 |     "vue-template-compiler": "^2.6.11"
38 |   },
39 |   "devDependencies": {
40 |     "@babel/core": "^7.9.0",
41 |     "@babel/preset-env": "^7.9.5",
42 |     "@indielayer/eslint-config-vue": "^1.0.0",
43 |     "@rollup/plugin-alias": "^2.2.0",
44 |     "@rollup/plugin-commonjs": "^11.1.0",
45 |     "@rollup/plugin-replace": "^2.3.2",
46 |     "@vue/cli-plugin-babel": "^4.3.1",
47 |     "@vue/cli-service": "^4.3.1",
48 |     "cross-env": "^7.0.2",
49 |     "eslint": "^7.18.0",
50 |     "minimist": "^1.2.5",
51 |     "raw-loader": "^4.0.1",
52 |     "rollup": "^2.7.3",
53 |     "rollup-plugin-babel": "^4.4.0",
54 |     "rollup-plugin-terser": "^7.0.0",
55 |     "rollup-plugin-vue": "^5.1.6",
56 |     "vue": "^2.6.11",
57 |     "vue-template-compiler": "^2.6.11"
58 |   },
59 |   "peerDependencies": {
60 |     "vue": "^2.6.11"
61 |   },
62 |   "resolutions": {
63 |     "prosemirror-model": "1.9.1"
64 |   },
65 |   "engines": {
66 |     "node": ">=10"
67 |   },
68 |   "publishConfig": {
69 |     "access": "public"
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/src/VueLiveDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="editor-layout">
 3 |     <div class="editor-preview" :class="{ 'editor-layout-col': showCode }">
 4 |       <vue-live-preview :code="previewCode" :components="components" />
 5 |     </div>
 6 |     <div v-if="showCode" class="editor-layout-col editor-code">
 7 |       <vue-live-editor :code="previewCode" @change="(c) => previewCode = c" />
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import VueLiveEditor from '@/VueLiveEditor'
14 | import VueLivePreview from '@/VueLivePreview'
15 | 
16 | export default {
17 |   components: {
18 |     VueLiveEditor,
19 |     VueLivePreview
20 |   },
21 |   props: {
22 |     code: {
23 |       type: String,
24 |       default: ''
25 |     },
26 |     showCode: {
27 |       type: Boolean,
28 |       default: false
29 |     },
30 |     components: {
31 |       type: Object,
32 |       default: () => ({})
33 |     }
34 |   },
35 |   data() {
36 |     return {
37 |       previewCode: this.code
38 |     }
39 |   }
40 | }
41 | </script>
42 | 
43 | <style scoped>
44 | .editor-layout {
45 |   display: flex;
46 |   width: 100%;
47 |   min-width: 0;
48 |   max-width: 100%;
49 |   flex-direction: column;
50 | }
51 | 
52 | .editor-preview {
53 |   width: 100%;
54 |   max-width: 100%;
55 | }
56 | 
57 | .editor-code {
58 |   margin-top: 42px;
59 |   display: flex;
60 | }
61 | 
62 | @media (min-width: 960px) {
63 |   .editor-layout {
64 |     flex-direction: row;
65 |   }
66 | 
67 |   .editor-layout-col {
68 |     width: 50%;
69 |     max-width: 50%;
70 |   }
71 | 
72 |   .editor-code {
73 |     margin-top: 0;
74 |     margin-left: 14px;
75 |     margin-right: 2px;
76 |   }
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/VueLiveEditor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="editor">
  3 |     <div class="editor-actions">
  4 |       <button class="btn-reset" @click="resetCode">Reset</button>
  5 |       <button @click="copyCode">{{ copyLabel }}</button>
  6 |     </div>
  7 |     <textarea ref="textarea"></textarea>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | import CodeMirror from 'codemirror'
 13 | import emmet from '@emmetio/codemirror-plugin'
 14 | import 'codemirror/lib/codemirror.css'
 15 | import 'codemirror/theme/monokai.css'
 16 | import 'codemirror/addon/selection/active-line'
 17 | import 'codemirror/addon/edit/matchbrackets'
 18 | import 'codemirror/mode/vue/vue'
 19 | import debounce from 'lodash/debounce'
 20 | 
 21 | emmet(CodeMirror)
 22 | 
 23 | export default {
 24 |   props: {
 25 |     code: {
 26 |       type: String,
 27 |       default: ''
 28 |     }
 29 |   },
 30 |   data() {
 31 |     return {
 32 |       editor: null,
 33 |       copyLabel: 'Copy',
 34 |       originalCode: this.code
 35 |     }
 36 |   },
 37 |   mounted() {
 38 |     this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
 39 |       mode: 'vue',
 40 |       theme: 'monokai',
 41 |       value: '<template></template>',
 42 |       lineNumbers: true,
 43 |       lineWrapping: true,
 44 |       tabSize: 2,
 45 |       autofocus: false,
 46 |       line: true,
 47 |       styleActiveLine: true,
 48 |       matchBrackets: true,
 49 |       extraKeys: {
 50 |         Tab: 'emmetExpandAbbreviation',
 51 |         Enter: 'emmetInsertLineBreak'
 52 |       }
 53 |     })
 54 | 
 55 |     this.editor.on('change',
 56 |       debounce(() => {
 57 |         this.$emit('change', this.editor.getValue())
 58 |       }, 400)
 59 |     )
 60 | 
 61 |     this.editor.setValue(this.code)
 62 |   },
 63 |   methods: {
 64 |     copyCode() {
 65 |       const el = document.createElement('textarea')
 66 | 
 67 |       el.value = this.editor.getValue()
 68 |       document.body.appendChild(el)
 69 |       el.select()
 70 |       document.execCommand('copy')
 71 |       document.body.removeChild(el)
 72 | 
 73 |       this.copyLabel = 'Copied!'
 74 | 
 75 |       setTimeout(() => {
 76 |         this.copyLabel = 'Copy'
 77 |       }, 3000)
 78 |     },
 79 |     resetCode() {
 80 |       this.editor.setValue(this.originalCode)
 81 |       this.$emit('change', this.editor.getValue())
 82 |     }
 83 |   }
 84 | }
 85 | </script>
 86 | 
 87 | <style>
 88 | .CodeMirror {
 89 |   font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
 90 |   font-size: 0.875rem;
 91 |   font-weight: bold;
 92 |   border-radius: 6px;
 93 |   background-color: #101c23;
 94 |   flex: 1;
 95 | }
 96 | 
 97 | .CodeMirror-gutters {
 98 |   background-color: #101c23;
 99 | }
100 | 
101 | .CodeMirror-activeline-background {
102 |   background-color: #050a0d;
103 | }
104 | 
105 | .CodeMirror-scroll {
106 |   padding: 8px;
107 | }
108 | </style>
109 | 
110 | <style scoped>
111 | .editor {
112 |   position: relative;
113 |   border-radius: 6px;
114 |   width: 100%;
115 |   display: flex;
116 |   flex-direction: column;
117 | }
118 | 
119 | .editor-actions {
120 |   position: absolute;
121 |   top: -34px;
122 |   right: 0;
123 | }
124 | 
125 | button {
126 |   text-transform: none;
127 |   color: #fff;
128 |   cursor: pointer;
129 |   border-style: none;
130 |   height: 44px;
131 |   min-width: 78px;
132 |   padding: 0 20px;
133 |   transition: all 0.2s;
134 |   font-size: 0.875rem;
135 |   font-weight: bold;
136 |   border-radius: 6px;
137 |   background-color: #282824;
138 |   margin-left: 8px;
139 | }
140 | 
141 | button:focus {
142 |   outline: none;
143 | }
144 | 
145 | button:hover {
146 |   transform: translateY(-14px);
147 | }
148 | 
149 | button:active {
150 |   transform: translateY(-24px);
151 | }
152 | 
153 | .btn-reset {
154 |   background-color: #4a4a45;
155 | }
156 | </style>
157 | 


--------------------------------------------------------------------------------
/src/VueLivePreview.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <pre v-if="error" :class="$style.error">{{ error }}</pre>
  3 |   <component
  4 |     :is="previewedComponent"
  5 |     v-else-if="previewedComponent"
  6 |     :key="iteration"
  7 |     :class="scope"
  8 |   />
  9 | </template>
 10 | 
 11 | <script>
 12 | import { parseComponent, compile } from 'vue-template-compiler/browser'
 13 | 
 14 | export default {
 15 |   errorCaptured(err) {
 16 |     this.handleError(err)
 17 |   },
 18 |   props: {
 19 |     code: {
 20 |       type: String,
 21 |       required: true
 22 |     },
 23 |     components: {
 24 |       type: Object,
 25 |       default: () => ({})
 26 |     }
 27 |   },
 28 |   data() {
 29 |     return {
 30 |       scope: this.generateScope(),
 31 |       previewedComponent: undefined,
 32 |       iteration: 0,
 33 |       error: false
 34 |     }
 35 |   },
 36 |   watch: {
 37 |     code(value) {
 38 |       this.renderComponent(value.trim())
 39 |     }
 40 |   },
 41 |   created() {
 42 |     this.renderComponent(this.code.trim())
 43 |   },
 44 |   methods: {
 45 |     generateScope() {
 46 |       return 'v-xxxxxxxx'.replace(/[xy]/g, (c) => {
 47 |         const r = (Math.random() * 16) | 0
 48 |         const v = c === 'x' ? r : (r & 0x3) | 0x8
 49 | 
 50 |         return v.toString(16)
 51 |       })
 52 |     },
 53 |     scopeStyle (style) {
 54 |       return style.trim().replace(/(^|\})\s*([^{]+)/g, (m, g1, g2) => {
 55 |         return g1 ? `${g1} .${this.scope} ${g2}` : `.${this.scope} ${g2}`
 56 |       })
 57 |     },
 58 |     handleError(e) {
 59 |       this.error = e.message
 60 |     },
 61 |     renderComponent(code) {
 62 |       let appComponent = {}
 63 | 
 64 |       try {
 65 |         const parsed = parseComponent(code)
 66 | 
 67 |         appComponent = {
 68 |           template: parsed.template ? parsed.template.content : code
 69 |         }
 70 | 
 71 |         if (parsed.script) {
 72 |           let { content } = parsed.script
 73 | 
 74 |           // ignore all imports
 75 |           content = content.replace(/^import.*$/m, '')
 76 | 
 77 |           // ignore components property
 78 |           content = content.replace(/components:\s?{[\s\S]*?},?/, '')
 79 | 
 80 |           // eslint-disable-next-line no-eval
 81 |           const componentScript = eval(`(function() { ${content.replace('export default', 'return')} })`)
 82 |           // const componentScript = new Function(parsed.script.content.replace('export default', 'return'))
 83 | 
 84 |           const componentProperties = componentScript()
 85 | 
 86 |           // check data() for return object
 87 |           if (componentProperties && componentProperties.data && typeof componentProperties.data() !== 'object') componentProperties.data = undefined
 88 | 
 89 |           appComponent = Object.assign({ template: parsed.template.content }, componentProperties)
 90 |         }
 91 | 
 92 |         if (parsed.styles && parsed.styles.length > 0) {
 93 |           const styles = parsed.styles.map((s) => s.content).join(' ')
 94 | 
 95 |           if (!this.elStyle) {
 96 |             const head = document.head || document.getElementsByTagName('head')[0]
 97 | 
 98 |             this.elStyle = document.createElement('style')
 99 |             this.elStyle.type = 'text/css'
100 |             head.appendChild(this.elStyle)
101 |           }
102 | 
103 |           this.elStyle.innerHTML = this.scopeStyle(styles)
104 |         }
105 | 
106 |         const { render, staticRenderFns } = compile(appComponent.template)
107 | 
108 |         // eslint-disable-next-line no-new-func
109 |         appComponent.render = new Function(render)
110 |         // eslint-disable-next-line no-new-func
111 |         appComponent.staticRenderFns = staticRenderFns.map((s) => new Function(s))
112 |       } catch (e) {
113 |         this.handleError(e)
114 | 
115 |         return
116 |       }
117 | 
118 |       appComponent.components = this.components
119 | 
120 |       if (appComponent.template || appComponent.render) {
121 |         this.previewedComponent = appComponent
122 |         this.iteration = this.iteration + 1
123 |         this.error = false
124 |       } else {
125 |         this.handleError({
126 |           message: 'No template or render function specified'
127 |         })
128 |       }
129 |     }
130 |   }
131 | }
132 | </script>
133 | 
134 | <style module>
135 | .error {
136 |   font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
137 |   font-size: 0.875rem;
138 |   color: red;
139 |   text-align: left;
140 |   font-weight: bold;
141 |   overflow: auto;
142 |   white-space: pre-wrap;
143 | }
144 | </style>
145 | 


--------------------------------------------------------------------------------
/src/entry.js:
--------------------------------------------------------------------------------
 1 | // Import vue component
 2 | import component from '@/VueLiveDemo.vue'
 3 | 
 4 | // install function executed by Vue.use()
 5 | const install = function installVueLiveDemo(Vue) {
 6 |   if (install.installed) return
 7 |   install.installed = true
 8 |   Vue.component('VueLiveDemo', component)
 9 | }
10 | 
11 | // Create module definition for Vue.use()
12 | const plugin = {
13 |   install
14 | }
15 | 
16 | // To auto-install on non-es builds, when vue is found
17 | // eslint-disable-next-line no-redeclare
18 | /* global window, global */
19 | if ('false' === process.env.ES_BUILD) {
20 |   let GlobalVue = null
21 | 
22 |   if (typeof window !== 'undefined') {
23 |     GlobalVue = window.Vue
24 |   } else if (typeof global !== 'undefined') {
25 |     GlobalVue = global.Vue
26 |   }
27 |   if (GlobalVue) {
28 |     GlobalVue.use(plugin)
29 |   }
30 | }
31 | 
32 | // Inject install function into component - allows component
33 | // to be registered via Vue.use() as well as Vue.component()
34 | component.install = install
35 | 
36 | // Export component by default
37 | export default component
38 | 
39 | // It's possible to expose named exports when writing components that can
40 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
41 | // export const RollupDemoDirective = component;
42 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: process.env.NODE_ENV === 'production'
3 |     ? '/vue-live-demo/'
4 |     : '/'
5 | }


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