= createUnplugin(plugin)
+export default unplugin
diff --git a/packages/jsx-macros/src/raw.ts b/packages/jsx-macros/src/raw.ts
new file mode 100644
index 000000000..f0df9423f
--- /dev/null
+++ b/packages/jsx-macros/src/raw.ts
@@ -0,0 +1,3 @@
+import { plugin } from './core/plugin'
+
+export default plugin
diff --git a/packages/jsx-macros/src/rolldown.ts b/packages/jsx-macros/src/rolldown.ts
new file mode 100644
index 000000000..082a55c18
--- /dev/null
+++ b/packages/jsx-macros/src/rolldown.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.rolldown as typeof unplugin.rolldown
diff --git a/packages/jsx-macros/src/rollup.ts b/packages/jsx-macros/src/rollup.ts
new file mode 100644
index 000000000..45545feb1
--- /dev/null
+++ b/packages/jsx-macros/src/rollup.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.rollup as typeof unplugin.rollup
diff --git a/packages/jsx-macros/src/rspack.ts b/packages/jsx-macros/src/rspack.ts
new file mode 100644
index 000000000..6df8a0299
--- /dev/null
+++ b/packages/jsx-macros/src/rspack.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.rspack as typeof unplugin.rspack
diff --git a/packages/jsx-macros/src/vite.ts b/packages/jsx-macros/src/vite.ts
new file mode 100644
index 000000000..a7c5db2c1
--- /dev/null
+++ b/packages/jsx-macros/src/vite.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.vite as typeof unplugin.vite
diff --git a/packages/jsx-macros/src/webpack.ts b/packages/jsx-macros/src/webpack.ts
new file mode 100644
index 000000000..74c1c9020
--- /dev/null
+++ b/packages/jsx-macros/src/webpack.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.webpack as typeof unplugin.webpack
diff --git a/packages/jsx-macros/tests/__snapshots__/fixtures.test.ts.snap b/packages/jsx-macros/tests/__snapshots__/fixtures.test.ts.snap
new file mode 100644
index 000000000..a1edd9d61
--- /dev/null
+++ b/packages/jsx-macros/tests/__snapshots__/fixtures.test.ts.snap
@@ -0,0 +1,330 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`fixtures > ./fixtures/define-component.tsx 1`] = `
+"
+import { createPropsDefaultProxy as __MACROS_createPropsDefaultProxy } from "/vue-macros/jsx-macros/with-defaults";
+import { useAttrs as __MACROS_useAttrs } from "vue";
+import { useModel as __MACROS_useModel } from "/vue-macros/jsx-macros/use-model";
+import { withAsyncContext as __MACROS_withAsyncContext } from "vue";import { defineComponent, nextTick } from 'vue'
+
+const Comp = defineComponent(
+ (__MACROS_props) => {
+const __MACROS_default_props = __MACROS_createPropsDefaultProxy(__MACROS_props, {'.bar': 'bar'!});const attrs = __MACROS_useAttrs();
+ const foo = $(
+ __MACROS_useModel(__MACROS_props, 'foo', {
+ validator: (value) => {
+ return value === 'foo'
+ },
+ type: String,
+ })!,
+ )
+ return () => {[foo, __MACROS_default_props.bar, attrs.baz]}
+ },
+ {props: { 'bar': { required: true }, 'foo': { required: true, validator: (value) => {
+ return value === 'foo'
+ }, type: String }, 'onUpdate:foo': null, 'fooModifiers': null },inheritAttrs: false, name: 'Comp' },
+)
+
+const Comp1 = defineComponent((props: { bar: 'bar'; 'onUpdate:bar': any }) => {
+ const foo = __MACROS_useModel(props, 'foo')
+ return () => {[foo.value, props['bar'], props['onUpdate:bar']]}
+}, { props: { 'bar': null, 'onUpdate:bar': null, 'foo': null, 'onUpdate:foo': null, 'fooModifiers': null } })
+
+const Comp2 = defineComponent(async (__MACROS_props) => {
+let __temp, __restore
+
+ ;(
+ ([__temp,__restore] = __MACROS_withAsyncContext(() => nextTick())),
+ await __temp,
+ __restore()
+)
+ let foo = (
+ ([__temp,__restore] = __MACROS_withAsyncContext(() => new Promise((resolve) => {
+ setTimeout(() => resolve('foo'), 1000)
+ }))),
+ __temp = await __temp,
+ __restore(),
+ __temp
+)
+ return () => {foo}
+})
+"
+`;
+
+exports[`fixtures > ./fixtures/define-expose.tsx 1`] = `
+"
+import { useExpose as __MACROS_useExpose } from "/vue-macros/jsx-macros/use-expose";
+import { getCurrentInstance as __MACROS_getCurrentInstance } from "vue";export function Comp(__MACROS_props) {
+ __MACROS_useExpose(__MACROS_getCurrentInstance(), {
+ foo: 1,
+ })
+ return
+}
+
+export const Comp1 = function (props: any) {
+ __MACROS_useExpose(__MACROS_getCurrentInstance(), {
+ foo: props.foo,
+ })
+ return
+}
+
+export const Comp2 = ({ foo, ...__MACROS_props }: any) => {
+ __MACROS_useExpose(__MACROS_getCurrentInstance(), {
+ foo,
+ })
+ return
+}
+"
+`;
+
+exports[`fixtures > ./fixtures/define-model.tsx 1`] = `
+"
+import { useModel as __MACROS_useModel } from "/vue-macros/jsx-macros/use-model";export const Comp = ({ bar, ...__MACROS_props }: { bar: string }) => {
+ const foo = __MACROS_useModel(__MACROS_props, 'foo', { default: bar })
+ return {foo.value}
+}
+
+export default function (__MACROS_props) {
+ const modelValue = $(__MACROS_useModel(__MACROS_props, 'modelValue',)!)
+ return (
+
+ {modelValue}
+
+ )
+}
+"
+`;
+
+exports[`fixtures > ./fixtures/define-slots.tsx 1`] = `
+"
+import { useSlots as __MACROS_useSlots } from "vue";export const Comp = (__MACROS_props) => {
+ const slots = Object.assign<{
+ default: () => any
+ }>({}, __MACROS_useSlots())
+ return {slots.default?.()}
+}
+
+export default function (__MACROS_props) {
+ const slots = Object.assign({
+ default: () => default
,
+ },__MACROS_useSlots())
+ return {slots.default?.()}
+}
+"
+`;
+
+exports[`fixtures > ./fixtures/define-style.tsx 1`] = `
+"import "/vue-macros/jsx-macros/define-style/0?scopeId=4e9d5cd0&scoped=true&lang.css";import style1 from "/vue-macros/jsx-macros/define-style/1?scopeId=426a859d&scoped=true&lang.module.scss";import "/vue-macros/jsx-macros/define-style/2?scopeId=63a7910c&scoped=false&lang.scss";import { defineComponent, ref } from 'vue'
+
+export const Comp = (__MACROS_props) => {
+ const color = ref('red')
+
+ return foo
+}
+
+export default defineComponent((__MACROS_props) => {
+ const color = ref('red')
+ const styles = style1
+ return () => (
+ <>
+ foo
+
+ bar
+
+
+ )
+})
+
+
+"
+`;
+
+exports[`react fixtures > ./fixtures/define-expose.tsx 1`] = `
+"
+import { useImperativeHandle as __MACROS_useImperativeHandle } from "react";
+import { forwardRef as __MACROS_forwardRef } from "react";export const Comp = __MACROS_forwardRef(function Comp(__MACROS_props, __MACROS_ref) {
+ __MACROS_useImperativeHandle(__MACROS_ref, () =>({
+ foo: 1,
+ }), [])
+ return
+})
+
+export const Comp1 = __MACROS_forwardRef(function (props: any, __MACROS_ref) {
+ __MACROS_useImperativeHandle(__MACROS_ref, () =>({
+ foo: props.foo,
+ }), [props.foo])
+ return
+})
+
+export const Comp2 = __MACROS_forwardRef(({ foo, ...__MACROS_props }: any, __MACROS_ref) => {
+ __MACROS_useImperativeHandle(__MACROS_ref, () =>({
+ foo,
+ }), [foo])
+ return
+})
+"
+`;
+
+exports[`react19 fixtures > ./fixtures/define-expose.tsx 1`] = `
+"
+import { useImperativeHandle as __MACROS_useImperativeHandle } from "react";export function Comp(__MACROS_props) {
+ __MACROS_useImperativeHandle(__MACROS_props.ref, () =>({
+ foo: 1,
+ }), [])
+ return
+}
+
+export const Comp1 = function (props: any) {
+ __MACROS_useImperativeHandle(props.ref, () =>({
+ foo: props.foo,
+ }), [props.foo])
+ return
+}
+
+export const Comp2 = ({ foo, ...__MACROS_props }: any) => {
+ __MACROS_useImperativeHandle(, () =>({
+ foo,
+ }), [foo])
+ return
+}
+"
+`;
+
+exports[`vue/vapor fixtures > ./fixtures/define-component.tsx 1`] = `
+"
+import { createPropsDefaultProxy as __MACROS_createPropsDefaultProxy } from "/vue-macros/jsx-macros/with-defaults";
+import { useAttrs as __MACROS_useAttrs } from "vue";
+import { useModel as __MACROS_useModel } from "/vue-macros/jsx-macros/use-model";
+import { withAsyncContext as __MACROS_withAsyncContext } from "vue";import { defineComponent, nextTick } from 'vue'
+
+const Comp = defineComponent(
+ (__MACROS_props) => {
+const __MACROS_default_props = __MACROS_createPropsDefaultProxy(__MACROS_props, {'.bar': 'bar'!});const attrs = __MACROS_useAttrs();
+ const foo = $(
+ __MACROS_useModel(__MACROS_props, 'foo', {
+ validator: (value) => {
+ return value === 'foo'
+ },
+ type: String,
+ })!,
+ )
+ return {[foo, __MACROS_default_props.bar, attrs.baz]}
+ },
+ {props: { 'bar': { required: true }, 'foo': { required: true, validator: (value) => {
+ return value === 'foo'
+ }, type: String }, 'onUpdate:foo': null, 'fooModifiers': null },inheritAttrs: false, name: 'Comp' },
+)
+
+const Comp1 = defineComponent((props: { bar: 'bar'; 'onUpdate:bar': any }) => {
+ const foo = __MACROS_useModel(props, 'foo')
+ return {[foo.value, props['bar'], props['onUpdate:bar']]}
+}, { props: { 'bar': null, 'onUpdate:bar': null, 'foo': null, 'onUpdate:foo': null, 'fooModifiers': null } })
+
+const Comp2 = defineComponent(async (__MACROS_props) => {
+let __temp, __restore
+
+ ;(
+ ([__temp,__restore] = __MACROS_withAsyncContext(() => nextTick())),
+ await __temp,
+ __restore()
+)
+ let foo = (
+ ([__temp,__restore] = __MACROS_withAsyncContext(() => new Promise((resolve) => {
+ setTimeout(() => resolve('foo'), 1000)
+ }))),
+ __temp = await __temp,
+ __restore(),
+ __temp
+)
+ return () => {foo}
+})
+"
+`;
+
+exports[`vue/vapor fixtures > ./fixtures/define-expose.tsx 1`] = `
+"
+import { useExpose as __MACROS_useExpose } from "/vue-macros/jsx-macros/use-expose";
+import { currentInstance as __MACROS_currentInstance } from "vue";export function Comp(__MACROS_props) {
+ __MACROS_useExpose(__MACROS_currentInstance, {
+ foo: 1,
+ })
+ return
+}
+
+export const Comp1 = function (props: any) {
+ __MACROS_useExpose(__MACROS_currentInstance, {
+ foo: props.foo,
+ })
+ return
+}
+
+export const Comp2 = ({ foo, ...__MACROS_props }: any) => {
+ __MACROS_useExpose(__MACROS_currentInstance, {
+ foo,
+ })
+ return
+}
+"
+`;
+
+exports[`vue/vapor fixtures > ./fixtures/define-model.tsx 1`] = `
+"
+import { useModel as __MACROS_useModel } from "/vue-macros/jsx-macros/use-model";export const Comp = ({ bar, ...__MACROS_props }: { bar: string }) => {
+ const foo = __MACROS_useModel(__MACROS_props, 'foo', { default: bar })
+ return {foo.value}
+}
+
+export default function (__MACROS_props) {
+ const modelValue = $(__MACROS_useModel(__MACROS_props, 'modelValue',)!)
+ return (
+
+ {modelValue}
+
+ )
+}
+"
+`;
+
+exports[`vue/vapor fixtures > ./fixtures/define-slots.tsx 1`] = `
+"
+import { useSlots as __MACROS_useSlots } from "vue";export const Comp = (__MACROS_props) => {
+ const slots = Object.assign<{
+ default: () => any
+ }>({}, __MACROS_useSlots())
+ return {slots.default?.()}
+}
+
+export default function (__MACROS_props) {
+ const slots = Object.assign({
+ default: () => default
,
+ },__MACROS_useSlots())
+ return {slots.default?.()}
+}
+"
+`;
+
+exports[`vue/vapor fixtures > ./fixtures/define-style.tsx 1`] = `
+"import "/vue-macros/jsx-macros/define-style/0?scopeId=4e9d5cd0&scoped=true&lang.css";import style1 from "/vue-macros/jsx-macros/define-style/1?scopeId=426a859d&scoped=true&lang.module.scss";import "/vue-macros/jsx-macros/define-style/2?scopeId=63a7910c&scoped=false&lang.scss";import { defineComponent, ref } from 'vue'
+
+export const Comp = (__MACROS_props) => {
+ const color = ref('red')
+
+ return foo
+}
+
+export default defineComponent((__MACROS_props) => {
+ const color = ref('red')
+ const styles = style1
+ return () => (
+ <>
+ foo
+
+ bar
+
+
+ )
+})
+
+
+"
+`;
diff --git a/packages/jsx-macros/tests/__snapshots__/restructure.test.ts.snap b/packages/jsx-macros/tests/__snapshots__/restructure.test.ts.snap
new file mode 100644
index 000000000..b0cf2b2f5
--- /dev/null
+++ b/packages/jsx-macros/tests/__snapshots__/restructure.test.ts.snap
@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`transform > reconstruct 1`] = `
+"const App = (__MACROS_props, __MACROS_props1) => {
+ function onClick(__MACROS_props){
+ return { foo: __MACROS_props.foo, baz: __MACROS_props1.baz.baz }
+ };
+ return [ __MACROS_props[0][0][1], __MACROS_props[1].id.foo[0], __MACROS_props1.baz ]
+ }"
+`;
+
+exports[`transform > reconstruct arrowFunctionExpression 1`] = `
+"const App = (__MACROS_props) => (
+ <>{[__MACROS_props[0].root.foo]}
+ )"
+`;
+
+exports[`transform > reconstruct default-prop 1`] = `
+"
+import { createPropsDefaultProxy as __MACROS_createPropsDefaultProxy } from "/vue-macros/jsx-macros/with-defaults";
+import { createPropsRestProxy as __MACROS_createPropsRestProxy } from "vue";function App(__MACROS_props, __MACROS_props1){
+const __MACROS_default_props = __MACROS_createPropsDefaultProxy(__MACROS_props, {'.foo': 'bar'});
+const __MACROS_default_props1 = __MACROS_createPropsDefaultProxy(__MACROS_props1, {'[0]': 'foo'});
+const rest = __MACROS_createPropsRestProxy(__MACROS_default_props, ['foo', 'baz']);
+ return <>{[__MACROS_default_props.foo, __MACROS_default_props.baz, rest, __MACROS_default_props1[0]]}
+ }"
+`;
+
+exports[`transform > reconstruct rest-prop 1`] = `
+"
+import { createPropsDefaultProxy as __MACROS_createPropsDefaultProxy } from "/vue-macros/jsx-macros/with-defaults";
+import { createPropsRestProxy as __MACROS_createPropsRestProxy } from "vue";function App(__MACROS_props){
+const __MACROS_default_props = __MACROS_createPropsDefaultProxy(__MACROS_props, {'.bar': 1});
+const rest = __MACROS_createPropsRestProxy(__MACROS_default_props, ['foo', 'bar']);
+ return <>{[__MACROS_default_props.foo, __MACROS_default_props.bar, rest]}
+ }"
+`;
diff --git a/packages/jsx-macros/tests/fixtures.test.ts b/packages/jsx-macros/tests/fixtures.test.ts
new file mode 100644
index 000000000..3be1f155a
--- /dev/null
+++ b/packages/jsx-macros/tests/fixtures.test.ts
@@ -0,0 +1,75 @@
+import { testFixtures } from '@vue-macros/test-utils'
+import { describe } from 'vitest'
+import { transformJsxMacros } from '../src/core'
+
+const options = {
+ defineModel: { alias: ['defineModel'] },
+ defineSlots: { alias: ['defineSlots'] },
+ defineStyle: { alias: ['defineStyle'] },
+ defineExpose: { alias: ['defineExpose'] },
+ defineComponent: { alias: ['defineComponent'] },
+}
+
+describe('fixtures', async () => {
+ await testFixtures(
+ import.meta.glob('./fixtures/**/*.tsx', {
+ eager: true,
+ as: 'raw',
+ }),
+ (args, id, code) =>
+ transformJsxMacros(code, id, new Map(), {
+ lib: 'vue',
+ include: ['*.tsx'],
+ version: 3.5,
+ ...options,
+ })?.code,
+ )
+})
+
+describe('vue/vapor fixtures', async () => {
+ await testFixtures(
+ import.meta.glob('./fixtures/**/*.tsx', {
+ eager: true,
+ as: 'raw',
+ }),
+ (args, id, code) =>
+ transformJsxMacros(code, id, new Map(), {
+ lib: 'vue/vapor',
+ include: ['*.tsx'],
+ version: 3.5,
+ ...options,
+ })?.code,
+ )
+})
+
+describe('react fixtures', async () => {
+ await testFixtures(
+ import.meta.glob('./fixtures/**/define-expose.tsx', {
+ eager: true,
+ as: 'raw',
+ }),
+ (args, id, code) =>
+ transformJsxMacros(code, id, new Map(), {
+ lib: 'react',
+ include: ['*.tsx'],
+ version: 18,
+ ...options,
+ })?.code,
+ )
+})
+
+describe('react19 fixtures', async () => {
+ await testFixtures(
+ import.meta.glob('./fixtures/**/define-expose.tsx', {
+ eager: true,
+ as: 'raw',
+ }),
+ (args, id, code) =>
+ transformJsxMacros(code, id, new Map(), {
+ lib: 'react',
+ include: ['*.tsx'],
+ version: 19,
+ ...options,
+ })?.code,
+ )
+})
diff --git a/packages/jsx-macros/tests/fixtures/define-component.tsx b/packages/jsx-macros/tests/fixtures/define-component.tsx
new file mode 100644
index 000000000..f80899a39
--- /dev/null
+++ b/packages/jsx-macros/tests/fixtures/define-component.tsx
@@ -0,0 +1,29 @@
+import { defineComponent, nextTick } from 'vue'
+
+const Comp = defineComponent(
+ ({ bar = 'bar'!, ...attrs }: { bar: 'bar'; baz: 'baz' }) => {
+ const foo = $(
+ defineModel('foo', {
+ validator: (value) => {
+ return value === 'foo'
+ },
+ type: String,
+ })!,
+ )
+ return {[foo, bar, attrs.baz]}
+ },
+ { name: 'Comp' },
+)
+
+const Comp1 = defineComponent((props: { bar: 'bar'; 'onUpdate:bar': any }) => {
+ const foo = defineModel('foo')
+ return {[foo.value, props['bar'], props['onUpdate:bar']]}
+})
+
+const Comp2 = defineComponent(async () => {
+ await nextTick()
+ let foo = await new Promise((resolve) => {
+ setTimeout(() => resolve('foo'), 1000)
+ })
+ return () => {foo}
+})
diff --git a/packages/jsx-macros/tests/fixtures/define-expose.tsx b/packages/jsx-macros/tests/fixtures/define-expose.tsx
new file mode 100644
index 000000000..ad6a8d2b4
--- /dev/null
+++ b/packages/jsx-macros/tests/fixtures/define-expose.tsx
@@ -0,0 +1,20 @@
+export function Comp() {
+ defineExpose({
+ foo: 1,
+ })
+ return
+}
+
+export const Comp1 = function (props: any) {
+ defineExpose({
+ foo: props.foo,
+ })
+ return
+}
+
+export const Comp2 = ({ foo }: any) => {
+ defineExpose({
+ foo,
+ })
+ return
+}
diff --git a/packages/jsx-macros/tests/fixtures/define-model.tsx b/packages/jsx-macros/tests/fixtures/define-model.tsx
new file mode 100644
index 000000000..1767dccf8
--- /dev/null
+++ b/packages/jsx-macros/tests/fixtures/define-model.tsx
@@ -0,0 +1,13 @@
+export const Comp = ({ bar }: { bar: string }) => {
+ const foo = defineModel('foo', { default: bar })
+ return {foo.value}
+}
+
+export default function () {
+ const modelValue = $(defineModel()!)
+ return (
+
+ {modelValue}
+
+ )
+}
diff --git a/packages/jsx-macros/tests/fixtures/define-slots.tsx b/packages/jsx-macros/tests/fixtures/define-slots.tsx
new file mode 100644
index 000000000..0d3fcb541
--- /dev/null
+++ b/packages/jsx-macros/tests/fixtures/define-slots.tsx
@@ -0,0 +1,13 @@
+export const Comp = () => {
+ const slots = defineSlots<{
+ default: () => any
+ }>()
+ return {slots.default?.()}
+}
+
+export default function () {
+ const slots = defineSlots({
+ default: () => default
,
+ })
+ return {slots.default?.()}
+}
diff --git a/packages/jsx-macros/tests/fixtures/define-style.tsx b/packages/jsx-macros/tests/fixtures/define-style.tsx
new file mode 100644
index 000000000..a585a0756
--- /dev/null
+++ b/packages/jsx-macros/tests/fixtures/define-style.tsx
@@ -0,0 +1,37 @@
+import { defineComponent, ref } from 'vue'
+
+export const Comp = () => {
+ const color = ref('red')
+ defineStyle(`
+ .foo {
+ color: ${color.value};
+ }
+ `)
+ return foo
+}
+
+export default defineComponent(() => {
+ const color = ref('red')
+ const styles = defineStyle.scss(`
+ .bar {
+ color: ${color.value};
+ .barBaz {
+ background: red;
+ }
+ }
+ `)
+ return () => (
+ <>
+ foo
+
+ bar
+
+
+ )
+})
+
+defineStyle.scss(`
+ .bar {
+ color: red;
+ }
+`)
diff --git a/packages/jsx-macros/tests/restructure.test.ts b/packages/jsx-macros/tests/restructure.test.ts
new file mode 100644
index 000000000..9fc11879c
--- /dev/null
+++ b/packages/jsx-macros/tests/restructure.test.ts
@@ -0,0 +1,61 @@
+import { babelParse, MagicStringAST, walkAST } from '@vue-macros/common'
+import { describe, expect, test } from 'vitest'
+import { restructure } from '../src/api'
+
+const transformRestructure = (code: string): string => {
+ const s = new MagicStringAST(code)
+ const ast = babelParse(code, 'tsx')
+ walkAST(ast, {
+ enter(node) {
+ if (
+ node.type === 'FunctionExpression' ||
+ node.type === 'ArrowFunctionExpression' ||
+ node.type === 'FunctionDeclaration'
+ ) {
+ restructure(s, node)
+ }
+ },
+ })
+ return s.toString()
+}
+
+describe('transform', () => {
+ test('reconstruct', () => {
+ const code = transformRestructure(
+ `const App = ([[[,foo]], {id: {foo: [bar]}}], { baz }) => {
+ function onClick({ foo }){
+ return { foo, baz: baz.baz }
+ };
+ return [ foo, bar, baz ]
+ }`,
+ )!
+ expect(code).toMatchSnapshot()
+ })
+
+ test('reconstruct arrowFunctionExpression', () => {
+ const code = transformRestructure(
+ `const App = ([{root: {foo}}]) => (
+ <>{[foo]}
+ )`,
+ )!
+ expect(code).toMatchSnapshot()
+ })
+
+ test('reconstruct default-prop', () => {
+ const code = transformRestructure(
+ `function App({foo: bar = 'bar', baz: qux, ...rest}, [foo = 'foo']){
+ return <>{[bar, qux, rest, foo]}
+ }`,
+ )!
+ expect(code).toMatchSnapshot()
+ })
+
+ test('reconstruct rest-prop', () => {
+ const code = transformRestructure(
+ `function App({foo, bar = 1, ...rest}){
+ return <>{[foo, bar, rest]}
+ }`,
+ )!
+ expect(code).toMatchSnapshot()
+ })
+})
diff --git a/packages/jsx-macros/tsup.config.ts b/packages/jsx-macros/tsup.config.ts
new file mode 100644
index 000000000..e5efb9683
--- /dev/null
+++ b/packages/jsx-macros/tsup.config.ts
@@ -0,0 +1,3 @@
+import { config } from '../../tsup.config.js'
+
+export default config()
diff --git a/packages/jsx/README.md b/packages/jsx/README.md
new file mode 100644
index 000000000..fbad5293a
--- /dev/null
+++ b/packages/jsx/README.md
@@ -0,0 +1,3 @@
+# @vue-macros/jsx [](https://npmjs.com/package/@vue-macros/jsx)
+
+Please refer to [README.md](https://github.com/vue-macros/vue-macros#readme)
diff --git a/packages/jsx/package.json b/packages/jsx/package.json
new file mode 100644
index 000000000..172a7b988
--- /dev/null
+++ b/packages/jsx/package.json
@@ -0,0 +1,137 @@
+{
+ "name": "@vue-macros/jsx",
+ "version": "3.0.0-beta.4",
+ "packageManager": "pnpm@10.4.1",
+ "description": "jsx feature from Vue Macros.",
+ "type": "module",
+ "keywords": [
+ "vue-macros",
+ "macros",
+ "vue",
+ "sfc",
+ "setup",
+ "script-setup",
+ "jsx"
+ ],
+ "license": "MIT",
+ "homepage": "https://vue-macros.dev",
+ "bugs": {
+ "url": "https://github.com/vue-macros/vue-macros/issues"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/vue-macros/vue-macros.git",
+ "directory": "packages/jsx"
+ },
+ "author": "zhiyuanzmj",
+ "contributors": [
+ "三咲智子 "
+ ],
+ "funding": "https://github.com/sponsors/vue-macros",
+ "files": [
+ "dist"
+ ],
+ "main": "dist/index.js",
+ "module": "dist/index.js",
+ "types": "dist/index.d.ts",
+ "exports": {
+ ".": {
+ "dev": "./src/index.ts",
+ "default": "./dist/index.js"
+ },
+ "./esbuild": {
+ "dev": "./src/esbuild.ts",
+ "default": "./dist/esbuild.js"
+ },
+ "./jsx-runtime": {
+ "dev": "./src/jsx-runtime.ts",
+ "default": "./dist/jsx-runtime.js"
+ },
+ "./options": {
+ "dev": "./src/options.ts",
+ "default": "./dist/options.js"
+ },
+ "./raw": {
+ "dev": "./src/raw.ts",
+ "default": "./dist/raw.js"
+ },
+ "./rolldown": {
+ "dev": "./src/rolldown.ts",
+ "default": "./dist/rolldown.js"
+ },
+ "./rollup": {
+ "dev": "./src/rollup.ts",
+ "default": "./dist/rollup.js"
+ },
+ "./rspack": {
+ "dev": "./src/rspack.ts",
+ "default": "./dist/rspack.js"
+ },
+ "./runtime": {
+ "dev": "./src/runtime.ts",
+ "default": "./dist/runtime.js"
+ },
+ "./vite": {
+ "dev": "./src/vite.ts",
+ "default": "./dist/vite.js"
+ },
+ "./volar": {
+ "dev": "./src/volar.ts",
+ "default": "./dist/volar.js"
+ },
+ "./webpack": {
+ "dev": "./src/webpack.ts",
+ "default": "./dist/webpack.js"
+ },
+ "./*": "./*"
+ },
+ "typesVersions": {
+ "*": {
+ "*": [
+ "./dist/*",
+ "./*"
+ ]
+ }
+ },
+ "publishConfig": {
+ "access": "public",
+ "exports": {
+ ".": "./dist/index.js",
+ "./esbuild": "./dist/esbuild.js",
+ "./jsx-runtime": "./dist/jsx-runtime.js",
+ "./options": "./dist/options.js",
+ "./raw": "./dist/raw.js",
+ "./rolldown": "./dist/rolldown.js",
+ "./rollup": "./dist/rollup.js",
+ "./rspack": "./dist/rspack.js",
+ "./runtime": "./dist/runtime.js",
+ "./vite": "./dist/vite.js",
+ "./volar": "./dist/volar.js",
+ "./webpack": "./dist/webpack.js",
+ "./*": "./*"
+ },
+ "tag": "next"
+ },
+ "scripts": {
+ "build": "tsup",
+ "dev": "DEV=true tsup"
+ },
+ "peerDependencies": {
+ "vue": "^2.7.0 || ^3.2.25"
+ },
+ "dependencies": {
+ "@vue-macros/common": "workspace:*",
+ "@vue-macros/jsx-directive": "workspace:*",
+ "@vue-macros/jsx-macros": "workspace:*",
+ "@vue-macros/volar": "workspace:*",
+ "ts-macro": "catalog:",
+ "unplugin-combine": "catalog:"
+ },
+ "devDependencies": {
+ "csstype": "catalog:",
+ "vue": "catalog:"
+ },
+ "engines": {
+ "node": ">=20.18.0"
+ }
+}
diff --git a/packages/jsx/src/esbuild.ts b/packages/jsx/src/esbuild.ts
new file mode 100644
index 000000000..e8c6460dd
--- /dev/null
+++ b/packages/jsx/src/esbuild.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.esbuild as typeof unplugin.esbuild
diff --git a/packages/jsx/src/index.ts b/packages/jsx/src/index.ts
new file mode 100644
index 000000000..ea963bfef
--- /dev/null
+++ b/packages/jsx/src/index.ts
@@ -0,0 +1,30 @@
+import jsxDirective from '@vue-macros/jsx-directive'
+import jsxMacros from '@vue-macros/jsx-macros'
+
+import { generatePluginName } from '#macros' with { type: 'macro' }
+import {
+ createCombinePlugin,
+ type UnpluginCombineInstance,
+} from 'unplugin-combine'
+import { resolveJSXOptions, type JSXOptions } from './options'
+
+const jsxPlugins = [
+ ['directive', jsxDirective],
+ ['macros', jsxMacros],
+] as const
+
+const name = generatePluginName()
+const plugin: UnpluginCombineInstance =
+ createCombinePlugin((userOptions = {}, meta) => {
+ const options = resolveJSXOptions(userOptions)
+ const plugins = jsxPlugins.flatMap(([name, plugin]) =>
+ options[name] ? plugin[meta.framework!](options[name]) : [],
+ )
+
+ return {
+ name,
+ plugins,
+ }
+ })
+
+export default plugin
diff --git a/packages/jsx/src/jsx-runtime.ts b/packages/jsx/src/jsx-runtime.ts
new file mode 100644
index 000000000..51a01c3a9
--- /dev/null
+++ b/packages/jsx/src/jsx-runtime.ts
@@ -0,0 +1,39 @@
+import { Fragment, h } from 'vue'
+import type { NativeElements } from './jsx-runtime/dom'
+
+function jsx(type: any, props: any, key: any): ReturnType {
+ const { children } = props
+ delete props.children
+ if (arguments.length > 2) {
+ props.key = key
+ }
+ return h(type, props, children)
+}
+
+export { Fragment, jsx, jsx as jsxDEV, jsx as jsxs }
+
+type VNode = import('vue').VNode
+type ReservedProps = import('vue').ReservedProps
+type AllowedComponentProps = import('vue').AllowedComponentProps
+type ComponentCustomProps = import('vue').ComponentCustomProps
+
+declare global {
+ // eslint-disable-next-line @typescript-eslint/no-namespace
+ namespace JSX {
+ interface Element extends VNode {}
+ interface ElementClass {
+ $props: {}
+ }
+ interface ElementAttributesProperty {
+ $props: {}
+ }
+ interface IntrinsicElements extends NativeElements {
+ [name: string]: any
+ }
+
+ interface IntrinsicAttributes
+ extends ReservedProps,
+ AllowedComponentProps,
+ ComponentCustomProps {}
+ }
+}
diff --git a/packages/jsx/src/jsx-runtime/dom.ts b/packages/jsx/src/jsx-runtime/dom.ts
new file mode 100644
index 000000000..21fa30c82
--- /dev/null
+++ b/packages/jsx/src/jsx-runtime/dom.ts
@@ -0,0 +1,1656 @@
+/* cSpell:disable */
+// Note: this file is auto concatenated to the end of the bundled d.ts during
+// build.
+
+// This code is based on react definition in DefinitelyTyped published under the MIT license.
+// Repository: https://github.com/DefinitelyTyped/DefinitelyTyped
+// Path in the repository: types/react/index.d.ts
+//
+// Copyrights of original definition are:
+// AssureSign
+// Microsoft
+// John Reilly
+// Benoit Benezech
+// Patricio Zavolinsky
+// Digiguru
+// Eric Anderson
+// Dovydas Navickas
+// Josh Rutherford
+// Guilherme Hübner
+// Ferdy Budhidharma
+// Johann Rakotoharisoa
+// Olivier Pascal
+// Martin Hochel
+// Frank Li
+// Jessica Franco
+// Saransh Kataria
+// Kanitkorn Sujautra
+// Sebastian Silbermann
+
+import type * as CSS from 'csstype'
+
+export interface CSSProperties
+ extends CSS.Properties,
+ CSS.PropertiesHyphen {
+ /**
+ * The index signature was removed to enable closed typing for style
+ * using CSSType. You're able to use type assertion or module augmentation
+ * to add properties or an index signature of your own.
+ *
+ * For examples and more information, visit:
+ * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
+ */
+ [v: `--${string}`]: string | number | undefined
+}
+
+type Booleanish = boolean | 'true' | 'false'
+type Numberish = number | string
+
+// All the WAI-ARIA 1.1 attributes from https://www.w3.org/TR/wai-aria-1.1/
+export interface AriaAttributes {
+ /** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */
+ 'aria-activedescendant'?: string
+ /** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */
+ 'aria-atomic'?: Booleanish
+ /**
+ * Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
+ * presented if they are made.
+ */
+ 'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both'
+ /** Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. */
+ 'aria-busy'?: Booleanish
+ /**
+ * Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
+ * @see aria-pressed @see aria-selected.
+ */
+ 'aria-checked'?: Booleanish | 'mixed'
+ /**
+ * Defines the total number of columns in a table, grid, or treegrid.
+ * @see aria-colindex.
+ */
+ 'aria-colcount'?: Numberish
+ /**
+ * Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
+ * @see aria-colcount @see aria-colspan.
+ */
+ 'aria-colindex'?: Numberish
+ /**
+ * Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
+ * @see aria-colindex @see aria-rowspan.
+ */
+ 'aria-colspan'?: Numberish
+ /**
+ * Identifies the element (or elements) whose contents or presence are controlled by the current element.
+ * @see aria-owns.
+ */
+ 'aria-controls'?: string
+ /** Indicates the element that represents the current item within a container or set of related elements. */
+ 'aria-current'?: Booleanish | 'page' | 'step' | 'location' | 'date' | 'time'
+ /**
+ * Identifies the element (or elements) that describes the object.
+ * @see aria-labelledby
+ */
+ 'aria-describedby'?: string
+ /**
+ * Identifies the element that provides a detailed, extended description for the object.
+ * @see aria-describedby.
+ */
+ 'aria-details'?: string
+ /**
+ * Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+ * @see aria-hidden @see aria-readonly.
+ */
+ 'aria-disabled'?: Booleanish
+ /**
+ * Indicates what functions can be performed when a dragged object is released on the drop target.
+ * @deprecated in ARIA 1.1
+ */
+ 'aria-dropeffect'?: 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup'
+ /**
+ * Identifies the element that provides an error message for the object.
+ * @see aria-invalid @see aria-describedby.
+ */
+ 'aria-errormessage'?: string
+ /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+ 'aria-expanded'?: Booleanish
+ /**
+ * Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
+ * allows assistive technology to override the general default of reading in document source order.
+ */
+ 'aria-flowto'?: string
+ /**
+ * Indicates an element's "grabbed" state in a drag-and-drop operation.
+ * @deprecated in ARIA 1.1
+ */
+ 'aria-grabbed'?: Booleanish
+ /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
+ 'aria-haspopup'?: Booleanish | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'
+ /**
+ * Indicates whether the element is exposed to an accessibility API.
+ * @see aria-disabled.
+ */
+ 'aria-hidden'?: Booleanish
+ /**
+ * Indicates the entered value does not conform to the format expected by the application.
+ * @see aria-errormessage.
+ */
+ 'aria-invalid'?: Booleanish | 'grammar' | 'spelling'
+ /** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */
+ 'aria-keyshortcuts'?: string
+ /**
+ * Defines a string value that labels the current element.
+ * @see aria-labelledby.
+ */
+ 'aria-label'?: string
+ /**
+ * Identifies the element (or elements) that labels the current element.
+ * @see aria-describedby.
+ */
+ 'aria-labelledby'?: string
+ /** Defines the hierarchical level of an element within a structure. */
+ 'aria-level'?: Numberish
+ /** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */
+ 'aria-live'?: 'off' | 'assertive' | 'polite'
+ /** Indicates whether an element is modal when displayed. */
+ 'aria-modal'?: Booleanish
+ /** Indicates whether a text box accepts multiple lines of input or only a single line. */
+ 'aria-multiline'?: Booleanish
+ /** Indicates that the user may select more than one item from the current selectable descendants. */
+ 'aria-multiselectable'?: Booleanish
+ /** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */
+ 'aria-orientation'?: 'horizontal' | 'vertical'
+ /**
+ * Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
+ * between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
+ * @see aria-controls.
+ */
+ 'aria-owns'?: string
+ /**
+ * Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.
+ * A hint could be a sample value or a brief description of the expected format.
+ */
+ 'aria-placeholder'?: string
+ /**
+ * Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+ * @see aria-setsize.
+ */
+ 'aria-posinset'?: Numberish
+ /**
+ * Indicates the current "pressed" state of toggle buttons.
+ * @see aria-checked @see aria-selected.
+ */
+ 'aria-pressed'?: Booleanish | 'mixed'
+ /**
+ * Indicates that the element is not editable, but is otherwise operable.
+ * @see aria-disabled.
+ */
+ 'aria-readonly'?: Booleanish
+ /**
+ * Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
+ * @see aria-atomic.
+ */
+ 'aria-relevant'?:
+ | 'additions'
+ | 'additions removals'
+ | 'additions text'
+ | 'all'
+ | 'removals'
+ | 'removals additions'
+ | 'removals text'
+ | 'text'
+ | 'text additions'
+ | 'text removals'
+ /** Indicates that user input is required on the element before a form may be submitted. */
+ 'aria-required'?: Booleanish
+ /** Defines a human-readable, author-localized description for the role of an element. */
+ 'aria-roledescription'?: string
+ /**
+ * Defines the total number of rows in a table, grid, or treegrid.
+ * @see aria-rowindex.
+ */
+ 'aria-rowcount'?: Numberish
+ /**
+ * Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
+ * @see aria-rowcount @see aria-rowspan.
+ */
+ 'aria-rowindex'?: Numberish
+ /**
+ * Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
+ * @see aria-rowindex @see aria-colspan.
+ */
+ 'aria-rowspan'?: Numberish
+ /**
+ * Indicates the current "selected" state of various widgets.
+ * @see aria-checked @see aria-pressed.
+ */
+ 'aria-selected'?: Booleanish
+ /**
+ * Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
+ * @see aria-posinset.
+ */
+ 'aria-setsize'?: Numberish
+ /** Indicates if items in a table or grid are sorted in ascending or descending order. */
+ 'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other'
+ /** Defines the maximum allowed value for a range widget. */
+ 'aria-valuemax'?: Numberish
+ /** Defines the minimum allowed value for a range widget. */
+ 'aria-valuemin'?: Numberish
+ /**
+ * Defines the current value for a range widget.
+ * @see aria-valuetext.
+ */
+ 'aria-valuenow'?: Numberish
+ /** Defines the human readable text alternative of aria-valuenow for a range widget. */
+ 'aria-valuetext'?: string
+}
+
+/**
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin MDN}
+ */
+type CrossOrigin = 'anonymous' | 'use-credentials' | ''
+
+// Vue's style normalization supports nested arrays
+export type StyleValue =
+ | false
+ | null
+ | undefined
+ | string
+ | CSSProperties
+ | Array
+
+export interface HTMLAttributes
+ extends AriaAttributes,
+ EventHandlers> {
+ innerHTML?: string
+
+ class?: any
+ style?: StyleValue
+
+ // Standard HTML Attributes
+ accesskey?: string
+ autocapitalize?:
+ | 'off'
+ | 'none'
+ | 'on'
+ | 'sentences'
+ | 'words'
+ | 'characters'
+ | undefined
+ | (string & {})
+ autofocus?: Booleanish
+ contenteditable?: Booleanish | 'inherit' | 'plaintext-only'
+ contextmenu?: string
+ dir?: string
+ draggable?: Booleanish
+ enterKeyHint?:
+ | 'enter'
+ | 'done'
+ | 'go'
+ | 'next'
+ | 'previous'
+ | 'search'
+ | 'send'
+ hidden?: Booleanish | '' | 'hidden' | 'until-found'
+ id?: string
+ inert?: Booleanish
+ lang?: string
+ nonce?: string
+ placeholder?: string
+ spellcheck?: Booleanish
+ tabindex?: Numberish
+ title?: string
+ translate?: 'yes' | 'no'
+
+ // Unknown
+ radiogroup?: string // ,