feat: introduce pure bundle (JS and CSS separated)

[francoischalifour]

This is work on top of #204 and closes #203.

Description

This introduces a pure bundle where the JavaScript and CSS styles are separated. This brings support for Page Transitions in Astro.

Usage

import mediumZoom from 'medium-zoom/dist/pure'
import 'medium-zoom/dist/style.css'

(Or import the CSS with a <link> tag.)

[francoischalifour]

@Nomango I reused your branch to:

• Move the CSS dist file top level
• Add pure UMD bundles
• Test the size of the new bundles
• Add documentation for this pure bundle

Can you please let me know if that works as expected in your Astro setup?

[Nomango]

@francoischalifour Thanks for handling this!

I can't import medium-zoom/pure neither medium-zoom/style.css. But medium-zoom/dist/pure is working.

And this is what I did.

1. checkout to pure-bundle branch
2. pnpm i && pnpm build
3. pnpm link ../medium-zoom in my project

There is another issue, when using page transition, multiple calls to mediumZoom will cause problems. Seems like the background is overlaid on the image.

// instead of...
mediumZoom(imgs, { background: "rgba(0, 0, 0, 0.8)" });

// using...
if (window.zoom === undefined) {
  window.zoom = mediumZoom({ background: "rgba(0, 0, 0, 0.8)" });
}
const zoom = window.zoom;
zoom.detach();
zoom.attach(imgs);

Is there something I missed?

[francoischalifour]

Indeed, the imports should use the /dist path, I'll update the documentation.

import mediumZoom from 'medium-zoom/dist/pure'
import 'medium-zoom/dist/style.css'

In Page Transitions in Astro, you might need to capture when the page changes with astro:after-swap and call zoom.destroy(). Then, you should be able to re-initialize the zoom on the new page. See Script behavior during page navigation.

Let me know if that works!

[Nomango]

Yes, it works!

Here are my test codes

// src/utils/mediumZoom.ts
import mediumZoom from "medium-zoom/dist/pure";
import "medium-zoom/dist/style.css";

const zoom = mediumZoom({
  background: "rgba(0, 0, 0, 0.8)",
});

document.addEventListener("astro:page-load", () => zoom.detach());

export default zoom;

---
// ...
---

<script>
  import zoom from "@utils/mediumZoom";

  // listen to astro:page-load event to handle the first loading
  document.addEventListener("astro:page-load", () => zoom.attach("main img"));
</script>

[francoischalifour]

Perfect, I'll merge this PR then, and release right after. Thanks a lot for your contributions @Nomango!

[francoischalifour]

🎉 Released in 1.1.0.