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

Comparing version 3.0.0 to 3.1.0

lib/group-props.js

		@@ -14,2 +14,3 @@ var makeMap = require('./make-map')
		} else {
		// nested modules
		var prefixIndex = name.indexOf('-')
		@@ -30,2 +31,23 @@ var prefix = prefixIndex > 0 && name.slice(0, prefixIndex)
		}
		} else if (prefix === 'v') {
		// custom directive
		name = name.slice(prefixIndex + 1)
		var dirs = currentNestedObjects.directives
		if (!dirs) {
		dirs = currentNestedObjects.directives = t.objectProperty(
		t.identifier('directives'),
		t.arrayExpression([])
		)
		newProps.push(dirs)
		}
		dirs.value.elements.push(t.objectExpression([
		t.objectProperty(
		t.identifier('name'),
		t.stringLiteral(name)
		),
		t.objectProperty(
		t.identifier('value'),
		prop.value
		)
		]))
		} else {
		@@ -32,0 +54,0 @@ // rest are nested under attrs

package.json

		{
		"name": "babel-plugin-transform-vue-jsx",
		"version": "3.0.0",
		"version": "3.1.0",
		"description": "Babel plugin for Vue 2.0 JSX",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		@@ -16,3 +16,3 @@ # 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)
		``` bash
		npm install
		npm install\
		babel-plugin-syntax-jsx\
		@@ -149,1 +149,19 @@ babel-plugin-transform-vue-jsx\
		```

		### Vue directives

		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.

		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:

		1. Pass everything as an object via `value`, e.g. `v-name={{ value, modifier: true }}`

		2. Use the raw vnode directive data format:

		``` js
		const directives = [
		{ name: 'my-dir', value: 123, modifiers: { abc: true } }
		]

		return <div {...{ directives }}/>
		```

New alerts