1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
export const COUNTER_COMPONENTS = {
'@astrojs/renderer-preact': {
filename: `src/components/PreactCounter.jsx`,
content: `import { h } from 'preact';
import { useState } from 'preact/hooks';
export default function PreactCounter({ children }) {
const [count, setCount] = useState(0);
const add = () => setCount((i) => i + 1);
const subtract = () => setCount((i) => i - 1);
return (
<div id="preact" class="counter">
<button onClick={subtract}>-</button>
<pre>{count}</pre>
<button onClick={add}>+</button>
</div>
);
}
`,
},
'@astrojs/renderer-react': {
filename: `src/components/ReactCounter.jsx`,
content: `import React, { useState } from 'react';
export default function ReactCounter({ children }) {
const [count, setCount] = useState(0);
const add = () => setCount((i) => i + 1);
const subtract = () => setCount((i) => i - 1);
return (
<div id="react" className="counter">
<button onClick={subtract}>-</button>
<pre>{count}</pre>
<button onClick={add}>+</button>
</div>
);
}
`,
},
'@astrojs/renderer-svelte': {
filename: `src/components/SvelteCounter.svelte`,
content: `<script>
let count = 0;
function add() {
count += 1;
}
function subtract() {
count -= 1;
}
</script>
<div id="svelte" class="counter">
<button on:click={subtract}>-</button>
<pre>{ count }</pre>
<button on:click={add}>+</button>
</div>
`,
},
'@astrojs/renderer-vue': {
filename: `src/components/VueCounter.vue`,
content: `<template>
<div id="vue" class="counter">
<button @click="subtract()">-</button>
<pre>{{ count }}</pre>
<button @click="add()">+</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0)
const add = () => count.value = count.value + 1;
const subtract = () => count.value = count.value - 1;
return {
count,
add,
subtract
}
}
}
</script>
`,
},
};
export const FRAMEWORKS = [
{
title: 'Preact',
value: '@astrojs/renderer-preact',
},
{
title: 'React',
value: '@astrojs/renderer-react',
},
{
title: 'Svelte',
value: '@astrojs/renderer-svelte',
},
{
title: 'Vue',
value: '@astrojs/renderer-vue',
},
];
|
