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

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

@@ -0,0 +1,26 @@
+declare const _default: {
+    placeholder: {
+        backgroundSize: string;
+        backgroundRepeat: string;
+        position: string;
+    };
+    img: {
+        width: string;
+        height: string;
+        maxWidth: string;
+        marginBottom: string;
+    };
+    icon: {
+        position: string;
+        top: string;
+        left: string;
+        transform: string;
+        textAlign: string;
+    };
+    noscript: {
+        position: string;
+        top: number;
+        left: number;
+    };
+};
+export default _default;

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

@@ -0,0 +1,8 @@
+export declare class UnfetchAbortController {
+    signal: {
+        onabort: () => void;
+    };
+    abort: () => void;
+    constructor();
+}
+export declare const unfetch: (url: any, options: any) => Promise<any>;

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

@@ -0,0 +1,2 @@
+import IdealImageWithDefaults from './components/IdealImageWithDefaults';
+export default IdealImageWithDefaults;

package/lib/theme/IdealImageLegacy/index.js

@@ -0,0 +1,2 @@
+import IdealImageWithDefaults from './components/IdealImageWithDefaults';
+export default IdealImageWithDefaults;

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@azerion/bunosaurus-plugin-ideal-image",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "4.0.0",
+  "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",
+  "scripts": {
+    "build": "tsc --build && copy-untyped-files && oxfmt \"lib/theme/**/*.js\"",
+    "watch": "run-p -c copy:watch build:watch",
+    "build:watch": "tsc --build --watch",
+    "copy:watch": "copy-untyped-files --watch"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/azerion/bunosaurus.git",
+    "directory": "packages/docusaurus-plugin-ideal-image"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@docusaurus/core": "npm:@azerion/bunosaurus-core@4.0.0",
+    "@docusaurus/lqip-loader": "npm:@azerion/bunosaurus-lqip-loader@4.0.0",
+    "@docusaurus/responsive-loader": "^1.7.1",
+    "@docusaurus/theme-translations": "npm:@azerion/bunosaurus-theme-translations@4.0.0",
+    "@docusaurus/types": "npm:@azerion/bunosaurus-types@4.0.0",
+    "@docusaurus/utils-validation": "npm:@azerion/bunosaurus-utils-validation@4.0.0",
+    "sharp": "^0.35.1",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "npm:@azerion/bunosaurus-module-type-aliases@4.0.0"
+  },
+  "peerDependencies": {
+    "jimp": "^1.6.1",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0"
+  },
+  "peerDependenciesMeta": {
+    "jimp": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "bun": ">=1.4.1"
+  }
+}

package/src/index.ts

@@ -0,0 +1,94 @@
+/**
+ * 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.
+ */
+
+import {Joi} from '@docusaurus/utils-validation';
+import {readDefaultCodeTranslationMessages} from '@docusaurus/theme-translations';
+import type {
+  LoadContext,
+  Plugin,
+  OptionValidationContext,
+} from '@docusaurus/types';
+import type {PluginOptions} from '@docusaurus/plugin-ideal-image';
+
+export default function pluginIdealImage(
+  context: LoadContext,
+  options: PluginOptions,
+): Plugin<void> {
+  const {
+    i18n: {currentLocale},
+  } = context;
+
+  return {
+    name: 'docusaurus-plugin-ideal-image',
+
+    getThemePath() {
+      return '../lib/theme';
+    },
+
+    getTypeScriptThemePath() {
+      return '../src/theme';
+    },
+
+    getDefaultCodeTranslationMessages() {
+      return readDefaultCodeTranslationMessages({
+        locale: currentLocale,
+        name: 'plugin-ideal-image',
+      });
+    },
+
+    configureWebpack(_config, isServer) {
+      const {disableInDev, ...loaderOptions} = options;
+      if (disableInDev && process.env.NODE_ENV !== 'production') {
+        return {};
+      }
+
+      return {
+        mergeStrategy: {
+          'module.rules': 'prepend',
+        },
+        module: {
+          rules: [
+            {
+              test: /\.(?:png|jpe?g)$/i,
+              with: {type: {not: 'text'}},
+              // 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'),
+                {
+                  loader: require.resolve('@docusaurus/responsive-loader'),
+                  options: {
+                    // Don't emit for server-side rendering
+                    emitFile: !isServer,
+                    // eslint-disable-next-line @typescript-eslint/no-require-imports
+                    adapter: require('@docusaurus/responsive-loader/sharp'),
+                    name: 'assets/ideal-img/[name].[hash:hex:7].[width].[ext]',
+                    ...loaderOptions,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      };
+    },
+  };
+}
+
+export function validateOptions({
+  validate,
+  options,
+}: OptionValidationContext<PluginOptions, PluginOptions>): PluginOptions {
+  const pluginOptionsSchema = Joi.object<PluginOptions>({
+    disableInDev: Joi.boolean().default(true),
+  }).unknown();
+  return validate(pluginOptionsSchema, options);
+}

package/src/plugin-ideal-image.d.ts

@@ -0,0 +1,199 @@
+/**
+ * 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.
+ */
+
+/// <reference types="@docusaurus/module-type-aliases" />
+
+declare module '@docusaurus/plugin-ideal-image' {
+  export type PluginOptions = {
+    /**
+     * Filename template for output files.
+     */
+    name?: string;
+    /**
+     * Specify all widths you want to use; if a specified size exceeds the
+     * original image's width, the latter will be used (i.e. images won't be
+     * scaled up).
+     */
+    sizes?: number[];
+    /**
+     * Specify one width you want to use; if the specified size exceeds the
+     * original image's width, the latter will be used (i.e. images won't be
+     * scaled up)
+     */
+    size?: number;
+    /**
+     * As an alternative to manually specifying `sizes`, you can specify `min`,
+     * `max` and `steps`, and the `sizes` will be generated for you.
+     */
+    min?: number;
+    /**
+     * @see {@link PluginOptions.min}
+     */
+    max?: number;
+    /**
+     * Configure the number of images generated between `min` and `max`
+     * (inclusive)
+     */
+    steps?: number;
+    /**
+     * JPEG compression quality
+     */
+    quality?: number;
+    /**
+     * You can test ideal image behavior in dev mode by setting this to `false`.
+     * Tip: use network throttling in your browser to simulate slow networks.
+     */
+    disableInDev?: boolean;
+  };
+
+  export type Options = Partial<PluginOptions>;
+}
+
+declare module '@theme/IdealImage' {
+  import type {ComponentProps, ReactNode} from 'react';
+
+  export type SrcType = {
+    width: number;
+    path?: string;
+    size?: number;
+    format?: 'webp' | 'jpeg' | 'png' | 'gif';
+  };
+
+  export type SrcImage = {
+    height?: number;
+    width?: number;
+    preSrc: string;
+    src: string;
+    images: SrcType[];
+  };
+
+  export interface Props extends ComponentProps<'img'> {
+    readonly img: {default: string} | {src: SrcImage; preSrc: string} | string;
+  }
+  export default function IdealImage(props: Props): ReactNode;
+}
+
+declare module '@theme/IdealImageLegacy' {
+  /**
+   * @see https://github.com/endiliey/react-ideal-image/blob/master/index.d.ts
+   * Note: the original type definition is WRONG. getIcon & getMessage receive
+   * full state object.
+   */
+
+  import type {
+    ComponentProps,
+    ComponentType,
+    CSSProperties,
+    ReactNode,
+  } from 'react';
+
+  export type LoadingState = 'initial' | 'loading' | 'loaded' | 'error';
+
+  export type State = {
+    pickedSrc: {
+      size: number;
+    };
+    loadInfo: 404 | null;
+    loadState: LoadingState;
+  };
+
+  export type IconKey =
+    | 'load'
+    | 'loading'
+    | 'loaded'
+    | 'error'
+    | 'noicon'
+    | 'offline';
+
+  export type SrcType = {
+    width: number;
+    src?: string;
+    size?: number;
+    format?: 'webp' | 'jpeg' | 'png' | 'gif';
+  };
+
+  type ThemeKey = 'placeholder' | 'img' | 'icon' | 'noscript';
+
+  export interface ImageProps extends Omit<
+    ComponentProps<'img'>,
+    'srcSet' | 'placeholder'
+  > {
+    /**
+     * This function decides what icon to show based on the current state of the
+     * component.
+     */
+    getIcon?: (state: State) => IconKey;
+    /**
+     * This function decides what message to show based on the icon (returned
+     * from `getIcon` prop) and the current state of the component.
+     */
+    getMessage?: (icon: IconKey, state: State) => string | null;
+    /**
+     * This function is called as soon as the component enters the viewport and
+     * is used to generate urls based on width and format if `props.srcSet`
+     * doesn't provide `src` field.
+     */
+    getUrl?: (srcType: SrcType) => string;
+    /**
+     * The Height of the image in px.
+     */
+    height: number;
+    /**
+     * This provides a map of the icons. By default, the component uses icons
+     * from material design, Implemented as React components with the SVG
+     * element. You can customize icons
+     */
+    icons?: Partial<{[icon in IconKey]: ComponentType}>;
+    /**
+     * This prop takes one of the 2 options, xhr and image.
+     * Read more about it:
+     * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#cancel-download
+     */
+    loader?: 'xhr' | 'image';
+    /**
+     * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#lqip
+     */
+    placeholder: {color: string} | {lqip: string};
+    /**
+     * This function decides if image should be downloaded automatically. The
+     * default function returns false for a 2g network, for a 3g network it
+     * decides based on `props.threshold` and for a 4g network it returns true
+     * by default.
+     */
+    shouldAutoDownload?: (options: {
+      connection?: 'slow-2g' | '2g' | '3g' | '4g';
+      size?: number;
+      threshold?: number;
+      possiblySlowNetwork?: boolean;
+    }) => boolean;
+    /**
+     * This provides an array of sources of different format and size of the
+     * image. Read more about it:
+     * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#srcset
+     */
+    srcSet: SrcType[];
+    /**
+     * This provides a theme to the component. By default, the component uses
+     * inline styles, but it is also possible to use CSS modules and override
+     * all styles.
+     */
+    theme?: Partial<{[key in ThemeKey]: string | CSSProperties}>;
+    /**
+     * Tells how much to wait in milliseconds until consider the download to be
+     * slow.
+     */
+    threshold?: number;
+    /**
+     * Width of the image in px.
+     */
+    width: number;
+  }
+
+  export interface Props extends ImageProps {}
+
+  export default function IdealImageLegacy(props: ImageProps): ReactNode;
+}