Babel Preset JSX

Configurable Babel preset to add Vue JSX support. See the configuration options here.

Compatibility

This repo is only compatible with:

Babel 7+. For Babel 6 support, use vuejs/babel-plugin-transform-vue-jsx
Vue 2+. JSX is not supported for older versions. For Vue 3 support, there is an experimental plugin available as @ant-design-vue/babel-plugin-jsx.

Installation

Install the preset with:

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

Then add the preset to babel.config.js:

module.exports = {
  presets: ['@vue/babel-preset-jsx'],
}

Syntax

Content

render() {
  return <p>hello</p>
}

with dynamic content:

render() {
  return <p>hello { this.message }</p>
}

when self-closing:

render() {
  return <input />
}

with a component:

import MyComponent from './my-component'

export default {
  render() {
    return <MyComponent>hello</MyComponent>
  },
}

Attributes/Props

render() {
  return <input type="email" />
}

with a dynamic binding:

render() {
  return <input
    type="email"
    placeholder={this.placeholderText}
  />
}

with the spread operator (object needs to be compatible with Vue Data Object):

render() {
  const inputAttrs = {
    type: 'email',
    placeholder: 'Enter your email'
  }

  return <input {...{ attrs: inputAttrs }} />
}

Slots

named slots:

render() {
  return (
    <MyComponent>
      <header slot="header">header</header>
      <footer slot="footer">footer</footer>
    </MyComponent>
  )
}

scoped slots:

render() {
  const scopedSlots = {
    header: () => <header>header</header>,
    footer: () => <footer>footer</footer>
  }

  return <MyComponent scopedSlots={scopedSlots} />
}

Directives

<input vModel={this.newTodoText} />

with a modifier:

<input vModel_trim={this.newTodoText} />

with an argument:

<input vOn:click={this.newTodoText} />

with an argument and modifiers:

<input vOn:click_stop_prevent={this.newTodoText} />

v-html:

<p domPropsInnerHTML={html} />

Functional Components

Transpiles arrow functions that return JSX into functional components, when they are either default exports:

export default ({ props }) => <p>hello {props.message}</p>

or PascalCase variable declarations:

const HelloWorld = ({ props }) => <p>hello {props.message}</p>

phillyc / jsx Goto Github PK

jsx's Introduction

Babel Preset JSX

Compatibility

Installation

Syntax

Content

Attributes/Props

Slots

Directives

Functional Components

jsx's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent