.github/ISSUE_TEMPLATE/bug_report.md

@@ -28,7 +28,7 @@ about: Did something not work?
 
 <!--
   - Go to the vanilla JavaScript example on CodeSandbox: https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/vanilla
-  - Fork it (top-left button)
+  - Fork it
   - Reproduce the bug you noticed
   - Share the link of the sandbox
 -->

.release-it.json

@@ -1,8 +1,7 @@
 {
   "increment": "conventional:angular",
   "scripts": {
-    "beforeStart": "yarn run lint && yarn run test --colors && yarn run build && yarn run test:size && yarn run test:cypress",
-    "afterRelease": "yarn run release:examples"
+    "beforeStart": "yarn run lint && yarn run test --colors && yarn run build && yarn run test:size && yarn run test:cypress"
   },
   "git": {
     "requireUpstream": false,

CHANGELOG.md

@@ -1,3 +1,22 @@
+# [1.1.0](https://github.com/francoischalifour/medium-zoom/compare/1.0.8...1.1.0) (2023-11-16)
+
+### Features
+
+- introduce pure bundle (JS and CSS separated) ([#204](https://github.com/francoischalifour/medium-zoom/issues/204) and [#206](https://github.com/francoischalifour/medium-zoom/issues/206)) ([0a05b46](https://github.com/francoischalifour/medium-zoom/commit/0a05b4626b0f2820ae5bc3e2b0ef081244679750))
+
+## [1.0.8](https://github.com/francoischalifour/medium-zoom/compare/1.0.7...1.0.8) (2022-11-15)
+
+### Bug Fixes
+
+- support images in `<picture>` elements with `currentSrc` ([#194](https://github.com/francoischalifour/medium-zoom/issues/194)) ([32ee39f](https://github.com/francoischalifour/medium-zoom/commit/32ee39f424f91e2f34e5e06e7ddc6bf8e4be9d23))
+
+## [1.0.7](https://github.com/francoischalifour/medium-zoom/compare/1.0.6...1.0.7) (2022-11-14)
+
+### Bug Fixes
+
+- ensure zooming out doesn't happen ([#176](https://github.com/francoischalifour/medium-zoom/issues/176)) ([b920940](https://github.com/francoischalifour/medium-zoom/commit/b920940c061d2dcb280e873ac4ca577130d4efc1))
+- remove `loading` attribute on HD target ([#186](https://github.com/francoischalifour/medium-zoom/issues/186)) ([dd01423](https://github.com/francoischalifour/medium-zoom/commit/dd01423b983a228be348c81ef9347d688a166cb6))
+
 ## [1.0.6](https://github.com/francoischalifour/medium-zoom/compare/1.0.5...1.0.6) (2020-07-08)
 
 ### Bug Fixes

README.md

@@ -62,7 +62,9 @@ npx doctoc README.md --maxlevel 3
   - [Methods](#methods)
   - [Attributes](#attributes)
   - [Events](#events)
+- [Framework integrations](#framework-integrations)
 - [Examples](#examples)
+- [Debugging](#debugging)
 - [Browser support](#browser-support)
 - [Contributing](#contributing)
 - [License](#license)
@@ -73,15 +75,16 @@ npx doctoc README.md --maxlevel 3
 
 ## Features
 
-- 📱 **Responsive** — _scale on mobile and desktop_
-- 🚀 **Performant and lightweight** — _should be able to reach 60 [fps](https://en.wikipedia.org/wiki/Frame_rate)_
-- ⚡️ **High definition support** — _load the HD version of your image on zoom_
-- 🔎 **Flexibility** — _apply the zoom to a selection of images_
-- 🖱 **Mouse, keyboard and gesture friendly** — _click anywhere, press a key or scroll away to close the zoom_
-- 🎂 **Event handling** — _trigger events when the zoom enters a new state_
-- 📦 **Customization** — _set your own margin, background and scroll offset_
-- 🔧 **Pluggable** — _add your own features to the zoom_
-- 💎 **Custom templates** — _extend the default look to match the UI of your app_
+- 📱 **Responsive** — scale on mobile and desktop
+- 🚀 **Performant and lightweight** — optimized to reach 60 [fps](https://en.wikipedia.org/wiki/Framerate)
+- ⚡️ **High definition support** — load the HD version of your image on zoom
+- 🔎 **Flexibility** — apply the zoom to a selection of images
+- 🖱 **Mouse, keyboard and gesture friendly** — click anywhere, press a key or scroll away to close the zoom
+- 🎂 **Event handling** — trigger events when the zoom enters a new state
+- 📦 **Customization** — set your own margin, background and scroll offset
+- 🔧 **Pluggable** — add your own features to the zoom
+- 💎 **Custom templates** — extend the default look to match the UI of your app
+- 🔌 [**Framework agnostic**](#framework-integrations) — works with React, Vue, Angular, Svelte, Solid, etc.
 
 ## Installation
 
@@ -127,6 +130,14 @@ Assuming you add the `data-zoomable` attribute to your images:
 mediumZoom('[data-zoomable]')
 ```
 
+> [!TIP]
+> If you want to control when to inject the Medium Zoom CSS styles, you can use the pure JavaScript bundle:
+>
+> ```js
+> import mediumZoom from 'medium-zoom/dist/pure'
+> import 'medium-zoom/dist/style.css'
+> ```
+
 ## API
 
 ```ts
@@ -378,6 +389,15 @@ zoom.on('open', event => {
 
 The zoom object is accessible in `event.detail.zoom`.
 
+## Framework integrations
+
+Medium Zoom is a JavaScript library that can be used with any framework. Here are some integrations that you can use to get started quickly:
+
+- [React](./examples/react)
+- [React Markdown](./examples/react-markdown)
+- [Vue](./examples/vue)
+- [Svelte](./examples/svelte)
+
 ## Examples
 
 <details>
@@ -433,71 +453,55 @@ mediumZoom($('[data-zoomable]').toArray())
 <details>
  <summary>Create a zoomable React component</summary>
 
-**Using React hooks**
-
 ```js
-import React from 'react'
+import React, { useRef } from 'react'
 import mediumZoom from 'medium-zoom'
 
-function ImageZoom({ zoom, src, alt, background }) {
-  const zoomRef = React.useRef(zoom.clone({ background }))
+export function ImageZoom({ options, ...props }) {
+  const zoomRef = useRef(null)
 
-  function attachZoom(image) {
-    zoomRef.current.attach(image)
-  }
+  function getZoom() {
+    if (zoomRef.current === null) {
+      zoomRef.current = mediumZoom(options)
+    }
 
-  return <img src={src} alt={alt} ref={attachZoom} />
-}
+    return zoomRef.current
+  }
 
-function App() {
-  const zoom = React.useRef(mediumZoom({ background: '#000', margin: 48 }))
+  function attachZoom(image) {
+    const zoom = getZoom()
 
-  render() {
-    return (
-      <ImageZoom src="image.jpg" alt="Image" zoom={zoom.current} color="#BADA55" />
-    )
+    if (image) {
+      zoom.attach(image)
+    } else {
+      zoom.detach()
+    }
   }
+
+  return <img {...props} ref={attachZoom} />
 }
 ```
 
-**Using React classes**
+</details>
+<br>
 
-```js
-import React, { Component } from 'react'
-import mediumZoom from 'medium-zoom'
+You can see [more examples](examples/) including [React](examples/react) and [Vue](examples/vue), or check out the [storybook](https://medium-zoom.francoischalifour.com/storybook).
 
-class ImageZoom extends Component {
-  zoom = this.props.zoom.clone({
-    background: this.props.color,
-  })
+## Debugging
 
-  attachZoom = image => {
-    this.zoom.attach(image)
-  }
+### The zoomed image is not visible
 
-  render() {
-    return (
-      <img src={this.props.src} alt={this.props.alt} ref={this.attachZoom} />
-    )
-  }
-}
+The library doesn't provide a `z-index` value on the zoomed image to avoid conflicts with other frameworks. Some frameworks might specify a `z-index` for their elements, which makes the zoomed image not visible.
 
-class App extends Component {
-  zoom = mediumZoom({ background: '#000', margin: 48 })
+If that's the case, you can provide a `z-index` value in your CSS:
 
-  render() {
-    return (
-      <ImageZoom src="image.jpg" alt="Image" zoom={this.zoom} color="#BADA55" />
-    )
-  }
+```css
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+  z-index: 999;
 }
 ```
 
-</details>
-<br>
-
-You can see [more examples](examples/) including [React](examples/react) and [Vue](examples/vue), or check out the [storybook](https://medium-zoom.francoischalifour.com/storybook).
-
 ## Browser support
 
 | IE              | Edge            | Chrome | Firefox | Safari |

bundlesize.config.json

@@ -1,12 +1,24 @@
 {
   "files": [
+    {
+      "path": "dist/style.css",
+      "maxSize": "250 B"
+    },
     {
       "path": "dist/medium-zoom.esm.js",
       "maxSize": "5 kB"
     },
     {
       "path": "dist/medium-zoom.min.js",
-      "maxSize": "3 kB"
+      "maxSize": "3.25 kB"
+    },
+    {
+      "path": "dist/pure/index.js",
+      "maxSize": "4.75 kB"
+    },
+    {
+      "path": "dist/pure/medium-zoom.min.umd.js",
+      "maxSize": "2.75 kB"
     }
   ]
 }

examples/dropbox-paper-template/package.json

@@ -8,7 +8,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "medium-zoom": "1.0.5"
+    "medium-zoom": "1.0.8"
   },
   "devDependencies": {
     "parcel-bundler": "1.12.4"

examples/dropbox-paper-template/yarn.lock

@@ -3144,10 +3144,10 @@ mdn-data@^1.0.0, mdn-data@~1.1.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
 
-medium-zoom@1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.0.5.tgz#81413dda20ccdd857141ff420cfab788dd32e20e"
-  integrity sha512-aLGa6WlTuFKWvH88bqTrY5ztJMN+D0hd8UX6BYc4YSoPayppzETjZUcdVcksgaoQEMg4cZSmXPg846fTp2rjRQ==
+medium-zoom@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.0.6.tgz#9247f21ca9313d8bbe9420aca153a410df08d027"
+  integrity sha512-UdiUWfvz9fZMg1pzf4dcuqA0W079o0mpqbTnOz5ip4VGYX96QjmbM+OgOU/0uOzAytxC0Ny4z+VcYQnhdifimg==
 
 merge-source-map@1.0.4:
   version "1.0.4"

examples/facebook-template/package.json

@@ -8,7 +8,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "medium-zoom": "1.0.5"
+    "medium-zoom": "1.0.8"
   },
   "devDependencies": {
     "parcel-bundler": "1.12.4"

examples/facebook-template/yarn.lock

@@ -3152,10 +3152,10 @@ mdn-data@^1.0.0, mdn-data@~1.1.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
 
-medium-zoom@1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.0.5.tgz#81413dda20ccdd857141ff420cfab788dd32e20e"
-  integrity sha512-aLGa6WlTuFKWvH88bqTrY5ztJMN+D0hd8UX6BYc4YSoPayppzETjZUcdVcksgaoQEMg4cZSmXPg846fTp2rjRQ==
+medium-zoom@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.0.6.tgz#9247f21ca9313d8bbe9420aca153a410df08d027"
+  integrity sha512-UdiUWfvz9fZMg1pzf4dcuqA0W079o0mpqbTnOz5ip4VGYX96QjmbM+OgOU/0uOzAytxC0Ny4z+VcYQnhdifimg==
 
 merge-source-map@1.0.4:
   version "1.0.4"

examples/react-markdown/.gitignore

@@ -1,21 +1,24 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/react-markdown/README.md

@@ -1,12 +1,10 @@
-# React Markdown
+# Medium Zoom React Markdown Example
 
-> This is a medium-zoom example using React.
+This example reads Markdown in a React component and attaches the zoom on the Markdown images.
 
-![Preview](https://user-images.githubusercontent.com/6137112/32423266-67ccfd86-c273-11e7-9076-1df48ff85268.png)
-
-This example reads from a Markdown file and imports its content in a React component to attach the zoom (see [`src/Post.js`](src/Post.js)).
+[![Edit React Markdown Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/examples/react-markdown?file=/src/App.tsx)
 
 ## Usage
 
-* Install dependencies: `yarn`
-* Run: `yarn start`
+- Install dependencies: `yarn`
+- Run: `yarn dev`

examples/react-markdown/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <title>Medium Zoom | React Markdown Demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/react-markdown/package.json

@@ -2,17 +2,23 @@
   "name": "@medium-zoom/react-markdown-example",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
-    "medium-zoom": "1.0.5",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
-    "react-markdown": "4.2.2",
-    "react-scripts": "1.1.5"
+    "medium-zoom": "1.0.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-markdown": "8.0.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "3.1.0",
+    "typescript": "4.9.3",
+    "vite": "4.2.0"
   }
 }