Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
babel-plugin-transform-vue-jsx
Advanced tools
babel-plugin-transform-vue-jsx is a Babel plugin that allows developers to use JSX syntax in Vue.js applications. It transforms JSX code into JavaScript that Vue can understand, enabling a more React-like development experience within Vue projects.
JSX Syntax Support
This feature allows developers to write Vue components using JSX syntax. The code sample demonstrates a simple Vue component using JSX in the render function instead of the traditional template syntax.
<template>
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
export default {
name: 'App',
components: {
HelloWorld
},
render() {
return <div id="app"><HelloWorld msg="Welcome to Your Vue.js App"/></div>;
}
}
</script>
Dynamic Component Rendering
This feature enables dynamic rendering of components based on props or state. The code sample shows a component that conditionally renders content based on the 'isVisible' prop.
<script>
export default {
name: 'DynamicComponent',
props: ['isVisible'],
render() {
return this.isVisible ? <div>Component is visible</div> : <div>Component is hidden</div>;
}
}
</script>
Event Handling
This feature allows developers to handle events directly in JSX. The code sample demonstrates a button component with an onClick event handler defined in JSX.
<script>
export default {
name: 'ButtonComponent',
methods: {
handleClick() {
alert('Button clicked!');
}
},
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
</script>
vue-jsx is a package that provides JSX support for Vue.js applications. It is similar to babel-plugin-transform-vue-jsx in that it allows developers to write Vue components using JSX syntax. However, vue-jsx is specifically designed to work with Vue 3 and offers additional features like better TypeScript support and improved performance.
Babel plugin for Vue 2.0 JSX
Assumes you are using Babel with a module bundler e.g. Webpack, because the spread merge helper is imported as a module to avoid duplication.
This is mutually exclusive with babel-plugin-transform-react-jsx
.
npm install\
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev
In your .babelrc
:
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
The plugin transpiles the following JSX:
<div id="foo">{this.text}</div>
To the following JavaScript:
h('div', {
attrs: {
id: 'foo'
}
}, [this.text])
Note the h
function, which is a shorthand for a Vue instance's $createElement
method, must be in the scope where the JSX is. Since this method is passed to component render functions as the first argument, in most cases you'd do this:
Vue.component('jsx-example', {
render (h) { // <-- h must be in scope
return <div id="foo">bar</div>
}
})
h
auto-injectionStarting with version 3.4.0 we automatically inject const h = this.$createElement
in any method and getter (not functions or arrow functions) declared in ES2015 syntax that has JSX so you can drop the (h)
parameter.
Vue.component('jsx-example', {
render () { // h will be injected
return <div id="foo">bar</div>
},
myMethod: function () { // h will not be injected
return <div id="foo">bar</div>
},
someOtherMethod: () => { // h will not be injected
return <div id="foo">bar</div>
}
})
@Component
class App extends Vue {
get computed () { // h will be injected
return <div id="foo">bar</div>
}
}
First, Vue 2.0's vnode format is different from React's. The second argument to the createElement
call is a "data object" that accepts nested objects. Each nested object will be then processed by corresponding modules:
render (h) {
return h('div', {
// Component props
props: {
msg: 'hi'
},
// normal HTML attributes
attrs: {
id: 'foo'
},
// DOM props
domProps: {
innerHTML: 'bar'
},
// Event handlers are nested under "on", though
// modifiers such as in v-on:keyup.enter are not
// supported. You'll have to manually check the
// keyCode in the handler instead.
on: {
click: this.clickHandler
},
// For components only. Allows you to listen to
// native events, rather than events emitted from
// the component using vm.$emit.
nativeOn: {
click: this.nativeClickHandler
},
// class is a special module, same API as `v-bind:class`
class: {
foo: true,
bar: false
},
// style is also same as `v-bind:style`
style: {
color: 'red',
fontSize: '14px'
},
// other special top-level properties
key: 'key',
ref: 'ref',
// assign the `ref` is used on elements/components with v-for
refInFor: true,
slot: 'slot'
})
}
The equivalent of the above in Vue 2.0 JSX is:
render (h) {
return (
<div
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
If a custom element starts with lowercase, it will be treated as a string id and used to lookup a registered component. If it starts with uppercase, it will be treated as an identifier, which allows you to do:
import Todo from './Todo.js'
export default {
render (h) {
return <Todo/> // no need to register Todo via components option
}
}
JSX spread is supported, and this plugin will intelligently merge nested data properties. For example:
const data = {
class: ['b', 'c']
}
const vnode = <div class="a" {...data}/>
The merged data will be:
{ class: ['a', 'b', 'c'] }
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.
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:
Pass everything as an object via value
, e.g. v-name={{ value, modifier: true }}
Use the raw vnode directive data format:
const directives = [
{ name: 'my-dir', value: 123, modifiers: { abc: true } }
]
return <div {...{ directives }}/>
FAQs
Babel plugin for Vue 2.0 JSX
The npm package babel-plugin-transform-vue-jsx receives a total of 116,458 weekly downloads. As such, babel-plugin-transform-vue-jsx popularity was classified as popular.
We found that babel-plugin-transform-vue-jsx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.