@docusaurus/plugin-ideal-image 2.0.0-beta.17 → 2.0.0-beta.18

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

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": "2.0.0-beta.17",
+  "version": "2.0.0-beta.18",
   "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,20 +21,20 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.17",
-    "@docusaurus/lqip-loader": "2.0.0-beta.17",
+    "@docusaurus/core": "2.0.0-beta.18",
+    "@docusaurus/lqip-loader": "2.0.0-beta.18",
     "@docusaurus/responsive-loader": "^1.7.0",
-    "@docusaurus/theme-translations": "2.0.0-beta.17",
-    "@docusaurus/utils-validation": "2.0.0-beta.17",
+    "@docusaurus/theme-translations": "2.0.0-beta.18",
+    "@docusaurus/utils-validation": "2.0.0-beta.18",
     "@endiliey/react-ideal-image": "^0.0.11",
     "react-waypoint": "^10.1.0",
-    "sharp": "^0.30.1",
+    "sharp": "^0.30.3",
     "tslib": "^2.3.1",
-    "webpack": "^5.69.1"
+    "webpack": "^5.70.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.17",
-    "@docusaurus/types": "2.0.0-beta.17",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.18",
+    "@docusaurus/types": "2.0.0-beta.18",
     "fs-extra": "^10.0.1"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "0032c0b0480083227af2e1b4da2d3ee6ce992403"
+  "gitHead": "1a945d06993d53376e61bed2c942799fe07dc336"
 }

package/src/deps.d.ts

@@ -68,7 +68,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 +102,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,7 +53,7 @@ export default function pluginIdealImage(
         module: {
           rules: [
             {
-              test: /\.(?:png|jpe?g|gif)$/i,
+              test: /\.(?:png|jpe?g)$/i,
               use: [
                 require.resolve('@docusaurus/lqip-loader'),
                 {
@@ -81,7 +78,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':
@@ -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;