Skip to content

Commit 7f0bd25

Browse files
Lms24Lms24
authored
feat(astro): Add Astro 5 support (#14613)
Adds support for Astro 5 and an E2E test app for Astro 5 with the new [server islands](https://docs.astro.build/en/guides/server-islands/) feature. For server islands, we emit a new `http.server` transaction for the island-specific additional http requests. Which is generally good IMO, given that server island requests are routed to the automatically generated `/_server-island/[name]` Astro endpoint.
1 parent 08b7e49 commit 7f0bd25

30 files changed

+1050
-11
lines changed

‎dev-packages/e2e-tests/test-applications/astro-5/.gitignore

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# build output
2+
dist/
3+
4+
# generated types
5+
.astro/
6+
7+
# dependencies
8+
node_modules/
9+
10+
# logs
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
pnpm-debug.log*
15+
16+
# environment variables
17+
.env
18+
.env.production
19+
20+
# macOS-specific files
21+
.DS_Store
22+
23+
# jetbrains setting folder
24+
.idea/
25+
26+
test-results

‎dev-packages/e2e-tests/test-applications/astro-5/.npmrc

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@sentry:registry=http://127.0.0.1:4873
2+
@sentry-internal:registry=http://127.0.0.1:4873

‎dev-packages/e2e-tests/test-applications/astro-5/README.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Astro Starter Kit: Basics
2+
3+
```sh
4+
npm create astro@latest -- --template basics
5+
```
6+
7+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
8+
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
9+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
10+
11+
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
12+
13+
![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
14+
15+
## 🚀 Project Structure
16+
17+
Inside of your Astro project, you'll see the following folders and files:
18+
19+
```text
20+
/
21+
├── public/
22+
│ └── favicon.svg
23+
├── src/
24+
│ ├── layouts/
25+
│ │ └── Layout.astro
26+
│ └── pages/
27+
│ └── index.astro
28+
└── package.json
29+
```
30+
31+
To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
32+
33+
## 🧞 Commands
34+
35+
All commands are run from the root of the project, from a terminal:
36+
37+
| Command | Action |
38+
| :------------------------ | :----------------------------------------------- |
39+
| `npm install` | Installs dependencies |
40+
| `npm run dev` | Starts local dev server at `localhost:4321` |
41+
| `npm run build` | Build your production site to `./dist/` |
42+
| `npm run preview` | Preview your build locally, before deploying |
43+
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
44+
| `npm run astro -- --help` | Get help using the Astro CLI |
45+
46+
## 👀 Want to learn more?
47+
48+
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

‎dev-packages/e2e-tests/test-applications/astro-5/astro.config.mjs

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import sentry from '@sentry/astro';
2+
// @ts-check
3+
import { defineConfig } from 'astro/config';
4+
5+
import node from '@astrojs/node';
6+
7+
// https://astro.build/config
8+
export default defineConfig({
9+
integrations: [
10+
sentry({
11+
debug: true,
12+
sourceMapsUploadOptions: {
13+
enabled: false,
14+
},
15+
}),
16+
],
17+
output: 'server',
18+
adapter: node({
19+
mode: 'standalone',
20+
}),
21+
});

‎dev-packages/e2e-tests/test-applications/astro-5/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "astro-5",
3+
"type": "module",
4+
"version": "0.0.1",
5+
"scripts": {
6+
"dev": "astro dev",
7+
"build": "astro build",
8+
"preview": "astro preview",
9+
"astro": "astro",
10+
"test:build": "pnpm install && npx playwright install && pnpm build",
11+
"test:assert": "TEST_ENV=production playwright test"
12+
},
13+
"dependencies": {
14+
"@astrojs/internal-helpers": "^0.4.2",
15+
"@astrojs/node": "^9.0.0",
16+
"@playwright/test": "^1.46.0",
17+
"@sentry-internal/test-utils": "link:../../../test-utils",
18+
"@sentry/astro": "^8.42.0",
19+
"astro": "^5.0.3"
20+
}
21+
}

‎dev-packages/e2e-tests/test-applications/astro-5/playwright.config.mjs

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { getPlaywrightConfig } from '@sentry-internal/test-utils';
2+
3+
const testEnv = process.env.TEST_ENV;
4+
5+
if (!testEnv) {
6+
throw new Error('No test env defined');
7+
}
8+
9+
const config = getPlaywrightConfig({
10+
startCommand: 'node ./dist/server/entry.mjs',
11+
});
12+
13+
export default config;

‎dev-packages/e2e-tests/test-applications/astro-5/public/favicon.svg

+9
Loading

‎dev-packages/e2e-tests/test-applications/astro-5/sentry.client.config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as Sentry from '@sentry/astro';
2+
3+
Sentry.init({
4+
dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
5+
environment: 'qa',
6+
tracesSampleRate: 1.0,
7+
tunnel: 'http://localhost:3031/', // proxy server
8+
integrations: [Sentry.browserTracingIntegration()],
9+
});

‎dev-packages/e2e-tests/test-applications/astro-5/sentry.server.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import * as Sentry from '@sentry/astro';
2+
3+
Sentry.init({
4+
dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
5+
environment: 'qa',
6+
tracesSampleRate: 1.0,
7+
tunnel: 'http://localhost:3031/', // proxy server
8+
});

‎dev-packages/e2e-tests/test-applications/astro-5/src/assets/astro.svg

+1
Loading

‎dev-packages/e2e-tests/test-applications/astro-5/src/assets/background.svg

+1
Loading

‎dev-packages/e2e-tests/test-applications/astro-5/src/components/Avatar.astro

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
---
3+
<img alt="User avatar" src="/favicon.svg" />

‎dev-packages/e2e-tests/test-applications/astro-5/src/components/Welcome.astro

+209
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
---
2+
import astroLogo from '../assets/astro.svg';
3+
import background from '../assets/background.svg';
4+
---
5+
6+
<div id="container">
7+
<img id="background" src={background.src} alt="" fetchpriority="high" />
8+
<main>
9+
<section id="hero">
10+
<a href="https://astro.build"
11+
><img src={astroLogo.src} width="115" height="48" alt="Astro Homepage" /></a
12+
>
13+
<h1>
14+
To get started, open the <code><pre>src/pages</pre></code> directory in your project.
15+
</h1>
16+
<section id="links">
17+
<a class="button" href="https://docs.astro.build">Read our docs</a>
18+
<a href="https://astro.build/chat"
19+
>Join our Discord <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"
20+
><path
21+
fill="currentColor"
22+
d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
23+
></path></svg
24+
>
25+
</a>
26+
</section>
27+
</section>
28+
</main>
29+
30+
<a href="https://astro.build/blog/astro-5/" id="news" class="box">
31+
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"
32+
><path
33+
d="M24.667 12c1.333 1.414 2 3.192 2 5.334 0 4.62-4.934 5.7-7.334 12C18.444 28.567 18 27.456 18 26c0-4.642 6.667-7.053 6.667-14Zm-5.334-5.333c1.6 1.65 2.4 3.43 2.4 5.333 0 6.602-8.06 7.59-6.4 17.334C13.111 27.787 12 25.564 12 22.666c0-4.434 7.333-8 7.333-16Zm-6-5.333C15.111 3.555 16 5.556 16 7.333c0 8.333-11.333 10.962-5.333 22-3.488-.774-6-4-6-8 0-8.667 8.666-10 8.666-20Z"
34+
fill="#111827"></path></svg
35+
>
36+
<h2>What's New in Astro 5.0?</h2>
37+
<p>
38+
From content layers to server islands, click to learn more about the new features and
39+
improvements in Astro 5.0
40+
</p>
41+
</a>
42+
</div>
43+
44+
<style>
45+
#background {
46+
position: fixed;
47+
top: 0;
48+
left: 0;
49+
width: 100%;
50+
height: 100%;
51+
z-index: -1;
52+
filter: blur(100px);
53+
}
54+
55+
#container {
56+
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
57+
height: 100%;
58+
}
59+
60+
main {
61+
height: 100%;
62+
display: flex;
63+
justify-content: center;
64+
}
65+
66+
#hero {
67+
display: flex;
68+
align-items: start;
69+
flex-direction: column;
70+
justify-content: center;
71+
padding: 16px;
72+
}
73+
74+
h1 {
75+
font-size: 22px;
76+
margin-top: 0.25em;
77+
}
78+
79+
#links {
80+
display: flex;
81+
gap: 16px;
82+
}
83+
84+
#links a {
85+
display: flex;
86+
align-items: center;
87+
padding: 10px 12px;
88+
color: #111827;
89+
text-decoration: none;
90+
transition: color 0.2s;
91+
}
92+
93+
#links a:hover {
94+
color: rgb(78, 80, 86);
95+
}
96+
97+
#links a svg {
98+
height: 1em;
99+
margin-left: 8px;
100+
}
101+
102+
#links a.button {
103+
color: white;
104+
background: linear-gradient(83.21deg, #3245ff 0%, #bc52ee 100%);
105+
box-shadow:
106+
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
107+
inset 0 -2px 0 rgba(0, 0, 0, 0.24);
108+
border-radius: 10px;
109+
}
110+
111+
#links a.button:hover {
112+
color: rgb(230, 230, 230);
113+
box-shadow: none;
114+
}
115+
116+
pre {
117+
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
118+
'DejaVu Sans Mono', monospace;
119+
font-weight: normal;
120+
background: linear-gradient(14deg, #d83333 0%, #f041ff 100%);
121+
-webkit-background-clip: text;
122+
-webkit-text-fill-color: transparent;
123+
background-clip: text;
124+
margin: 0;
125+
}
126+
127+
h2 {
128+
margin: 0 0 1em;
129+
font-weight: normal;
130+
color: #111827;
131+
font-size: 20px;
132+
}
133+
134+
p {
135+
color: #4b5563;
136+
font-size: 16px;
137+
line-height: 24px;
138+
letter-spacing: -0.006em;
139+
margin: 0;
140+
}
141+
142+
code {
143+
display: inline-block;
144+
background:
145+
linear-gradient(66.77deg, #f3cddd 0%, #f5cee7 100%) padding-box,
146+
linear-gradient(155deg, #d83333 0%, #f041ff 18%, #f5cee7 45%) border-box;
147+
border-radius: 8px;
148+
border: 1px solid transparent;
149+
padding: 6px 8px;
150+
}
151+
152+
.box {
153+
padding: 16px;
154+
background: rgba(255, 255, 255, 1);
155+
border-radius: 16px;
156+
border: 1px solid white;
157+
}
158+
159+
#news {
160+
position: absolute;
161+
bottom: 16px;
162+
right: 16px;
163+
max-width: 300px;
164+
text-decoration: none;
165+
transition: background 0.2s;
166+
backdrop-filter: blur(50px);
167+
}
168+
169+
#news:hover {
170+
background: rgba(255, 255, 255, 0.55);
171+
}
172+
173+
@media screen and (max-height: 368px) {
174+
#news {
175+
display: none;
176+
}
177+
}
178+
179+
@media screen and (max-width: 768px) {
180+
#container {
181+
display: flex;
182+
flex-direction: column;
183+
}
184+
185+
#hero {
186+
display: block;
187+
padding-top: 10%;
188+
}
189+
190+
#links {
191+
flex-wrap: wrap;
192+
}
193+
194+
#links a.button {
195+
padding: 14px 18px;
196+
}
197+
198+
#news {
199+
right: 16px;
200+
left: 16px;
201+
bottom: 2.5rem;
202+
max-width: 100%;
203+
}
204+
205+
h1 {
206+
line-height: 1.5;
207+
}
208+
}
209+
</style>

0 commit comments

Comments
 (0)