@yamada-ui/image - npm Package Compare versions

Comparing version 0.0.0-dev-20230625235915 to 0.0.0-dev-20230701130255

dist/image.d.ts

@@ -1,4 +0,30 @@
-import '@yamada-ui/core';
-import 'react';
-export { Image, ImageProps } from './index.js';
-import './use-image.js';
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, CSSUIProps } from '@yamada-ui/core';
+import { ReactElement } from 'react';
+import { UseImageProps } from './use-image.js';
+
+type ImageOptions = {
+    /**
+     * Fallback image `src` or element to show if image is loading or image fails.
+     */
+    fallback?: string | ReactElement;
+    /**
+     * - beforeLoadOrError: loads the fallbackImage while loading the src.
+     * - onError: loads the fallbackImage only if there is an error fetching the src.
+     *
+     * @default "beforeLoadOrError"
+     */
+    fallbackStrategy?: 'onError' | 'beforeLoadOrError';
+    /**
+     * The CSS `box-size` property.
+     */
+    size?: CSSUIProps['boxSize'];
+    /**
+     * The CSS `object-fit` property.
+     */
+    fit?: CSSUIProps['objectFit'];
+};
+type ImageProps = Omit<HTMLUIProps<'img'>, keyof UseImageProps> & UseImageProps & ImageOptions;
+declare const Image: _yamada_ui_core.Component<"img", ImageProps>;
+
+export { Image, ImageProps };

dist/image.js

@@ -112,3 +112,3 @@ "use strict";
   ignoreFallback = loading != null || ignoreFallback || !fallback;
-  const status = useImage({ ...props, ignoreFallback });
+  const status = useImage({ ...props, crossOrigin, ignoreFallback });
   const css = (0, import_react2.useMemo)(() => ({ boxSize, objectFit }), [boxSize, objectFit]);
@@ -115,0 +115,0 @@ const isFallbackImage = shouldShowFallbackImage(status, fallbackStrategy);

dist/index.d.ts

@@ -1,16 +0,4 @@
-import { UseImageProps, FallbackStrategy } from './use-image.js';
-export { UseImageReturn, shouldShowFallbackImage, useImage } from './use-image.js';
-import * as _yamada_ui_core from '@yamada-ui/core';
-import { HTMLUIProps, CSSUIProps } from '@yamada-ui/core';
-import { ReactElement } from 'react';
-
-type ImageOptions = {
-    fallback?: string | ReactElement;
-    fallbackStrategy?: FallbackStrategy;
-    size?: CSSUIProps['boxSize'];
-    fit?: CSSUIProps['objectFit'];
-};
-type ImageProps = Omit<HTMLUIProps<'img'>, keyof UseImageProps> & UseImageProps & ImageOptions;
-declare const Image: _yamada_ui_core.Component<"img", ImageProps>;
-
-export { FallbackStrategy, Image, ImageProps, UseImageProps };
+export { Image, ImageProps } from './image.js';
+export { UseImageProps, UseImageReturn, useImage } from './use-image.js';
+import '@yamada-ui/core';
+import 'react';

dist/index.js

@@ -24,3 +24,2 @@ "use strict";
   Image: () => Image2,
-  shouldShowFallbackImage: () => shouldShowFallbackImage,
   useImage: () => useImage
@@ -32,59 +31,8 @@ });
 var import_core = require("@yamada-ui/core");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/use-image.ts
 var import_utils = require("@yamada-ui/utils");
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Image2 = (0, import_core.forwardRef)((props, ref) => {
-  let {
-    fallback,
-    src,
-    srcSet,
-    fit,
-    loading,
-    ignoreFallback,
-    crossOrigin,
-    fallbackStrategy = "beforeLoadOrError",
-    referrerPolicy,
-    size: boxSize,
-    fit: objectFit,
-    ...rest
-  } = props;
-  ignoreFallback = loading != null || ignoreFallback || !fallback;
-  const status = useImage({ ...props, ignoreFallback });
-  const css = (0, import_react.useMemo)(() => ({ boxSize, objectFit }), [boxSize, objectFit]);
-  const isFallbackImage = shouldShowFallbackImage(status, fallbackStrategy);
-  if (isFallbackImage) {
-    if ((0, import_react.isValidElement)(fallback)) {
-      return fallback;
-    } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_core.ui.img,
-        {
-          ref,
-          className: "ui-image-fallback",
-          src: fallback,
-          __css: css,
-          ...ignoreFallback ? rest : (0, import_utils.omitObject)(rest, ["onError", "onLoad"])
-        }
-      );
-    }
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_core.ui.img,
-    {
-      ref,
-      src,
-      srcSet,
-      crossOrigin,
-      loading,
-      referrerPolicy,
-      className: "ui-image",
-      __css: css,
-      ...ignoreFallback ? rest : (0, import_utils.omitObject)(rest, ["onError", "onLoad"])
-    }
-  );
-});
-
-// src/use-image.ts
-var import_utils2 = require("@yamada-ui/utils");
-var import_react2 = require("react");
 var shouldShowFallbackImage = (status, fallbackStrategy) => status !== "loaded" && fallbackStrategy === "beforeLoadOrError" || status === "failed" && fallbackStrategy === "onError";
@@ -101,8 +49,8 @@ var useImage = ({
 }) => {
-  const [status, setStatus] = (0, import_react2.useState)("pending");
-  (0, import_react2.useEffect)(() => {
+  const [status, setStatus] = (0, import_react.useState)("pending");
+  (0, import_react.useEffect)(() => {
     setStatus(src ? "loading" : "pending");
   }, [src]);
-  const imageRef = (0, import_react2.useRef)();
-  const load = (0, import_react2.useCallback)(() => {
+  const imageRef = (0, import_react.useRef)();
+  const load = (0, import_react.useCallback)(() => {
     if (!src)
@@ -140,3 +88,3 @@ return;
   };
-  (0, import_utils2.useSafeLayoutEffect)(() => {
+  (0, import_utils.useSafeLayoutEffect)(() => {
     if (ignoreFallback)
@@ -152,7 +100,59 @@ return;
 };
+
+// src/image.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Image2 = (0, import_core.forwardRef)((props, ref) => {
+  let {
+    fallback,
+    src,
+    srcSet,
+    fit,
+    loading,
+    ignoreFallback,
+    crossOrigin,
+    fallbackStrategy = "beforeLoadOrError",
+    referrerPolicy,
+    size: boxSize,
+    fit: objectFit,
+    ...rest
+  } = props;
+  ignoreFallback = loading != null || ignoreFallback || !fallback;
+  const status = useImage({ ...props, crossOrigin, ignoreFallback });
+  const css = (0, import_react2.useMemo)(() => ({ boxSize, objectFit }), [boxSize, objectFit]);
+  const isFallbackImage = shouldShowFallbackImage(status, fallbackStrategy);
+  if (isFallbackImage) {
+    if ((0, import_react2.isValidElement)(fallback)) {
+      return fallback;
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_core.ui.img,
+        {
+          ref,
+          className: "ui-image-fallback",
+          src: fallback,
+          __css: css,
+          ...ignoreFallback ? rest : (0, import_utils2.omitObject)(rest, ["onError", "onLoad"])
+        }
+      );
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.ui.img,
+    {
+      ref,
+      src,
+      srcSet,
+      crossOrigin,
+      loading,
+      referrerPolicy,
+      className: "ui-image",
+      __css: css,
+      ...ignoreFallback ? rest : (0, import_utils2.omitObject)(rest, ["onError", "onLoad"])
+    }
+  );
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Image,
-  shouldShowFallbackImage,
   useImage
 });

dist/use-image.d.ts

@@ -5,17 +5,43 @@ import { ImgHTMLAttributes } from 'react';
 type UseImageProps = {
+    /**
+     * The image `src` attribute.
+     */
     src?: string;
+    /**
+     * The image `srcset` attribute.
+     */
     srcSet?: string;
+    /**
+     * The image `sizes` attribute.
+     */
     sizes?: string;
+    /**
+     * A callback for when the image `src` has been loaded.
+     */
     onLoad?: HTMLImageElementProps['onLoad'];
+    /**
+     * A callback for when there was an error loading the image `src`.
+     */
     onError?: HTMLImageElementProps['onError'];
+    /**
+     * If `true`, opt out of the `fallbackSrc` logic and use as `img`.
+     *
+     * @default false
+     */
     ignoreFallback?: boolean;
+    /**
+     * The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded.
+     * This tells the browser to request cross-origin access when trying to download the image data.
+     */
     crossOrigin?: HTMLImageElementProps['crossOrigin'];
+    /**
+     * The image `loading` attribute.
+     */
     loading?: HTMLImageElementProps['loading'];
 };
 type Status = 'loading' | 'failed' | 'pending' | 'loaded';
-type FallbackStrategy = 'onError' | 'beforeLoadOrError';
-declare const shouldShowFallbackImage: (status: Status, fallbackStrategy: FallbackStrategy) => boolean;
+declare const shouldShowFallbackImage: (status: Status, fallbackStrategy: 'onError' | 'beforeLoadOrError') => boolean;
 declare const useImage: ({ loading, src, srcSet, onLoad, onError, crossOrigin, sizes, ignoreFallback, }: UseImageProps) => Status;
 type UseImageReturn = ReturnType<typeof useImage>;
 
-export { FallbackStrategy, UseImageProps, UseImageReturn, shouldShowFallbackImage, useImage };
+export { UseImageProps, UseImageReturn, shouldShowFallbackImage, useImage };

package.json

 {
   "name": "@yamada-ui/image",
-  "version": "0.0.0-dev-20230625235915",
+  "version": "0.0.0-dev-20230701130255",
   "description": "Yamada UI media and image component",
@@ -38,3 +38,3 @@ "keywords": [
   "dependencies": {
-    "@yamada-ui/core": "0.0.0-dev-20230625235915",
+    "@yamada-ui/core": "0.0.0-dev-20230701130255",
     "@yamada-ui/utils": "0.1.1"
@@ -74,4 +74,4 @@ },
     "typecheck": "tsc --noEmit",
-    "gen:types": "tsx ../../../scripts/generate-types"
+    "gen:docs": "tsx ../../../scripts/generate-docs"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21129

increased by4.54%

Lines of code

617

increased by6.38%

Dependency changes

• + Added@yamada-ui/core@0.0.0-dev-20230701130255(transitive)

• + Added@yamada-ui/portal@0.0.0-dev-20230701130255(transitive)

• - Removed@yamada-ui/core@0.0.0-dev-20230625235915(transitive)

• - Removed@yamada-ui/portal@0.1.2(transitive)

• Updated@yamada-ui/core@0.0.0-dev-20230701130255