@docusaurus/plugin-ideal-image 3.7.0-canary-6263 → 3.7.0-canary-6264

package/lib/theme/IdealImageLegacy/components/loaders.js

@@ -0,0 +1,112 @@
+// There is an issue with cancelable interface
+// It is not obvious that
+// `image(src)` has `cancel` function
+// but `image(src).then()` doesn't
+
+import {unfetch, UnfetchAbortController} from './unfetch';
+
+/**
+ * returns new "promise" with cancel function combined
+ *
+ * @param {Promise} p1 - first "promise" with cancel
+ * @param {Promise} p2 - second "promise" with cancel
+ * @returns {Promise} - new "promise" with cancel
+ */
+export const combineCancel = (p1, p2) => {
+  if (!p2) return p1;
+  const result = p1.then(
+    (x) => x,
+    (x) => x,
+  );
+  result.cancel = () => {
+    p1.cancel();
+    p2.cancel();
+  };
+  return result;
+};
+
+export const timeout = (threshold) => {
+  let timerId;
+  const result = new Promise((resolve) => {
+    timerId = setTimeout(resolve, threshold);
+  });
+  result.cancel = () => {
+    // there is a bug with cancel somewhere in the code
+    // if (!timerId) throw new Error('Already canceled')
+    clearTimeout(timerId);
+    timerId = undefined;
+  };
+  return result;
+};
+
+// Caveat: image loader can not cancel download in some browsers
+export const imageLoader = (src) => {
+  let img = new Image();
+  const result = new Promise((resolve, reject) => {
+    img.onload = resolve;
+    // eslint-disable-next-line no-multi-assign
+    img.onabort = img.onerror = () => reject({});
+    img.src = src;
+  });
+  result.cancel = () => {
+    if (!img) throw new Error('Already canceled');
+    // eslint-disable-next-line no-multi-assign
+    img.onload = img.onabort = img.onerror = undefined;
+    img.src = '';
+    img = undefined;
+  };
+  return result;
+};
+
+// Caveat: XHR loader can cause errors because of 'Access-Control-Allow-Origin'
+// Caveat: we still need imageLoader to do actual decoding,
+// but if images are uncachable this will lead to two requests
+export const xhrLoader = (url, options) => {
+  let controller = new UnfetchAbortController();
+  const signal = controller.signal;
+  const result = new Promise((resolve, reject) =>
+    unfetch(url, {...options, signal}).then((response) => {
+      if (response.ok) {
+        response
+          .blob()
+          .then(() => imageLoader(url))
+          .then(resolve);
+      } else {
+        reject({status: response.status});
+      }
+    }, reject),
+  );
+  result.cancel = () => {
+    if (!controller) throw new Error('Already canceled');
+    controller.abort();
+    controller = undefined;
+  };
+  return result;
+};
+
+// Caveat: AbortController only supported in Chrome 66+
+// Caveat: we still need imageLoader to do actual decoding,
+// but if images are uncachable this will lead to two requests
+// export const fetchLoader = (url, options) => {
+//   let controller = new AbortController()
+//   const signal = controller.signal
+//   const result = new Promise((resolve, reject) =>
+//     fetch(url, {...options, signal}).then(response => {
+//       if (response.ok) {
+//         options && options.onMeta && options.onMeta(response.headers)
+//         response
+//           .blob()
+//           .then(() => imageLoader(url))
+//           .then(resolve)
+//       } else {
+//         reject({status: response.status})
+//       }
+//     }, reject),
+//   )
+//   result.cancel = () => {
+//     if (!controller) throw new Error('Already canceled')
+//     controller.abort()
+//     controller = undefined
+//   }
+//   return result
+// }

package/lib/theme/IdealImageLegacy/components/theme.d.ts

@@ -0,0 +1,30 @@
+declare namespace _default {
+    namespace placeholder {
+        let backgroundSize: string;
+        let backgroundRepeat: string;
+        let position: string;
+    }
+    namespace img {
+        let width: string;
+        let height: string;
+        let maxWidth: string;
+        let marginBottom: string;
+    }
+    namespace icon {
+        let position_1: string;
+        export { position_1 as position };
+        export let top: string;
+        export let left: string;
+        export let transform: string;
+        export let textAlign: string;
+    }
+    namespace noscript {
+        let position_2: string;
+        export { position_2 as position };
+        let top_1: number;
+        export { top_1 as top };
+        let left_1: number;
+        export { left_1 as left };
+    }
+}
+export default _default;

package/lib/theme/IdealImageLegacy/components/theme.js

@@ -0,0 +1,26 @@
+export default {
+  placeholder: {
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    position: 'relative',
+  },
+  img: {
+    width: '100%',
+    height: 'auto',
+    maxWidth: '100%',
+    /* TODO: fix bug in styles */
+    marginBottom: '-4px',
+  },
+  icon: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    textAlign: 'center',
+  },
+  noscript: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+};

package/lib/theme/IdealImageLegacy/components/theme.module.css

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.placeholder {
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.img {
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  /* TODO: fix bug in styles */
+  margin-bottom: -4px;
+  transform: translate3d(0, 0, 0);
+}
+
+.icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.noscript {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

package/lib/theme/IdealImageLegacy/components/unfetch.d.ts

@@ -0,0 +1,7 @@
+export class UnfetchAbortController {
+    signal: {
+        onabort: () => void;
+    };
+    abort: () => void;
+}
+export function unfetch(url: any, options: any): Promise<any>;

package/lib/theme/IdealImageLegacy/components/unfetch.js

@@ -0,0 +1,74 @@
+export class UnfetchAbortController {
+  constructor() {
+    this.signal = {onabort: () => {}};
+    this.abort = () => this.signal.onabort();
+  }
+}
+
+// modified version of https://github.com/developit/unfetch
+// - ponyfill intead of polyfill
+// - add support for AbortController
+export const unfetch = (url, options) => {
+  options = options || {};
+  return new Promise((resolve, reject) => {
+    const request = new XMLHttpRequest();
+
+    request.open(options.method || 'get', url, true);
+
+    // eslint-disable-next-line guard-for-in
+    for (const i in options.headers) {
+      request.setRequestHeader(i, options.headers[i]);
+    }
+
+    request.withCredentials = options.credentials === 'include';
+
+    request.onload = () => {
+      resolve(response());
+    };
+
+    request.onerror = reject;
+
+    if (options.signal)
+      options.signal.onabort = () => {
+        // eslint-disable-next-line no-multi-assign
+        request.onerror = request.onload = undefined;
+        request.abort();
+      };
+
+    request.send(options.body);
+
+    function response() {
+      const keys = [];
+      const all = [];
+      const headers = {};
+      let header;
+
+      request
+        .getAllResponseHeaders()
+        .replace(/^(.*?):\s*?([\s\S]*?)$/gm, (m, key, value) => {
+          keys.push((key = key.toLowerCase()));
+          all.push([key, value]);
+          header = headers[key];
+          headers[key] = header ? `${header},${value}` : value;
+        });
+
+      return {
+        // eslint-disable-next-line no-bitwise
+        ok: ((request.status / 100) | 0) === 2, // 200-299
+        status: request.status,
+        statusText: request.statusText,
+        url: request.responseURL,
+        clone: response,
+        text: () => Promise.resolve(request.responseText),
+        json: () => Promise.resolve(request.responseText).then(JSON.parse),
+        blob: () => Promise.resolve(new Blob([request.response])),
+        headers: {
+          keys: () => keys,
+          entries: () => all,
+          get: (n) => headers[n.toLowerCase()],
+          has: (n) => n.toLowerCase() in headers,
+        },
+      };
+    }
+  });
+};

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

@@ -0,0 +1,2 @@
+import IdealImageWithDefaults from './components/IdealImageWithDefaults';
+export default IdealImageWithDefaults;

package/lib/theme/IdealImageLegacy/index.js

@@ -0,0 +1,2 @@
+import IdealImageWithDefaults from './components/IdealImageWithDefaults';
+export default IdealImageWithDefaults;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/plugin-ideal-image",
-  "version": "3.7.0-canary-6263",
+  "version": "3.7.0-canary-6264",
   "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",
@@ -20,20 +20,19 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "3.7.0-canary-6263",
-    "@docusaurus/lqip-loader": "3.7.0-canary-6263",
+    "@docusaurus/core": "3.7.0-canary-6264",
+    "@docusaurus/lqip-loader": "3.7.0-canary-6264",
     "@docusaurus/responsive-loader": "^1.7.0",
-    "@docusaurus/theme-translations": "3.7.0-canary-6263",
-    "@docusaurus/types": "3.7.0-canary-6263",
-    "@docusaurus/utils-validation": "3.7.0-canary-6263",
-    "@slorber/react-ideal-image": "^0.0.14",
+    "@docusaurus/theme-translations": "3.7.0-canary-6264",
+    "@docusaurus/types": "3.7.0-canary-6264",
+    "@docusaurus/utils-validation": "3.7.0-canary-6264",
     "react-waypoint": "^10.3.0",
     "sharp": "^0.32.3",
     "tslib": "^2.6.0",
     "webpack": "^5.88.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.7.0-canary-6263",
+    "@docusaurus/module-type-aliases": "3.7.0-canary-6264",
     "fs-extra": "^11.1.0"
   },
   "peerDependencies": {
@@ -49,5 +48,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "f87a715b107175497b8bb2d0ec7b8323c38e1853"
+  "gitHead": "8a3b8621983c8d84b95160db1fcfd223b4c4b979"
 }

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

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/// <reference types="@docusaurus/module-type-aliases" />
+
 declare module '@docusaurus/plugin-ideal-image' {
   export type PluginOptions = {
     /**
@@ -74,3 +76,122 @@ declare module '@theme/IdealImage' {
   }
   export default function IdealImage(props: Props): ReactNode;
 }
+
+declare module '@theme/IdealImageLegacy' {
+  /**
+   * @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.
+   */
+
+  import type {
+    ComponentProps,
+    ComponentType,
+    CSSProperties,
+    ReactNode,
+  } from 'react';
+
+  export type LoadingState = 'initial' | 'loading' | 'loaded' | 'error';
+
+  export type State = {
+    pickedSrc: {
+      size: number;
+    };
+    loadInfo: 404 | null;
+    loadState: LoadingState;
+  };
+
+  export type IconKey =
+    | 'load'
+    | 'loading'
+    | 'loaded'
+    | 'error'
+    | 'noicon'
+    | 'offline';
+
+  export type SrcType = {
+    width: number;
+    src?: string;
+    size?: number;
+    format?: 'webp' | 'jpeg' | 'png' | 'gif';
+  };
+
+  type ThemeKey = 'placeholder' | 'img' | 'icon' | 'noscript';
+
+  export interface ImageProps
+    extends Omit<ComponentProps<'img'>, 'srcSet' | 'placeholder'> {
+    /**
+     * 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.
+     */
+    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.
+     */
+    getUrl?: (srcType: SrcType) => string;
+    /**
+     * The Height of the image in px.
+     */
+    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
+     */
+    icons?: Partial<{[icon in IconKey]: ComponentType}>;
+    /**
+     * This prop takes one of the 2 options, xhr and image.
+     * Read more about it:
+     * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#cancel-download
+     */
+    loader?: 'xhr' | 'image';
+    /**
+     * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#lqip
+     */
+    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.
+     */
+    shouldAutoDownload?: (options: {
+      connection?: 'slow-2g' | '2g' | '3g' | '4g';
+      size?: number;
+      threshold?: number;
+      possiblySlowNetwork?: boolean;
+    }) => boolean;
+    /**
+     * 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.
+     */
+    theme?: Partial<{[key in ThemeKey]: string | CSSProperties}>;
+    /**
+     * Tells how much to wait in milliseconds until consider the download to be
+     * slow.
+     */
+    threshold?: number;
+    /**
+     * Width of the image in px.
+     */
+    width: number;
+  }
+
+  export interface Props extends ImageProps {}
+
+  export default function IdealImageLegacy(props: ImageProps): ReactNode;
+}

package/src/theme/IdealImage/index.tsx

@@ -6,11 +6,11 @@
  */
 
 import React, {type ReactNode} from 'react';
+import {translate} from '@docusaurus/Translate';
 import ReactIdealImage, {
   type IconKey,
   type State,
-} from '@slorber/react-ideal-image';
-import {translate} from '@docusaurus/Translate';
+} from '@theme/IdealImageLegacy';
 
 import type {Props} from '@theme/IdealImage';
 
@@ -93,7 +93,6 @@ export default function IdealImage(props: Props): ReactNode {
 
   return (
     <ReactIdealImage
-      {...propsRest}
       height={img.src.height ?? 100}
       width={img.src.width ?? 100}
       placeholder={{lqip: img.preSrc}}

package/src/theme/IdealImageLegacy/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2017 stereobooster
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/theme/IdealImageLegacy/README.md

@@ -0,0 +1,13 @@
+# Legacy React IdealImage lib
+
+This is legacy code from an npm package we forked, then internalized
+
+See also:
+
+- https://github.com/slorber/docusaurus-react-ideal-image
+- https://github.com/endiliey/react-ideal-image
+- https://github.com/stereobooster/react-ideal-image
+
+---
+
+TODO: we need to clean it up, remove what we don't need, and maintain it up to date

package/src/theme/IdealImageLegacy/components/Icon/Download.js

@@ -0,0 +1,15 @@
+// This icon is from "material design icons"
+// It is licensed under Apache License 2.0
+// Full text is available here
+// https://github.com/google/material-design-icons/blob/master/LICENSE
+import React from 'react';
+import Icon from './index';
+
+const Download = (props) => (
+  <Icon
+    {...props}
+    path="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
+  />
+);
+
+export default Download;

package/src/theme/IdealImageLegacy/components/Icon/Loading.js

@@ -0,0 +1,15 @@
+// This icon is from "material design icons"
+// It is licensed under Apache License 2.0
+// Full text is available here
+// https://github.com/google/material-design-icons/blob/master/LICENSE
+import React from 'react';
+import Icon from './index';
+
+const Loading = (props) => (
+  <Icon
+    {...props}
+    path="M6,2V8H6V8L10,12L6,16V16H6V22H18V16H18V16L14,12L18,8V8H18V2H6M16,16.5V20H8V16.5L12,12.5L16,16.5M12,11.5L8,7.5V4H16V7.5L12,11.5Z"
+  />
+);
+
+export default Loading;

package/src/theme/IdealImageLegacy/components/Icon/Offline.js

@@ -0,0 +1,15 @@
+// This icon is from "material design icons"
+// It is licensed under Apache License 2.0
+// Full text is available here
+// https://github.com/google/material-design-icons/blob/master/LICENSE
+import React from 'react';
+import Icon from './index';
+
+const Offline = (props) => (
+  <Icon
+    {...props}
+    path="M19.35 10.04C18.67 6.59 15.64 4 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46C10.21 6.23 11.08 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z"
+  />
+);
+
+export default Offline;

package/src/theme/IdealImageLegacy/components/Icon/Warning.js

@@ -0,0 +1,15 @@
+// This icon is from "material design icons"
+// It is licensed under Apache License 2.0
+// Full text is available here
+// https://github.com/google/material-design-icons/blob/master/LICENSE
+import React from 'react';
+import Icon from './index';
+
+const Warning = (props) => (
+  <Icon
+    {...props}
+    path="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+  />
+);
+
+export default Warning;

package/src/theme/IdealImageLegacy/components/Icon/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+// import PropTypes from 'prop-types'
+
+const Icon = ({size = 24, fill = '#000', className, path}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    className={className}>
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path fill={fill} d={path} />
+  </svg>
+);
+
+/*
+Icon.propTypes = {
+  size: PropTypes.number,
+  fill: PropTypes.string,
+  className: PropTypes.string,
+  path: PropTypes.string.isRequired,
+}
+ */
+
+export default Icon;