babel-plugin-transform-jue-jsx v0.2.2

jue

Install

You will need the jue runtime and babel-preset-vue for transforming Jue JSX:

yarn add jue
yarn add babel-preset-jue --dev

Configure .babelrc:

{
  "presets": ["jue"]
}

Example

In:

const Counter = <Component>
  <Data>{function () {
    return { count: 0 }
  }}</Data>

  <Method>{function handleClick() {
    this.count++
  }}</Method>

  <Template>{`
    <button @click="handleClick">{{ count }}</button>
  `}</Template>
</Component>

Out:

const Counter = {
  data() {
    return { count: 0 }
  },
  methods: {
    handleClick() {
      this.count++
    }
  },
  template: `<button @click="handleClick">{{ count }}</button>`
}

Alternatively, you can use Vue JSX with Jue JSX! For example in render function:

const Counter = <Component>
  <Data>{function () {
    return { count: 0 }
  }}</Data>

  <Method>{function handleClick() {
    this.count++
  }}</Method>

  <Render>{function () {
    return <button onClick={this.handleClick}>{this.count}</button>
  }}</Render>
</Component>

Tips

For methods and computed whose value should be an object, you can define its name via function name or component prop:

<Method>{function handleClick() {
  this.count++
}}</Method>

Is equivalent to:

<Method name="handleClick">{function () {
  this.count++
}}</Method>

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

jue © egoist, Released under the MIT License. Authored and maintained by egoist with help from contributors (list).

egoistian.com · GitHub @egoist · Twitter @_egoistlily