Skip to content

Commit 969b599

Browse files
zhiyuanzmjzhiyuanzmj
committed
feat: support literal expression
1 parent 841d4bd commit 969b599

File tree

8 files changed

+226
-183
lines changed

8 files changed

+226
-183
lines changed

‎playground/dom/App.vue

+135-137
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,123 @@
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
1+
<script lang="tsx" setup>
2+
import { ref } from 'vue'
3+
import For from './for.vue'
4+
5+
const count = ref(1)
6+
7+
function Comp() {
8+
return count.value
9+
? (
10+
<div>
11+
Comp1: 1
12+
</div>
2313
)
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>
14+
: 2
15+
}
10316
104-
<div>
105-
v-pre:
106-
<span v-pre>
107-
{count.value}
108-
</span>
109-
</div>
17+
function Comp1() {
18+
return count.value
19+
? null
20+
: Array.from({ length: count.value }).map((_, index) => (
21+
<span>
22+
{index}
23+
</span>
24+
))
25+
}
11026
111-
<div>
112-
v-cloak:
113-
<span v-cloak>
114-
{count.value}
115-
</span>
116-
</div>
27+
function Comp2() {
28+
return (count.value && (
29+
count.value > 9
30+
? (count.value > 2 && <div>null</div>)
31+
: (
32+
<div>
33+
Comp2: 2
34+
</div>
35+
)
36+
))
37+
}
11738
118-
<div>
119-
v-for:
39+
function Comp3() {
40+
return (count.value > 1
41+
? count.value
42+
? (
43+
<div>
44+
1
45+
</div>
46+
)
47+
: null
48+
: <div>Comp3: 2</div>)
49+
}
12050
121-
{
51+
function Comp4() {
52+
return count.value && (
53+
<span>
54+
Comp4:
55+
{count.value}
56+
</span>
57+
)
58+
}
59+
60+
defineRender(() => (
61+
<>
62+
<form onSubmit_prevent>
63+
<input
64+
v-bind:value={count.value}
65+
onInput={count.value = $event.target.value}
66+
/>
67+
{/* Function Components */}
68+
<Comp />
69+
<Comp1 />
70+
<Comp2 />
71+
<Comp3 />
72+
<Comp4 />
73+
74+
<div>
75+
v-show:
76+
<span v-show={count.value}>
77+
{count.value > 1 ? 2 : 3}
78+
</span>
79+
</div>
80+
81+
<div>
82+
v-text:
83+
<span v-text={count.value} />
84+
</div>
85+
86+
<div>
87+
v-text:
88+
<span v-text={count.value} />
89+
</div>
90+
91+
<div>
92+
v-html:
93+
<span v-html={count.value} />
94+
</div>
95+
96+
<div>
97+
v-once:
98+
<span v-once>
99+
{count.value}
100+
</span>
101+
</div>
102+
103+
<div>
104+
v-pre:
105+
<span v-pre>
106+
{count.value}
107+
</span>
108+
</div>
109+
110+
<div>
111+
v-cloak:
112+
<span v-cloak>
113+
{count.value}
114+
</span>
115+
</div>
116+
117+
<div>
118+
v-for:
119+
120+
{
122121
count.value
123122
&& count.value > 1
124123
&& (count.value === 5
@@ -145,38 +144,37 @@ export default defineComponent({
145144
)
146145
)
147146
}
148-
149-
{
147+
{
150148
count.value && Array.from({ length: count.value }).map(() => (
151149
<span>
152150
1
153151
</span>
154152
))
155153
}
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-
{
154+
<For />
155+
</div>
156+
157+
<div>
158+
v-if:
159+
{
160+
count.value > 1
161+
? <span>lg 1</span>
162+
: count.value > 2
163+
? <span>lg 2</span>
164+
: <span>lt 1</span>
165+
}
166+
{count.value && <span> 123 </span>}
167+
{
169168
count.value && count.value > 1 && count.value > 2
170169
&& (count.value > 9
171170
? (<div>123</div>)
172171
: null)
173172
}
174-
</div>
175-
</form>
176-
</>
177-
)
178-
},
179-
})
173+
</div>
174+
</form>
175+
</>
176+
),
177+
)
180178
</script>
181179

182180
<style>

‎playground/dom/for.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="tsx">
2+
import { ref } from 'vue'
3+
4+
function Comp() {
5+
console.log(1)
6+
return (
7+
<span>
8+
1
9+
</span>
10+
)
11+
}
12+
13+
const count = ref(0)
14+
defineRender(
15+
<>
16+
<button onClick={() => count.value++}>
17+
{count.value}
18+
</button>
19+
<Comp v-for={i in 3} key={i} ref={() => {}} />
20+
</>,
21+
)
22+
</script>

‎playground/dom/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"scripts": {
4-
"dev": "nodemon -w '../src/**/*.ts' -e .ts -x vite"
4+
"dev": "nodemon -w '../../src/**/*.ts' -e .ts -x vite"
55
},
66
"devDependencies": {
77
"@vitejs/plugin-vue": "^5.0.2",

‎playground/vapor/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"scripts": {
4-
"dev": "nodemon -w '../src/**/*.ts' -e .ts -x vite",
4+
"dev": "nodemon -w '../../src/**/*.ts' -e .ts -x vite",
55
"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"
66
},
77
"dependencies": {

0 commit comments

Comments
 (0)