@docusaurus/plugin-ideal-image 0.0.0-4728 → 0.0.0-4732

package/lib/theme/IdealImage/index.js

@@ -8,7 +8,7 @@ import React from 'react';
 import ReactIdealImage from '@endiliey/react-ideal-image';
 import {translate} from '@docusaurus/Translate';
 // Adopted from https://github.com/endiliey/react-ideal-image/blob/master/src/components/helpers.js#L59-L65
-const bytesToSize = (bytes) => {
+function bytesToSize(bytes) {
   const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
   if (bytes === 0) {
     return 'n/a';
@@ -18,9 +18,9 @@ const bytesToSize = (bytes) => {
     return `${bytes} ${sizes[scale]}`;
   }
   return `${(bytes / 1024 ** scale).toFixed(1)} ${sizes[scale]}`;
-};
+}
 // Adopted from https://github.com/endiliey/react-ideal-image/blob/master/src/components/IdealImage/index.js#L43-L75
-const getMessage = (icon, state) => {
+function getMessage(icon, state) {
   switch (icon) {
     case 'noicon':
     case 'loaded':
@@ -70,7 +70,7 @@ const getMessage = (icon, state) => {
     default:
       throw new Error(`Wrong icon: ${icon}`);
   }
-};
+}
 export default function IdealImage(props) {
   const {alt, className, img} = props;
   // In dev env just use regular img with original file

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/plugin-ideal-image",
-  "version": "0.0.0-4728",
+  "version": "0.0.0-4732",
   "description": "Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder).",
   "main": "lib/index.js",
   "types": "src/plugin-ideal-image.d.ts",
@@ -21,11 +21,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4728",
-    "@docusaurus/lqip-loader": "0.0.0-4728",
+    "@docusaurus/core": "0.0.0-4732",
+    "@docusaurus/lqip-loader": "0.0.0-4732",
     "@docusaurus/responsive-loader": "^1.7.0",
-    "@docusaurus/theme-translations": "0.0.0-4728",
-    "@docusaurus/utils-validation": "0.0.0-4728",
+    "@docusaurus/theme-translations": "0.0.0-4732",
+    "@docusaurus/utils-validation": "0.0.0-4732",
     "@endiliey/react-ideal-image": "^0.0.11",
     "react-waypoint": "^10.1.0",
     "sharp": "^0.30.3",
@@ -33,8 +33,8 @@
     "webpack": "^5.70.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4728",
-    "@docusaurus/types": "0.0.0-4728",
+    "@docusaurus/module-type-aliases": "0.0.0-4732",
+    "@docusaurus/types": "0.0.0-4732",
     "fs-extra": "^10.0.1"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "517f5b73eaacc1002a973074567a321b469868fe"
+  "gitHead": "da1dfdadc386a446278acd3922f327b291b7b7f1"
 }

package/src/plugin-ideal-image.d.ts

@@ -14,8 +14,7 @@ declare module '@docusaurus/plugin-ideal-image' {
     /**
      * Specify all widths you want to use; if a specified size exceeds the
      * original image's width, the latter will be used (i.e. images won't be
-     * scaled up). You may also declare a default sizes array in the loader
-     * options in your webpack.config.js.
+     * scaled up).
      */
     sizes?: number[];
     /**
@@ -25,16 +24,17 @@ declare module '@docusaurus/plugin-ideal-image' {
      */
     size?: number;
     /**
-     * As an alternative to manually specifying sizes, you can specify min, max
-     * and steps, and the sizes will be generated for you.
+     * As an alternative to manually specifying `sizes`, you can specify `min`,
+     * `max` and `steps`, and the `sizes` will be generated for you.
      */
     min?: number;
     /**
-     * See min above
+     * @see {@link PluginOptions.min}
      */
     max?: number;
     /**
-     * Configure the number of images generated between min and max (inclusive)
+     * Configure the number of images generated between `min` and `max`
+     * (inclusive)
      */
     steps?: number;
     /**
@@ -42,7 +42,8 @@ declare module '@docusaurus/plugin-ideal-image' {
      */
     quality?: number;
     /**
-     * Just use regular images in dev mode
+     * You can test ideal image behavior in dev mode by setting this to `false`.
+     * Tip: use network throttling in your browser to simulate slow networks.
      */
     disableInDev?: boolean;
   };

package/src/theme/IdealImage/index.tsx

@@ -15,7 +15,7 @@ import {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/IdealImage';
 
 // Adopted from https://github.com/endiliey/react-ideal-image/blob/master/src/components/helpers.js#L59-L65
-const bytesToSize = (bytes: number) => {
+function bytesToSize(bytes: number) {
   const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
   if (bytes === 0) {
     return 'n/a';
@@ -25,10 +25,10 @@ const bytesToSize = (bytes: number) => {
     return `${bytes} ${sizes[scale]}`;
   }
   return `${(bytes / 1024 ** scale).toFixed(1)} ${sizes[scale]}`;
-};
+}
 
 // Adopted from https://github.com/endiliey/react-ideal-image/blob/master/src/components/IdealImage/index.js#L43-L75
-const getMessage = (icon: IconKey, state: State) => {
+function getMessage(icon: IconKey, state: State) {
   switch (icon) {
     case 'noicon':
     case 'loaded':
@@ -78,7 +78,7 @@ const getMessage = (icon: IconKey, state: State) => {
     default:
       throw new Error(`Wrong icon: ${icon}`);
   }
-};
+}
 
 export default function IdealImage(props: Props): JSX.Element {
   const {alt, className, img} = props;