react-ronin - npm Package Compare versions

Comparing version 2.2.6 to 2.2.7-add-fit-aspect-experimental.0

dist/components/image.client.d.ts

 /// <reference types="web" />
-import React from "react";
+import { type CSSProperties } from "react";
 import type { StoredObject } from "ronin/types";
@@ -37,2 +37,10 @@ export interface ImageProps {
     /**
+     * Specifies how the image should be resized to fit its container.
+     */
+    fit?: CSSProperties["objectFit"];
+    /**
+     * The aspect ratio of the image. Can be "square", "video", or a custom string.
+     */
+    aspect?: "square" | "video" | string;
+    /**
      * Indicates how the browser should load the image.
@@ -55,5 +63,5 @@ *
      */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 }
-declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>;
+declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Image;

dist/components/image.client.js

 "use client";
-import React, { useCallback, useRef, forwardRef } from "react";
-const Image = forwardRef(({ src: input, alt, size: defaultSize, width: defaultWidth, height: defaultHeight, quality, loading, style, className, }, ref) => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, forwardRef } from "react";
+const supportedFitValues = ["fill", "contain", "cover"];
+const Image = forwardRef(({ src: input, alt, size: defaultSize, width: defaultWidth, height: defaultHeight, fit = "cover", aspect, quality, loading, style, className, }, ref) => {
     const imageElement = useRef(null);
@@ -9,2 +11,16 @@ const renderTime = useRef(Date.now());
     const height = defaultSize || defaultHeight;
+    const onLoad = useCallback(() => {
+        const duration = Date.now() - renderTime.current;
+        const threshold = 150;
+        // Fade in and gradually reduce blur of the real image if loading takes
+        // longer than the specified threshold.
+        if (duration > threshold) {
+            imageElement.current?.animate([
+                { filter: "blur(4px)", opacity: 0 },
+                { filter: "blur(0px)", opacity: 1 },
+            ], {
+                duration: 200,
+            });
+        }
+    }, []);
     if (!height && !width)
@@ -18,2 +34,3 @@ throw new Error("Either `width`, `height`, or `size` must be defined for `Image`.");
         ...(height ? { h: height.toString() } : {}),
+        fit: supportedFitValues.includes(fit) ? fit : "cover",
         q: quality ? quality.toString() : "100",
@@ -24,2 +41,3 @@ });
         ...(height ? { h: (height * 2).toString() } : {}),
+        fit: supportedFitValues.includes(fit) ? fit : "cover",
         q: quality ? quality.toString() : "100",
@@ -33,17 +51,3 @@ });
     const placeholder = input && typeof input !== "string" ? input.placeholder?.base64 : null;
-    const onLoad = useCallback(() => {
-        const duration = Date.now() - renderTime.current;
-        const threshold = 150;
-        // Fade in and gradually reduce blur of the real image if loading takes
-        // longer than the specified threshold.
-        if (duration > threshold) {
-            imageElement.current?.animate([
-                { filter: "blur(4px)", opacity: 0 },
-                { filter: "blur(0px)", opacity: 1 },
-            ], {
-                duration: 200,
-            });
-        }
-    }, []);
-    return (React.createElement("div", { ref: ref, className: className, style: {
+    return (_jsxs("div", { ref: ref, className: className, style: {
             position: "relative",
@@ -54,12 +58,16 @@ overflow: "hidden",
             height: height || "100%",
+            aspectRatio: aspect === "video" ? "16/9" : aspect === "square" ? "1/1" : "auto",
             ...style,
-        } },
-        placeholder && (React.createElement("img", { style: { position: "absolute", width: "100%", height: "100%" }, src: placeholder, alt: alt })),
-        React.createElement("img", { alt: alt, style: {
-                position: "absolute",
-                width: "100%",
-                height: "100%",
-                objectFit: "cover",
-            }, decoding: "async", onLoad: onLoad, loading: loading, ref: imageElement, src: source, srcSet: responsiveSource })));
+        }, children: [placeholder && (_jsx("img", { style: {
+                    position: "absolute",
+                    width: "100%",
+                    height: "100%",
+                    objectFit: fit,
+                }, src: placeholder, alt: alt })), _jsx("img", { alt: alt, style: {
+                    position: "absolute",
+                    width: "100%",
+                    height: "100%",
+                    objectFit: fit,
+                }, decoding: "async", onLoad: onLoad, loading: loading, ref: imageElement, src: source, srcSet: responsiveSource })] }));
 });
 export default Image;

dist/components/rich-text.d.ts

@@ -1,2 +0,2 @@
-import React, { type ReactHTML } from "react";
+import type { ReactHTML, ReactNode } from "react";
 export type RichTextContent = {
@@ -41,3 +41,3 @@ type: "doc" | "paragraph" | "blockquote" | "codeBlock" | "bulletList" | "listItem";
     components?: ReactHTML;
-}) => (string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined)[];
+}) => (string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined)[];
 export default RichText;

dist/components/rich-text.js

@@ -1,2 +0,2 @@
-import React, {} from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 const RichText = ({ data, components, }) => {
@@ -34,7 +34,7 @@ const items = Array.isArray(data) ? data : [data];
                 const RenderingElement = Element;
-                return RenderingElement ? (React.createElement(RenderingElement, { ...attributes }, final)) : (final);
+                return RenderingElement ? (_jsx(RenderingElement, { ...attributes, children: final })) : (final);
             }, item.text);
         }
         let Element = null;
-        let children = item.content ? (React.createElement(RichText, { data: item.content, components: components })) : null;
+        let children = item.content ? (_jsx(RichText, { data: item.content, components: components })) : null;
         let language = "plaintext";
@@ -86,7 +86,7 @@ switch (item.type) {
         const RenderingElement = Element;
-        return RenderingElement ? (React.createElement(RenderingElement, { key: (typeof RenderingElement === "string"
-                ? RenderingElement
-                : RenderingElement.name) + String(position), language: language }, children)) : (children);
+        return RenderingElement ? (_jsx(RenderingElement, { language: language, children: children }, (typeof RenderingElement === "string"
+            ? RenderingElement
+            : RenderingElement.name) + String(position))) : (children);
     });
 };
 export default RichText;

package.json

 {
   "name": "react-ronin",
-  "version": "2.2.6",
+  "version": "2.2.7-add-fit-aspect-experimental.0",
   "license": "Apache-2.0",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27727

increased by2.84%

Lines of code

276

increased by6.15%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes