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

package/src/theme/IdealImageLegacy/components/IdealImage/waypoint.tsx

@@ -0,0 +1,254 @@
+/*
+This is a slimmed down copy of https://github.com/civiccc/react-waypoint
+The MIT License (MIT)
+Copyright (c) 2015 Brigade
+ */
+
+import React, {createRef, ReactNode} from 'react';
+
+type ScrollContainer = Window | HTMLElement;
+
+function addEventListener(
+  element: ScrollContainer,
+  type: 'scroll' | 'resize',
+  listener: () => void,
+  options: AddEventListenerOptions,
+) {
+  element.addEventListener(type, listener, options);
+  return () => element.removeEventListener(type, listener, options);
+}
+
+// Because waypoint may fire before the setState() updates due to batching
+// queueMicrotask is a better option than setTimeout() or React.flushSync()
+// See https://github.com/facebook/docusaurus/issues/11018
+// See https://github.com/civiccc/react-waypoint/blob/0905ac5a073131147c96dd0694bd6f1b6ee8bc97/src/onNextTick.js
+function subscribeMicrotask(callback: () => void) {
+  let subscribed = true;
+  queueMicrotask(() => {
+    if (subscribed) callback();
+  });
+  return () => (subscribed = false);
+}
+
+type Position = 'above' | 'inside' | 'below' | 'invisible';
+
+type Props = {
+  topOffset: number;
+  bottomOffset: number;
+  onEnter: () => void;
+  onLeave: () => void;
+  children: ReactNode;
+};
+
+export function Waypoint(props: Props) {
+  return typeof window !== 'undefined' ? (
+    <WaypointClient {...props}>{props.children}</WaypointClient>
+  ) : (
+    props.children
+  );
+}
+
+// TODO maybe replace this with IntersectionObserver later?
+//  IntersectionObserver doesn't support the "fast scroll" thing
+//  but it's probably not a big deal
+class WaypointClient extends React.Component<Props> {
+  static defaultProps = {
+    topOffset: 0,
+    bottomOffset: 0,
+    onEnter() {},
+    onLeave() {},
+  };
+
+  scrollableAncestor?: ScrollContainer;
+  previousPosition: Position | null = null;
+  unsubscribe?: () => void;
+
+  innerRef = createRef<HTMLElement>();
+
+  override componentDidMount() {
+    this.scrollableAncestor = findScrollableAncestor(this.innerRef.current!);
+
+    const unsubscribeScroll = addEventListener(
+      this.scrollableAncestor!,
+      'scroll',
+      this._handleScroll,
+      {passive: true},
+    );
+
+    const unsubscribeResize = addEventListener(
+      window,
+      'resize',
+      this._handleScroll,
+      {passive: true},
+    );
+
+    const unsubscribeInitialScroll = subscribeMicrotask(() => {
+      this._handleScroll();
+    });
+
+    this.unsubscribe = () => {
+      unsubscribeScroll();
+      unsubscribeResize();
+      unsubscribeInitialScroll();
+    };
+  }
+
+  override componentDidUpdate() {
+    this._handleScroll();
+  }
+
+  override componentWillUnmount() {
+    this.unsubscribe?.();
+  }
+
+  _handleScroll = () => {
+    const node = this.innerRef.current;
+    const {topOffset, bottomOffset, onEnter, onLeave} = this.props;
+
+    const bounds = getBounds({
+      node: node!,
+      scrollableAncestor: this.scrollableAncestor!,
+      topOffset,
+      bottomOffset,
+    });
+
+    const currentPosition = getCurrentPosition(bounds);
+    const previousPosition = this.previousPosition;
+    this.previousPosition = currentPosition;
+
+    if (previousPosition === currentPosition) {
+      return;
+    }
+
+    if (currentPosition === 'inside') {
+      onEnter();
+    } else if (previousPosition === 'inside') {
+      onLeave();
+    }
+
+    const isRapidScrollDown =
+      previousPosition === 'below' && currentPosition === 'above';
+    const isRapidScrollUp =
+      previousPosition === 'above' && currentPosition === 'below';
+    if (isRapidScrollDown || isRapidScrollUp) {
+      onEnter();
+      onLeave();
+    }
+  };
+
+  override render() {
+    // @ts-expect-error: fix this implicit API
+    return React.cloneElement(this.props.children, {innerRef: this.innerRef});
+  }
+}
+
+/**
+ * Traverses up the DOM to find an ancestor container which has an overflow
+ * style that allows for scrolling.
+ *
+ * @return {Object} the closest ancestor element with an overflow style that
+ *   allows for scrolling. If none is found, the `window` object is returned
+ *   as a fallback.
+ */
+function findScrollableAncestor(inputNode: HTMLElement): ScrollContainer {
+  let node: HTMLElement = inputNode;
+
+  while (node.parentNode) {
+    // @ts-expect-error: it's fine
+    node = node.parentNode!;
+
+    if (node === document.body) {
+      // We've reached all the way to the root node.
+      return window;
+    }
+
+    const style = window.getComputedStyle(node);
+    const overflow =
+      style.getPropertyValue('overflow-y') ||
+      style.getPropertyValue('overflow');
+
+    if (
+      overflow === 'auto' ||
+      overflow === 'scroll' ||
+      overflow === 'overlay'
+    ) {
+      return node;
+    }
+  }
+
+  // A scrollable ancestor element was not found, which means that we need to
+  // do stuff on window.
+  return window;
+}
+
+type Bounds = {
+  top: number;
+  bottom: number;
+  viewportTop: number;
+  viewportBottom: number;
+};
+
+function getBounds({
+  node,
+  scrollableAncestor,
+  topOffset,
+  bottomOffset,
+}: {
+  node: Element;
+  scrollableAncestor: ScrollContainer;
+  topOffset: number;
+  bottomOffset: number;
+}): Bounds {
+  const {top, bottom} = node.getBoundingClientRect();
+
+  let contextHeight;
+  let contextScrollTop;
+  if (scrollableAncestor === window) {
+    contextHeight = window.innerHeight;
+    contextScrollTop = 0;
+  } else {
+    const ancestorElement = scrollableAncestor as HTMLElement;
+    contextHeight = ancestorElement.offsetHeight;
+    contextScrollTop = ancestorElement.getBoundingClientRect().top;
+  }
+
+  const contextBottom = contextScrollTop + contextHeight;
+
+  return {
+    top,
+    bottom,
+    viewportTop: contextScrollTop + topOffset,
+    viewportBottom: contextBottom - bottomOffset,
+  };
+}
+
+function getCurrentPosition(bounds: Bounds): Position {
+  if (bounds.viewportBottom - bounds.viewportTop === 0) {
+    return 'invisible';
+  }
+  // top is within the viewport
+  if (bounds.viewportTop <= bounds.top && bounds.top <= bounds.viewportBottom) {
+    return 'inside';
+  }
+  // bottom is within the viewport
+  if (
+    bounds.viewportTop <= bounds.bottom &&
+    bounds.bottom <= bounds.viewportBottom
+  ) {
+    return 'inside';
+  }
+  // top is above the viewport and bottom is below the viewport
+  if (
+    bounds.top <= bounds.viewportTop &&
+    bounds.viewportBottom <= bounds.bottom
+  ) {
+    return 'inside';
+  }
+  if (bounds.viewportBottom < bounds.top) {
+    return 'below';
+  }
+  if (bounds.top < bounds.viewportTop) {
+    return 'above';
+  }
+  return 'invisible';
+}

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:
+ * Assume 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,
+};