Vue-next-jsx

A babel plugin that provides jsx syntax for vue-next

Feature

• Consistent with @vue/compiler-core, @vue/compiler-dom，@vue/shared, including compiled results, test cases and library.

• Fully vue directives and components supported.

• Same plugin options with @vue/compiler-core, look at.

• The ability to customize your own directives and props, both parse(syntax) and transform.

Usage

Install

install in npm

npm install @razors/babel-plugin-vue-next-jsx

or in yarn

yarn add @razors/babel-plugin-vue-next-jsx

Then change your babel config

{
    "presets": [
      ["@babel/preset-env"],
    ],
    "plugins": [
      ["@razors/babel-plugin-vue-next-jsx"]
    ]
}

base syntax

Functional component

export default () => <div/>

In render function

export default {
  render() {
    return <div/>
  }
}

In setup function

export default {
  setup() {
    return () => {
      return (
        <div>hello world</div>
      )
    }
  }
}

component

Functional component:

export default () => <material-button/>

Normal component:

export default {
  render() {
    return <material-button/>
  }
}

tips: in tsx, default import which isn't called will be removed. We can use namespace component to avoid this.

// will be cleared by ts, error
import test from './test'
const a = () => <test></test>

import * as t from './test'
const b = () => <t.test></t.test>

props(v-bind)

Use props as jsx like:

<test testProps={test}></test>

Dynamic bind:

<test v-bind={[dynamic, a]}></test>

equal to:

<test :[dynamic]="a"></test>

event handler(v-on)

Props starsWith 'on' will be treated as event

<div onClick={onClick}></div>

And use v-on to pass modifiers or use dynamic event name

<div v-on={[e,test,["left"]]}/>

Equal to:

<div @[e].left="test"/>

directive

• All v-xx and vXx attributes will be parsed as directives. For example, v-on and vOn is same.

• All directives value will be parsed in this format: [arg, exp, modifiers]

support directive: v-html, v-is, v-model, v-show, v-text, v-bind, v-on

fragment

Use <></>

<>
  <div>1<div>
  <div>2<div>
</>

slot

default slot

<test>test</test>

Named and scoped slot:

<test>
{
  (str) => <div>{str}</div>
}
</test>

or use literal object

<test>
{
  {
    default: (str) => <div>{str}</div>
  }
}
</test>

usage

  setup(props, {slots}) {
    return () => {
      return (
        <div>{slots.default()}</div>
      )
    }
  }

Tips: use vue's renderSlot when your default slot have multiple root, or use <></> literal

example:

when you write:

<test>
  <div>1</div>
  <div>2</div>
</test>

usage:

<div>{renderSlot(slots, 'default')}</div>

or

write:

<test>
  <>
    <div>1</div>
    <div>2</div>
  </>
</test>

usage:

<div>{slots.default()}</div>

scoped css

By default, we don't change setup or render function.So you must wrap your render or setup function by withId provided by runtime.

import { withId } from '@razors/babel-plugin-vue-next-jsx/dist/runtime'
export default {
  setup() {
    return withId(()=><div/>)
  }
}

under developing

• [x] v-once
• [x] cacheHandlers
• [x] optimizeImports
• [x] hoistStatic
• [x] SSR support