"If you're using Astro, you should build components with the extension". astro That was my initial thought when I started using Astro. But after a couple of months building with Astro, my thinking has changed. I no longer build most of my components with files. astro I mostly use Svelte files instead. This article explains why. Three reasons why I don’t build components with astro files Reason 1: I use Svelte as my framework of choice This reason is pretty obvious — I have to write Svelte files if I want to use ! Svelte I chose Svelte after evaluating the major three frameworks ( , , and Svelte) and I found that Svelte has a better raw developer experience. React Vue I can share more about why that’s the case, but I’ll have to do that in another blog post since that will be a long one. Reason 2: the main reason The main reason is this: Astro can import framework files But framework files cannot import Astro files Many commonly used components can be written in Svelte, so they can be imported into both Astro and Svelte files. Here are some examples: A Button component An SVG component that searches the project for an SVG icon. If build these components in Astro, we won’t be able to use them inside Svelte files — and this eventually forced me to rewrite these components in Svelte. Reason 3: Better syntax I say better syntax because I find it easier to read Svelte markup over React’s and Vue’s markup — especially when there are if statements or loops. This might have been because I’ve been using nunjucks for a long time, so the syntax is much easier for me to read. Sometimes I choose to write components in Svelte precisely to take advantage of this syntax difference. When to use Astro files I only choose the file extension for my component files when I need to use Astro’s API like content collections, which is not available in other frameworks. Astro What if a component requires both Astro APIs and JavaScript? I encountered this a couple of times. When this happens, I typically do two things: I build an Astro component that retrieves stuff I need with Astro’s API. And I build a Svelte component that uses this information. Usually, I would give both components the same name because it helps me remember that they are directly related to each other. Wrapping up Use the following guidelines if you’re deciding which extension when we build components in Astro: Build the component in your framework of choice whenever possible Only use Astro components when you need Astro’s API (or it’s heavily file-system related) If you need both Astro’s API and JavaScript, feel free to build components with both extensions. Just remember to give them appropriate names so you know they’re related to each other! . Originally written on my blog The lead image for this article was generated by HackerNoon's AI Image Generator via the prompt "software development”. Feel free to visit that if you want to have these articles delivered to your email first-hand whenever they're released! 🙂.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The is an opinion piece based on the author’s POV and does not necessarily reflect the views of HackerNoon.

Optimizing Component Development in Astro without Astro Files

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

Adding a Headless CMS to Astro in 3 Steps

An Intro to the Astro Framework: Benefits and Drawbacks

Creating an Astro Site: Add Lucide Icons to Astro

How to Building Fancy List Items in Astro

Implementing Dynamic Tags in Astro

A Quick CSS Guide: Crafting Neon Buttons with Glow Effects & Animations

Adding a Headless CMS to Astro in 3 Steps

An Intro to the Astro Framework: Benefits and Drawbacks

Creating an Astro Site: Add Lucide Icons to Astro

How to Building Fancy List Items in Astro

Implementing Dynamic Tags in Astro

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps