Astro is a new JavaScript bundler in the market. It follows the Bring Your Own Framework (BYOF) strategy and loads the components on-demand. Astro is still in the Beta version (v0.19). They're planning for a v1.0.0 release later this year. Keep out any eye 👀

Starting a new project in Astro is very easy, you just have to run this command npm init astro

# create a new project

mkdir js-is-one
cd js-is-one

# no other config is required, only this command is enough 🔥
npm init astro -- --template framework-multiple

# then install the dependencies
npm i

# start the dev server
npm run dev

This command will load all the required config for developing an app using multiple frameworks - npm init astro --template framework-multiple

Recommended for best Astro dev experience

Use VSCode text editor
Use their Offical Astro VSCode extension

Folder structure

├── src/
│   ├── components/
│       └── ReactHW.jsx
│       └── VueHW.vue
│   └── pages/
│       └── index.astro
├── public/
├── astro.config.mjs
└── package.json

`astro.config.mjs`

The template which we used framework-multiple loads all the frameworks [React, Vue, Preact, Svelte, Solid & Astro as well] by default and the Astro framework has a config file astro.config.mjs where all the frameworks can be configured. I will be removing other frameworks like Preact, Svelte and Solid and only keeping React & Vue

export default {
  renderers: [
    "@astrojs/renderer-react",
    "@astrojs/renderer-vue"
  ],
};

index.astro

---
// Component Imports
import * as react from '../components/ReactHW.jsx';
import VuewHW from '../components/VueHW.vue';

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

        <link rel="icon" type="image/x-icon" href="/favicon.ico" />

    <style>
        :global(:root) {
            font-family: system-ui;
            padding: 2em 0;
        }
    </style>
  </head>
  <body>
      <main>
        <react.HW client:visible>
            <h1>Hello React!</h1>
        </react.HW>

        <VuewHW client:visible>
            <h1>Hello Vue!</h1>
        </VuewHW>
      </main>
  </body>
</html>

So both React & Vue are co-existing in the same file. Now I have a lot of question like

using same CSS-in-JS components
using the same linters like JSLint & Prettier
Using the same plugin like lodash for both frameworks

Astro is all about partial hydration

Astro generates every website with zero client-side JavaScript, by default. Use any frontend UI component (React, Svelte, Vue, etc.) Astro will automatically render it to HTML at build-time and strip away all JavaScript.

Partial hydration means - In some scenarios where we will be needing client side JS to evaluate - like a autocomplete search bar, Add to cart button and many more. The act of only hydrating the individual components that require JavaScript and leaving the rest of your site as static HTML is called Partial hydration

The hydration is also in our control

`<Component client:load />`

This hydrates the component on page load.

`<Component client:idle />`

This hydrates the component as soon as main thread is free

`<Component client:visible />`

This hydrates the component as soon as the element enters the viewport (uses IntersectionObserver).

`<Component client:only />`

This hydrates the component at page load, similar to client:load.

DEV

The command npm run dev will load the app in the browser http://localhost:3000

Other frameworks using Astro

For a normal project with the framework of your choice, I'm listing the commands below 👇

React - npm init astro -- --template framework-react
Vue - npm init astro -- --template framework-vue
Svelte - npm init astro -- --template framework-svelte

Chetan's Frontend Realm