almost working

Author: slorber

.eslintignore

@@ -22,3 +22,6 @@ packages/create-docusaurus/templates/facebook
 
 website/_dogfooding/_swizzle_theme_tests
 website/_dogfooding/_asset-tests/badSyntax.js
+
+
+packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy

packages/docusaurus-plugin-ideal-image/package.json

@@ -26,7 +26,6 @@
     "@docusaurus/theme-translations": "3.7.0",
     "@docusaurus/types": "3.7.0",
     "@docusaurus/utils-validation": "3.7.0",
-    "@slorber/react-ideal-image": "^0.0.14",
     "react-waypoint": "^10.3.0",
     "sharp": "^0.32.3",
     "tslib": "^2.6.0",

packages/docusaurus-plugin-ideal-image/src/deps.d.ts

@@ -51,6 +51,17 @@ declare module '@docusaurus/plugin-ideal-image' {
   export type Options = Partial<PluginOptions>;
 }
 
+declare module '@theme/IdealImageLegacy' {
+  import type {ReactNode} from 'react';
+  import type {ImageProps} from './theme/IdealImageLegacy/types';
+
+  export type {IconKey, State} from './theme/IdealImageLegacy/types';
+
+  export interface Props extends ImageProps {}
+
+  export default function IdealImageLegacy(props: ImageProps): ReactNode;
+}
+
 declare module '@theme/IdealImage' {
   import type {ComponentProps, ReactNode} from 'react';
 

packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts

@@ -6,11 +6,11 @@
  */
 
 import React, {type ReactNode} from 'react';
+import {translate} from '@docusaurus/Translate';
 import ReactIdealImage, {
   type IconKey,
   type State,
-} from '@slorber/react-ideal-image';
-import {translate} from '@docusaurus/Translate';
+} from '@theme/IdealImageLegacy';
 
 import type {Props} from '@theme/IdealImage';
 
@@ -93,7 +93,6 @@ export default function IdealImage(props: Props): ReactNode {
 
   return (
     <ReactIdealImage
-      {...propsRest}
       height={img.src.height ?? 100}
       width={img.src.width ?? 100}
       placeholder={{lqip: img.preSrc}}

packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2017 stereobooster
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/LICENSE

@@ -0,0 +1,13 @@
+# Legacy React IdealImage lib
+
+This is legacy code from an npm package we forked, then internalized
+
+See also:
+
+- https://github.com/slorber/docusaurus-react-ideal-image
+- https://github.com/endiliey/react-ideal-image
+- https://github.com/stereobooster/react-ideal-image
+
+---
+
+TODO: we need to clean it up, remove what we don't need, and maintain it up to date

packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/README.md

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Download icon Should render a snapshot that is good 1`] = `
+<svg
+  height={24}
+  viewBox="0 0 24 24"
+  width={24}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M0 0h24v24H0z"
+    fill="none"
+  />
+  <path
+    d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"
+    fill="#000"
+  />
+</svg>
+`;
+
+exports[`Loading icon Should render a snapshot that is good 1`] = `
+<svg
+  height={24}
+  viewBox="0 0 24 24"
+  width={24}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M0 0h24v24H0z"
+    fill="none"
+  />
+  <path
+    d="M6,2V8H6V8L10,12L6,16V16H6V22H18V16H18V16L14,12L18,8V8H18V2H6M16,16.5V20H8V16.5L12,12.5L16,16.5M12,11.5L8,7.5V4H16V7.5L12,11.5Z"
+    fill="#000"
+  />
+</svg>
+`;
+
+exports[`Offline icon Should render a snapshot that is good 1`] = `
+<svg
+  height={24}
+  viewBox="0 0 24 24"
+  width={24}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M0 0h24v24H0z"
+    fill="none"
+  />
+  <path
+    d="M19.35 10.04C18.67 6.59 15.64 4 12 4c-1.48 0-2.85.43-4.01 1.17l1.46 1.46C10.21 6.23 11.08 6 12 6c3.04 0 5.5 2.46 5.5 5.5v.5H19c1.66 0 3 1.34 3 3 0 1.13-.64 2.11-1.56 2.62l1.45 1.45C23.16 18.16 24 16.68 24 15c0-2.64-2.05-4.78-4.65-4.96zM3 5.27l2.75 2.74C2.56 8.15 0 10.77 0 14c0 3.31 2.69 6 6 6h11.73l2 2L21 20.73 4.27 4 3 5.27zM7.73 10l8 8H6c-2.21 0-4-1.79-4-4s1.79-4 4-4h1.73z"
+    fill="#000"
+  />
+</svg>
+`;
+
+exports[`Warning icon Should render a snapshot that is good 1`] = `
+<svg
+  height={24}
+  viewBox="0 0 24 24"
+  width={24}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M0 0h24v24H0z"
+    fill="none"
+  />
+  <path
+    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+    fill="#000"
+  />
+</svg>
+`;

packages/docusaurus-plugin-ideal-image/src/theme/IdealImageLegacy/__tests__/__snapshots__/icon.js.snap

@@ -0,0 +1,32 @@
+import compose from '../components/composeStyle';
+
+describe('composeStyle', () => {
+  it('Should combine object classes into one className string', () => {
+    const theme = {
+      base: 'base',
+      element: 'base__element',
+    };
+    const result = compose(theme.base, theme.element);
+    expect(result.className).toEqual(`${theme.base} ${theme.element}`);
+  });
+
+  it('Should return a styles object unmodified', () => {
+    const style = {
+      color: 'blue',
+      margin: '1em 0',
+    };
+    const result = compose(style);
+    const expected = style;
+    expect(result.style).toEqual(expected);
+  });
+
+  it('Should throw an error if given a parameter not an object or string', () => {
+    const number = 1;
+    try {
+      compose(number);
+      expect(true).toBe(false);
+    } catch (e) {
+      expect(e.message).toBe(`Unexpected value ${number}`);
+    }
+  });
+});