Astro framework Components

Language
Astro Component consists of two parts

---
// here goes typescript syntax
---

<!-- here goes jsx-like syntax -->

Within jsx-like part all <script> elements contain Typescript, except for those which are marked as is:inline

Example:

---
type Props = { url: string, label: string, list: string[] }
const { list } = Astro.props
---

<a href={Astro.props.url}>{Astro.props.label}</a>
{list.length > 0 ? list.map(e => <p>{e}</p>) : null}

<script>
// this is typescript
import AnchorBeautifier from 'my-lib';
import type { BeautifulAnchor } from 'my-lib';
const allLinks: BeautifulAnchor[]  = []
document.querySelectorAll("a").forEach(
  anchor => {
    allLinks.push(AnchorBeautifier.beautify(anchor))
  }
)
console.log("processed links", allLinks)
</script>

<script is:inline>
// this is javascript
...
</script is:inline>

Additional resources

• website
• components doc
• I have also noticed that there is no highlighting for Vue, which has similar structure. I suspect there might be some technical limitation (I am not aware of Prism's architecture)

The issue provides Astro component examples and links to the Astro components documentation, but no repository file or test entry point. Start by reading those examples and Prism's existing language-support structure; done means Astro components highlight TypeScript in frontmatter and regular script elements while preserving JavaScript for scripts marked is:inline.