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

package/lib/index.js

@@ -39,6 +39,12 @@ function pluginIdealImage(context, options) {
                     rules: [
                         {
                             test: /\.(?:png|jpe?g)$/i,
+                            // We don't want to use the image loader for non-React source code
+                            // ie we don't want to use ideal image loader for CSS files...
+                            // See https://github.com/facebook/docusaurus/issues/10862
+                            issuer: {
+                                and: [/\.(?:tsx?|jsx?|mdx?)$/i],
+                            },
                             use: [
                                 require.resolve('@docusaurus/lqip-loader'),
                                 {

package/lib/theme/IdealImage/index.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import ReactIdealImage from '@slorber/react-ideal-image';
 import {translate} from '@docusaurus/Translate';
+import ReactIdealImage from '@theme/IdealImageLegacy';
 // Adopted from https://github.com/endiliey/react-ideal-image/blob/master/src/components/helpers.js#L59-L65
 function bytesToSize(bytes) {
   const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
@@ -82,7 +82,6 @@ export default function IdealImage(props) {
   }
   return (
     <ReactIdealImage
-      {...propsRest}
       height={img.src.height ?? 100}
       width={img.src.width ?? 100}
       placeholder={{lqip: img.preSrc}}

package/lib/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/lib/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/lib/theme/IdealImageLegacy/components/Icon/Download.d.ts

@@ -0,0 +1,3 @@
+export default Download;
+declare function Download(props: any): React.JSX.Element;
+import React from 'react';

package/lib/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/lib/theme/IdealImageLegacy/components/Icon/Loading.d.ts

@@ -0,0 +1,3 @@
+export default Loading;
+declare function Loading(props: any): React.JSX.Element;
+import React from 'react';

package/lib/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/lib/theme/IdealImageLegacy/components/Icon/Offline.d.ts

@@ -0,0 +1,3 @@
+export default Offline;
+declare function Offline(props: any): React.JSX.Element;
+import React from 'react';

package/lib/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/lib/theme/IdealImageLegacy/components/Icon/Warning.d.ts

@@ -0,0 +1,3 @@
+export default Warning;
+declare function Warning(props: any): React.JSX.Element;
+import React from 'react';

package/lib/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/lib/theme/IdealImageLegacy/components/Icon/index.d.ts

@@ -0,0 +1,8 @@
+export default Icon;
+declare function Icon({ size, fill, className, path }: {
+    size?: number | undefined;
+    fill?: string | undefined;
+    className: any;
+    path: any;
+}): React.JSX.Element;
+import React from 'react';

package/lib/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;

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

@@ -0,0 +1,42 @@
+export default class IdealImage extends React.Component<any, any, any> {
+    static defaultProps: {
+        shouldAutoDownload: ({ connection, size, threshold, possiblySlowNetwork, }: {
+            connection: any;
+            size: any;
+            threshold: any;
+            possiblySlowNetwork: any;
+        }) => boolean;
+        getMessage: (icon: any, state: any) => "Loading..." | "Your browser is offline. Image not loaded" | "404. Image not found" | "Error. Click to reload" | (string | React.JSX.Element)[] | "Click to load" | null;
+        getIcon: (state: any) => string;
+        loader: string;
+    };
+    constructor(props: any);
+    state: {
+        loadState: string;
+        connection: {
+            downlink: any;
+            rtt: any;
+            effectiveType: any;
+        } | null;
+        onLine: boolean;
+        overThreshold: boolean;
+        inViewport: boolean;
+        userTriggered: boolean;
+        possiblySlowNetwork: boolean;
+    };
+    componentDidMount(): void;
+    updateConnection: (() => void) | undefined;
+    possiblySlowNetworkListener: ((e: any) => void) | undefined;
+    updateOnlineStatus: (() => void) | undefined;
+    componentWillUnmount(): void;
+    onClick: () => void;
+    clear(): void;
+    loader: Promise<any> | undefined;
+    cancel(userTriggered: any): void;
+    loadStateChange(loadState: any, userTriggered: any, loadInfo?: null): void;
+    load: (userTriggered: any) => void;
+    onEnter: () => void;
+    onLeave: () => void;
+    render(): React.JSX.Element;
+}
+import React from 'react';

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

@@ -0,0 +1,352 @@
+import React, {Component} from 'react';
+import {Waypoint} from './waypoint';
+import Media from '../Media';
+import {icons, loadStates} from '../constants';
+import {xhrLoader, imageLoader, timeout, combineCancel} from '../loaders';
+import {
+  guessMaxImageWidth,
+  bytesToSize,
+  supportsWebp,
+  ssr,
+  nativeConnection,
+  selectSrc,
+  fallbackParams,
+} from '../helpers';
+
+const {initial, loading, loaded, error} = loadStates;
+
+const defaultShouldAutoDownload = ({
+  connection,
+  size,
+  threshold,
+  possiblySlowNetwork,
+}) => {
+  if (possiblySlowNetwork) return false;
+  if (!connection) return true;
+  const {downlink, rtt, effectiveType} = connection;
+  switch (effectiveType) {
+    case 'slow-2g':
+    case '2g':
+      return false;
+    case '3g':
+      if (downlink && size && threshold) {
+        return (size * 8) / (downlink * 1000) + rtt < threshold;
+      }
+      return false;
+    case '4g':
+    default:
+      return true;
+  }
+};
+
+const defaultGetMessage = (icon, state) => {
+  switch (icon) {
+    case icons.noicon:
+    case icons.loaded:
+      return null;
+    case icons.loading:
+      return 'Loading...';
+    case icons.load:
+      // we can show `alt` here
+      const {pickedSrc} = state;
+      const {size} = pickedSrc;
+      if (size) {
+        return [
+          'Click to load (',
+          <nobr key="nb">{bytesToSize(size)}</nobr>,
+          ')',
+        ];
+      } else {
+        return 'Click to load';
+      }
+    case icons.offline:
+      return 'Your browser is offline. Image not loaded';
+    case icons.error:
+      const {loadInfo} = state;
+      if (loadInfo === 404) {
+        return '404. Image not found';
+      } else {
+        return 'Error. Click to reload';
+      }
+    default:
+      throw new Error(`Wrong icon: ${icon}`);
+  }
+};
+
+const defaultGetIcon = (state) => {
+  const {loadState, onLine, overThreshold, userTriggered} = state;
+  if (ssr) return icons.noicon;
+  switch (loadState) {
+    case loaded:
+      return icons.loaded;
+    case loading:
+      return overThreshold ? icons.loading : icons.noicon;
+    case initial:
+      if (onLine) {
+        const {shouldAutoDownload} = state;
+        if (shouldAutoDownload === undefined) return icons.noicon;
+        return userTriggered || !shouldAutoDownload ? icons.load : icons.noicon;
+      } else {
+        return icons.offline;
+      }
+    case error:
+      return onLine ? icons.error : icons.offline;
+    default:
+      throw new Error(`Wrong state: ${loadState}`);
+  }
+};
+
+export default class IdealImage extends Component {
+  constructor(props) {
+    super(props);
+    // TODO: validate props.srcSet
+    this.state = {
+      loadState: initial,
+      connection: nativeConnection
+        ? {
+            downlink: navigator.connection.downlink, // megabits per second
+            rtt: navigator.connection.rtt, // ms
+            effectiveType: navigator.connection.effectiveType, // 'slow-2g', '2g', '3g', or '4g'
+          }
+        : null,
+      onLine: true,
+      overThreshold: false,
+      inViewport: false,
+      userTriggered: false,
+      possiblySlowNetwork: false,
+    };
+  }
+
+  /*
+  static propTypes = {
+    /!** how much to wait in ms until consider download to slow *!/
+    threshold: PropTypes.number,
+    /!** function to generate src based on width and format *!/
+    getUrl: PropTypes.func,
+    /!** array of sources *!/
+    srcSet: PropTypes.arrayOf(
+      PropTypes.shape({
+        width: PropTypes.number.isRequired,
+        src: PropTypes.string,
+        size: PropTypes.number,
+        format: PropTypes.oneOf(['jpeg', 'jpg', 'webp', 'png', 'gif']),
+      }),
+    ).isRequired,
+    /!** function which decides if image should be downloaded *!/
+    shouldAutoDownload: PropTypes.func,
+    /!** function which decides what message to show *!/
+    getMessage: PropTypes.func,
+    /!** function which decides what icon to show *!/
+    getIcon: PropTypes.func,
+    /!** type of loader *!/
+    loader: PropTypes.oneOf(['image', 'xhr']),
+    /!** Width of the image in px *!/
+    width: PropTypes.number.isRequired,
+    /!** Height of the image in px *!/
+    height: PropTypes.number.isRequired,
+    placeholder: PropTypes.oneOfType([
+      PropTypes.shape({
+        /!** Solid color placeholder *!/
+        color: PropTypes.string.isRequired,
+      }),
+      PropTypes.shape({
+        /!**
+         * [Low Quality Image Placeholder](https://github.com/zouhir/lqip)
+         * [SVG-Based Image Placeholder](https://github.com/technopagan/sqip)
+         * base64 encoded image of low quality
+         *!/
+        lqip: PropTypes.string.isRequired,
+      }),
+    ]).isRequired,
+    /!** Map of icons *!/
+    icons: PropTypes.object.isRequired,
+    /!** theme object - CSS Modules or React styles *!/
+    theme: PropTypes.object.isRequired,
+  }*/
+
+  static defaultProps = {
+    shouldAutoDownload: defaultShouldAutoDownload,
+    getMessage: defaultGetMessage,
+    getIcon: defaultGetIcon,
+    loader: 'xhr',
+  };
+
+  componentDidMount() {
+    if (nativeConnection) {
+      this.updateConnection = () => {
+        if (!navigator.onLine) return;
+        if (this.state.loadState === initial) {
+          this.setState({
+            connection: {
+              effectiveType: navigator.connection.effectiveType,
+              downlink: navigator.connection.downlink,
+              rtt: navigator.connection.rtt,
+            },
+          });
+        }
+      };
+      navigator.connection.addEventListener('onchange', this.updateConnection);
+    } else if (this.props.threshold) {
+      this.possiblySlowNetworkListener = (e) => {
+        if (this.state.loadState !== initial) return;
+        const {possiblySlowNetwork} = e.detail;
+        if (!this.state.possiblySlowNetwork && possiblySlowNetwork) {
+          this.setState({possiblySlowNetwork});
+        }
+      };
+      window.document.addEventListener(
+        'possiblySlowNetwork',
+        this.possiblySlowNetworkListener,
+      );
+    }
+    this.updateOnlineStatus = () => this.setState({onLine: navigator.onLine});
+    this.updateOnlineStatus();
+    window.addEventListener('online', this.updateOnlineStatus);
+    window.addEventListener('offline', this.updateOnlineStatus);
+  }
+
+  componentWillUnmount() {
+    this.clear();
+    if (nativeConnection) {
+      navigator.connection.removeEventListener(
+        'onchange',
+        this.updateConnection,
+      );
+    } else if (this.props.threshold) {
+      window.document.removeEventListener(
+        'possiblySlowNetwork',
+        this.possiblySlowNetworkListener,
+      );
+    }
+    window.removeEventListener('online', this.updateOnlineStatus);
+    window.removeEventListener('offline', this.updateOnlineStatus);
+  }
+
+  onClick = () => {
+    const {loadState, onLine, overThreshold} = this.state;
+    if (!onLine) return;
+    switch (loadState) {
+      case loading:
+        if (overThreshold) this.cancel(true);
+        return;
+      case loaded:
+        // nothing
+        return;
+      case initial:
+      case error:
+        this.load(true);
+        return;
+      default:
+        throw new Error(`Wrong state: ${loadState}`);
+    }
+  };
+
+  clear() {
+    if (this.loader) {
+      this.loader.cancel();
+      this.loader = undefined;
+    }
+  }
+
+  cancel(userTriggered) {
+    if (loading !== this.state.loadState) return;
+    this.clear();
+    this.loadStateChange(initial, userTriggered);
+  }
+
+  loadStateChange(loadState, userTriggered, loadInfo = null) {
+    this.setState({
+      loadState,
+      overThreshold: false,
+      userTriggered: !!userTriggered,
+      loadInfo,
+    });
+  }
+
+  load = (userTriggered) => {
+    const {loadState, url} = this.state;
+    if (ssr || loaded === loadState || loading === loadState) return;
+    this.loadStateChange(loading, userTriggered);
+
+    const {threshold} = this.props;
+    const loader =
+      this.props.loader === 'xhr' ? xhrLoader(url) : imageLoader(url);
+    loader
+      .then(() => {
+        this.clear();
+        this.loadStateChange(loaded, false);
+      })
+      .catch((e) => {
+        this.clear();
+        if (e.status === 404) {
+          this.loadStateChange(error, false, 404);
+        } else {
+          this.loadStateChange(error, false);
+        }
+      });
+
+    if (threshold) {
+      const timeoutLoader = timeout(threshold);
+      timeoutLoader.then(() => {
+        if (!this.loader) return;
+        window.document.dispatchEvent(
+          new CustomEvent('possiblySlowNetwork', {
+            detail: {possiblySlowNetwork: true},
+          }),
+        );
+        this.setState({overThreshold: true});
+        if (!this.state.userTriggered) this.cancel(true);
+      });
+      this.loader = combineCancel(loader, timeoutLoader);
+    } else {
+      this.loader = loader;
+    }
+  };
+
+  onEnter = () => {
+    if (this.state.inViewport) return;
+    this.setState({inViewport: true});
+    const pickedSrc = selectSrc({
+      srcSet: this.props.srcSet,
+      maxImageWidth:
+        this.props.srcSet.length > 1
+          ? guessMaxImageWidth(this.state.dimensions) // eslint-disable-line react/no-access-state-in-setstate
+          : 0,
+      supportsWebp,
+    });
+    const {getUrl} = this.props;
+    const url = getUrl ? getUrl(pickedSrc) : pickedSrc.src;
+    const shouldAutoDownload = this.props.shouldAutoDownload({
+      ...this.state, // eslint-disable-line react/no-access-state-in-setstate
+      size: pickedSrc.size,
+    });
+    this.setState({pickedSrc, shouldAutoDownload, url}, () => {
+      if (shouldAutoDownload) this.load(false);
+    });
+  };
+
+  onLeave = () => {
+    if (this.state.loadState === loading && !this.state.userTriggered) {
+      this.setState({inViewport: false});
+      this.cancel(false);
+    }
+  };
+
+  render() {
+    const icon = this.props.getIcon(this.state);
+    const message = this.props.getMessage(icon, this.state);
+    return (
+      <Waypoint onEnter={this.onEnter} onLeave={this.onLeave}>
+        <Media
+          {...this.props}
+          {...fallbackParams(this.props)}
+          onClick={this.onClick}
+          icon={icon}
+          src={this.state.url || ''}
+          onDimensions={(dimensions) => this.setState({dimensions})}
+          message={message}
+        />
+      </Waypoint>
+    );
+  }
+}

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

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+type Props = {
+    topOffset: number;
+    bottomOffset: number;
+    onEnter: () => void;
+    onLeave: () => void;
+    children: ReactNode;
+};
+export declare function Waypoint(props: Props): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+export {};