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

package/lib/index.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import type { LoadContext, Plugin, OptionValidationContext, ValidationResult } from '@docusaurus/types';
+import type { LoadContext, Plugin, OptionValidationContext } from '@docusaurus/types';
 import type { PluginOptions } from '@docusaurus/plugin-ideal-image';
 export default function pluginIdealImage(context: LoadContext, options: PluginOptions): Plugin<void>;
-export declare function validateOptions({ validate, options, }: OptionValidationContext<PluginOptions>): ValidationResult<PluginOptions>;
+export declare function validateOptions({ validate, options, }: OptionValidationContext<PluginOptions, PluginOptions>): PluginOptions;

package/lib/index.js

@@ -7,10 +7,8 @@
  */
 Object.defineProperty(exports, '__esModule', {value: true});
 exports.validateOptions = void 0;
-const tslib_1 = require('tslib');
 const utils_validation_1 = require('@docusaurus/utils-validation');
 const theme_translations_1 = require('@docusaurus/theme-translations');
-const path_1 = (0, tslib_1.__importDefault)(require('path'));
 function pluginIdealImage(context, options) {
   const {
     i18n: {currentLocale},
@@ -18,10 +16,10 @@ function pluginIdealImage(context, options) {
   return {
     name: 'docusaurus-plugin-ideal-image',
     getThemePath() {
-      return path_1.default.resolve(__dirname, '../lib/theme');
+      return '../lib/theme';
     },
     getTypeScriptThemePath() {
-      return path_1.default.resolve(__dirname, '../src/theme');
+      return '../src/theme';
     },
     getDefaultCodeTranslationMessages() {
       return (0, theme_translations_1.readDefaultCodeTranslationMessages)({
@@ -41,12 +39,13 @@ function pluginIdealImage(context, options) {
         module: {
           rules: [
             {
-              test: /\.(?:png|jpe?g|gif)$/i,
+              test: /\.(?:png|jpe?g)$/i,
               use: [
                 require.resolve('@docusaurus/lqip-loader'),
                 {
                   loader: require.resolve('@docusaurus/responsive-loader'),
                   options: {
+                    // Don't emit for server-side rendering
                     emitFile: !isServer,
                     // eslint-disable-next-line global-require
                     adapter: require('@docusaurus/responsive-loader/sharp'),

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':
@@ -32,7 +32,7 @@ const getMessage = (icon, state) => {
         description: 'When the full-scale image is loading',
       });
     case 'load': {
-      // we can show `alt` here
+      // We can show `alt` here
       const {pickedSrc} = state;
       const {size} = pickedSrc;
       const sizeMessage = size ? ` (${bytesToSize(size)})` : '';
@@ -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": "2.0.0-beta.16",
+  "version": "2.0.0-beta.19",
   "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.16",
-    "@docusaurus/lqip-loader": "2.0.0-beta.16",
+    "@docusaurus/core": "2.0.0-beta.19",
+    "@docusaurus/lqip-loader": "2.0.0-beta.19",
     "@docusaurus/responsive-loader": "^1.7.0",
-    "@docusaurus/theme-translations": "2.0.0-beta.16",
-    "@docusaurus/utils-validation": "2.0.0-beta.16",
+    "@docusaurus/theme-translations": "2.0.0-beta.19",
+    "@docusaurus/utils-validation": "2.0.0-beta.19",
     "@endiliey/react-ideal-image": "^0.0.11",
     "react-waypoint": "^10.1.0",
-    "sharp": "^0.30.1",
-    "tslib": "^2.3.1",
-    "webpack": "^5.69.1"
+    "sharp": "^0.30.4",
+    "tslib": "^2.4.0",
+    "webpack": "^5.72.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.16",
-    "@docusaurus/types": "2.0.0-beta.16",
-    "fs-extra": "^10.0.1"
+    "@docusaurus/module-type-aliases": "2.0.0-beta.19",
+    "@docusaurus/types": "2.0.0-beta.19",
+    "fs-extra": "^10.1.0"
   },
   "peerDependencies": {
     "jimp": "*",
@@ -50,5 +50,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "eb43c4d4f95a4fb97dc9bb9dc615413e0dc2e1e7"
+  "gitHead": "a71e60a49cce93c1006ef10c41ac03187f057102"
 }

package/src/deps.d.ts

@@ -33,16 +33,17 @@ declare module '@endiliey/react-ideal-image' {
     | 'noicon'
     | 'offline';
 
-  export interface SrcType {
+  export type SrcType = {
     width: number;
     src?: string;
     size?: number;
     format?: 'webp' | 'jpeg' | 'png' | 'gif';
-  }
+  };
 
   type ThemeKey = 'placeholder' | 'img' | 'icon' | 'noscript';
 
-  export interface ImageProps extends ComponentProps<'img'> {
+  export interface ImageProps
+    extends Omit<ComponentProps<'img'>, 'srcSet' | 'placeholder'> {
     /**
      * This function decides what icon to show based on the current state of the
      * component.
@@ -68,7 +69,7 @@ declare module '@endiliey/react-ideal-image' {
      * from material design, Implemented as React components with the SVG
      * element. You can customize icons
      */
-    icons?: Partial<Record<IconKey, ComponentType>>;
+    icons?: Partial<{[icon in IconKey]: ComponentType}>;
     /**
      * This prop takes one of the 2 options, xhr and image.
      * Read more about it:
@@ -102,7 +103,7 @@ declare module '@endiliey/react-ideal-image' {
      * inline styles, but it is also possible to use CSS modules and override
      * all styles.
      */
-    theme?: Partial<Record<ThemeKey, string | CSSProperties>>;
+    theme?: Partial<{[key in ThemeKey]: string | CSSProperties}>;
     /**
      * Tells how much to wait in milliseconds until consider the download to be
      * slow.

package/src/index.ts

@@ -9,14 +9,11 @@ import type {
   LoadContext,
   Plugin,
   OptionValidationContext,
-  ValidationResult,
 } from '@docusaurus/types';
 import type {PluginOptions} from '@docusaurus/plugin-ideal-image';
 import {Joi} from '@docusaurus/utils-validation';
 import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
 
-import path from 'path';
-
 export default function pluginIdealImage(
   context: LoadContext,
   options: PluginOptions,
@@ -29,11 +26,11 @@ export default function pluginIdealImage(
     name: 'docusaurus-plugin-ideal-image',
 
     getThemePath() {
-      return path.resolve(__dirname, '../lib/theme');
+      return '../lib/theme';
     },
 
     getTypeScriptThemePath() {
-      return path.resolve(__dirname, '../src/theme');
+      return '../src/theme';
     },
 
     getDefaultCodeTranslationMessages() {
@@ -56,13 +53,14 @@ export default function pluginIdealImage(
         module: {
           rules: [
             {
-              test: /\.(?:png|jpe?g|gif)$/i,
+              test: /\.(?:png|jpe?g)$/i,
               use: [
                 require.resolve('@docusaurus/lqip-loader'),
                 {
                   loader: require.resolve('@docusaurus/responsive-loader'),
                   options: {
-                    emitFile: !isServer, // don't emit for server-side rendering
+                    // Don't emit for server-side rendering
+                    emitFile: !isServer,
                     // eslint-disable-next-line global-require
                     adapter: require('@docusaurus/responsive-loader/sharp'),
                     name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',
@@ -81,7 +79,7 @@ export default function pluginIdealImage(
 export function validateOptions({
   validate,
   options,
-}: OptionValidationContext<PluginOptions>): ValidationResult<PluginOptions> {
+}: OptionValidationContext<PluginOptions, PluginOptions>): PluginOptions {
   const pluginOptionsSchema = Joi.object({
     disableInDev: Joi.boolean().default(true),
   }).unknown();

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':
@@ -40,7 +40,7 @@ const getMessage = (icon: IconKey, state: State) => {
         description: 'When the full-scale image is loading',
       });
     case 'load': {
-      // we can show `alt` here
+      // We can show `alt` here
       const {pickedSrc} = state;
       const {size} = pickedSrc;
       const sizeMessage = size ? ` (${bytesToSize(size)})` : '';
@@ -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;