Skip to content

Commit 6fdf406

Browse files
author
Nate Moore
committed
test: add framework nesting e2e tests
1 parent ee3ee55 commit 6fdf406

Some content is hidden

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

47 files changed

+1502
-10
lines changed

‎packages/astro/e2e/fixtures/client-only/package.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
{
2-
"name": "@e2e/multiple-frameworks",
2+
"name": "@e2e/client-only",
33
"version": "0.0.0",
44
"private": true,
55
"devDependencies": {
6-
"@astrojs/lit": "^0.1.3",
76
"@astrojs/preact": "^0.1.2",
87
"@astrojs/react": "^0.1.2",
98
"@astrojs/solid-js": "^0.1.2",
@@ -12,8 +11,6 @@
1211
"astro": "^1.0.0-beta.32"
1312
},
1413
"dependencies": {
15-
"@webcomponents/template-shadowroot": "^0.1.0",
16-
"lit": "^2.2.4",
1714
"preact": "^10.7.2",
1815
"react": "^18.1.0",
1916
"react-dom": "^18.1.0",

‎packages/astro/e2e/fixtures/nested-in-preact/astro.config.mjs

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineConfig } from 'astro/config';
2+
import preact from '@astrojs/preact';
3+
import react from '@astrojs/react';
4+
import svelte from '@astrojs/svelte';
5+
import vue from '@astrojs/vue';
6+
import solid from '@astrojs/solid-js';
7+
8+
// https://astro.build/config
9+
export default defineConfig({
10+
// Enable many frameworks to support all different kinds of components.
11+
integrations: [preact(), react(), svelte(), vue(), solid()],
12+
});

‎packages/astro/e2e/fixtures/nested-in-preact/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@e2e/nested-in-preact",
3+
"version": "0.0.0",
4+
"private": true,
5+
"devDependencies": {
6+
"@astrojs/preact": "^0.1.2",
7+
"@astrojs/react": "^0.1.2",
8+
"@astrojs/solid-js": "^0.1.2",
9+
"@astrojs/svelte": "^0.1.3",
10+
"@astrojs/vue": "^0.1.4",
11+
"astro": "^1.0.0-beta.32"
12+
},
13+
"dependencies": {
14+
"preact": "^10.7.2",
15+
"react": "^18.1.0",
16+
"react-dom": "^18.1.0",
17+
"solid-js": "^1.4.2",
18+
"svelte": "^3.48.0",
19+
"vue": "^3.2.36"
20+
}
21+
}

‎packages/astro/e2e/fixtures/nested-in-preact/src/components/PreactCounter.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { useState } from 'preact/hooks';
2+
3+
/** a counter written in Preact */
4+
export function PreactCounter({ children, id }) {
5+
const [count, setCount] = useState(0);
6+
const add = () => setCount((i) => i + 1);
7+
const subtract = () => setCount((i) => i - 1);
8+
9+
return (
10+
<div id={id} class="counter">
11+
<button class="decrement" onClick={subtract}>-</button>
12+
<pre id={`${id}-count`}>{count}</pre>
13+
<button id={`${id}-increment`} class="increment" onClick={add}>+</button>
14+
<div class="children">{children}</div>
15+
</div>
16+
);
17+
}

‎packages/astro/e2e/fixtures/nested-in-preact/src/components/ReactCounter.jsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { useState } from 'react';
2+
3+
/** a counter written in React */
4+
export default function Counter({ children, id }) {
5+
const [count, setCount] = useState(0);
6+
const add = () => setCount((i) => i + 1);
7+
const subtract = () => setCount((i) => i - 1);
8+
9+
return (
10+
<div id={id} className="counter">
11+
<button className="decrement" onClick={subtract}>-</button>
12+
<pre id={`${id}-count`}>{count}</pre>
13+
<button id={`${id}-increment`} className="increment" onClick={add}>+</button>
14+
<div className="children">{children}</div>
15+
</div>
16+
);
17+
}

‎packages/astro/e2e/fixtures/nested-in-preact/src/components/SolidCounter.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { createSignal } from 'solid-js';
2+
3+
/** a counter written with Solid */
4+
export default function SolidCounter({ children, id }) {
5+
const [count, setCount] = createSignal(0);
6+
const add = () => setCount(count() + 1);
7+
const subtract = () => setCount(count() - 1);
8+
9+
return (
10+
<div id={id} class="counter">
11+
<button class="decrement" onClick={subtract}>-</button>
12+
<pre id={`${id}-count`}>{count()}</pre>
13+
<button id={`${id}-increment`} class="increment" onClick={add}>+</button>
14+
<div class="children">{children}</div>
15+
</div>
16+
);
17+
}

‎packages/astro/e2e/fixtures/nested-in-preact/src/components/SvelteCounter.svelte

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
2+
<script>
3+
export let id;
4+
let children;
5+
let count = 0;
6+
7+
function add() {
8+
count += 1;
9+
}
10+
11+
function subtract() {
12+
count -= 1;
13+
}
14+
</script>
15+
16+
<div {id} class="counter">
17+
<button class="decrement" on:click={subtract}>-</button>
18+
<pre id={`${id}-count`}>{ count }</pre>
19+
<button id={`${id}-increment`} class="increment" on:click={add}>+</button>
20+
<div class="children">
21+
<slot />
22+
</div>
23+
</div>
24+
25+
<style>
26+
.counter {
27+
background: white;
28+
}
29+
</style>

‎packages/astro/e2e/fixtures/nested-in-preact/src/components/VueCounter.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div :id="id" class="counter">
3+
<button class="decrement" @click="subtract()">-</button>
4+
<pre :id="`${id}-count`">{{ count }}</pre>
5+
<button :id="`${id}-increment`" class="increment" @click="add()">+</button>
6+
<div class="children">
7+
<slot />
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import { ref } from 'vue';
14+
export default {
15+
props: {
16+
id: {
17+
type: String,
18+
required: true
19+
}
20+
},
21+
setup(props) {
22+
const count = ref(0);
23+
const add = () => (count.value = count.value + 1);
24+
const subtract = () => (count.value = count.value - 1);
25+
26+
return {
27+
id: props.id,
28+
count,
29+
add,
30+
subtract,
31+
};
32+
},
33+
};
34+
</script>

‎packages/astro/e2e/fixtures/nested-in-preact/src/pages/index.astro

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
import ReactCounter from '../components/ReactCounter.jsx';
3+
import { PreactCounter } from '../components/PreactCounter.tsx';
4+
import SolidCounter from '../components/SolidCounter.tsx';
5+
import VueCounter from '../components/VueCounter.vue';
6+
import SvelteCounter from '../components/SvelteCounter.svelte';
7+
8+
// Full Astro Component Syntax:
9+
// https://docs.astro.build/core-concepts/astro-components/
10+
---
11+
12+
<html lang="en">
13+
<head>
14+
<meta charset="utf-8" />
15+
<meta name="viewport" content="width=device-width" />
16+
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
17+
</head>
18+
<body>
19+
<main>
20+
<PreactCounter id="preact-counter" client:load>
21+
<ReactCounter id="react-counter" client:load />
22+
<SolidCounter id="solid-counter" client:load />
23+
<SvelteCounter id="svelte-counter" client:load />
24+
<VueCounter id="vue-counter" client:load />
25+
</PreactCounter>
26+
</main>
27+
</body>
28+
</html>

‎packages/astro/e2e/fixtures/nested-in-react/astro.config.mjs

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineConfig } from 'astro/config';
2+
import preact from '@astrojs/preact';
3+
import react from '@astrojs/react';
4+
import svelte from '@astrojs/svelte';
5+
import vue from '@astrojs/vue';
6+
import solid from '@astrojs/solid-js';
7+
8+
// https://astro.build/config
9+
export default defineConfig({
10+
// Enable many frameworks to support all different kinds of components.
11+
integrations: [preact(), react(), svelte(), vue(), solid()],
12+
});

‎packages/astro/e2e/fixtures/nested-in-react/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@e2e/nested-in-react",
3+
"version": "0.0.0",
4+
"private": true,
5+
"devDependencies": {
6+
"@astrojs/preact": "^0.1.2",
7+
"@astrojs/react": "^0.1.2",
8+
"@astrojs/solid-js": "^0.1.2",
9+
"@astrojs/svelte": "^0.1.3",
10+
"@astrojs/vue": "^0.1.4",
11+
"astro": "^1.0.0-beta.32"
12+
},
13+
"dependencies": {
14+
"preact": "^10.7.2",
15+
"react": "^18.1.0",
16+
"react-dom": "^18.1.0",
17+
"solid-js": "^1.4.2",
18+
"svelte": "^3.48.0",
19+
"vue": "^3.2.36"
20+
}
21+
}

‎packages/astro/e2e/fixtures/nested-in-react/src/components/PreactCounter.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { useState } from 'preact/hooks';
2+
3+
/** a counter written in Preact */
4+
export function PreactCounter({ children, id }) {
5+
const [count, setCount] = useState(0);
6+
const add = () => setCount((i) => i + 1);
7+
const subtract = () => setCount((i) => i - 1);
8+
9+
return (
10+
<div id={id} class="counter">
11+
<button class="decrement" onClick={subtract}>-</button>
12+
<pre id={`${id}-count`}>{count}</pre>
13+
<button id={`${id}-increment`} class="increment" onClick={add}>+</button>
14+
<div class="children">{children}</div>
15+
</div>
16+
);
17+
}

‎packages/astro/e2e/fixtures/nested-in-react/src/components/ReactCounter.jsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { useState } from 'react';
2+
3+
/** a counter written in React */
4+
export default function Counter({ children, id }) {
5+
const [count, setCount] = useState(0);
6+
const add = () => setCount((i) => i + 1);
7+
const subtract = () => setCount((i) => i - 1);
8+
9+
return (
10+
<div id={id} className="counter">
11+
<button className="decrement" onClick={subtract}>-</button>
12+
<pre id={`${id}-count`}>{count}</pre>
13+
<button id={`${id}-increment`} className="increment" onClick={add}>+</button>
14+
<div className="children">{children}</div>
15+
</div>
16+
);
17+
}

‎packages/astro/e2e/fixtures/nested-in-react/src/components/SolidCounter.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { createSignal } from 'solid-js';
2+
3+
/** a counter written with Solid */
4+
export default function SolidCounter({ children, id }) {
5+
const [count, setCount] = createSignal(0);
6+
const add = () => setCount(count() + 1);
7+
const subtract = () => setCount(count() - 1);
8+
9+
return (
10+
<div id={id} class="counter">
11+
<button class="decrement" onClick={subtract}>-</button>
12+
<pre id={`${id}-count`}>{count()}</pre>
13+
<button id={`${id}-increment`} class="increment" onClick={add}>+</button>
14+
<div class="children">{children}</div>
15+
</div>
16+
);
17+
}

‎packages/astro/e2e/fixtures/nested-in-react/src/components/SvelteCounter.svelte

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
2+
<script>
3+
export let id;
4+
let children;
5+
let count = 0;
6+
7+
function add() {
8+
count += 1;
9+
}
10+
11+
function subtract() {
12+
count -= 1;
13+
}
14+
</script>
15+
16+
<div {id} class="counter">
17+
<button class="decrement" on:click={subtract}>-</button>
18+
<pre id={`${id}-count`}>{ count }</pre>
19+
<button id={`${id}-increment`} class="increment" on:click={add}>+</button>
20+
<div class="children">
21+
<slot />
22+
</div>
23+
</div>
24+
25+
<style>
26+
.counter {
27+
background: white;
28+
}
29+
</style>

‎packages/astro/e2e/fixtures/nested-in-react/src/components/VueCounter.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div :id="id" class="counter">
3+
<button class="decrement" @click="subtract()">-</button>
4+
<pre :id="`${id}-count`">{{ count }}</pre>
5+
<button :id="`${id}-increment`" class="increment" @click="add()">+</button>
6+
<div class="children">
7+
<slot />
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import { ref } from 'vue';
14+
export default {
15+
props: {
16+
id: {
17+
type: String,
18+
required: true
19+
}
20+
},
21+
setup(props) {
22+
const count = ref(0);
23+
const add = () => (count.value = count.value + 1);
24+
const subtract = () => (count.value = count.value - 1);
25+
26+
return {
27+
id: props.id,
28+
count,
29+
add,
30+
subtract,
31+
};
32+
},
33+
};
34+
</script>

‎packages/astro/e2e/fixtures/nested-in-react/src/pages/index.astro

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
import ReactCounter from '../components/ReactCounter.jsx';
3+
import { PreactCounter } from '../components/PreactCounter.tsx';
4+
import SolidCounter from '../components/SolidCounter.tsx';
5+
import VueCounter from '../components/VueCounter.vue';
6+
import SvelteCounter from '../components/SvelteCounter.svelte';
7+
8+
// Full Astro Component Syntax:
9+
// https://docs.astro.build/core-concepts/astro-components/
10+
---
11+
12+
<html lang="en">
13+
<head>
14+
<meta charset="utf-8" />
15+
<meta name="viewport" content="width=device-width" />
16+
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
17+
</head>
18+
<body>
19+
<main>
20+
<ReactCounter id="react-counter" client:load>
21+
<SolidCounter id="solid-counter" client:load />
22+
<SvelteCounter id="svelte-counter" client:load />
23+
<PreactCounter id="preact-counter" client:load />
24+
<VueCounter id="vue-counter" client:load />
25+
</ReactCounter>
26+
</main>
27+
</body>
28+
</html>

‎packages/astro/e2e/fixtures/nested-in-solid/astro.config.mjs

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineConfig } from 'astro/config';
2+
import preact from '@astrojs/preact';
3+
import react from '@astrojs/react';
4+
import svelte from '@astrojs/svelte';
5+
import vue from '@astrojs/vue';
6+
import solid from '@astrojs/solid-js';
7+
8+
// https://astro.build/config
9+
export default defineConfig({
10+
// Enable many frameworks to support all different kinds of components.
11+
integrations: [preact(), react(), svelte(), vue(), solid()],
12+
});

0 commit comments

Comments
 (0)