@frameright/image-display-control-web-component - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

docs/explanation/importing.md

@@ -68,3 +68,3 @@ # Importing in your project
       type="module"
-      src="https://cdn.jsdelivr.net/npm/@frameright/image-display-control-web-component@0.1.0/dist/image-display-control.min.js"
+      src="https://cdn.jsdelivr.net/npm/@frameright/image-display-control-web-component@1.0.0/dist/image-display-control.min.js"
     ></script>
@@ -71,0 +71,0 @@ </body>

package.json

@@ -25,3 +25,3 @@ {
   },
-  "version": "0.1.0",
+  "version": "1.0.0",
   "main": "dist/src/index.js",
@@ -31,3 +31,4 @@ "module": "dist/src/index.js",
     ".": "./dist/src/index.js",
-    "./image-display-control.js": "./dist/src/image-display-control.js"
+    "./image-display-control.js": "./dist/src/image-display-control.js",
+    "./image-display-control.min.js": "./dist/image-display-control.min.js"
   },
@@ -34,0 +35,0 @@ "scripts": {

README.md

@@ -28,2 +28,3 @@ [<img src="https://avatars.githubusercontent.com/u/35964478?s=200&v=4" align="right" width="64" height="64">](https://frameright.io)
   * [Basic usage](#basic-usage)
+  * [Why a custom `img` element?](#why-a-custom-img-element)
 - [Image Display Control metadata](#image-display-control-metadata)
@@ -105,2 +106,33 @@ - [Installation](#installation)
 
+#### Why a custom `img` element?
+
+In order to have existing CSS rules in a project able to target indifferently
+classic `<img>` elements and our web component, two options exist:
+
+1. Invent a custom `<img is="image-display-control" src="...">` element implementing
+   [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement),
+   or
+2. Invent a custom
+   `<image-display-control><img src="..."></image-display-control>` element
+   based on an
+   [HTML template with a `<slot>` element](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_templates_and_slots).
+
+The problem with the second option is that it puts the `<img>` tag inside a new
+parent element `<image-display-control>` and CSS rules such as
+
+```css
+img {
+  /* fill the parent element */
+  width: 100%;
+  height: 100%;
+}
+```
+
+won't have the intended results, because the parent element hasn't been
+instructed to fill its own parent. This would force developers to adapt their
+CSS rules to also target the new parent, which is not ideal.
+
+This is why we went with the first option, which doesn't require any CSS changes
+in existing projects.
+
 ### Image Display Control metadata
@@ -115,4 +147,7 @@
 [this WordPress plugin](https://wordpress.org/plugins/image-display-control/)
-does, with the help of [a PHP library](https://github.com/Frameright/image) for
-extracting image metadata.
+does, with the help of
+[a PHP library](https://github.com/Frameright/php-image-metadata-parser) for
+extracting image metadata. This can also be achieved on a Node.js back-end with
+the help of
+[this TypeScript library](https://github.com/Frameright/image-display-control-metadata-parser).
 
@@ -139,3 +174,3 @@ Photographers, or anyone else, can use the
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@frameright/image-display-control-web-component@0.1.0/dist/image-display-control.min.js"
+  src="https://cdn.jsdelivr.net/npm/@frameright/image-display-control-web-component@1.0.0/dist/image-display-control.min.js"
 ></script>
@@ -223,2 +258,5 @@ ```
 
+**1.0.0** (2023-05-05):
+  * Export minified bundle inside `package.json`.
+
 **0.1.0** (2023-03-03):
@@ -228,3 +266,3 @@ * Added `data-avoid-no-region=` attribute.
     [debounce function](https://davidwalsh.name/javascript-debounce-function)
-    when setting the `sizes=` attribute in order not avoid blinking on Chrome.
+    when setting the `sizes=` attribute in order to avoid blinking on Chrome.
 
@@ -231,0 +269,0 @@ **0.0.9** (2023-02-20):

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

289185

increased by0.54%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

296

increased by14.73%

No dependency changes