Skip to content

Commit f947d43

Browse files
ubugeeeiubugeeei
authored
feat(play): improvement (#627)
* feat(play): improvement * chore: hero style * feat(play): improvement
1 parent 40ad2be commit f947d43

69 files changed

Lines changed: 1666 additions & 779 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎book/images/web_playground_console.png‎

89.1 KB
Loading

‎book/images/web_playground_initial.png‎

141 KB
Loading

‎book/impls/10_minimum_example/070_sfc_compiler/tests/e2e.spec.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { describe, expect, it } from "vitest";
2+
3+
import { compile } from "../packages/compiler-dom";
4+
5+
describe("10_minimum_example/070_sfc_compiler", () => {
6+
it("should compile basic template to render function", () => {
7+
const template = `<div>Hello World</div>`;
8+
const code = compile(template);
9+
10+
expect(code).toContain("function render");
11+
expect(code).toContain("h(");
12+
expect(code).toContain('"div"');
13+
expect(code).toContain("Hello World");
14+
});
15+
16+
it("should compile template with nested elements", () => {
17+
const template = `<div><p>Nested content</p></div>`;
18+
const code = compile(template);
19+
20+
expect(code).toContain("function render");
21+
expect(code).toContain('"div"');
22+
expect(code).toContain('"p"');
23+
expect(code).toContain("Nested content");
24+
});
25+
26+
it("should compile template with mustache interpolation", () => {
27+
const template = `<p>{{ message }}</p>`;
28+
const code = compile(template);
29+
30+
expect(code).toContain("function render");
31+
expect(code).toContain("with (_ctx)");
32+
expect(code).toContain("message");
33+
});
34+
});

‎book/impls/30_basic_reactivity_system/010_ref/examples/playground/src/App.vue‎

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,41 @@
11
<script>
2-
import { reactive } from 'chibivue'
2+
import { ref } from 'chibivue'
33
44
export default {
55
setup() {
6-
const state = reactive({ message: 'Hello, chibivue!', input: '' })
6+
const count = ref(0)
7+
const message = ref('Hello, chibivue!')
78
8-
const changeMessage = () => {
9-
state.message += '!'
9+
const increment = () => {
10+
count.value++
1011
}
1112
12-
const handleInput = e => {
13-
state.input = e.target?.value ?? ''
13+
const updateMessage = () => {
14+
message.value = `Count is now ${count.value}`
1415
}
1516
16-
return { state, changeMessage, handleInput }
17+
return { count, message, increment, updateMessage }
1718
},
1819
}
1920
</script>
2021

2122
<template>
22-
<div class="container" style="text-align: center">
23-
<h2>{{ state.message }}</h2>
24-
<img
25-
width="150px"
26-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png"
27-
alt="Vue.js Logo"
28-
/>
29-
<p><b>chibivue</b> is the minimal Vue.js</p>
23+
<div class="container">
24+
<h2>ref Example</h2>
3025

31-
<button @click="changeMessage">click me!</button>
26+
<p>Count: {{ count }}</p>
27+
<p>Message: {{ message }}</p>
3228

33-
<br />
34-
35-
<label>
36-
Input Data
37-
<input @input="handleInput" />
38-
</label>
39-
40-
<p>input value: {{ state.input }}</p>
29+
<button @click="increment">Increment</button>
30+
<button @click="updateMessage">Update Message</button>
4131
</div>
4232
</template>
4333

4434
<style>
4535
.container {
46-
height: 100vh;
4736
padding: 16px;
48-
background-color: #becdbe;
49-
color: #2c3e50;
37+
}
38+
button {
39+
margin-right: 8px;
5040
}
5141
</style>

‎book/impls/30_basic_reactivity_system/020_shallow_ref/examples/playground/src/App.vue‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,54 @@
11
<script>
2-
import { reactive } from 'chibivue'
2+
import { ref, shallowRef } from 'chibivue'
33
44
export default {
55
setup() {
6-
const state = reactive({ message: 'Hello, chibivue!', input: '' })
6+
const deepRef = ref({ nested: { count: 0 } })
7+
const shallow = shallowRef({ nested: { count: 0 } })
78
8-
const changeMessage = () => {
9-
state.message += '!'
9+
const updateDeep = () => {
10+
deepRef.value.nested.count++
1011
}
1112
12-
const handleInput = e => {
13-
state.input = e.target?.value ?? ''
13+
const updateShallow = () => {
14+
// This won't trigger re-render
15+
shallow.value.nested.count++
1416
}
1517
16-
return { state, changeMessage, handleInput }
18+
const replaceShallow = () => {
19+
// This will trigger re-render
20+
shallow.value = { nested: { count: shallow.value.nested.count + 1 } }
21+
}
22+
23+
return { deepRef, shallow, updateDeep, updateShallow, replaceShallow }
1724
},
1825
}
1926
</script>
2027

2128
<template>
22-
<div class="container" style="text-align: center">
23-
<h2>{{ state.message }}</h2>
24-
<img
25-
width="150px"
26-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png"
27-
alt="Vue.js Logo"
28-
/>
29-
<p><b>chibivue</b> is the minimal Vue.js</p>
30-
31-
<button @click="changeMessage">click me!</button>
32-
33-
<br />
34-
35-
<label>
36-
Input Data
37-
<input @input="handleInput" />
38-
</label>
39-
40-
<p>input value: {{ state.input }}</p>
29+
<div class="container">
30+
<h2>shallowRef Example</h2>
31+
32+
<div>
33+
<h3>Deep ref</h3>
34+
<p>Count: {{ deepRef.nested.count }}</p>
35+
<button @click="updateDeep">Update nested (triggers)</button>
36+
</div>
37+
38+
<div>
39+
<h3>Shallow ref</h3>
40+
<p>Count: {{ shallow.nested.count }}</p>
41+
<button @click="updateShallow">Update nested (no trigger)</button>
42+
<button @click="replaceShallow">Replace value (triggers)</button>
43+
</div>
4144
</div>
4245
</template>
4346

4447
<style>
4548
.container {
46-
height: 100vh;
4749
padding: 16px;
48-
background-color: #becdbe;
49-
color: #2c3e50;
50+
}
51+
button {
52+
margin-right: 8px;
5053
}
5154
</style>

‎book/impls/30_basic_reactivity_system/030_to_ref/examples/playground/src/App.vue‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,52 @@
11
<script>
2-
import { reactive } from 'chibivue'
2+
import { reactive, toRef } from 'chibivue'
33
44
export default {
55
setup() {
6-
const state = reactive({ message: 'Hello, chibivue!', input: '' })
6+
const state = reactive({
7+
name: 'chibivue',
8+
count: 0,
9+
})
710
8-
const changeMessage = () => {
9-
state.message += '!'
11+
// Create ref that syncs with reactive property
12+
const nameRef = toRef(state, 'name')
13+
const countRef = toRef(state, 'count')
14+
15+
const updateName = () => {
16+
nameRef.value = 'updated chibivue'
1017
}
1118
12-
const handleInput = e => {
13-
state.input = e.target?.value ?? ''
19+
const incrementCount = () => {
20+
countRef.value++
1421
}
1522
16-
return { state, changeMessage, handleInput }
23+
return { state, nameRef, countRef, updateName, incrementCount }
1724
},
1825
}
1926
</script>
2027

2128
<template>
22-
<div class="container" style="text-align: center">
23-
<h2>{{ state.message }}</h2>
24-
<img
25-
width="150px"
26-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png"
27-
alt="Vue.js Logo"
28-
/>
29-
<p><b>chibivue</b> is the minimal Vue.js</p>
30-
31-
<button @click="changeMessage">click me!</button>
29+
<div class="container">
30+
<h2>toRef Example</h2>
3231

33-
<br />
32+
<h3>From reactive object</h3>
33+
<p>state.name: {{ state.name }}</p>
34+
<p>state.count: {{ state.count }}</p>
3435

35-
<label>
36-
Input Data
37-
<input @input="handleInput" />
38-
</label>
36+
<h3>Via toRef</h3>
37+
<p>nameRef: {{ nameRef }}</p>
38+
<p>countRef: {{ countRef }}</p>
3939

40-
<p>input value: {{ state.input }}</p>
40+
<button @click="updateName">Update via nameRef</button>
41+
<button @click="incrementCount">Increment via countRef</button>
4142
</div>
4243
</template>
4344

4445
<style>
4546
.container {
46-
height: 100vh;
4747
padding: 16px;
48-
background-color: #becdbe;
49-
color: #2c3e50;
48+
}
49+
button {
50+
margin-right: 8px;
5051
}
5152
</style>

‎book/impls/30_basic_reactivity_system/040_to_refs/examples/playground/src/App.vue‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,54 @@
11
<script>
2-
import { reactive } from 'chibivue'
2+
import { reactive, toRefs } from 'chibivue'
33
44
export default {
55
setup() {
6-
const state = reactive({ message: 'Hello, chibivue!', input: '' })
6+
const state = reactive({
7+
name: 'chibivue',
8+
count: 0,
9+
version: '1.0.0',
10+
})
711
8-
const changeMessage = () => {
9-
state.message += '!'
12+
// Convert all properties to refs
13+
const { name, count, version } = toRefs(state)
14+
15+
const updateName = () => {
16+
name.value = 'updated chibivue'
1017
}
1118
12-
const handleInput = e => {
13-
state.input = e.target?.value ?? ''
19+
const incrementCount = () => {
20+
count.value++
1421
}
1522
16-
return { state, changeMessage, handleInput }
23+
return { state, name, count, version, updateName, incrementCount }
1724
},
1825
}
1926
</script>
2027

2128
<template>
22-
<div class="container" style="text-align: center">
23-
<h2>{{ state.message }}</h2>
24-
<img
25-
width="150px"
26-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png"
27-
alt="Vue.js Logo"
28-
/>
29-
<p><b>chibivue</b> is the minimal Vue.js</p>
30-
31-
<button @click="changeMessage">click me!</button>
29+
<div class="container">
30+
<h2>toRefs Example</h2>
3231

33-
<br />
32+
<h3>From reactive object</h3>
33+
<p>state.name: {{ state.name }}</p>
34+
<p>state.count: {{ state.count }}</p>
35+
<p>state.version: {{ state.version }}</p>
3436

35-
<label>
36-
Input Data
37-
<input @input="handleInput" />
38-
</label>
37+
<h3>Via destructured toRefs</h3>
38+
<p>name: {{ name }}</p>
39+
<p>count: {{ count }}</p>
40+
<p>version: {{ version }}</p>
3941

40-
<p>input value: {{ state.input }}</p>
42+
<button @click="updateName">Update name</button>
43+
<button @click="incrementCount">Increment count</button>
4144
</div>
4245
</template>
4346

4447
<style>
4548
.container {
46-
height: 100vh;
4749
padding: 16px;
48-
background-color: #becdbe;
49-
color: #2c3e50;
50+
}
51+
button {
52+
margin-right: 8px;
5053
}
5154
</style>

0 commit comments

Comments
 (0)