astro-pages-hmr

Adds HMR support to pages in Astro (`src/pages/*`). Supports `.astro`, `.html`, `.md`, `.mdx`, etc pages and Content Collections.

0.1.2
latest
Source
npm

Version published: 6 months ago

Weekly downloads: 3; increased by200%

Maintainers: 1

Weekly downloads

Created: 6 months ago

Source

astro-pages-hmr

Adds HMR support to pages in Astro (src/pages/*). Supports .astro, .html, .md, .mdx, etc pages and Content Collections.

Usage

Using `astro add`

If you have an existing Astro project, you can run the following command to add astro-pages-hmr to your project:

# npm
npx astro add astro-pages-hmr
# pnpm
pnpm astro add astro-pages-hmr

Manual

Install the package:

# npm
npm install astro-pages-hmr
# pnpm
pnpm add astro-pages-hmr

Add the integration to your astro.config.mjs:

import { defineConfig } from 'astro/config'
import pagesHmr from 'astro-pages-hmr'

export default defineConfig({
  integrations: [pagesHmr()]
})

How it works

The integration uses micromorph to update the current HTML with the incoming new HTML via fetch. micromorph is bundled into a client HMR runtime that is injected into the page.

In some cases where it's not safe to morph, it'll fallback to a full page reload instead. The cases include:

The <head> tag has changed
The <script> tags have changed
The attributes passed to Island components have changed

Limitations

Dynamically injected elements in the HTML may interfere with morphing as the incoming new HTML will likely not contain that element, so they will be deleted from the DOM even if needed. In which case, make sure your script is able to handle those changes and re-inject them if needed.
When updating scripts in Astro files, the page may not reload to re-execute the script.

License

MIT

Keywords

FAQs

What is astro-pages-hmr?

Is astro-pages-hmr popular?

Is astro-pages-hmr well maintained?

Package last updated on 13 May 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install