@docusaurus/plugin-ideal-image 3.7.0 → 3.8.0-canary-6327

package/src/theme/IdealImageLegacy/components/helpers.js

@@ -0,0 +1,141 @@
+export const ssr =
+  typeof window === 'undefined' || window.navigator.userAgent === 'ReactSnap';
+
+export const nativeConnection = !ssr && !!window.navigator.connection;
+
+// export const getScreenWidth = () => {
+//   if (ssr) return 0
+//   const devicePixelRatio = window.devicePixelRatio || 1
+//   const {screen} = window
+//   const {width} = screen
+//   // const angle = (screen.orientation && screen.orientation.angle) || 0
+//   // return Math.max(width, height)
+//   // const rotated = Math.floor(angle / 90) % 2 !== 0
+//   // return (rotated ? height : width) * devicePixelRatio
+//   return width * devicePixelRatio
+// }
+// export const screenWidth = getScreenWidth()
+
+export const guessMaxImageWidth = (dimensions, w) => {
+  if (ssr) return 0;
+
+  // Default to window object but don't use window as a default
+  // parameter so that this can be used on the server as well
+  if (!w) {
+    w = window;
+  }
+
+  const imgWidth = dimensions.width;
+
+  const {screen} = w;
+  const sWidth = screen.width;
+  const sHeight = screen.height;
+
+  const {documentElement} = document;
+  const windowWidth = w.innerWidth || documentElement.clientWidth;
+  const windowHeight = w.innerHeight || documentElement.clientHeight;
+  const devicePixelRatio = w.devicePixelRatio || 1;
+
+  const windowResized = sWidth > windowWidth;
+
+  let result;
+  if (windowResized) {
+    const body = document.getElementsByTagName('body')[0];
+    const scrollWidth = windowWidth - imgWidth;
+    const isScroll =
+      body.clientHeight > windowHeight || body.clientHeight > sHeight;
+    if (isScroll && scrollWidth <= 15) {
+      result = sWidth - scrollWidth;
+    } else {
+      result = (imgWidth / windowWidth) * sWidth;
+    }
+  } else {
+    result = imgWidth;
+  }
+
+  return result * devicePixelRatio;
+};
+
+export const bytesToSize = (bytes) => {
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes === 0) return 'n/a';
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
+  if (i === 0) return `${bytes} ${sizes[i]}`;
+  return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`;
+};
+
+// async function supportsWebp() {
+//   if (typeof createImageBitmap === 'undefined' || typeof fetch === 'undefined')
+//     return false
+//   return fetch(
+//     'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=',
+//   )
+//     .then(response => response.blob())
+//     .then(blob => createImageBitmap(blob).then(() => true, () => false))
+// }
+// let webp = undefined
+// const webpPromise = supportsWebp()
+// webpPromise.then(x => (webp = x))
+// export default () => {
+//   if (webp === undefined) return webpPromise
+//   return {
+//     then: callback => callback(webp),
+//   }
+// }
+
+const detectWebpSupport = () => {
+  if (ssr) return false;
+  const elem = document.createElement('canvas');
+  if (elem.getContext?.('2d')) {
+    // was able or not to get WebP representation
+    return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+  } else {
+    // very old browser like IE 8, canvas not supported
+    return false;
+  }
+};
+
+export const supportsWebp = detectWebpSupport();
+
+const isWebp = (x) => x.format === 'webp' || x.src?.match(/\.webp($|\?.*)/i);
+
+// eslint-disable-next-line no-shadow
+export const selectSrc = ({srcSet, maxImageWidth, supportsWebp}) => {
+  if (srcSet.length === 0) throw new Error('Need at least one item in srcSet');
+  let supportedFormat, width;
+  if (supportsWebp) {
+    supportedFormat = srcSet.filter(isWebp);
+    if (supportedFormat.length === 0) supportedFormat = srcSet;
+  } else {
+    supportedFormat = srcSet.filter((x) => !isWebp(x));
+    if (supportedFormat.length === 0)
+      throw new Error('Need at least one supported format item in srcSet');
+  }
+  let widths = supportedFormat.filter((x) => x.width >= maxImageWidth);
+  if (widths.length === 0) {
+    widths = supportedFormat;
+    width = Math.max.apply(
+      null,
+      widths.map((x) => x.width),
+    );
+  } else {
+    width = Math.min.apply(
+      null,
+      widths.map((x) => x.width),
+    );
+  }
+  return supportedFormat.filter((x) => x.width === width)[0];
+};
+
+export const fallbackParams = ({srcSet, getUrl}) => {
+  if (!ssr) return {};
+  const notWebp = srcSet.filter((x) => !isWebp(x));
+  const first = notWebp[0];
+  return {
+    nsSrcSet: notWebp
+      .map((x) => `${getUrl ? getUrl(x) : x.src} ${x.width}w`)
+      .join(','),
+    nsSrc: getUrl ? getUrl(first) : first.src,
+    ssr,
+  };
+};

package/src/theme/IdealImageLegacy/components/icons.js

@@ -0,0 +1,16 @@
+import DownloadIcon from './Icon/Download';
+import OfflineIcon from './Icon/Offline';
+import WarningIcon from './Icon/Warning';
+import LoadingIcon from './Icon/Loading';
+import {icons} from './constants';
+
+const {load, loading, loaded, error, noicon, offline} = icons;
+
+export default {
+  [load]: DownloadIcon,
+  [loading]: LoadingIcon,
+  [loaded]: null,
+  [error]: WarningIcon,
+  [noicon]: null,
+  [offline]: OfflineIcon,
+};

package/src/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/src/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/src/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/src/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 instead 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/src/theme/IdealImageLegacy/index.tsx

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

package/src/deps.d.ts

@@ -1,124 +0,0 @@
-/**
- * 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.
- */
-
-/// <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 '@slorber/react-ideal-image' {
-  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 default function IdealImage(props: ImageProps): ReactNode;
-}