npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@hcysunyang/babel-plugin-vue-next-jsx

v0.4.1

Published

[Vue Next JSX Explorer](https://vue-next-jsx.netlify.app/)

Downloads

26

Readme

vue-next-jsx

Vue Next JSX Explorer

build status

A babel plugin that provides jsx syntax for vue3

  • Supports both jsx and tsx
  • Same behavior as Vue3 Compiler
  • Fully supports v-on / v-model
  • Support optimizate mode: analyze PatchFlags
  • Write in Typescript
  • Other directives: v-html / v-text
  • Try to minimize the volume of generated code

Usage

Installation

npm install @hcysunyang/babel-plugin-vue-next-jsx -D
# or
yarn add @hcysunyang/babel-plugin-vue-next-jsx -D

Babel Config

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

For typescript users

Please read this thread: https://github.com/vuejs/jsx/issues/141

For the sake of type hinting and type safety, we recommend using the following syntax:

vModel

Intrinsic Elements

<!-- value -->
<input vModel={ [refVal.value] } />
<!-- value + array modifiers -->
<input vModel={ [refVal.value, ['number', 'trim']] } />
<!-- value + object modifiers -->
<input vModel={ [refVal.value, { number: true }] } />
<!-- modifiers as a variable -->
<input vModel={ [refVal.value, modifiers] } />

Components

<!-- value -->
<Comp vModel={ [refVal.value] } />
<!-- value + array modifiers -->
<Comp vModel={ [refVal.value, 'modelValue', ['a', 'b']] } />
<!-- value + object modifiers -->
<Comp vModel={ [refVal.value, 'modelValue', { a: true, b: true }] } />
<!-- value + propName -->
<Comp vModel={ [refVal.value, 'foo'] } />
<!-- value + dynamic propName -->
<Comp vModel={ [refVal.value, refName.value] } />
<!-- value + dynamic propName + modifiers -->
<Comp vModel={ [refVal.value, refName.value, ['a', 'b']] } />
<!-- modifiers as a variable -->
<Comp vModel={ [refVal.value, refName.value, modifiers] } />

<div onClick={ handler }></div>
<div onClick={ withModifiers(handler, ['self']) }></div>

For type hints, you can check our dts test:

tsconfig.json

{
  // ...
  "compilerOptions": {
    "types": ["@hcysunyang/babel-plugin-vue-next-jsx"],
  }
  // ...
}

For javascript users

Event: v-on-eventname_modifier

We often do this in template:

<p v-on:click.stop="handler"></p>

In (j|t)sx:

<p v-on-click_stop="handler"></p>

tsx does not allow to use : and . as attribute name

If it is available in the template, it is available in j/tsx too, here are some examples:

<div v-on-click_middle={ handler }></div>
<div v-on-click_stop={ handler }></div>
<div v-on-click_right={ handler }></div>
<div v-on-keyup_esc={ handler }></div>

<div v-on={ obj }></div>

v-model-propname_modifier

<input v-model={ refVal.value }/>
<input v-model={ refVal.value } :type={ refType.value }/>
<select v-model={ refVal.value }/>
<textarea v-model={ refVal.value }/>

v-model in the component:

<Comp v-model-foo_a={ refVal.value }/>

The generated code is:

createVNode(Comp, {
  "foo": ref.val,
  "onUpdate:foo": $event => ref.val = $event,
  "fooModifiers": {
    "a": true,
    "b": true
  }
})

This is consistent with Vue3 Compiler behavior.

v-bind

In fact, we don't need v-bind in (j|t)sx, we can use jsxExpressionContainer and jsxSpreadAttribute directly:

<Comp foo={ refVal.value } { ...props } bar="bar" />

The generated code is:

const el = createVNode(Comp,
  mergeProps(
    { foo: refVal.value },
    { ...props },
    { bar: "bar" }
  )
)

slots

I don’t want to support v-slot. One of the most important reasons is that in tsx: the type of scopedSlot is lost. It is recommended to do this(and this is the only way):

const App = {
  setup() {

    return () => {

      const slots = {
        default: () => [ <p>default</p> ],
        foo: ({ val }) => [ <p>{ val }</p> ]
      }

      return <Comp>{ slots }</Comp>

    }
  }
}

KeepAlive And Teleport

In Vue3, the children of KeepAlive and Teleport components will not be built as slots, so you can use them as in the template:

Fragment

Since Vue3 supports multiple root elements, so we need to support Fragment:

<>
  <p>foo</p>
  <div>bar</div>
</>

Optimization mode

Vue3 makes full use of compile-time information to generate PatchFlags for runtime update performance improvement, vue-next-jsx behaves as Vue3 Compiler after enabling optimization mode.

In the babel.config.json file:

{
  "presets": [
    "@babel/env"
  ],
  "plugins": [
    ["@hcysunyang/vue-next-jsx", {
      // Enabling optimization mode
      "optimizate": true
    }]
  ]
}

Specify source

If you install vue instead of @vue/runtime-dom then you don’t need to do anything, but if you install @vue/runtime-dom, then you need to specify source:

{
  "presets": [
    "@babel/env"
  ],
  "plugins": [
    ["@hcysunyang/vue-next-jsx", {
      // Specify source
      "source": "@vue/runtime-dom"
    }]
  ]
}

v-html / v-text

Just like using them in template:

<p v-html={ refHtml.value }></p>
<p v-text={ refText.value }></p>

Other Directives

Supported:

  • v-show
<p v-show={ refVal.value }></p>