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

package/lib/index.d.ts

@@ -4,6 +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 { LoadContext, Plugin } from '@docusaurus/types';
+import type { LoadContext, Plugin, OptionValidationContext, ValidationResult } from '@docusaurus/types';
 import type { PluginOptions } from '@docusaurus/plugin-ideal-image';
-export default function (_context: LoadContext, options: PluginOptions): Plugin<void>;
+export default function pluginIdealImage(context: LoadContext, options: PluginOptions): Plugin<void>;
+export declare function validateOptions({ validate, options, }: OptionValidationContext<PluginOptions>): ValidationResult<PluginOptions>;

package/lib/index.js

@@ -6,16 +6,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 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 default_1(_context, options) {
+function pluginIdealImage(context, options) {
+  const {
+    i18n: {currentLocale},
+  } = context;
   return {
     name: 'docusaurus-plugin-ideal-image',
     getThemePath() {
-      return path_1.default.resolve(__dirname, './theme');
+      return path_1.default.resolve(__dirname, '../lib/theme');
+    },
+    getTypeScriptThemePath() {
+      return path_1.default.resolve(__dirname, '../src/theme');
+    },
+    getDefaultCodeTranslationMessages() {
+      return (0, theme_translations_1.readDefaultCodeTranslationMessages)({
+        locale: currentLocale,
+        name: 'plugin-ideal-image',
+      });
     },
     configureWebpack(_config, isServer) {
-      if (process.env.NODE_ENV !== 'production') {
+      const {disableInDev, ...loaderOptions} = options;
+      if (disableInDev && process.env.NODE_ENV !== 'production') {
         return {};
       }
       return {
@@ -35,7 +51,7 @@ function default_1(_context, options) {
                     // eslint-disable-next-line global-require
                     adapter: require('@docusaurus/responsive-loader/sharp'),
                     name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',
-                    ...options,
+                    ...loaderOptions,
                   },
                 },
               ],
@@ -46,4 +62,11 @@ function default_1(_context, options) {
     },
   };
 }
-exports.default = default_1;
+exports.default = pluginIdealImage;
+function validateOptions({validate, options}) {
+  const pluginOptionsSchema = utils_validation_1.Joi.object({
+    disableInDev: utils_validation_1.Joi.boolean().default(true),
+  }).unknown();
+  return validate(pluginOptionsSchema, options);
+}
+exports.validateOptions = validateOptions;

package/lib/theme/IdealImage/index.js

@@ -6,6 +6,72 @@
  */
 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) => {
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes === 0) {
+    return 'n/a';
+  }
+  const scale = Math.floor(Math.log(bytes) / Math.log(1024));
+  if (scale === 0) {
+    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) => {
+  switch (icon) {
+    case 'noicon':
+    case 'loaded':
+      return null;
+    case 'loading':
+      return translate({
+        id: 'theme.IdealImageMessage.loading',
+        message: 'Loading...',
+        description: 'When the full-scale image is loading',
+      });
+    case 'load': {
+      // we can show `alt` here
+      const {pickedSrc} = state;
+      const {size} = pickedSrc;
+      const sizeMessage = size ? ` (${bytesToSize(size)})` : '';
+      return translate(
+        {
+          id: 'theme.IdealImageMessage.load',
+          message: 'Click to load{sizeMessage}',
+          description:
+            'To prompt users to load the full image. sizeMessage is a parenthesized size figure.',
+        },
+        {sizeMessage},
+      );
+    }
+    case 'offline':
+      return translate({
+        id: 'theme.IdealImageMessage.offline',
+        message: 'Your browser is offline. Image not loaded',
+        description: 'When the user is viewing an offline document',
+      });
+    case 'error': {
+      const {loadInfo} = state;
+      if (loadInfo === 404) {
+        return translate({
+          id: 'theme.IdealImageMessage.404error',
+          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',
+        });
+      }
+    }
+    default:
+      throw new Error(`Wrong icon: ${icon}`);
+  }
+};
 function IdealImage(props) {
   const {alt, className, img} = props;
   // In dev env just use regular img with original file
@@ -32,6 +98,7 @@ function IdealImage(props) {
         ...image,
         src: image.path,
       }))}
+      getMessage={getMessage}
     />
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/plugin-ideal-image",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.15",
   "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",
@@ -8,7 +8,7 @@
     "build": "yarn build:server && yarn build:browser && yarn build:copy && yarn build:format",
     "build:server": "tsc --project tsconfig.server.json",
     "build:browser": "tsc --project tsconfig.browser.json",
-    "build:copy": "node copyUntypedFiles.js",
+    "build:copy": "node copyUntypedFiles.mjs",
     "build:format": "prettier --config ../../.prettierrc --write \"lib/**/*.js\""
   },
   "publishConfig": {
@@ -21,9 +21,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.13",
-    "@docusaurus/lqip-loader": "2.0.0-beta.13",
+    "@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",
     "@endiliey/react-ideal-image": "^0.0.11",
     "react-waypoint": "^10.1.0",
     "sharp": "^0.29.1",
@@ -31,15 +33,22 @@
     "webpack": "^5.61.0"
   },
   "devDependencies": {
-    "@docusaurus/types": "2.0.0-beta.13",
+    "@docusaurus/module-type-aliases": "2.0.0-beta.15",
+    "@docusaurus/types": "2.0.0-beta.15",
     "fs-extra": "^10.0.0"
   },
   "peerDependencies": {
+    "jimp": "*",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },
+  "peerDependenciesMeta": {
+    "jimp": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "b6ca12aedf10a10c2375f4f8b7e7380cfd7c7202"
+  "gitHead": "6cfad16436c07d8d11e5c2e1486dc59afd483e33"
 }

package/src/deps.d.ts

@@ -5,12 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/// <reference types="@docusaurus/module-type-aliases" />
+
 /**
  * @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.
  */
 declare module '@endiliey/react-ideal-image' {
   export type LoadingState = 'initial' | 'loading' | 'loaded' | 'error';
 
+  export type State = {
+    pickedSrc: {
+      size: number;
+    };
+    loadInfo: 404 | null;
+    loadState: LoadingState;
+  };
+
   export type IconKey =
     | 'load'
     | 'loading'
@@ -32,12 +43,12 @@ declare module '@endiliey/react-ideal-image' {
     /**
      * This function decides what icon to show based on the current state of the component.
      */
-    getIcon?: (state: LoadingState) => IconKey;
+    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.
      */
-    getMessage?: (icon: IconKey, state: LoadingState) => string;
+    getMessage?: (icon: IconKey, state: State) => string;
     /**
      * 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.

package/src/index.ts

@@ -5,25 +5,48 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {LoadContext, Plugin} from '@docusaurus/types';
+import type {
+  LoadContext,
+  Plugin,
+  OptionValidationContext,
+  ValidationResult,
+} from '@docusaurus/types';
 import type {PluginOptions} from '@docusaurus/plugin-ideal-image';
-import {Configuration} from 'webpack';
+import type {Configuration} from 'webpack';
+import {Joi} from '@docusaurus/utils-validation';
+import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
 
 import path from 'path';
 
-export default function (
-  _context: LoadContext,
+export default function pluginIdealImage(
+  context: LoadContext,
   options: PluginOptions,
 ): Plugin<void> {
+  const {
+    i18n: {currentLocale},
+  } = context;
+
   return {
     name: 'docusaurus-plugin-ideal-image',
 
     getThemePath() {
-      return path.resolve(__dirname, './theme');
+      return path.resolve(__dirname, '../lib/theme');
+    },
+
+    getTypeScriptThemePath() {
+      return path.resolve(__dirname, '../src/theme');
+    },
+
+    getDefaultCodeTranslationMessages() {
+      return readDefaultCodeTranslationMessages({
+        locale: currentLocale,
+        name: 'plugin-ideal-image',
+      });
     },
 
     configureWebpack(_config: Configuration, isServer: boolean) {
-      if (process.env.NODE_ENV !== 'production') {
+      const {disableInDev, ...loaderOptions} = options;
+      if (disableInDev && process.env.NODE_ENV !== 'production') {
         return {};
       }
 
@@ -44,7 +67,7 @@ export default function (
                     // eslint-disable-next-line global-require
                     adapter: require('@docusaurus/responsive-loader/sharp'),
                     name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',
-                    ...options,
+                    ...loaderOptions,
                   },
                 },
               ],
@@ -55,3 +78,13 @@ export default function (
     },
   };
 }
+
+export function validateOptions({
+  validate,
+  options,
+}: OptionValidationContext<PluginOptions>): ValidationResult<PluginOptions> {
+  const pluginOptionsSchema = Joi.object({
+    disableInDev: Joi.boolean().default(true),
+  }).unknown();
+  return validate(pluginOptionsSchema, options);
+}

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

@@ -35,6 +35,10 @@ declare module '@docusaurus/plugin-ideal-image' {
      * JPEG compression quality
      */
     quality?: number;
+    /**
+     * Just use regular images in dev mode
+     */
+    disableInDev?: boolean;
   };
 }
 

package/src/theme/IdealImage/index.tsx

@@ -6,10 +6,81 @@
  */
 
 import React from 'react';
-import ReactIdealImage from '@endiliey/react-ideal-image';
+import ReactIdealImage, {
+  type IconKey,
+  type State,
+} from '@endiliey/react-ideal-image';
+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) => {
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes === 0) {
+    return 'n/a';
+  }
+  const scale = Math.floor(Math.log(bytes) / Math.log(1024));
+  if (scale === 0) {
+    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) => {
+  switch (icon) {
+    case 'noicon':
+    case 'loaded':
+      return null;
+    case 'loading':
+      return translate({
+        id: 'theme.IdealImageMessage.loading',
+        message: 'Loading...',
+        description: 'When the full-scale image is loading',
+      });
+    case 'load': {
+      // we can show `alt` here
+      const {pickedSrc} = state;
+      const {size} = pickedSrc;
+      const sizeMessage = size ? ` (${bytesToSize(size)})` : '';
+      return translate(
+        {
+          id: 'theme.IdealImageMessage.load',
+          message: 'Click to load{sizeMessage}',
+          description:
+            'To prompt users to load the full image. sizeMessage is a parenthesized size figure.',
+        },
+        {sizeMessage},
+      );
+    }
+    case 'offline':
+      return translate({
+        id: 'theme.IdealImageMessage.offline',
+        message: 'Your browser is offline. Image not loaded',
+        description: 'When the user is viewing an offline document',
+      });
+    case 'error': {
+      const {loadInfo} = state;
+      if (loadInfo === 404) {
+        return translate({
+          id: 'theme.IdealImageMessage.404error',
+          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',
+        });
+      }
+    }
+    default:
+      throw new Error(`Wrong icon: ${icon}`);
+  }
+};
+
 function IdealImage(props: Props): JSX.Element {
   const {alt, className, img} = props;
 
@@ -38,6 +109,7 @@ function IdealImage(props: Props): JSX.Element {
         ...image,
         src: image.path,
       }))}
+      getMessage={getMessage}
     />
   );
 }

package/tsconfig.browser.json

@@ -1,8 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "esnext",
-    "jsx": "react-native"
-  },
-  "include": ["src/theme/", "src/*.d.ts"]
-}

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "lib": ["DOM", "ES2019"],
-    "rootDir": "src",
-    "baseUrl": "src",
-    "outDir": "lib"
-  }
-}

package/tsconfig.server.json

@@ -1,4 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src/*.ts"]
-}