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

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

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
-// import PropTypes from 'prop-types'
-import {Waypoint} from 'react-waypoint';
+import {Waypoint} from './waypoint';
 import Media from '../Media';
 import {icons, loadStates} from '../constants';
 import {xhrLoader, imageLoader, timeout, combineCancel} from '../loaders';

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 {};

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

@@ -0,0 +1,174 @@
+/*
+This is a slimmed down copy of https://github.com/civiccc/react-waypoint
+The MIT License (MIT)
+Copyright (c) 2015 Brigade
+ */
+import React, {createRef} from 'react';
+function addEventListener(element, type, listener, options) {
+  element.addEventListener(type, listener, options);
+  return () => element.removeEventListener(type, listener, options);
+}
+export function Waypoint(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 {
+  static defaultProps = {
+    topOffset: 0,
+    bottomOffset: 0,
+    onEnter() {},
+    onLeave() {},
+  };
+  scrollableAncestor;
+  previousPosition = null;
+  unsubscribe;
+  innerRef = createRef();
+  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},
+    );
+    this.unsubscribe = () => {
+      unsubscribeScroll();
+      unsubscribeResize();
+    };
+    this._handleScroll();
+  }
+  componentDidUpdate() {
+    this._handleScroll();
+  }
+  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();
+    }
+  };
+  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) {
+  let node = 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;
+}
+function getBounds({node, scrollableAncestor, topOffset, bottomOffset}) {
+  const {top, bottom} = node.getBoundingClientRect();
+  let contextHeight;
+  let contextScrollTop;
+  if (scrollableAncestor === window) {
+    contextHeight = window.innerHeight;
+    contextScrollTop = 0;
+  } else {
+    const ancestorElement = scrollableAncestor;
+    contextHeight = ancestorElement.offsetHeight;
+    contextScrollTop = ancestorElement.getBoundingClientRect().top;
+  }
+  const contextBottom = contextScrollTop + contextHeight;
+  return {
+    top,
+    bottom,
+    viewportTop: contextScrollTop + topOffset,
+    viewportBottom: contextBottom - bottomOffset,
+  };
+}
+function getCurrentPosition(bounds) {
+  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/package.json

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

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

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
-// import PropTypes from 'prop-types'
-import {Waypoint} from 'react-waypoint';
+import {Waypoint} from './waypoint';
 import Media from '../Media';
 import {icons, loadStates} from '../constants';
 import {xhrLoader, imageLoader, timeout, combineCancel} from '../loaders';

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

@@ -0,0 +1,239 @@
+/*
+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);
+}
+
+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},
+    );
+
+    this.unsubscribe = () => {
+      unsubscribeScroll();
+      unsubscribeResize();
+    };
+
+    this._handleScroll();
+  }
+
+  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';
+}