Skip to content

Commit ce4b8b7

Browse files
zhiyuanzmjzhiyuanzmj
committed
feat: support compile-dom
1 parent bf8280f commit ce4b8b7

23 files changed

+691
-206
lines changed

‎.gitignore

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,5 +79,3 @@ dist
7979

8080
# IDE
8181
.idea
82-
83-
core-vapor

‎README.md

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,14 @@ npm i unplugin-vue-jsx-vapor
1616
```ts
1717
// vite.config.ts
1818
import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'
19+
import { compile } from 'vue/vapor'
20+
// or
21+
// import { compile } from '@vue/compiler-dom'
1922

2023
export default defineConfig({
2124
plugins: [
2225
VueJsxVapor({
23-
/* options */
26+
compile
2427
}),
2528
],
2629
})
@@ -36,11 +39,14 @@ Example: [`playground/`](./playground/)
3639
```ts
3740
// rollup.config.js
3841
import VueJsxVapor from 'unplugin-vue-jsx-vapor/rollup'
42+
import { compile } from 'vue/vapor'
43+
// or
44+
// import { compile } from '@vue/compiler-dom'
3945

4046
export default {
4147
plugins: [
4248
VueJsxVapor({
43-
/* options */
49+
compile
4450
}),
4551
],
4652
}
@@ -57,7 +63,9 @@ module.exports = {
5763
/* ... */
5864
plugins: [
5965
require('unplugin-vue-jsx-vapor/webpack')({
60-
/* options */
66+
compile: require('vue/vapor')
67+
// or
68+
// compile: require('@vue/compiler-dom')
6169
}),
6270
],
6371
}
@@ -70,12 +78,15 @@ module.exports = {
7078

7179
```ts
7280
// nuxt.config.js
81+
import { compile } from 'vue/vapor'
82+
// or
83+
// import { compile } from '@vue/compiler-dom'
7384
export default defineNuxtConfig({
7485
modules: [
7586
[
7687
'unplugin-vue-jsx-vapor/nuxt',
7788
{
78-
/* options */
89+
compile
7990
},
8091
],
8192
],
@@ -95,7 +106,9 @@ module.exports = {
95106
configureWebpack: {
96107
plugins: [
97108
require('unplugin-vue-jsx-vapor/webpack')({
98-
/* options */
109+
compile: require('vue/vapor')
110+
// or
111+
// compile: require('@vue/compiler-dom')
99112
}),
100113
],
101114
},
@@ -111,9 +124,16 @@ module.exports = {
111124
// esbuild.config.js
112125
import { build } from 'esbuild'
113126
import VueJsxVapor from 'unplugin-vue-jsx-vapor/esbuild'
127+
import { compile } from 'vue/vapor'
128+
// or
129+
// import { compile } from '@vue/compiler-dom'
114130

115131
build({
116-
plugins: [VueJsxVapor()],
132+
plugins: [
133+
VueJsxVapor({
134+
compile
135+
})
136+
],
117137
})
118138
```
119139

‎package.json

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,12 @@
8787
"dev": "tsup --watch src",
8888
"build:fix": "esno scripts/postbuild.ts",
8989
"lint": "eslint .",
90-
"play": "npm -C playground run dev",
90+
"play": "npm -C playground/dom run dev",
91+
"play:vapor": "npm -C playground/vapor run dev",
9192
"prepublishOnly": "npm run build",
9293
"release": "bumpp && npm publish",
9394
"start": "esno src/index.ts",
94-
"test": "vitest",
95-
"postinstall": "if [ ! -d './core-vapor' ]; then git clone https://github.com/vuejs/core-vapor.git; cd core-vapor; pnpm i; pnpm build; pnpm build-dts; cd ..; pnpm add ./core-vapor/packages/vue; fi"
95+
"test": "vitest"
9696
},
9797
"peerDependencies": {
9898
"@nuxt/kit": "^3",
@@ -124,8 +124,7 @@
124124
},
125125
"dependencies": {
126126
"@vue-macros/common": "^1.10.0",
127-
"unplugin": "^1.5.1",
128-
"vue": "link:core-vapor/packages/vue"
127+
"unplugin": "^1.5.1"
129128
},
130129
"devDependencies": {
131130
"@antfu/eslint-config": "^2.6.2",

‎playground/dom/App.vue

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<script lang="tsx">
2+
import { defineComponent, h } from 'vue'
3+
import { ref } from 'vue/vapor'
4+
5+
export default defineComponent({
6+
setup() {
7+
const count = ref(1)
8+
9+
const Comp = () => count.value
10+
? count.value && <div>2</div>
11+
: (<div>1</div>)
12+
13+
const Comp1 = () => {
14+
return (count.value
15+
? (Array.from({ length: count.value }).map((_, index) => (
16+
index && (
17+
<span>
18+
{index}
19+
</span>
20+
)
21+
)))
22+
: null
23+
)
24+
}
25+
26+
const Comp2 = () => {
27+
return (count.value && (
28+
count.value > 9
29+
? count.value > 2 && <div>null</div>
30+
: (
31+
<div>
32+
12333
33+
</div>
34+
)
35+
))
36+
}
37+
38+
const Comp3 = () => {
39+
return count.value > 1
40+
? count.value
41+
? (
42+
<div>
43+
1
44+
</div>
45+
)
46+
: <div>null</div>
47+
: (
48+
<div>
49+
2
50+
</div>
51+
)
52+
}
53+
54+
function Comp4() {
55+
return count.value > 1
56+
? (
57+
<span>
58+
Comp4:
59+
{count.value}
60+
</span>
61+
)
62+
: null
63+
}
64+
65+
return () => (
66+
<>
67+
<form onSubmit_prevent>
68+
<input
69+
v-bind:value={count.value}
70+
onInput={count.value = $event.target.value}
71+
/>
72+
<Comp3 />
73+
<Comp4 />
74+
75+
<div>
76+
v-show:
77+
<span v-show={count.value}>
78+
{count.value > 1 ? 2 : 3}
79+
</span>
80+
</div>
81+
82+
<div>
83+
v-text:
84+
<span v-text={count.value} />
85+
</div>
86+
87+
<div>
88+
v-text:
89+
<span v-text={count.value} />
90+
</div>
91+
92+
<div>
93+
v-html:
94+
<span v-html={count.value} />
95+
</div>
96+
97+
<div>
98+
v-once:
99+
<span v-once>
100+
{count.value}
101+
</span>
102+
</div>
103+
104+
<div>
105+
v-pre:
106+
<span v-pre>
107+
{count.value}
108+
</span>
109+
</div>
110+
111+
<div>
112+
v-cloak:
113+
<span v-cloak>
114+
{count.value}
115+
</span>
116+
</div>
117+
118+
<div>
119+
v-for:
120+
121+
{
122+
count.value
123+
&& count.value > 1
124+
&& (count.value === 5
125+
? (
126+
<span>
127+
1
128+
</span>
129+
)
130+
: count.value === 6
131+
? (
132+
count.value
133+
&& Array.from({ length: 10 }).map((_, index) => (
134+
index && (
135+
<span>
136+
3
137+
</span>
138+
)
139+
))
140+
)
141+
: (
142+
<div>
143+
3
144+
</div>
145+
)
146+
)
147+
}
148+
149+
{
150+
count.value && Array.from({ length: count.value }).map(() => (
151+
<span>
152+
1
153+
</span>
154+
))
155+
}
156+
</div>
157+
158+
<div>
159+
v-if:
160+
{
161+
count.value > 1
162+
? <span>lg 1</span>
163+
: count.value > 2
164+
? <span>lg 2</span>
165+
: <span>lt 1</span>
166+
}
167+
{count.value && <span> 123 </span>}
168+
{
169+
count.value && count.value > 1 && count.value > 2
170+
&& (count.value > 9
171+
? (<div>123</div>)
172+
: null)
173+
}
174+
</div>
175+
</form>
176+
</>
177+
)
178+
},
179+
})
180+
</script>
181+
182+
<style>
183+
[v-cloak] {
184+
color: red;
185+
}
186+
</style>

‎playground/index.html renamed to ‎playground/dom/index.html

File renamed without changes.

‎playground/macros-global.d.ts renamed to ‎playground/dom/macros-global.d.ts

File renamed without changes.

‎playground/dom/main.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#app')

‎playground/package.json renamed to ‎playground/dom/package.json

File renamed without changes.

‎playground/tsconfig.json renamed to ‎playground/dom/tsconfig.json

File renamed without changes.

‎playground/vite.config.ts renamed to ‎playground/dom/vite.config.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,15 @@ import Inspect from 'vite-plugin-inspect'
33
import Vue from '@vitejs/plugin-vue'
44
import defineRender from '@vue-macros/define-render/vite'
55
import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'
6+
import { compile } from '@vue/compiler-dom'
67

78
export default defineConfig({
8-
plugins: [Vue(), defineRender(), VueJsxVapor(), Inspect()],
9+
plugins: [
10+
Vue(),
11+
VueJsxVapor({
12+
compile,
13+
}),
14+
defineRender(),
15+
Inspect(),
16+
],
917
})

0 commit comments

Comments
 (0)