feat: Astro support

[feugy]

📓 What's in there?

This is an initial draft for Astro first-class support.

beforeSend is supported by using speedInsightsBeforeSend as global window function

<script is:inline>
  function speedInsightsBeforeSend(data){
    console.log("Capured event!")
    return data;
  }
</script>

TODO list:

• [ ] use astro@4
• [ ] documentation
• [ ] check types and autocompletion

🧪 How to test?

There's a new example app, based on the Astro official blog template

• get the dependencies pnpm i
• update apps/astro/src/components/BaseHead.astro to set scriptSrc="https://va.vercel-scripts.com/v1/speed-insights/script.js" on the speed insights component. This will attempt to report metrics so we can see the reported payloads.
• cd apps/astro && pnpm dev to start the app
• visit the app, and navigate its pages.

❗ Notes to reviewers

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
speed-insights-nextjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 13, 2023 1:11pm
speed-insights-nuxt	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 13, 2023 1:11pm
speed-insights-remix	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 13, 2023 1:11pm
speed-insights-sveltekit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 13, 2023 1:11pm
speed-insights-vue	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 13, 2023 1:11pm

[MoustaphaDev]

Agreed that using a component is better DX!

I'm exploring an alternative approach to address the beforeSend as props limitation that might be more suitable than excluding that future (in my opinion), although not ideal.

Here's how it would work and how it would be documented:

Note: Because of some limitations (blah blah), if you want to use the beforeSend feature, you can define a speedInsightsBeforeSend function in an inline script in your Astro page or layout:

<script is:inline>
  function speedInsightsBeforeSend(data){
    console.log("Capured event!")
    return data;
  }
</script>

Here's how the function will be used internally:

// ...
const beforeSend = window.speedInsightsBeforeSend;
injectSpeedInsights({ route, ...props, framework: 'astro', beforeSend });
// ...

Let me know what you think 🙂

[tobiaslins]

@MoustaphaDev thanks for the review! Thats a great idea. I just updated the code to look for window.speedInsightsBeforeSend to support that!

[tobiaslins]

Updated to latest versions :) Thanks all