├── .gitattributes
├── .gitignore
├── static
    └── _redirects
├── index.js
├── .editorconfig
├── router.js
├── poi.config.js
├── circle.yml
├── README.md
├── package.json
├── LICENSE
└── Editor.vue


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | 


--------------------------------------------------------------------------------
/static/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html   200
2 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import router from './router'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   router,
7 |   render: h => h('router-view')
8 | })
9 | 


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


--------------------------------------------------------------------------------
/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | const Editor = () => import('./Editor.vue')
 7 | 
 8 | export default new Router({
 9 |   mode: 'history',
10 |   routes: [{
11 |     path: '/',
12 |     component: Editor,
13 |     name: 'home'
14 |   }]
15 | })
16 | 


--------------------------------------------------------------------------------
/poi.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     VERSION: require('vue-template-compiler/package').version
 4 |   },
 5 |   transformModules: ['vue-template-es2015-compiler'],
 6 |   presets: [
 7 |     require('poi-preset-offline')({
 8 |       pluginOptions: {
 9 |         excludes: ['_redirects']
10 |       }
11 |     })
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     docker:
 5 |       - image: circleci/node:latest
 6 |     branches:
 7 |       ignore:
 8 |         - gh-pages # list of branches to ignore
 9 |         - /release\/.*/ # or ignore regexes
10 |     steps:
11 |       - checkout
12 |       - restore_cache:
13 |           key: dependency-cache-{{ checksum "yarn.lock" }}
14 |       - run:
15 |           name: install dependences
16 |           command: yarn
17 |       - save_cache:
18 |           key: dependency-cache-{{ checksum "yarn.lock" }}
19 |           paths:
20 |             - ./node_modules
21 |       - run:
22 |           name: test
23 |           command: yarn test
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # vue-template-editor
 3 | 
 4 | https://vue-template.egoist.moe
 5 | 
 6 | ## Contributing
 7 | 
 8 | 1. Fork it!
 9 | 2. Create your feature branch: `git checkout -b my-new-feature`
10 | 3. Commit your changes: `git commit -am 'Add some feature'`
11 | 4. Push to the branch: `git push origin my-new-feature`
12 | 5. Submit a pull request :D
13 | 
14 | 
15 | ## Author
16 | 
17 | **vue-template-editor** © [EGOIST](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
18 | Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/vue-template-editor/contributors)).
19 | 
20 | > [github.com/egoist](https://github.com/egoist) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-template-live-editor",
 3 |   "productName": "Vue Template Live Editor",
 4 |   "version": "0.0.0",
 5 |   "description": "Explore your Vue template!",
 6 |   "repository": {
 7 |     "url": "egoist/vue-template-editor",
 8 |     "type": "git"
 9 |   },
10 |   "scripts": {
11 |     "dev": "poi",
12 |     "build": "poi build"
13 |   },
14 |   "author": "egoist <0x142857@gmail.com>",
15 |   "license": "MIT",
16 |   "dependencies": {
17 |     "cm-highlight": "^0.1.1",
18 |     "codemirror": "^5.33.0",
19 |     "codemirror-emmet": "^1.0.0",
20 |     "js-beautify": "^1.7.5",
21 |     "lz-string": "^1.4.4",
22 |     "nprogress": "^0.2.0",
23 |     "vue-cm": "^1.1.0",
24 |     "vue-router": "^3.0.1",
25 |     "vue-template-es2015-compiler": "^1.6.0"
26 |   },
27 |   "devDependencies": {
28 |     "offline-plugin": "^4.8.5",
29 |     "poi": "^9.6.13",
30 |     "poi-preset-offline": "^9.0.3",
31 |     "vue-template-compiler": "^2.5.13"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) EGOIST <0x142857@gmail.com> (https://github.com/egoist)
 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 | 


--------------------------------------------------------------------------------
/Editor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <Header class="Header">
  4 |       <h1>
  5 |         <a href="https://github.com/egoist/vue-template-live-editor">
  6 |           Vue Template Live Editor (vue@{{ version }})
  7 |         </a>
  8 |       </h1>
  9 |       <div class="actions">
 10 |         <label class="action">
 11 |           <input type="checkbox" v-model="stripWith"> Strip with
 12 |         </label>
 13 |       </div>
 14 |     </Header>
 15 |     <div class="Main">
 16 |       <code-mirror-editor ref="editor" @change="handleChange" v-model="code" :options="editorOptions" />
 17 |       <pre class="CodeMirror output cm-s-base16-dark"><code v-html="output.code"></code></pre>
 18 |     </div>
 19 |   </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import CodeMirror from 'codemirror'
 24 | import CodeMirrorEditor from 'vue-cm'
 25 | import 'codemirror/mode/htmlmixed/htmlmixed'
 26 | import 'codemirror/mode/javascript/javascript'
 27 | import { compile } from 'vue-template-compiler'
 28 | import highlight from 'cm-highlight'
 29 | import stripWith from 'vue-template-es2015-compiler'
 30 | import beautify from 'js-beautify'
 31 | import progress from 'nprogress'
 32 | import emmet from 'codemirror-emmet'
 33 | import lzString from 'lz-string'
 34 | 
 35 | emmet(CodeMirror)
 36 | 
 37 | export default {
 38 |   components: {
 39 |     CodeMirrorEditor
 40 |   },
 41 | 
 42 |   data() {
 43 |     return {
 44 |       code: `<FinalForm :submit="handleSubmit">
 45 |   <form slot-scope="props" @submit="props.handleSubmit">
 46 |     <FinalField name="email">
 47 |       <div slot-scope="props">
 48 |         <input v-on="props.events" type="email">
 49 |       </div>
 50 |     </FinalField>
 51 |   </form>
 52 | </FinalForm>`,
 53 |       editorOptions: {
 54 |         mode: 'htmlmixed',
 55 |         lineNumbers: true,
 56 |         extraKeys: {
 57 |           Tab(cm) {
 58 |             // Indent, or place 2 spaces
 59 |             if (cm.somethingSelected()) {
 60 |               cm.indentSelection('add')
 61 |             } else if (cm.getOption('mode').indexOf('html') > -1) {
 62 |               try {
 63 |                 cm.execCommand('emmetExpandAbbreviation')
 64 |               } catch (err) {
 65 |                 console.error(err)
 66 |               }
 67 |             } else {
 68 |               const spaces = Array(cm.getOption('indentUnit') + 1).join(' ')
 69 |               cm.replaceSelection(spaces, 'end', '+input')
 70 |             }
 71 |           },
 72 |           Enter: 'emmetInsertLineBreak'
 73 |         }
 74 |       },
 75 |       stripWith: true,
 76 |       version: process.env.VERSION
 77 |     }
 78 |   },
 79 |   created() {
 80 |     if (this.$route.query.encoded) {
 81 |       this.decode(this.$route.query.encoded)
 82 |     }
 83 |   },
 84 |   computed: {
 85 |     output() {
 86 |       const res = compile(this.code)
 87 |       let code = `function render() {${res.render.toString()}}`
 88 |       if (this.stripWith) {
 89 |         code = stripWith(code)
 90 |       }
 91 |       return {
 92 |         code: highlight(beautify(code, { indent_size: 2 }), { mode: 'javascript' })
 93 |       }
 94 |     }
 95 |   },
 96 |   methods: {
 97 |     async updateQuery() {
 98 |       const base64 = lzString.compressToBase64(this.code)
 99 |       this.$router.push({ query: { encoded: base64 } })
100 |     },
101 |     async decode(base64) {
102 |       this.code = lzString.decompressFromBase64(base64)
103 |     },
104 |     handleChange() {
105 |       this.updateQuery()
106 |     }
107 |   }
108 | }
109 | </script>
110 | 
111 | <style src="nprogress/nprogress.css"></style>
112 | <style src="codemirror/lib/codemirror.css"></style>
113 | <style src="codemirror/theme/base16-dark.css"></style>
114 | 
115 | <style>
116 | body {
117 |   margin: 0;
118 |   font: 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
119 | }
120 | 
121 | html, body, #app {
122 |   height: 100%;
123 | }
124 | 
125 | pre {
126 |   margin: 0;
127 | }
128 | 
129 | * {
130 |   box-sizing: border-box;
131 | }
132 | 
133 | .CodeMirror {
134 |   height: 100%;
135 |   width: 50%;
136 |   background: #f5f5f5;
137 | }
138 | 
139 | .CodeMirror-gutters {
140 |   background: #f5f5f5;
141 |   border-right: none;
142 | }
143 | 
144 | label {
145 |   user-select: none;
146 | }
147 | </style>
148 | 
149 | <style scoped>
150 | .Header {
151 |   height: 50px;
152 |   display: flex;
153 |   align-items: center;
154 |   padding: 0 10px;
155 |   justify-content: space-between;
156 | }
157 | .Header h1 {
158 |   margin: 0;
159 |   font-weight: 300;
160 |   font-size: 1.25rem;
161 | }
162 | .Header h1 a {
163 |   color: black;
164 |   text-decoration: none;
165 | }
166 | .Main {
167 |   height: calc(100% - 50px);
168 |   display: flex;
169 | }
170 | 
171 | .output {
172 |   padding: 5px;
173 | }
174 | 
175 | .actions {
176 |   display: flex;
177 | }
178 | 
179 | .action {
180 |   margin-left: 10px;
181 | }
182 | </style>
183 | 


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