npmpackage.info

astro-pages-hmr

Support HMR in pages in Astro

0.1.2

NOASSERTION

Astro

14.23 kB

254

Installations

npm install astro-pages-hmr

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

18.18.2

NPM Version

9.8.1 Score

71.5

Supply Chain

83.8

Quality

77.9

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 1 Contributors

Languages

Astro

JavaScript

CSS

MDX

TypeScript

Astro (60.72%)

JavaScript (24.14%)

CSS (8.57%)

MDX (4.74%)

TypeScript (1.82%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

bluwy

Download Statistics

Total Downloads

254

Last Day

Last Week

Last Month

Last Year

254

GitHub Statistics

NOASSERTION License

6 Stars

6 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Nov 04, 2024

Maintainers

Package Meta Information

Latest Version

0.1.2

Package Id

astro-pages-hmr@0.1.2

Unpacked Size

14.23 kB

Size

4.98 kB

File Count

NPM Version

9.8.1

Node Version

18.18.2

Published on

May 13, 2024

Total Downloads

Cumulative downloads

Total Downloads

254

Last Day

Compared to previous day

Last Week

Compared to previous week

Last Month

162.5%

Compared to previous month

Last Year

254

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@types/node astro esbuild micromorph prettier prettier-plugin-astro vite

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:

1# npm
2npx astro add astro-pages-hmr
3# pnpm
4pnpm astro add astro-pages-hmr

Manual

Install the package:

1# npm
2npm install astro-pages-hmr
3# pnpm
4pnpm add astro-pages-hmr

Add the integration to your astro.config.mjs:

1import { defineConfig } from 'astro/config'
2import pagesHmr from 'astro-pages-hmr'
3
4export default defineConfig({
5  integrations: [pagesHmr()]
6})

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

No vulnerabilities found.

No security vulnerabilities found.

astro-pages-hmr

Installations

Developer Guide

Yes

ESM

18.18.2

9.8.1

Score

Pull Requests

0

0

0

Issues

0

0

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

254

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

astro-pages-hmr

Usage

Using astro add

Manual

How it works

Limitations

License

Using `astro add`