@docusaurus/plugin-ideal-image 0.0.0-4726 → 0.0.0-4730

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)({

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-4726",
+  "version": "0.0.0-4730",
   "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-4726",
-    "@docusaurus/lqip-loader": "0.0.0-4726",
+    "@docusaurus/core": "0.0.0-4730",
+    "@docusaurus/lqip-loader": "0.0.0-4730",
     "@docusaurus/responsive-loader": "^1.7.0",
-    "@docusaurus/theme-translations": "0.0.0-4726",
-    "@docusaurus/utils-validation": "0.0.0-4726",
+    "@docusaurus/theme-translations": "0.0.0-4730",
+    "@docusaurus/utils-validation": "0.0.0-4730",
     "@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-4726",
-    "@docusaurus/types": "0.0.0-4726",
+    "@docusaurus/module-type-aliases": "0.0.0-4730",
+    "@docusaurus/types": "0.0.0-4730",
     "fs-extra": "^10.0.1"
   },
   "peerDependencies": {
@@ -50,5 +50,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "f0fd448c4509295ecdfe665dcc017980c4b5153b"
+  "gitHead": "65b87b9d9f21c7904877ed1fade98e0b9fb61b56"
 }

package/src/index.ts

@@ -15,8 +15,6 @@ 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 +27,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() {

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;