babel-plugin-transform-vue-jsx - npm Package Compare versions

Comparing version 3.1.2 to 3.2.0

lib/group-props.js

 var makeMap = require('./make-map')
-var isTopLevel = makeMap('class,staticClass,style,key,ref,slot')
+var isTopLevel = makeMap('class,staticClass,style,key,ref,slot,scopedSlots')
 var isNestable = makeMap('domProps,on,nativeOn,hook')
+var nestableRE = /^(domProps|on|nativeOn|hook)([\-A-Z])/
+var dirRE = /^v-/
 var xlinkRE = /^xlink([A-Z])/
@@ -16,6 +18,8 @@
       // nested modules
-      var prefixIndex = name.indexOf('-')
-      var prefix = prefixIndex > 0 && name.slice(0, prefixIndex)
-      if (prefix && isNestable(prefix)) {
-        var suffix = name.slice(prefixIndex + 1)
+      var nestMatch = name.match(nestableRE)
+      if (nestMatch) {
+        var prefix = nestMatch[1]
+        var suffix = name.replace(nestableRE, function (_, $1, $2) {
+          return $2 === '-' ? '' : $2.toLowerCase()
+        })
         var nestedProp = t.objectProperty(t.stringLiteral(suffix), prop.value)
@@ -32,5 +36,5 @@ var nestedObject = currentNestedObjects[prefix]
         }
-      } else if (prefix === 'v') {
+      } else if (dirRE.test(name)) {
         // custom directive
-        name = name.slice(prefixIndex + 1)
+        name = name.replace(dirRE, '')
         var dirs = currentNestedObjects.directives
@@ -37,0 +41,0 @@ if (!dirs) {

package.json

 {
   "name": "babel-plugin-transform-vue-jsx",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "description": "Babel plugin for Vue 2.0 JSX",
@@ -13,3 +13,3 @@ "main": "index.js",
     "test": "npm run lint && mocha --compilers js:babel-register",
-    "build": "cd example && webpack"
+    "dev": "cd example && webpack --watch"
   },
@@ -16,0 +16,0 @@ "repository": {

README.md

@@ -115,6 +115,6 @@ # babel-plugin-transform-vue-jsx [![CircleCI](https://img.shields.io/circleci/project/vuejs/babel-plugin-transform-vue-jsx.svg?maxAge=2592000)](https://circleci.com/gh/vuejs/babel-plugin-transform-vue-jsx)
       // DOM properties are prefixed with domProps-
-      domProps-innerHTML="bar"
+      domPropsInnerHTML="bar"
       // event listeners are prefixed with on- or nativeOn-
-      on-click={this.clickHandler}
-      nativeOn-click={this.nativeClickHandler}
+      onClick={this.clickHandler}
+      nativeOnClick={this.nativeClickHandler}
       // other special top-level properties
@@ -150,3 +150,3 @@ class={{ foo: true, bar: false }}
 
-Note that built-in Vue directives are not supported when using JSX. In most cases there are obvious programmatic equivalents, for example `v-if` is just a ternary expression, and `v-for` is just an `array.map()` expression, etc.
+Note that almost all built-in Vue directives are not supported when using JSX, the sole exception being `v-show`, which can be used with the `v-show={value}` syntax. In most cases there are obvious programmatic equivalents, for example `v-if` is just a ternary expression, and `v-for` is just an `array.map()` expression, etc.
 
@@ -153,0 +153,0 @@ For custom directives, you can use the `v-name={value}` syntax. However, note that directive arguments and modifiers are not supported using this syntax. There are two workarounds:

No alert changes

Improved metrics

Total package byte prevSize

12436

1.82%

Lines of code

215

1.9%

No dependency changes