@azerion/bunosaurus-plugin-ideal-image 0.0.0-stage → 4.0.0

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;