├── .travis.yml
├── test
    ├── snapshots
    │   ├── test.js.snap
    │   └── test.js.md
    └── test.js
├── .vscode
    └── settings.json
├── package.json
├── README.md
├── LICENSE
├── .gitignore
└── index.js


/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "7"


--------------------------------------------------------------------------------
/test/snapshots/test.js.snap:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nickmessing/babel-plugin-jsx-v-model/HEAD/test/snapshots/test.js.snap


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | // Place your settings in this file to overwrite default and user settings.
 2 | {
 3 |   "files.exclude": {
 4 |     "**/.git": true,
 5 |     "**/.svn": true,
 6 |     "**/.hg": true,
 7 |     "**/CVS": true,
 8 |     "**/.DS_Store": true
 9 |   },
10 |   "editor.formatOnSave": true,
11 |   "prettier.singleQuote": true,
12 |   "editor.tabSize": 2,
13 |   "prettier.trailingComma": "none",
14 |   "prettier.printWidth": 120,
15 |   "prettier.semi": false
16 | }
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "babel-plugin-jsx-v-model",
 3 |   "version": "2.0.3",
 4 |   "description": "JSX v-model transform",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "ava",
 8 |     "coverage": "nyc --reporter=lcov npm test"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/nickmessing/babel-plugin-jsx-v-model.git"
13 |   },
14 |   "keywords": [
15 |     "Vue",
16 |     "jsx",
17 |     "v-model"
18 |   ],
19 |   "author": "Nicolai Moraru <dot.nick.dot.messing@gmail.com>",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/nickmessing/babel-plugin-jsx-v-model/issues"
23 |   },
24 |   "homepage": "https://github.com/nickmessing/babel-plugin-jsx-v-model#readme",
25 |   "dependencies": {
26 |     "babel-plugin-syntax-jsx": "^6.18.0",
27 |     "html-tags": "^2.0.0",
28 |     "svg-tags": "^1.0.0"
29 |   },
30 |   "devDependencies": {
31 |     "ava": "^0.21.0",
32 |     "babel-core": "^6.25.0",
33 |     "nyc": "^11.0.3"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![Build Status](https://travis-ci.org/nickmessing/babel-plugin-jsx-v-model.svg?branch=master)](https://travis-ci.org/nickmessing/babel-plugin-jsx-v-model)
 2 | 
 3 | ## DEPRECATED: Check https://github.com/vuejs/jsx instead
 4 | 
 5 | ## JSX v-model for Vue JSX
 6 | 
 7 | This babel plugin adds some syntactic sugar to JSX.
 8 | 
 9 | ### Usage:
10 | 
11 | ```bash
12 | npm i babel-plugin-jsx-v-model -D
13 | ```
14 | 
15 | Then add `jsx-v-model` to your `.babelrc` file under `plugins`
16 | 
17 | example .babelrc:
18 | ```json
19 | {
20 |   "presets": ["es2015"],
21 |   "plugins": ["jsx-v-model", "transform-vue-jsx"]
22 | }
23 | ```
24 | 
25 | code:
26 | ```js
27 | Vue.component('hello-world', {
28 |   data: () => ({
29 |     text: 'Hello World!'
30 |   }),
31 |   render () {
32 |     return (
33 |       <div>
34 |         <input type="text" v-model={this.text} />
35 |         {this.text}
36 |       </div>
37 |     )
38 |   }
39 | })
40 | ```
41 | 
42 | Behaviour is similar to vue template's [v-model](https://vuejs.org/v2/api/#v-model).
43 | 


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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | 


--------------------------------------------------------------------------------
/test/test.js:
--------------------------------------------------------------------------------
  1 | import test from 'ava'
  2 | import { transform } from 'babel-core'
  3 | 
  4 | const transpile = src => {
  5 |   return transform(src, {
  6 |     plugins: './index'
  7 |   }).code.trim()
  8 | }
  9 | 
 10 | const testTranspile = (title, code) => {
 11 |   test(title, t => {
 12 |     const compiled = transpile(code)
 13 | 
 14 |     t.snapshot(code, 'Initial code')
 15 |     t.snapshot(compiled, 'Compiled code')
 16 |   })
 17 | }
 18 | 
 19 | const testError = (title, code) => {
 20 |   test(title, t => {
 21 |     const error = t.throws(() => transpile(code), SyntaxError)
 22 | 
 23 |     t.snapshot(code, 'Initial code')
 24 |     t.snapshot(error.message, 'Error mesage')
 25 |   })
 26 | }
 27 | 
 28 | testError(
 29 |   'Error: input[type={dynamic}, v-model]',
 30 |   `
 31 |   <input
 32 |     type={e}
 33 |     v-model={a.b}
 34 |   />
 35 | `
 36 | )
 37 | testError(
 38 |   'Error: input[v-model:invalidModifier]',
 39 |   `
 40 |   <input
 41 |     v-model:invalidModifier={a.b}
 42 |   />
 43 | `
 44 | )
 45 | testError(
 46 |   'Error: input[v-model, v-model]',
 47 |   `
 48 |   <input
 49 |     v-model={a.b}
 50 |     v-model={a.b}
 51 |   />
 52 | `
 53 | )
 54 | testError(
 55 |   'Error: input[v-model="string literal"]',
 56 |   `
 57 |   <input
 58 |     v-model="string literal"
 59 |   />
 60 | `
 61 | )
 62 | testError(
 63 |   'Error: input[v-model={identifier}]',
 64 |   `
 65 |   <input
 66 |     v-model={identifier}
 67 |   />
 68 | `
 69 | )
 70 | testError(
 71 |   'Error: h3',
 72 |   `
 73 |   <h3
 74 |     v-model={a.b}
 75 |   />
 76 | `
 77 | )
 78 | testError(
 79 |   'Error: select[v-model:trim]',
 80 |   `
 81 |   <select
 82 |     v-model:trim={a.b}
 83 |   />
 84 | `
 85 | )
 86 | testError(
 87 |   'Error: input[type="checkbox",v-model:trim]',
 88 |   `
 89 |   <input
 90 |     type="checkbox"
 91 |     v-model:trim={a.b}
 92 |   />
 93 | `
 94 | )
 95 | testError(
 96 |   'Error: input[type="radio",v-model:trim]',
 97 |   `
 98 |   <input
 99 |     type="radio"
100 |     v-model:trim={a.b}
101 |   />
102 | `
103 | )
104 | testError(
105 |   'Error: input[type="file",v-model]',
106 |   `
107 |   <input
108 |     type="file"
109 |     v-model={a.b}
110 |   />
111 | `
112 | )
113 | 
114 | testTranspile(
115 |   'Ignores namespaced attributes',
116 |   `
117 |   <input
118 |     onClick:prevent={hey}
119 |   />
120 | `
121 | )
122 | testTranspile(
123 |   'textarea[v-model]',
124 |   `
125 |   <textarea
126 |     v-model={a.b}
127 |   />
128 | `
129 | )
130 | testTranspile(
131 |   'input[v-model]',
132 |   `
133 |   <input
134 |     v-model={a.b}
135 |   />
136 | `
137 | )
138 | testTranspile(
139 |   'input[v-model={a.b[c.d[e]]}]',
140 |   `
141 |   <input
142 |     v-model={a.b[c.d[e]]}
143 |   />
144 | `
145 | )
146 | testTranspile(
147 |   'input[type="range", v-model]',
148 |   `
149 |   <input
150 |     type="range"
151 |     v-model={a.b}
152 |   />
153 | `
154 | )
155 | testTranspile(
156 |   'input[v-model:lazy]',
157 |   `
158 |   <input
159 |     v-model:lazy={a.b}
160 |   />
161 | `
162 | )
163 | testTranspile(
164 |   'input[v-model:number]',
165 |   `
166 |   <input
167 |     v-model:number={a.b}
168 |   />
169 | `
170 | )
171 | testTranspile(
172 |   'input[v-model:trim]',
173 |   `
174 |   <input
175 |     v-model:trim={a.b}
176 |   />
177 | `
178 | )
179 | testTranspile(
180 |   'input[type="checkbox", v-model]',
181 |   `
182 |   <input
183 |     type="checkbox"
184 |     v-model={a.b}
185 |     {...spreadForCoverage}
186 |   />
187 | `
188 | )
189 | testTranspile(
190 |   'input[type="checkbox", value="forArray", true-value={{hello: true}}, false-value={{hello: false}}, v-model:number]',
191 |   `
192 |   <input
193 |     type="checkbox"
194 |     v-model:number={a.b}
195 |     value="forArray"
196 |     true-value={{hello: true}}
197 |     false-value={{hello: false}}
198 |     {...spreadForCoverage}
199 |   />
200 | `
201 | )
202 | testTranspile(
203 |   'input[type="radio", v-model]',
204 |   `
205 |   <input
206 |     type="radio"
207 |     v-model={a.b}
208 |     {...spreadForCoverage}
209 |   />
210 | `
211 | )
212 | testTranspile(
213 |   'input[type="radio", value="101", v-model:number]',
214 |   `
215 |   <input
216 |     type="radio"
217 |     value="101"
218 |     v-model:number={a.b}
219 |     {...spreadForCoverage}
220 |   />
221 | `
222 | )
223 | testTranspile(
224 |   'select',
225 |   `
226 |   <select
227 |     v-model={a.b}
228 |   />
229 | `
230 | )
231 | testTranspile(
232 |   'select[v-model:number]',
233 |   `
234 |   <select
235 |     v-model:number={a.b}
236 |   />
237 | `
238 | )
239 | testTranspile(
240 |   'custom-element[v-model]',
241 |   `
242 |   <custom-element
243 |     v-model={a.b}
244 |   />
245 | `
246 | )
247 | testTranspile(
248 |   'custom-element[v-model:trim]',
249 |   `
250 |   <custom-element
251 |     v-model:trim={a.b}
252 |   />
253 | `
254 | )
255 | testTranspile(
256 |   'custom-element[v-model:number]',
257 |   `
258 |   <custom-element
259 |     v-model:number={a.b}
260 |   />
261 | `
262 | )
263 | 


--------------------------------------------------------------------------------
/test/snapshots/test.js.md:
--------------------------------------------------------------------------------
  1 | # Snapshot report for `test/test.js`
  2 | 
  3 | The actual snapshot is saved in `test.js.snap`.
  4 | 
  5 | Generated by [AVA](https://ava.li).
  6 | 
  7 | ## Error: h3
  8 | 
  9 | > Initial code
 10 | 
 11 |     `␊
 12 |       <h3␊
 13 |         v-model={a.b}␊
 14 |       />␊
 15 |     `
 16 | 
 17 | > Error mesage
 18 | 
 19 |     'unknown: you can not use "h3" with v-model'
 20 | 
 21 | ## Error: input[type="checkbox",v-model:trim]
 22 | 
 23 | > Initial code
 24 | 
 25 |     `␊
 26 |       <input␊
 27 |         type="checkbox"␊
 28 |         v-model:trim={a.b}␊
 29 |       />␊
 30 |     `
 31 | 
 32 | > Error mesage
 33 | 
 34 |     'unknown: you can only use number modifier with input[type="checkbox"]'
 35 | 
 36 | ## Error: input[type="file",v-model]
 37 | 
 38 | > Initial code
 39 | 
 40 |     `␊
 41 |       <input␊
 42 |         type="file"␊
 43 |         v-model={a.b}␊
 44 |       />␊
 45 |     `
 46 | 
 47 | > Error mesage
 48 | 
 49 |     'unknown: you can not use "file" type with v-model'
 50 | 
 51 | ## Error: input[type="radio",v-model:trim]
 52 | 
 53 | > Initial code
 54 | 
 55 |     `␊
 56 |       <input␊
 57 |         type="radio"␊
 58 |         v-model:trim={a.b}␊
 59 |       />␊
 60 |     `
 61 | 
 62 | > Error mesage
 63 | 
 64 |     'unknown: you can only use number modifier with input[type="radio"]'
 65 | 
 66 | ## Error: input[type={dynamic}, v-model]
 67 | 
 68 | > Initial code
 69 | 
 70 |     `␊
 71 |       <input␊
 72 |         type={e}␊
 73 |         v-model={a.b}␊
 74 |       />␊
 75 |     `
 76 | 
 77 | > Error mesage
 78 | 
 79 |     'unknown: you can not use dynamic type with v-model'
 80 | 
 81 | ## Error: input[v-model, v-model]
 82 | 
 83 | > Initial code
 84 | 
 85 |     `␊
 86 |       <input␊
 87 |         v-model={a.b}␊
 88 |         v-model={a.b}␊
 89 |       />␊
 90 |     `
 91 | 
 92 | > Error mesage
 93 | 
 94 |     'unknown: you can not have multiple v-model directives on a single element'
 95 | 
 96 | ## Error: input[v-model:invalidModifier]
 97 | 
 98 | > Initial code
 99 | 
100 |     `␊
101 |       <input␊
102 |         v-model:invalidModifier={a.b}␊
103 |       />␊
104 |     `
105 | 
106 | > Error mesage
107 | 
108 |     'unknown: v-model does not support "invalidModifier" modifier'
109 | 
110 | ## Error: input[v-model="string literal"]
111 | 
112 | > Initial code
113 | 
114 |     `␊
115 |       <input␊
116 |         v-model="string literal"␊
117 |       />␊
118 |     `
119 | 
120 | > Error mesage
121 | 
122 |     'unknown: you should use JSX Expression with v-model'
123 | 
124 | ## Error: input[v-model={identifier}]
125 | 
126 | > Initial code
127 | 
128 |     `␊
129 |       <input␊
130 |         v-model={identifier}␊
131 |       />␊
132 |     `
133 | 
134 | > Error mesage
135 | 
136 |     'unknown: you should use MemberExpression with v-model'
137 | 
138 | ## Error: select[v-model:trim]
139 | 
140 | > Initial code
141 | 
142 |     `␊
143 |       <select␊
144 |         v-model:trim={a.b}␊
145 |       />␊
146 |     `
147 | 
148 | > Error mesage
149 | 
150 |     'unknown: you can only use number modifier with <select/ >'
151 | 
152 | ## Ignores namespaced attributes
153 | 
154 | > Initial code
155 | 
156 |     `␊
157 |       <input␊
158 |         onClick:prevent={hey}␊
159 |       />␊
160 |     `
161 | 
162 | > Compiled code
163 | 
164 |     '<input onClick:prevent={hey} />;'
165 | 
166 | ## custom-element[v-model:number]
167 | 
168 | > Initial code
169 | 
170 |     `␊
171 |       <custom-element␊
172 |         v-model:number={a.b}␊
173 |       />␊
174 |     `
175 | 
176 | > Compiled code
177 | 
178 |     `var _this = this;␊
179 |     ␊
180 |     <custom-element value={a.b} onInput={$$v => {␊
181 |       a.b = _this._n($$v);␊
182 |     }} {...{␊
183 |       directives: [{␊
184 |         name: "model",␊
185 |         value: a.b␊
186 |       }]␊
187 |     }} />;`
188 | 
189 | ## custom-element[v-model:trim]
190 | 
191 | > Initial code
192 | 
193 |     `␊
194 |       <custom-element␊
195 |         v-model:trim={a.b}␊
196 |       />␊
197 |     `
198 | 
199 | > Compiled code
200 | 
201 |     `<custom-element value={a.b} onInput={$$v => {␊
202 |       a.b = $$v.trim();␊
203 |     }} {...{␊
204 |       directives: [{␊
205 |         name: "model",␊
206 |         value: a.b␊
207 |       }]␊
208 |     }} />;`
209 | 
210 | ## custom-element[v-model]
211 | 
212 | > Initial code
213 | 
214 |     `␊
215 |       <custom-element␊
216 |         v-model={a.b}␊
217 |       />␊
218 |     `
219 | 
220 | > Compiled code
221 | 
222 |     `<custom-element value={a.b} onInput={$$v => {␊
223 |       a.b = $$v;␊
224 |     }} {...{␊
225 |       directives: [{␊
226 |         name: "model",␊
227 |         value: a.b␊
228 |       }]␊
229 |     }} />;`
230 | 
231 | ## input[type="checkbox", v-model]
232 | 
233 | > Initial code
234 | 
235 |     `␊
236 |       <input␊
237 |         type="checkbox"␊
238 |         v-model={a.b}␊
239 |         {...spreadForCoverage}␊
240 |       />␊
241 |     `
242 | 
243 | > Compiled code
244 | 
245 |     `var _this = this;␊
246 |     ␊
247 |     <input type="checkbox" checked={Array.isArray(a.b) ? this._i(a.b, null) > -1 : a.b} on__c={$event => {␊
248 |       const $$a = a.b,␊
249 |             $$el = $event.target,␊
250 |             $$c = $$el.checked ? true : false;␊
251 |     ␊
252 |       if (Array.isArray($$a)) {␊
253 |         const $$v = null,␊
254 |               $$i = _this._i($$a, $$v);␊
255 |     ␊
256 |         if ($$el.checked) {␊
257 |           $$i < 0 && (a.b = $$a.concat($$v));␊
258 |         } else {␊
259 |           $$i > -1 && (a.b = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));␊
260 |         }␊
261 |       } else {␊
262 |         a.b = $$c;␊
263 |       }␊
264 |     }} {...{␊
265 |       directives: [{␊
266 |         name: "model",␊
267 |         value: a.b␊
268 |       }]␊
269 |     }} {...spreadForCoverage} />;`
270 | 
271 | ## input[type="checkbox", value="forArray", true-value={{hello: true}}, false-value={{hello: false}}, v-model:number]
272 | 
273 | > Initial code
274 | 
275 |     `␊
276 |       <input␊
277 |         type="checkbox"␊
278 |         v-model:number={a.b}␊
279 |         value="forArray"␊
280 |         true-value={{hello: true}}␊
281 |         false-value={{hello: false}}␊
282 |         {...spreadForCoverage}␊
283 |       />␊
284 |     `
285 | 
286 | > Compiled code
287 | 
288 |     `var _this = this;␊
289 |     ␊
290 |     <input type="checkbox" checked={Array.isArray(a.b) ? this._i(a.b, "forArray") > -1 : this._q(a.b, { hello: true })} on__c={$event => {␊
291 |       const $$a = a.b,␊
292 |             $$el = $event.target,␊
293 |             $$c = $$el.checked ? { hello: true } : { hello: false };␊
294 |     ␊
295 |       if (Array.isArray($$a)) {␊
296 |         const $$v = _this._n("forArray"),␊
297 |               $$i = _this._i($$a, $$v);␊
298 |     ␊
299 |         if ($$el.checked) {␊
300 |           $$i < 0 && (a.b = $$a.concat($$v));␊
301 |         } else {␊
302 |           $$i > -1 && (a.b = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));␊
303 |         }␊
304 |       } else {␊
305 |         a.b = $$c;␊
306 |       }␊
307 |     }} {...{␊
308 |       directives: [{␊
309 |         name: "model",␊
310 |         value: a.b␊
311 |       }]␊
312 |     }} {...spreadForCoverage} />;`
313 | 
314 | ## input[type="radio", v-model]
315 | 
316 | > Initial code
317 | 
318 |     `␊
319 |       <input␊
320 |         type="radio"␊
321 |         v-model={a.b}␊
322 |         {...spreadForCoverage}␊
323 |       />␊
324 |     `
325 | 
326 | > Compiled code
327 | 
328 |     `<input type="radio" checked={this._q(a.b, true)} on__c={$event => {␊
329 |       a.b = true;␊
330 |     }} {...{␊
331 |       directives: [{␊
332 |         name: "model",␊
333 |         value: a.b␊
334 |       }]␊
335 |     }} {...spreadForCoverage} />;`
336 | 
337 | ## input[type="radio", value="101", v-model:number]
338 | 
339 | > Initial code
340 | 
341 |     `␊
342 |       <input␊
343 |         type="radio"␊
344 |         value="101"␊
345 |         v-model:number={a.b}␊
346 |         {...spreadForCoverage}␊
347 |       />␊
348 |     `
349 | 
350 | > Compiled code
351 | 
352 |     `var _this = this;␊
353 |     ␊
354 |     <input type="radio" checked={this._q(a.b, "101")} on__c={$event => {␊
355 |       a.b = _this._n("101");␊
356 |     }} {...{␊
357 |       directives: [{␊
358 |         name: "model",␊
359 |         value: a.b␊
360 |       }]␊
361 |     }} {...spreadForCoverage} />;`
362 | 
363 | ## input[type="range", v-model]
364 | 
365 | > Initial code
366 | 
367 |     `␊
368 |       <input␊
369 |         type="range"␊
370 |         v-model={a.b}␊
371 |       />␊
372 |     `
373 | 
374 | > Compiled code
375 | 
376 |     `<input type="range" domPropsValue={a.b} on__r={$event => {␊
377 |       a.b = $event.target.value;␊
378 |     }} {...{␊
379 |       directives: [{␊
380 |         name: "model",␊
381 |         value: a.b␊
382 |       }]␊
383 |     }} />;`
384 | 
385 | ## input[v-model:lazy]
386 | 
387 | > Initial code
388 | 
389 |     `␊
390 |       <input␊
391 |         v-model:lazy={a.b}␊
392 |       />␊
393 |     `
394 | 
395 | > Compiled code
396 | 
397 |     `<input domPropsValue={a.b} onChange={$event => {␊
398 |       a.b = $event.target.value;␊
399 |     }} {...{␊
400 |       directives: [{␊
401 |         name: "model",␊
402 |         value: a.b␊
403 |       }]␊
404 |     }} />;`
405 | 
406 | ## input[v-model:number]
407 | 
408 | > Initial code
409 | 
410 |     `␊
411 |       <input␊
412 |         v-model:number={a.b}␊
413 |       />␊
414 |     `
415 | 
416 | > Compiled code
417 | 
418 |     `var _this = this;␊
419 |     ␊
420 |     <input domPropsValue={a.b} onInput={$event => {␊
421 |       if ($event.target.composing) return;␊
422 |       a.b = _this._n($event.target.value);␊
423 |     }} onBlur={() => _this.$forceUpdate()} {...{␊
424 |       directives: [{␊
425 |         name: "model",␊
426 |         value: a.b␊
427 |       }]␊
428 |     }} />;`
429 | 
430 | ## input[v-model:trim]
431 | 
432 | > Initial code
433 | 
434 |     `␊
435 |       <input␊
436 |         v-model:trim={a.b}␊
437 |       />␊
438 |     `
439 | 
440 | > Compiled code
441 | 
442 |     `var _this = this;␊
443 |     ␊
444 |     <input domPropsValue={a.b} onInput={$event => {␊
445 |       if ($event.target.composing) return;␊
446 |       a.b = $event.target.value.trim();␊
447 |     }} onBlur={() => _this.$forceUpdate()} {...{␊
448 |       directives: [{␊
449 |         name: "model",␊
450 |         value: a.b␊
451 |       }]␊
452 |     }} />;`
453 | 
454 | ## input[v-model={a.b[c.d[e]]}]
455 | 
456 | > Initial code
457 | 
458 |     `␊
459 |       <input␊
460 |         v-model={a.b[c.d[e]]}␊
461 |       />␊
462 |     `
463 | 
464 | > Compiled code
465 | 
466 |     `var _this = this;␊
467 |     ␊
468 |     <input domPropsValue={a.b[c.d[e]]} onInput={$event => {␊
469 |       if ($event.target.composing) return;␊
470 |     ␊
471 |       _this.$set(a.b, c.d[e], $event.target.value);␊
472 |     }} {...{␊
473 |       directives: [{␊
474 |         name: "model",␊
475 |         value: a.b[c.d[e]]␊
476 |       }]␊
477 |     }} />;`
478 | 
479 | ## input[v-model]
480 | 
481 | > Initial code
482 | 
483 |     `␊
484 |       <input␊
485 |         v-model={a.b}␊
486 |       />␊
487 |     `
488 | 
489 | > Compiled code
490 | 
491 |     `<input domPropsValue={a.b} onInput={$event => {␊
492 |       if ($event.target.composing) return;␊
493 |       a.b = $event.target.value;␊
494 |     }} {...{␊
495 |       directives: [{␊
496 |         name: "model",␊
497 |         value: a.b␊
498 |       }]␊
499 |     }} />;`
500 | 
501 | ## select
502 | 
503 | > Initial code
504 | 
505 |     `␊
506 |       <select␊
507 |         v-model={a.b}␊
508 |       />␊
509 |     `
510 | 
511 | > Compiled code
512 | 
513 |     `<select domPropsValue={a.b} onChange={$event => {␊
514 |       const $$selectedVal = Array.prototype.filter.call($event.target.options, o => o.selected).map(o => "_value" in o ? o._value : o.value);␊
515 |       a.b = $event.target.multiple ? $$selectedVal : $$selectedVal[0];␊
516 |     }} {...{␊
517 |       directives: [{␊
518 |         name: "model",␊
519 |         value: a.b␊
520 |       }]␊
521 |     }} />;`
522 | 
523 | ## select[v-model:number]
524 | 
525 | > Initial code
526 | 
527 |     `␊
528 |       <select␊
529 |         v-model:number={a.b}␊
530 |       />␊
531 |     `
532 | 
533 | > Compiled code
534 | 
535 |     `var _this = this;␊
536 |     ␊
537 |     <select domPropsValue={a.b} onChange={$event => {␊
538 |       const $$selectedVal = Array.prototype.filter.call($event.target.options, o => o.selected).map(o => _this._n("_value" in o ? o._value : o.value));␊
539 |       a.b = $event.target.multiple ? $$selectedVal : $$selectedVal[0];␊
540 |     }} {...{␊
541 |       directives: [{␊
542 |         name: "model",␊
543 |         value: a.b␊
544 |       }]␊
545 |     }} />;`
546 | 
547 | ## textarea[v-model]
548 | 
549 | > Initial code
550 | 
551 |     `␊
552 |       <textarea␊
553 |         v-model={a.b}␊
554 |       />␊
555 |     `
556 | 
557 | > Compiled code
558 | 
559 |     `<textarea domPropsValue={a.b} onInput={$event => {␊
560 |       if ($event.target.composing) return;␊
561 |       a.b = $event.target.value;␊
562 |     }} {...{␊
563 |       directives: [{␊
564 |         name: "model",␊
565 |         value: a.b␊
566 |       }]␊
567 |     }} />;`
568 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | 
  3 | var allowedModifiers = ['trim', 'number', 'lazy']
  4 | var RANGE_TOKEN = '__r'
  5 | var CHECKBOX_RADIO_TOKEN = '__c'
  6 | 
  7 | var htmlTags = require('html-tags')
  8 | 
  9 | var svgTags = require('svg-tags')
 10 | 
 11 | var isReservedTag = function isReservedTag(tag) {
 12 |   return ~htmlTags.indexOf(tag) || ~svgTags.indexOf(tag)
 13 | }
 14 | 
 15 | var getExpression = function getExpression(t, path) {
 16 |   return t.isStringLiteral(path.node.value) ? path.node.value : path.node.value.expression
 17 | }
 18 | 
 19 | var genValue = function genValue(t, model) {
 20 |   return t.jSXAttribute(t.jSXIdentifier('domPropsValue'), t.jSXExpressionContainer(model))
 21 | }
 22 | 
 23 | var genAssignmentCode = function genAssignmentCode(t, model, assignment) {
 24 |   if (model.computed) {
 25 |     var object = model.object,
 26 |       property = model.property
 27 | 
 28 |     return t.ExpressionStatement(
 29 |       t.CallExpression(t.MemberExpression(t.ThisExpression(), t.Identifier('$set')), [object, property, assignment])
 30 |     )
 31 |   } else {
 32 |     return t.ExpressionStatement(t.AssignmentExpression('=', model, assignment))
 33 |   }
 34 | }
 35 | 
 36 | var genListener = function genListener(t, event, body) {
 37 |   return t.jSXAttribute(
 38 |     t.jSXIdentifier('on' + event),
 39 |     t.jSXExpressionContainer(t.ArrowFunctionExpression([t.Identifier('$event')], t.BlockStatement(body)))
 40 |   )
 41 | }
 42 | 
 43 | var genSelectModel = function genSelectModel(t, modelAttribute, model, modifier) {
 44 |   if (modifier && modifier !== 'number') {
 45 |     throw modelAttribute.get('name').get('name').buildCodeFrameError('you can only use number modifier with <select/ >')
 46 |   }
 47 | 
 48 |   var number = modifier === 'number'
 49 | 
 50 |   var valueGetter = t.ConditionalExpression(
 51 |     t.BinaryExpression('in', t.StringLiteral('_value'), t.Identifier('o')),
 52 |     t.MemberExpression(t.Identifier('o'), t.Identifier('_value')),
 53 |     t.MemberExpression(t.Identifier('o'), t.Identifier('value'))
 54 |   )
 55 | 
 56 |   var selectedVal = t.CallExpression(
 57 |     t.MemberExpression(
 58 |       t.CallExpression(
 59 |         t.MemberExpression(
 60 |           t.MemberExpression(
 61 |             t.MemberExpression(t.Identifier('Array'), t.Identifier('prototype')),
 62 |             t.Identifier('filter')
 63 |           ),
 64 |           t.Identifier('call')
 65 |         ),
 66 |         [
 67 |           t.MemberExpression(
 68 |             t.MemberExpression(t.Identifier('$event'), t.Identifier('target')),
 69 |             t.Identifier('options')
 70 |           ),
 71 |           t.ArrowFunctionExpression(
 72 |             [t.Identifier('o')],
 73 |             t.MemberExpression(t.Identifier('o'), t.Identifier('selected'))
 74 |           )
 75 |         ]
 76 |       ),
 77 |       t.Identifier('map')
 78 |     ),
 79 |     [
 80 |       t.ArrowFunctionExpression(
 81 |         [t.Identifier('o')],
 82 |         number
 83 |           ? t.CallExpression(t.MemberExpression(t.ThisExpression(), t.Identifier('_n')), [valueGetter])
 84 |           : valueGetter
 85 |       )
 86 |     ]
 87 |   )
 88 | 
 89 |   var assignment = t.ConditionalExpression(
 90 |     t.MemberExpression(t.MemberExpression(t.Identifier('$event'), t.Identifier('target')), t.Identifier('multiple')),
 91 |     t.Identifier('$$selectedVal'),
 92 |     t.MemberExpression(t.Identifier('$$selectedVal'), t.NumericLiteral(0), true)
 93 |   )
 94 | 
 95 |   var code = t.VariableDeclaration('const', [t.VariableDeclarator(t.Identifier('$$selectedVal'), selectedVal)])
 96 | 
 97 |   return [genValue(t, model), genListener(t, 'Change', [code, genAssignmentCode(t, model, assignment)])]
 98 | }
 99 | 
100 | var genCheckboxModel = function genCheckboxModel(t, modelAttribute, model, modifier, path) {
101 |   if (modifier && modifier !== 'number') {
102 |     throw modelAttribute
103 |       .get('name')
104 |       .get('name')
105 |       .buildCodeFrameError('you can only use number modifier with input[type="checkbox"]')
106 |   }
107 | 
108 |   var value = t.NullLiteral()
109 |   var trueValue = t.BooleanLiteral(true)
110 |   var falseValue = t.BooleanLiteral(false)
111 | 
112 |   path.get('attributes').forEach(function(path) {
113 |     if (!path.node.name) {
114 |       return
115 |     }
116 | 
117 |     if (path.node.name.name === 'value') {
118 |       value = getExpression(t, path)
119 |       path.remove()
120 |     } else if (path.node.name.name === 'true-value') {
121 |       trueValue = getExpression(t, path)
122 |       path.remove()
123 |     } else if (path.node.name.name === 'false-value') {
124 |       falseValue = getExpression(t, path)
125 |       path.remove()
126 |     }
127 |   })
128 | 
129 |   var checkedProp = t.JSXAttribute(
130 |     t.JSXIdentifier('checked'),
131 |     t.JSXExpressionContainer(
132 |       t.ConditionalExpression(
133 |         t.CallExpression(t.MemberExpression(t.Identifier('Array'), t.Identifier('isArray')), [model]),
134 |         t.BinaryExpression(
135 |           '>',
136 |           t.CallExpression(t.MemberExpression(t.ThisExpression(), t.Identifier('_i')), [model, value]),
137 |           t.UnaryExpression('-', t.NumericLiteral(1))
138 |         ),
139 |         t.isBooleanLiteral(trueValue) && trueValue.value === true
140 |           ? model
141 |           : t.CallExpression(t.MemberExpression(t.ThisExpression(), t.Identifier('_q')), [model, trueValue])
142 |       )
143 |     )
144 |   )
145 | 
146 |   var handlerProp = t.JSXAttribute(
147 |     t.JSXIdentifier('on' + CHECKBOX_RADIO_TOKEN),
148 |     t.JSXExpressionContainer(
149 |       t.ArrowFunctionExpression(
150 |         [t.Identifier('$event')],
151 |         t.BlockStatement([
152 |           t.VariableDeclaration('const', [
153 |             t.VariableDeclarator(t.Identifier('$$a'), model),
154 |             t.VariableDeclarator(
155 |               t.Identifier('$$el'),
156 |               t.MemberExpression(t.Identifier('$event'), t.Identifier('target'))
157 |             ),
158 |             t.VariableDeclarator(
159 |               t.Identifier('$$c'),
160 |               t.ConditionalExpression(
161 |                 t.MemberExpression(t.Identifier('$$el'), t.Identifier('checked')),
162 |                 trueValue,
163 |                 falseValue
164 |               )
165 |             )
166 |           ]),
167 |           t.IfStatement(
168 |             t.CallExpression(t.MemberExpression(t.Identifier('Array'), t.Identifier('isArray')), [t.Identifier('$$a')]),
169 |             t.BlockStatement([
170 |               t.VariableDeclaration('const', [
171 |                 t.VariableDeclarator(
172 |                   t.Identifier('$$v'),
173 |                   modifier === 'number'
174 |                     ? t.CallExpression(t.MemberExpression(t.ThisExpression(), t.Identifier('_n')), [value])
175 |                     : value
176 |                 ),
177 |                 t.VariableDeclarator(
178 |                   t.Identifier('$$i'),
179 |                   t.CallExpression(t.MemberExpression(t.ThisExpression(), t.Identifier('_i')), [
180 |                     t.Identifier('$$a'),
181 |                     t.Identifier('$$v')
182 |                   ])
183 |                 )
184 |               ]),
185 |               t.IfStatement(
186 |                 t.MemberExpression(t.Identifier('$$el'), t.Identifier('checked')),
187 |                 t.BlockStatement([
188 |                   t.ExpressionStatement(
189 |                     t.LogicalExpression(
190 |                       '&&',
191 |                       t.BinaryExpression('<', t.Identifier('$$i'), t.NumericLiteral(0)),
192 |                       t.AssignmentExpression(
193 |                         '=',
194 |                         model,
195 |                         t.CallExpression(t.MemberExpression(t.Identifier('$$a'), t.Identifier('concat')), [
196 |                           t.Identifier('$$v')
197 |                         ])
198 |                       )
199 |                     )
200 |                   )
201 |                 ]),
202 |                 t.BlockStatement([
203 |                   t.ExpressionStatement(
204 |                     t.LogicalExpression(
205 |                       '&&',
206 |                       t.BinaryExpression('>', t.Identifier('$$i'), t.UnaryExpression('-', t.NumericLiteral(1))),
207 |                       t.AssignmentExpression(
208 |                         '=',
209 |                         model,
210 |                         t.CallExpression(
211 |                           t.MemberExpression(
212 |                             t.CallExpression(t.MemberExpression(t.Identifier('$$a'), t.Identifier('slice')), [
213 |                               t.NumericLiteral(0),
214 |                               t.Identifier('$$i')
215 |                             ]),
216 |                             t.Identifier('concat')
217 |                           ),
218 |                           [
219 |                             t.CallExpression(t.MemberExpression(t.Identifier('$$a'), t.Identifier('slice')), [
220 |                               t.BinaryExpression('+', t.Identifier('$$i'), t.NumericLiteral(1))
221 |                             ])
222 |                           ]
223 |                         )
224 |                       )
225 |                     )
226 |                   )
227 |                 ])
228 |               )
229 |             ]),
230 |             t.BlockStatement([genAssignmentCode(t, model, t.Identifier('$$c'))])
231 |           )
232 |         ])
233 |       )
234 |     )
235 |   )
236 | 
237 |   return [checkedProp, handlerProp]
238 | }
239 | 
240 | var genRadioModel = function genRadioModel(t, modelAttribute, model, modifier, path) {
241 |   if (modifier && modifier !== 'number') {
242 |     throw modelAttribute
243 |       .get('name')
244 |       .get('name')
245 |       .buildCodeFrameError('you can only use number modifier with input[type="radio"]')
246 |   }
247 | 
248 |   var value = t.BooleanLiteral(true)
249 | 
250 |   path.get('attributes').forEach(function(path) {
251 |     if (!path.node.name) {
252 |       return
253 |     }
254 | 
255 |     if (path.node.name.name === 'value') {
256 |       value = getExpression(t, path)
257 |       path.remove()
258 |     }
259 |   })
260 | 
261 |   var checkedProp = t.JSXAttribute(
262 |     t.JSXIdentifier('checked'),
263 |     t.JSXExpressionContainer(
264 |       t.CallExpression(t.MemberExpression(t.ThisExpression(), t.Identifier('_q')), [model, value])
265 |     )
266 |   )
267 | 
268 |   var handlerProp = t.JSXAttribute(
269 |     t.JSXIdentifier('on' + CHECKBOX_RADIO_TOKEN),
270 |     t.JSXExpressionContainer(
271 |       t.ArrowFunctionExpression(
272 |         [t.Identifier('$event')],
273 |         t.BlockStatement([
274 |           genAssignmentCode(
275 |             t,
276 |             model,
277 |             modifier === 'number'
278 |               ? t.CallExpression(t.MemberExpression(t.ThisExpression(), t.Identifier('_n')), [value])
279 |               : value
280 |           )
281 |         ])
282 |       )
283 |     )
284 |   )
285 | 
286 |   return [checkedProp, handlerProp]
287 | }
288 | 
289 | var genDefaultModel = function genDefaultModel(t, modelAttribute, model, modifier, path, type) {
290 |   var needCompositionGuard = modifier !== 'lazy' && type !== 'range'
291 | 
292 |   var event = modifier === 'lazy' ? 'Change' : type === 'range' ? RANGE_TOKEN : 'Input'
293 | 
294 |   var valueExpression = t.MemberExpression(
295 |     t.MemberExpression(t.Identifier('$event'), t.Identifier('target')),
296 |     t.Identifier('value')
297 |   )
298 | 
299 |   if (modifier === 'trim') {
300 |     valueExpression = t.CallExpression(t.MemberExpression(valueExpression, t.Identifier('trim')), [])
301 |   } else if (modifier === 'number') {
302 |     valueExpression = t.CallExpression(t.MemberExpression(t.ThisExpression(), t.Identifier('_n')), [valueExpression])
303 |   }
304 | 
305 |   var code = genAssignmentCode(t, model, valueExpression)
306 | 
307 |   if (needCompositionGuard) {
308 |     code = t.BlockStatement([
309 |       t.IfStatement(
310 |         t.MemberExpression(
311 |           t.MemberExpression(t.Identifier('$event'), t.Identifier('target')),
312 |           t.Identifier('composing')
313 |         ),
314 |         t.ReturnStatement(null)
315 |       ),
316 |       code
317 |     ])
318 |   } else {
319 |     code = t.BlockStatement([code])
320 |   }
321 | 
322 |   var valueProp = t.JSXAttribute(t.jSXIdentifier('domPropsValue'), t.JSXExpressionContainer(model))
323 | 
324 |   var handlerProp = t.JSXAttribute(
325 |     t.JSXIdentifier('on' + event),
326 |     t.JSXExpressionContainer(t.ArrowFunctionExpression([t.Identifier('$event')], code))
327 |   )
328 | 
329 |   var props = [valueProp, handlerProp]
330 | 
331 |   if (modifier === 'trim' || modifier === 'number') {
332 |     props.push(
333 |       t.JSXAttribute(
334 |         t.JSXIdentifier('onBlur'),
335 |         t.JSXExpressionContainer(
336 |           t.ArrowFunctionExpression(
337 |             [],
338 |             t.CallExpression(t.MemberExpression(t.ThisExpression(), t.Identifier('$forceUpdate')), [])
339 |           )
340 |         )
341 |       )
342 |     )
343 |   }
344 | 
345 |   return props
346 | }
347 | 
348 | var genComponentModel = function genComponentModel(t, modelAttribute, model, modifier, path, type) {
349 |   var baseValueExpression = t.Identifier('$$v')
350 |   var valueExpression = baseValueExpression
351 | 
352 |   if (modifier === 'trim') {
353 |     valueExpression = t.CallExpression(t.MemberExpression(valueExpression, t.Identifier('trim')), [])
354 |   } else if (modifier === 'number') {
355 |     valueExpression = t.CallExpression(t.MemberExpression(t.ThisExpression(), t.Identifier('_n')), [valueExpression])
356 |   }
357 | 
358 |   var assignment = genAssignmentCode(t, model, valueExpression)
359 | 
360 |   var valueProp = t.JSXAttribute(t.jSXIdentifier('value'), t.JSXExpressionContainer(model))
361 | 
362 |   var handlerProp = t.JSXAttribute(
363 |     t.JSXIdentifier('onInput'),
364 |     t.JSXExpressionContainer(t.ArrowFunctionExpression([baseValueExpression], t.BlockStatement([assignment])))
365 |   )
366 | 
367 |   return [valueProp, handlerProp]
368 | }
369 | 
370 | module.exports = function(babel) {
371 |   var t = babel.types
372 | 
373 |   return {
374 |     inherits: require('babel-plugin-syntax-jsx'),
375 |     visitor: {
376 |       JSXOpeningElement: function JSXOpeningElement(path) {
377 |         var model = null
378 |         var modifier = null
379 |         var modelAttribute = null
380 |         var type = null
381 |         var typePath = null
382 | 
383 |         path.get('attributes').forEach(function(path) {
384 |           if (!path.node.name) {
385 |             return
386 |           }
387 | 
388 |           if (path.node.name.name === 'type') {
389 |             type = path.node.value.value
390 |             typePath = path.get('value')
391 |           }
392 |           /* istanbul ignore else */
393 |           if (t.isJSXIdentifier(path.node.name)) {
394 |             if (path.node.name.name !== 'v-model') {
395 |               return
396 |             }
397 |           } else if (t.isJSXNamespacedName(path.node.name)) {
398 |             if (path.node.name.namespace.name !== 'v-model') {
399 |               return
400 |             }
401 | 
402 |             if (!~allowedModifiers.indexOf(path.node.name.name.name)) {
403 |               throw path
404 |                 .get('name')
405 |                 .get('name')
406 |                 .buildCodeFrameError('v-model does not support "' + path.node.name.name.name + '" modifier')
407 |             }
408 | 
409 |             modifier = path.node.name.name.name
410 |           } else {
411 |             return
412 |           }
413 | 
414 |           modelAttribute = path
415 | 
416 |           if (model) {
417 |             throw path.buildCodeFrameError('you can not have multiple v-model directives on a single element')
418 |           }
419 | 
420 |           if (!t.isJSXExpressionContainer(path.node.value)) {
421 |             throw path.get('value').buildCodeFrameError('you should use JSX Expression with v-model')
422 |           }
423 | 
424 |           if (!t.isMemberExpression(path.node.value.expression)) {
425 |             throw path
426 |               .get('value')
427 |               .get('expression')
428 |               .buildCodeFrameError('you should use MemberExpression with v-model')
429 |           }
430 | 
431 |           model = path.node.value.expression
432 |         })
433 | 
434 |         if (!model) {
435 |           return
436 |         }
437 | 
438 |         var tag = path.node.name.name
439 | 
440 |         if (tag === 'input' && typePath && t.isJSXExpressionContainer(typePath.node)) {
441 |           throw typePath.buildCodeFrameError('you can not use dynamic type with v-model')
442 |         }
443 |         if (tag === 'input' && type === 'file') {
444 |           throw typePath.buildCodeFrameError('you can not use "file" type with v-model')
445 |         }
446 | 
447 |         var replacement = null
448 | 
449 |         if (tag === 'select') {
450 |           replacement = genSelectModel(t, modelAttribute, model, modifier)
451 |         } else if (tag === 'input' && type === 'checkbox') {
452 |           replacement = genCheckboxModel(t, modelAttribute, model, modifier, path)
453 |         } else if (tag === 'input' && type === 'radio') {
454 |           replacement = genRadioModel(t, modelAttribute, model, modifier, path)
455 |         } else if (tag === 'input' || tag === 'textarea') {
456 |           replacement = genDefaultModel(t, modelAttribute, model, modifier, path, type)
457 |         } else if (!isReservedTag(tag)) {
458 |           replacement = genComponentModel(t, modelAttribute, model, modifier, path)
459 |         } else {
460 |           throw path.buildCodeFrameError('you can not use "' + tag + '" with v-model')
461 |         }
462 | 
463 |         modelAttribute.replaceWithMultiple([
464 |           ...replacement,
465 |           t.JSXSpreadAttribute(
466 |             t.ObjectExpression([
467 |               t.ObjectProperty(
468 |                 t.Identifier('directives'),
469 |                 t.ArrayExpression([
470 |                   t.ObjectExpression([
471 |                     t.ObjectProperty(t.Identifier('name'), t.StringLiteral('model')),
472 |                     t.ObjectProperty(t.Identifier('value'), model)
473 |                   ])
474 |                 ])
475 |               )
476 |             ])
477 |           )
478 |         ])
479 |       }
480 |     }
481 |   }
482 | }
483 | 


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