@docusaurus/plugin-ideal-image 2.0.0-beta.15 → 2.0.0-beta.16

package/lib/index.js

@@ -41,7 +41,7 @@ function pluginIdealImage(context, options) {
         module: {
           rules: [
             {
-              test: /\.(png|jpe?g|gif)$/i,
+              test: /\.(?:png|jpe?g|gif)$/i,
               use: [
                 require.resolve('@docusaurus/lqip-loader'),
                 {

package/lib/theme/IdealImage/index.d.ts

@@ -6,5 +6,4 @@
  */
 /// <reference types="react" />
 import type { Props } from '@theme/IdealImage';
-declare function IdealImage(props: Props): JSX.Element;
-export default IdealImage;
+export default function IdealImage(props: Props): JSX.Element;

package/lib/theme/IdealImage/index.js

@@ -60,19 +60,18 @@ const getMessage = (icon, state) => {
           message: '404. Image not found',
           description: 'When the image is not found',
         });
-      } else {
-        return translate({
-          id: 'theme.IdealImageMessage.error',
-          message: 'Error. Click to reload',
-          description: 'When the image fails to load for unknown error',
-        });
       }
+      return translate({
+        id: 'theme.IdealImageMessage.error',
+        message: 'Error. Click to reload',
+        description: 'When the image fails to load for unknown error',
+      });
     }
     default:
       throw new Error(`Wrong icon: ${icon}`);
   }
 };
-function IdealImage(props) {
+export default function IdealImage(props) {
   const {alt, className, img} = props;
   // In dev env just use regular img with original file
   if (typeof img === 'string' || 'default' in img) {
@@ -102,4 +101,3 @@ function IdealImage(props) {
     />
   );
 }
-export default IdealImage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/plugin-ideal-image",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.16",
   "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,21 +21,21 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.15",
-    "@docusaurus/lqip-loader": "2.0.0-beta.15",
-    "@docusaurus/responsive-loader": "1.5.0",
-    "@docusaurus/theme-translations": "2.0.0-beta.15",
-    "@docusaurus/utils-validation": "2.0.0-beta.15",
+    "@docusaurus/core": "2.0.0-beta.16",
+    "@docusaurus/lqip-loader": "2.0.0-beta.16",
+    "@docusaurus/responsive-loader": "^1.7.0",
+    "@docusaurus/theme-translations": "2.0.0-beta.16",
+    "@docusaurus/utils-validation": "2.0.0-beta.16",
     "@endiliey/react-ideal-image": "^0.0.11",
     "react-waypoint": "^10.1.0",
-    "sharp": "^0.29.1",
+    "sharp": "^0.30.1",
     "tslib": "^2.3.1",
-    "webpack": "^5.61.0"
+    "webpack": "^5.69.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.15",
-    "@docusaurus/types": "2.0.0-beta.15",
-    "fs-extra": "^10.0.0"
+    "@docusaurus/module-type-aliases": "2.0.0-beta.16",
+    "@docusaurus/types": "2.0.0-beta.16",
+    "fs-extra": "^10.0.1"
   },
   "peerDependencies": {
     "jimp": "*",
@@ -50,5 +50,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "6cfad16436c07d8d11e5c2e1486dc59afd483e33"
+  "gitHead": "eb43c4d4f95a4fb97dc9bb9dc615413e0dc2e1e7"
 }

package/src/deps.d.ts

@@ -9,9 +9,12 @@
 
 /**
  * @see https://github.com/endiliey/react-ideal-image/blob/master/index.d.ts
- * Note: the original type definition is WRONG. getIcon & getMessage receive full state object.
+ * Note: the original type definition is WRONG. getIcon & getMessage receive
+ * full state object.
  */
 declare module '@endiliey/react-ideal-image' {
+  import type {ComponentProps, ComponentType, CSSProperties} from 'react';
+
   export type LoadingState = 'initial' | 'loading' | 'loaded' | 'error';
 
   export type State = {
@@ -39,19 +42,21 @@ declare module '@endiliey/react-ideal-image' {
 
   type ThemeKey = 'placeholder' | 'img' | 'icon' | 'noscript';
 
-  export interface ImageProps {
+  export interface ImageProps extends ComponentProps<'img'> {
     /**
-     * This function decides what icon to show based on the current state of the component.
+     * This function decides what icon to show based on the current state of the
+     * component.
      */
     getIcon?: (state: State) => IconKey;
     /**
-     * This function decides what message to show based on the icon (returned from getIcon prop) and
-     * the current state of the component.
+     * This function decides what message to show based on the icon (returned
+     * from `getIcon` prop) and the current state of the component.
      */
-    getMessage?: (icon: IconKey, state: State) => string;
+    getMessage?: (icon: IconKey, state: State) => string | null;
     /**
-     * This function is called as soon as the component enters the viewport and is used to generate urls
-     * based on width and format if props.srcSet doesn't provide src field.
+     * This function is called as soon as the component enters the viewport and
+     * is used to generate urls based on width and format if `props.srcSet`
+     * doesn't provide `src` field.
      */
     getUrl?: (srcType: SrcType) => string;
     /**
@@ -59,10 +64,11 @@ declare module '@endiliey/react-ideal-image' {
      */
     height: number;
     /**
-     * This provides a map of the icons. By default, the component uses icons from material design,
-     * implemented as React components with the SVG element. You can customize icons
+     * This provides a map of the icons. By default, the component uses icons
+     * from material design, Implemented as React components with the SVG
+     * element. You can customize icons
      */
-    icons: Partial<Record<IconKey, ComponentType>>;
+    icons?: Partial<Record<IconKey, ComponentType>>;
     /**
      * This prop takes one of the 2 options, xhr and image.
      * Read more about it:
@@ -74,9 +80,10 @@ declare module '@endiliey/react-ideal-image' {
      */
     placeholder: {color: string} | {lqip: string};
     /**
-     * This function decides if image should be downloaded automatically. The default function
-     * returns false for a 2g network, for a 3g network it decides based on props.threshold
-     * and for a 4g network it returns true by default.
+     * This function decides if image should be downloaded automatically. The
+     * default function returns false for a 2g network, for a 3g network it
+     * decides based on `props.threshold` and for a 4g network it returns true
+     * by default.
      */
     shouldAutoDownload?: (options: {
       connection?: 'slow-2g' | '2g' | '3g' | '4g';
@@ -85,18 +92,20 @@ declare module '@endiliey/react-ideal-image' {
       possiblySlowNetwork?: boolean;
     }) => boolean;
     /**
-     * This provides an array of sources of different format and size of the image.
-     * Read more about it:
+     * This provides an array of sources of different format and size of the
+     * image. Read more about it:
      * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#srcset
      */
     srcSet: SrcType[];
     /**
-     * This provides a theme to the component. By default, the component uses inline styles,
-     * but it is also possible to use CSS modules and override all styles.
+     * This provides a theme to the component. By default, the component uses
+     * inline styles, but it is also possible to use CSS modules and override
+     * all styles.
      */
     theme?: Partial<Record<ThemeKey, string | CSSProperties>>;
     /**
-     * Tells how much to wait in milliseconds until consider the download to be slow.
+     * Tells how much to wait in milliseconds until consider the download to be
+     * slow.
      */
     threshold?: number;
     /**
@@ -105,8 +114,5 @@ declare module '@endiliey/react-ideal-image' {
     width: number;
   }
 
-  type IdealImageComponent = ComponentClass<ImageProps>;
-
-  declare const IdealImage: IdealImageComponent;
-  export default IdealImage;
+  export default function IdealImage(props: ImageProps): JSX.Element;
 }

package/src/index.ts

@@ -12,7 +12,6 @@ import type {
   ValidationResult,
 } from '@docusaurus/types';
 import type {PluginOptions} from '@docusaurus/plugin-ideal-image';
-import type {Configuration} from 'webpack';
 import {Joi} from '@docusaurus/utils-validation';
 import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
 
@@ -44,7 +43,7 @@ export default function pluginIdealImage(
       });
     },
 
-    configureWebpack(_config: Configuration, isServer: boolean) {
+    configureWebpack(_config, isServer) {
       const {disableInDev, ...loaderOptions} = options;
       if (disableInDev && process.env.NODE_ENV !== 'production') {
         return {};
@@ -57,7 +56,7 @@ export default function pluginIdealImage(
         module: {
           rules: [
             {
-              test: /\.(png|jpe?g|gif)$/i,
+              test: /\.(?:png|jpe?g|gif)$/i,
               use: [
                 require.resolve('@docusaurus/lqip-loader'),
                 {

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

@@ -12,15 +12,21 @@ declare module '@docusaurus/plugin-ideal-image' {
      */
     name?: string;
     /**
-     * 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.
+     * 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.
      */
     sizes?: number[];
     /**
-     * Specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up)
+     * Specify one width you want to use; if the specified size exceeds the
+     * original image's width, the latter will be used (i.e. images won't be
+     * scaled up)
      */
     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;
     /**
@@ -60,8 +66,8 @@ declare module '@theme/IdealImage' {
     images: SrcType[];
   };
 
-  export type Props = ComponentProps<'img'> & {
-    img: {default: string} | {src: SrcImage; preSrc: string} | string;
-  };
+  export interface Props extends ComponentProps<'img'> {
+    readonly img: {default: string} | {src: SrcImage; preSrc: string} | string;
+  }
   export default function IdealImage(props: Props): JSX.Element;
 }

package/src/theme/IdealImage/index.tsx

@@ -68,20 +68,19 @@ const getMessage = (icon: IconKey, state: State) => {
           message: '404. Image not found',
           description: 'When the image is not found',
         });
-      } else {
-        return translate({
-          id: 'theme.IdealImageMessage.error',
-          message: 'Error. Click to reload',
-          description: 'When the image fails to load for unknown error',
-        });
       }
+      return translate({
+        id: 'theme.IdealImageMessage.error',
+        message: 'Error. Click to reload',
+        description: 'When the image fails to load for unknown error',
+      });
     }
     default:
       throw new Error(`Wrong icon: ${icon}`);
   }
 };
 
-function IdealImage(props: Props): JSX.Element {
+export default function IdealImage(props: Props): JSX.Element {
   const {alt, className, img} = props;
 
   // In dev env just use regular img with original file
@@ -113,5 +112,3 @@ function IdealImage(props: Props): JSX.Element {
     />
   );
 }
-
-export default IdealImage;