Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@vue/babel-plugin-jsx
Advanced tools
Changelog
1.1.1
2021-10-17
Readme
To add Vue JSX support.
English | 简体中文
Install the plugin with:
npm install @vue/babel-plugin-jsx -D
Then add the plugin to your babel config:
{
"plugins": ["@vue/babel-plugin-jsx"]
}
Type: boolean
Default: false
transform on: { click: xx }
to onClick: xxx
Type: boolean
Default: false
enable optimization or not. It's not recommended to enable it If you are not familiar with Vue 3.
Type: (tag: string) => boolean
Default: undefined
configuring custom elements
Type: boolean
Default: true
merge static and dynamic class / style attributes / onXXX handlers
Type: boolean
Default: true
Whether to enable object slots
(mentioned below the document) syntax". It might be useful in JSX, but it will add a lot of _isSlot
condition expressions which increase your bundle size. And v-slots
is still available even if enableObjectSlots
is turned off.
Type: string
Default: createVNode
Replace the function used when compiling JSX expressions.
functional component
const App = () => <div>Vue 3.0</div>;
with render
const App = {
render() {
return <div>Vue 3.0</div>;
},
};
import { withModifiers, defineComponent } from "vue";
const App = defineComponent({
setup() {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
<div onClick={withModifiers(inc, ["self"])}>{count.value}</div>
);
},
});
Fragment
const App = () => (
<>
<span>I'm</span>
<span>Fragment</span>
</>
);
const App = () => <input type="email" />;
with a dynamic binding:
const placeholderText = "email";
const App = () => <input type="email" placeholder={placeholderText} />;
const App = {
data() {
return { visible: true };
},
render() {
return <input v-show={this.visible} />;
},
};
Note: You should pass the second param as string for using
arg
.
<input v-model={val} />
<input v-model:argument={val} />
<input v-model={[val, ["modifier"]]} />
<A v-model={[val, "argument", ["modifier"]]} />
Will compile to:
h(A, {
argument: val,
argumentModifiers: {
modifier: true,
},
"onUpdate:argument": ($event) => (val = $event),
});
Note: You should pass a Two-dimensional Arrays to v-models.
<A v-models={[[foo], [bar, "bar"]]} />
<A
v-models={[
[foo, "foo"],
[bar, "bar"],
]}
/>
<A
v-models={[
[foo, ["modifier"]],
[bar, "bar", ["modifier"]],
]}
/>
Will compile to:
h(A, {
modelValue: foo,
modelModifiers: {
modifier: true,
},
"onUpdate:modelValue": ($event) => (foo = $event),
bar: bar,
barModifiers: {
modifier: true,
},
"onUpdate:bar": ($event) => (bar = $event),
});
Recommended when using string arguments
const App = {
directives: { custom: customDirective },
setup() {
return () => <a v-custom:arg={val} />;
},
};
const App = {
directives: { custom: customDirective },
setup() {
return () => <a v-custom={[val, "arg", ["a", "b"]]} />;
},
};
Note: In
jsx
,v-slot
should be replace withv-slots
const A = (props, { slots }) => (
<>
<h1>{ slots.default ? slots.default() : 'foo' }</h1>
<h2>{ slots.bar?.() }</h2>
</>
);
const App = {
setup() {
const slots = {
bar: () => <span>B</span>,
};
return () => (
<A v-slots={slots}>
<div>A</div>
</A>
);
},
};
// or
const App = {
setup() {
const slots = {
default: () => <div>A</div>,
bar: () => <span>B</span>,
};
return () => <A v-slots={slots} />;
},
};
// or you can use object slots when `enableObjectSlots` is not false.
const App = {
setup() {
return () => (
<>
<A>
{{
default: () => <div>A</div>,
bar: () => <span>B</span>,
}}
</A>
<B>{() => "foo"}</B>
</>
);
},
};
tsconfig.json
:
{
"compilerOptions": {
"jsx": "preserve"
}
}
Ant Design Vue |
Vant |
Element Plus |
Vue Json Pretty |
This repo is only compatible with:
FAQs
Babel plugin for Vue 3 JSX
The npm package @vue/babel-plugin-jsx receives a total of 999,130 weekly downloads. As such, @vue/babel-plugin-jsx popularity was classified as popular.
We found that @vue/babel-plugin-jsx demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.