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

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

@@ -0,0 +1,353 @@
+import React, {Component} from 'react';
+// import PropTypes from 'prop-types'
+import {Waypoint} from 'react-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 concider 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/src/theme/IdealImageLegacy/components/IdealImageWithDefaults/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import IdealImage from '../IdealImage';
+import icons from '../icons';
+import theme from '../theme';
+
+const IdealImageWithDefaults = ({
+  icons: iconsProp = icons,
+  theme: themeProp = theme,
+  ...props
+}) => <IdealImage {...props} icons={iconsProp} theme={themeProp} />;
+
+export default IdealImageWithDefaults;

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

@@ -0,0 +1,169 @@
+import React, {PureComponent} from 'react';
+// import PropTypes from 'prop-types'
+import compose from '../composeStyle';
+import {icons as defaultIcons} from '../constants';
+
+const {load, loading, loaded, error, noicon, offline} = defaultIcons;
+
+export default class Media extends PureComponent {
+  /*static propTypes = {
+    /!** URL of the image *!/
+    src: PropTypes.string.isRequired,
+    /!** 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,
+    /!** display icon *!/
+    icon: PropTypes.oneOf([load, loading, loaded, error, noicon, offline])
+      .isRequired,
+    /!** Map of icons *!/
+    icons: PropTypes.object.isRequired,
+    /!** theme object - CSS Modules or React styles *!/
+    theme: PropTypes.object.isRequired,
+    /!** Alternative text *!/
+    alt: PropTypes.string,
+    /!** Color of the icon *!/
+    iconColor: PropTypes.string,
+    /!** Size of the icon in px *!/
+    iconSize: PropTypes.number,
+    /!** React's style attribute for root element of the component *!/
+    style: PropTypes.object,
+    /!** React's className attribute for root element of the component *!/
+    className: PropTypes.string,
+    /!** On click handler *!/
+    onClick: PropTypes.func,
+    /!** callback to get dimensions of the placeholder *!/
+    onDimensions: PropTypes.func,
+    /!** message to show below the icon *!/
+    message: PropTypes.node,
+    /!** reference for Waypoint *!/
+    innerRef: PropTypes.func,
+    /!** noscript image src *!/
+    nsSrc: PropTypes.string,
+    /!** noscript image srcSet *!/
+    nsSrcSet: PropTypes.string,
+  }*/
+
+  static defaultProps = {
+    iconColor: '#fff',
+    iconSize: 64,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {isMounted: false};
+  }
+
+  componentDidMount() {
+    this.setState({isMounted: true});
+
+    if (this.props.onDimensions && this.dimensionElement)
+      /* Firefox returns 0 for both clientWidth and clientHeight.
+      To fix this we can check the parentNode's clientWidth and clientHeight as a fallback. */
+      this.props.onDimensions({
+        width:
+          this.dimensionElement.clientWidth ||
+          this.dimensionElement.parentNode.clientWidth,
+        height:
+          this.dimensionElement.clientHeight ||
+          this.dimensionElement.parentNode.clientHeight,
+      });
+  }
+
+  renderIcon(props) {
+    const {icon, icons, iconColor: fill, iconSize: size, theme} = props;
+    const iconToRender = icons[icon];
+    if (!iconToRender) return null;
+    const styleOrClass = compose(
+      {width: size + 100, height: size, color: fill},
+      theme.icon,
+    );
+    return React.createElement('div', styleOrClass, [
+      React.createElement(iconToRender, {fill, size, key: 'icon'}),
+      React.createElement('br', {key: 'br'}),
+      this.props.message,
+    ]);
+  }
+
+  renderImage(props) {
+    return props.icon === loaded ? (
+      <img
+        {...compose(props.theme.img)}
+        src={props.src}
+        alt={props.alt}
+        width={props.width}
+        height={props.height}
+      />
+    ) : (
+      <svg
+        {...compose(props.theme.img)}
+        width={props.width}
+        height={props.height}
+        ref={(ref) => (this.dimensionElement = ref)}
+      />
+    );
+  }
+
+  renderNoscript(props) {
+    // render noscript in ssr + hydration to avoid hydration mismatch error
+    return this.state.isMounted ? null : (
+      <noscript>
+        <img
+          {...compose(props.theme.img, props.theme.noscript)}
+          src={props.nsSrc}
+          srcSet={props.nsSrcSet}
+          alt={props.alt}
+          width={props.width}
+          height={props.height}
+        />
+      </noscript>
+    );
+  }
+
+  render() {
+    const props = this.props;
+    const {placeholder, theme} = props;
+    let background;
+    if (props.icon === loaded) {
+      background = {};
+    } else if (placeholder.lqip) {
+      background = {
+        backgroundImage: `url("${placeholder.lqip}")`,
+      };
+    } else {
+      background = {
+        backgroundColor: placeholder.color,
+      };
+    }
+    return (
+      <div
+        {...compose(
+          theme.placeholder,
+          background,
+          props.style,
+          props.className,
+        )}
+        onClick={this.props.onClick}
+        onKeyPress={this.props.onClick}
+        ref={this.props.innerRef}>
+        {this.renderImage(props)}
+        {this.renderNoscript(props)}
+        {this.renderIcon(props)}
+      </div>
+    );
+  }
+}

package/src/theme/IdealImageLegacy/components/MediaWithDefaults/README.md

@@ -0,0 +1,89 @@
+All possible states of the component
+
+```js
+const lqip =
+  'data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAA4DASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUG/8QAIRAAAQQDAAEFAAAAAAAAAAAAAQIDBREABAYhEjEyQVH/xAAUAQEAAAAAAAAAAAAAAAAAAAAE/8QAGBEBAAMBAAAAAAAAAAAAAAAAAQACIRH/2gAMAwEAAhEDEQA/AMJ2DG+7Dw0nz8gsx+uyhlxnWdLakOlfzpIF3aRf1WT5t96P5+N1ug9Tu7ZWS8q1gG6B8H2FDz+YxhjUrEOdZ//Z';
+
+const sqip =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4774 3024'%3e%3cfilter id='b'%3e%3cfeGaussianBlur stdDeviation='12' /%3e%3c/filter%3e%3cpath fill='%23515a57' d='M0 0h4774v3021H0z'/%3e%3cg filter='url(%23b)' transform='translate(9.3 9.3) scale(18.64844)' fill-opacity='.5'%3e%3cellipse fill='whitefef' rx='1' ry='1' transform='matrix(74.55002 60.89891 -21.7939 26.67923 151.8 104.4)'/%3e%3cellipse fill='black80c' cx='216' cy='49' rx='59' ry='59'/%3e%3cellipse fill='black60e' cx='22' cy='60' rx='46' ry='89'/%3e%3cellipse fill='%23ffebd5' cx='110' cy='66' rx='42' ry='28'/%3e%3cellipse fill='whiteff9' rx='1' ry='1' transform='rotate(33.3 -113.2 392.6) scale(42.337 17.49703)'/%3e%3cellipse fill='%23031f1e' rx='1' ry='1' transform='matrix(163.4651 -64.93326 6.77862 17.06471 111 16.4)'/%3e%3cpath fill='whitefea' d='M66 74l9 39 16-44z'/%3e%3cellipse fill='%23a28364' rx='1' ry='1' transform='rotate(-32.4 253.2 -179) scale(30.79511 43.65381)'/%3e%3cpath fill='%231a232c' d='M40 139l61-57 33 95z'/%3e%3cpath fill='%230a222b' d='M249.8 153.3l-48.1-48 32.5-32.6 48.1 48z'/%3e%3c/g%3e%3c/svg%3e";
+<table>
+  <tbody>
+    <tr>
+      <th align="left" width="100">
+        load
+      </th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'load'}
+        />
+      </td>
+      <th align="left" width="100">
+        noicon
+      </th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'noicon'}
+        />
+      </td>
+    </tr>
+    <tr>
+      <th align="left">loading</th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'loading'}
+        />
+      </td>
+      <th align="left">offline</th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'offline'}
+        />
+      </td>
+    </tr>
+    <tr>
+      <th align="left">loaded</th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'loaded'}
+        />
+      </td>
+      <th align="left">error</th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'error'}
+        />
+      </td>
+    </tr>
+  </tbody>
+</table>;
+```

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import Media from '../Media';
+import icons from '../icons';
+import theme from '../theme';
+
+const MediaWithDefaults = ({
+  icons: iconsProp = icons,
+  theme: themeProp = theme,
+  ...props
+}) => <Media {...props} icons={iconsProp} theme={themeProp} />;
+
+export default MediaWithDefaults;

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

@@ -0,0 +1,37 @@
+/**
+ * Composes styles and/or classes
+ *
+ * For classes it will concat them in in one string
+ * and return as `className` property.
+ * Alternative is https://github.com/JedWatson/classnames
+ *
+ * For objects it will merge them in one object
+ * and return as `style` property.
+ *
+ * Usage:
+ * Asume you have `theme` object, which can be css-module
+ * or object or other css-in-js compatible with css-module
+ *
+ * <a {...compose(theme.link, theme.active, {color: "#000"})}>link</a>
+ *
+ * @returns {{className: string, style: object}} - params for React component
+ */
+export default (...stylesOrClasses) => {
+  const classes = [];
+  let style;
+  for (const obj of stylesOrClasses) {
+    if (obj instanceof Object) {
+      Object.assign(style || (style = {}), obj);
+    } else if (obj === undefined || obj === false) {
+      // ignore
+    } else if (typeof obj === 'string') {
+      classes.push(obj);
+    } else {
+      throw new Error(`Unexpected value ${obj}`);
+    }
+  }
+  return {
+    className: classes.length > 1 ? classes.join(' ') : classes[0],
+    style,
+  };
+};

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

@@ -0,0 +1,24 @@
+const load = 'load';
+const loading = 'loading';
+const loaded = 'loaded';
+const error = 'error';
+const noicon = 'noicon';
+const offline = 'offline';
+
+export const icons = {
+  load,
+  loading,
+  loaded,
+  error,
+  noicon,
+  offline,
+};
+
+const initial = 'initial';
+
+export const loadStates = {
+  initial,
+  loading,
+  loaded,
+  error,
+};