├── .editorconfig
├── .gitignore
├── JSXEditor.vue
├── README.md
├── index.js
├── package.json
├── poi.config.js
├── router.js
├── static
    └── _redirects
└── yarn.lock


/.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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .DS_Store
4 | *.log
5 | 


--------------------------------------------------------------------------------
/JSXEditor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <header class="header">
  4 |       <div class="container">
  5 |         <div class="header-left">
  6 |           <h1>
  7 |             <router-link to="/">JSX Live Editor</router-link>
  8 |           </h1>
  9 |           <h2>{{ version }}, <a target="_blank" href="https://github.com/egoist/jsx-editor">check out source code</a></h2>
 10 |         </div>
 11 |         <div class="header-right">
 12 |           <select aria-label="Select JSX mode" class="form-control" v-model="mode">
 13 |             <option value="vue">Vue</option>
 14 |             <option value="react">React</option>
 15 |           </select>
 16 |           <button class="form-control save-button" @click="saveGist">Save as Gist</button>
 17 |         </div>
 18 |       </div>
 19 |     </header>
 20 |     <div class="editors">
 21 |       <div class="container">
 22 |         <code-mirror class="input" v-model="code" :options="editorOptions"></code-mirror>
 23 |         <div class="result">
 24 |           <pre class="code cm-s-default"><code v-html="result"></code></pre>
 25 |           <div class="error" v-show="error">{{ error }}</div>
 26 |         </div>
 27 |       </div>
 28 |     </div>
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script>
 33 |   import highlight from 'cm-highlight'
 34 |   import CodeMirror from 'vue-cm'
 35 |   import axios from 'axios'
 36 |   import progress from 'nprogress'
 37 | 
 38 |   import 'codemirror/mode/javascript/javascript'
 39 |   import 'codemirror/mode/jsx/jsx'
 40 | 
 41 |   export default {
 42 |     name: 'JSXEditor',
 43 |     data() {
 44 |       const defaultValue = `
 45 | <div id="welcome">
 46 |   <h1>Hello World!</h1>
 47 | </div>
 48 | `.trim()
 49 |       const { input, mode } = this.$route.query
 50 | 
 51 |       return {
 52 |         result: 'Loading...',
 53 |         error: '',
 54 |         mode: mode || 'react',
 55 |         code: input || defaultValue,
 56 |         version: `@babel/standalone@${process.env.BABEL_VERSION} & transform-vue-jsx@${process.env.VUE_JSX_VERSION}`,
 57 |         editorOptions: {
 58 |           mode: 'jsx',
 59 |           tabSize: 2,
 60 |           indentWithTabs: false,
 61 |           extraKeys: {
 62 |             Tab: cm => {
 63 |               cm.replaceSelection(' '.repeat(cm.getOption('tabSize')))
 64 |             }
 65 |           }
 66 |         }
 67 |       }
 68 |     },
 69 | 
 70 |     created() {
 71 |       if (this.$route.name === 'gist') {
 72 |         this.fetchGist(this.$route.params.id)
 73 |       }
 74 |     },
 75 | 
 76 |     mounted() {
 77 |       this.transform()
 78 |     },
 79 | 
 80 |     watch: {
 81 |       code() {
 82 |         this.transform()
 83 |       },
 84 |       mode() {
 85 |         this.transform()
 86 |         this.$router.push({
 87 |           query: {
 88 |             ...this.$route.query,
 89 |             mode: this.mode
 90 |           }
 91 |         })
 92 |       }
 93 |     },
 94 | 
 95 |     methods: {
 96 |       async transform() {
 97 |         const code = this.code
 98 |         try {
 99 |           const [babel, transformVueJSX] = await Promise.all([
100 |             import('@babel/standalone'),
101 |             import('babel-plugin-transform-vue-jsx')
102 |           ])
103 | 
104 |           const transformOptions = {
105 |             presets: [],
106 |             plugins: []
107 |           }
108 |           if (this.mode === 'vue') {
109 |             transformOptions.plugins.push(transformVueJSX)
110 |           } else if (this.mode === 'react') {
111 |             transformOptions.presets.push('react')
112 |           }
113 |           const result = babel.transform(code, transformOptions)
114 | 
115 |           this.result = highlight(result.code, {
116 |             mode: 'jsx'
117 |           })
118 | 
119 |           this.error = null
120 |         } catch (err) {
121 |           this.error = err.message
122 |         }
123 |       },
124 | 
125 |       async saveGist() {
126 |         progress.start()
127 |         const res = await axios.post(`https://api.github.com/gists?access_token=${process.env.APP_GH_TOKEN}`, {
128 |           description: 'Saved by https://jsx.egoist.sh',
129 |           files: {
130 |             [`${this.mode}.jsx`]: {
131 |               content: this.code
132 |             }
133 |           }
134 |         })
135 |         this.$router.push(`/gist/${res.data.id}`)
136 |         progress.done()
137 |       },
138 | 
139 |       async fetchGist(id) {
140 |         progress.start()
141 |         const { data } = await axios.get(`https://api.github.com/gists/${id}?access_token=${process.env.APP_GH_TOKEN}`)
142 |         if (data.files['vue.jsx']) {
143 |           this.mode = 'vue'
144 |           this.code = data.files['vue.jsx'].content
145 |         } else if (data.files['react.jsx']) {
146 |           this.mode = 'react',
147 |           this.code = data.files['react.jsx'].content
148 |         }
149 |         progress.done()
150 |       }
151 |     },
152 | 
153 |     components: {
154 |       CodeMirror
155 |     }
156 |   }
157 | </script>
158 | 
159 | <style src="normalize.css/normalize.css"></style>
160 | <style src="codemirror/lib/codemirror.css"></style>
161 | <style src="nprogress/nprogress.css"></style>
162 | 
163 | <style>
164 |   html, body, #app, .CodeMirror {
165 |     height: 100%;
166 |   }
167 |   body {
168 |     margin: 0;
169 |     font: 14px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Helvetica Neue,sans-serif;
170 |   }
171 |   * {
172 |     box-sizing: border-box;
173 |   }
174 |   .container {
175 |     max-width: 1080px;
176 |     margin: 0 auto;
177 |     height: 100%;
178 |   }
179 |   .header {
180 |     height: 80px;
181 |     background-color: #4fc08d;
182 |     color: white;
183 |     >.container {
184 |       display: flex;
185 |       justify-content: space-between;
186 |       align-items: center;
187 |     }
188 |     h1 {
189 |       margin: 0;
190 |       font-weight: 400;
191 |       a {
192 |         text-decoration: none;
193 |         color: white;
194 |       }
195 |     }
196 |     h2 {
197 |       margin: 0;
198 |       font-weight: 400;
199 |       font-size: 14px;
200 |       a {
201 |         color: white;
202 |       }
203 |     }
204 |     .header-right {
205 |       display: flex;
206 |       align-items: center;
207 |     }
208 |   }
209 |   .editors {
210 |     background-color: #f9f9f9;
211 |     height: calc(100% - 80px);
212 |     >.container {
213 |       display: flex;
214 |       align-items: center;
215 |       justify-content: center;
216 |     }
217 |     .CodeMirror, .result {
218 |       width: 50%;
219 |       padding: 10px;
220 |       border-left: 1px solid #e2e2e2;
221 |     }
222 |   }
223 |   .input {
224 |     border: none;
225 |     outline: none;
226 |     resize: none;
227 |     font-size: 1rem;
228 |   }
229 |   .result {
230 |     position: relative;
231 |     height: 100%;
232 |     border-right: 1px solid #e2e2e2;
233 |     background-color: white;
234 |     overflow: auto;
235 |   }
236 |   .code {
237 |     margin: 0;
238 |     height: 100%;
239 |   }
240 |   .error {
241 |     position: absolute;
242 |     bottom: 0;
243 |     left: 0;
244 |     right: 0;
245 |     background-color: red;
246 |     color: white;
247 |     padding: 0;
248 |     overflow: auto;
249 |     padding: 10px;
250 |     font-size: 16px;
251 |     white-space: pre;
252 |   }
253 | 
254 | 
255 | .form-control {
256 |   height: 26px;
257 | }
258 | 
259 | .save-button {
260 |   background: #eee;
261 |   border: none;
262 |   border-radius: 3px;
263 |   margin-left: 5px;
264 | }
265 | </style>
266 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JSX Live Editor
 2 | 
 3 | https://jsx.egoist.sh
 4 | 
 5 | ## Development
 6 | 
 7 | ```bash
 8 | # dev
 9 | yarn dev
10 | # build
11 | yarn build
12 | ```
13 | 


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jsx-editor",
 3 |   "productName": "JSX Live Editor",
 4 |   "version": "1.0.0",
 5 |   "main": "index.js",
 6 |   "license": "MIT",
 7 |   "scripts": {
 8 |     "dev": "poi --serve",
 9 |     "build": "poi --prod",
10 |     "deploy": "npm run build && surge -d jsx.surge.sh -p dist"
11 |   },
12 |   "author": {
13 |     "name": "EGOIST",
14 |     "email": "0x142857@gmail.com"
15 |   },
16 |   "postcss": {
17 |     "plugins": {
18 |       "postcss-nested": {}
19 |     }
20 |   },
21 |   "devDependencies": {
22 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
23 |     "babel-plugin-syntax-jsx": "^6.18.0",
24 |     "babel-plugin-transform-vue-jsx": "^4.0.0",
25 |     "babel-preset-env": "^1.7.0",
26 |     "poi": "^12.0.0-beta.8",
27 |     "postcss-nested": "^2.1.2",
28 |     "vue": "^2.5.17",
29 |     "vue-template-compiler": "^2.5.17"
30 |   },
31 |   "dependencies": {
32 |     "@babel/standalone": "^7.0.0",
33 |     "axios": "^0.16.2",
34 |     "cm-highlight": "^0.1.1",
35 |     "codemirror": "^5.28.0",
36 |     "normalize.css": "^7.0.0",
37 |     "nprogress": "^0.2.0",
38 |     "vue-cm": "^1.1.0",
39 |     "vue-router": "^2.7.0"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/poi.config.js:
--------------------------------------------------------------------------------
 1 | const vueJsxVersion = require('babel-plugin-transform-vue-jsx/package').version
 2 | const babelVersion = require('@babel/standalone/package').version
 3 | 
 4 | module.exports = {
 5 |   chainWebpack(config) {
 6 |     config.module.set('noParse', /babel-standalone/)
 7 |   },
 8 |   envs: {
 9 |     VUE_JSX_VERSION: vueJsxVersion,
10 |     BABEL_VERSION: babelVersion,
11 |     // It's fine to be exposed :)
12 |     APP_GH_TOKEN: '0b481a3c7fe634bdbb3bb16d1d157717959f67be'
13 |   }
14 | }
15 | 


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


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


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