react-ronin - npm Package Compare versions

Comparing version 2.3.4-dependabot-npm-and-yarn-all-c00fc9052f-experimental.0 to 2.3.4-dependabot-npm-and-yarn-all-cb23379df0-experimental.0

dist/components/image.client.d.ts

@@ -1,3 +0,3 @@
-import React from "react";
-import type { StoredObject } from "ronin/types";
+import React from 'react';
+import type { StoredObject } from 'ronin/types';
 export interface ImageProps {
@@ -23,3 +23,3 @@ /**
      */
-    format?: "webp" | "jpeg" | "png" | "original";
+    format?: 'webp' | 'jpeg' | 'png' | 'original';
     /**
@@ -49,7 +49,7 @@ * The value of a RONIN Blob field.
      */
-    fit?: React.CSSProperties["objectFit"];
+    fit?: React.CSSProperties['objectFit'];
     /**
      * The aspect ratio of the image. Can be "square", "video", or a custom string.
      */
-    aspect?: "square" | "video" | string;
+    aspect?: 'square' | 'video' | string;
     /**
@@ -64,3 +64,3 @@ * Indicates how the browser should load the image.
      */
-    loading?: "lazy";
+    loading?: 'lazy';
     /**
@@ -67,0 +67,0 @@ * The class names for the image container (not the image itself).

dist/components/image.client.js

@@ -1,10 +0,12 @@
-"use client";
+'use client';
 // We are purposefully importing `React` here, as the build output contains
 // references to it, and those would fail if we don't import it explicitly.
-import React, { useCallback, useRef, forwardRef } from "react";
-const supportedFitValues = ["fill", "contain", "cover"];
-const Image = forwardRef(({ src: input, alt, size: defaultSize, width: defaultWidth, height: defaultHeight, fit = "cover", format = "webp", quality = 80, aspect, loading, style, className, }, ref) => {
+// biome-ignore lint/style/useImportType: Explicitly importing `React` is intentional.
+import React from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
+const supportedFitValues = ['fill', 'contain', 'cover'];
+const Image = forwardRef(({ src: input, alt, size: defaultSize, width: defaultWidth, height: defaultHeight, fit = 'cover', format = 'webp', quality = 80, aspect, loading, style, className, }, ref) => {
     const imageElement = useRef(null);
     const renderTime = useRef(Date.now());
-    const isMediaObject = typeof input === "object" && input !== null;
+    const isMediaObject = typeof input === 'object' && input !== null;
     const width = defaultSize || defaultWidth;
@@ -19,4 +21,4 @@ const height = defaultSize || defaultHeight;
             imageElement.current?.animate([
-                { filter: "blur(4px)", opacity: 0 },
-                { filter: "blur(0px)", opacity: 1 },
+                { filter: 'blur(4px)', opacity: 0 },
+                { filter: 'blur(0px)', opacity: 1 },
             ], {
@@ -28,11 +30,11 @@ duration: 200,
     if (!height && !width)
-        throw new Error("Either `width`, `height`, or `size` must be defined for `Image`.");
+        throw new Error('Either `width`, `height`, or `size` must be defined for `Image`.');
     // Validate given `quality` property.
     if (quality && (quality < 0 || quality > 100))
-        throw new Error("The given `quality` was not in the range between 0 and 100.");
+        throw new Error('The given `quality` was not in the range between 0 and 100.');
     const optimizationParams = new URLSearchParams({
         ...(width ? { w: width.toString() } : {}),
         ...(height ? { h: height.toString() } : {}),
-        ...(format !== "original" ? { fm: format } : {}),
-        fit: supportedFitValues.includes(fit) ? fit : "cover",
+        ...(format !== 'original' ? { fm: format } : {}),
+        fit: supportedFitValues.includes(fit) ? fit : 'cover',
         q: quality.toString(),
@@ -43,4 +45,4 @@ });
         ...(height ? { h: (height * 2).toString() } : {}),
-        ...(format !== "original" ? { fm: format } : {}),
-        fit: supportedFitValues.includes(fit) ? fit : "cover",
+        ...(format !== 'original' ? { fm: format } : {}),
+        fit: supportedFitValues.includes(fit) ? fit : 'cover',
         q: quality.toString(),
@@ -53,22 +55,22 @@ });
         : input;
-    const placeholder = input && typeof input !== "string" ? input.placeholder?.base64 : null;
+    const placeholder = input && typeof input !== 'string' ? input.placeholder?.base64 : null;
     return (React.createElement("div", { ref: ref, className: className, style: {
-            position: "relative",
-            overflow: "hidden",
+            position: 'relative',
+            overflow: 'hidden',
             flexShrink: 0,
-            width: width || "100%",
-            height: height || "100%",
-            aspectRatio: aspect === "video" ? "16/9" : aspect === "square" ? "1/1" : "auto",
+            width: width || '100%',
+            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%",
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
                 objectFit: fit,
             }, src: placeholder, alt: alt })),
         React.createElement("img", { alt: alt, style: {
-                position: "absolute",
-                width: "100%",
-                height: "100%",
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
                 objectFit: fit,
@@ -75,0 +77,0 @@ }, decoding: "async", onLoad: onLoad, loading: loading, ref: imageElement, src: source, srcSet: responsiveSource })));

dist/components/rich-text.d.ts

@@ -1,4 +0,5 @@
-import React, { type ReactHTML } from "react";
+import type { ReactHTML, ReactNode } from 'react';
+import React from 'react';
 export type RichTextContent = {
-    type: "doc" | "paragraph" | "blockquote" | "codeBlock" | "bulletList" | "listItem" | "orderedList";
+    type: 'doc' | 'paragraph' | 'blockquote' | 'codeBlock' | 'bulletList' | 'listItem' | 'orderedList';
     content?: RichTextContent[];
@@ -9,3 +10,3 @@ attrs: {
 } | {
-    type: "codeBlock";
+    type: 'codeBlock';
     attrs: {
@@ -15,7 +16,7 @@ language: string | null;
     content?: {
-        type: "text";
+        type: 'text';
         text: string;
     }[];
 } | {
-    type: "heading";
+    type: 'heading';
     content?: RichTextContent[];
@@ -26,8 +27,8 @@ attrs: {
 } | {
-    type: "text";
+    type: 'text';
     text: string;
     marks?: ({
-        type: "bold" | "italic" | "code" | "link";
+        type: 'bold' | 'italic' | 'code' | 'link';
     } | {
-        type: "link";
+        type: 'link';
         attrs: {
@@ -44,3 +45,3 @@ href: string;
     components?: ReactHTML;
-}) => (string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined)[];
+}) => (string | number | boolean | Iterable<ReactNode> | React.JSX.Element | null | undefined)[];
 export default RichText;

dist/components/rich-text.js

@@ -1,6 +0,7 @@
-import React, {} from "react";
+// biome-ignore lint/correctness/noUnusedImports: Current file is a module.
+import React from 'react';
 const RichText = ({ data, components, }) => {
     const items = Array.isArray(data) ? data : [data];
     return items.map((item, position) => {
-        if (item.type === "text") {
+        if (item.type === 'text') {
             return (item.marks || []).reduce((final, mark) => {
@@ -10,14 +11,14 @@ let Element = null;
                 switch (mark.type) {
-                    case "bold":
-                        Element = components?.b || "b";
+                    case 'bold':
+                        Element = components?.b || 'b';
                         break;
-                    case "italic":
-                        Element = components?.i || "i";
+                    case 'italic':
+                        Element = components?.i || 'i';
                         break;
-                    case "code":
-                        Element = components?.code || "code";
+                    case 'code':
+                        Element = components?.code || 'code';
                         break;
-                    case "link":
-                        Element = components?.a || "a";
-                        if ("attrs" in mark) {
+                    case 'link':
+                        Element = components?.a || 'a';
+                        if ('attrs' in mark) {
                             attributes = {
@@ -35,3 +36,3 @@ // We're selecting these properties individually because the
                 const RenderingElement = Element;
-                return RenderingElement ? (React.createElement(RenderingElement, { ...attributes, key: (typeof RenderingElement === "string"
+                return RenderingElement ? (React.createElement(RenderingElement, { ...attributes, key: (typeof RenderingElement === 'string'
                         ? RenderingElement
@@ -41,3 +42,3 @@ : RenderingElement.name) + String(position) }, final)) : (final);
         }
-        const richtTextPrefix = "rich-text-";
+        const richtTextPrefix = 'rich-text-';
         let Element = null;
@@ -47,24 +48,24 @@ let children = item.content ? (React.createElement(RichText, { data: item.content, components: components, key: richtTextPrefix + String(position) })) : null;
         switch (item.type) {
-            case "doc":
-                Element = components?.div || "div";
+            case 'doc':
+                Element = components?.div || 'div';
                 break;
-            case "paragraph":
-                Element = components?.p || "p";
+            case 'paragraph':
+                Element = components?.p || 'p';
                 break;
-            case "blockquote":
-                Element = components?.blockquote || "blockquote";
+            case 'blockquote':
+                Element = components?.blockquote || 'blockquote';
                 break;
-            case "heading":
+            case 'heading':
                 if (item.attrs.level === 1)
-                    Element = components?.h1 || "h1";
+                    Element = components?.h1 || 'h1';
                 if (item.attrs.level === 2)
-                    Element = components?.h2 || "h2";
+                    Element = components?.h2 || 'h2';
                 if (item.attrs.level === 3)
-                    Element = components?.h3 || "h3";
+                    Element = components?.h3 || 'h3';
                 if (item.attrs.level === 4)
-                    Element = components?.h4 || "h4";
+                    Element = components?.h4 || 'h4';
                 break;
-            case "codeBlock":
+            case 'codeBlock':
                 {
-                    Element = components?.pre || "pre";
+                    Element = components?.pre || 'pre';
                     // Marks are not allowed within code blocks, so we can pick its text
@@ -74,24 +75,23 @@ // children directly, to avoid having to render React elements for
                     language =
-                        typeof item?.attrs.language === "undefined" ||
-                            item.attrs.language === "null" ||
+                        typeof item?.attrs.language === 'undefined' ||
+                            item.attrs.language === 'null' ||
                             item.attrs.language === null
-                            ? "plaintext"
+                            ? 'plaintext'
                             : item?.attrs.language;
                     const firstChild = item.content?.[0];
-                    children =
-                        firstChild && "text" in firstChild ? firstChild?.text : null;
+                    children = firstChild && 'text' in firstChild ? firstChild?.text : null;
                 }
                 break;
-            case "bulletList":
-                Element = components?.ul || "ul";
+            case 'bulletList':
+                Element = components?.ul || 'ul';
                 break;
-            case "listItem":
-                Element = components?.li || "li";
+            case 'listItem':
+                Element = components?.li || 'li';
                 break;
-            case "orderedList":
-                Element = components?.ol || "ol";
+            case 'orderedList':
+                Element = components?.ol || 'ol';
                 break;
         }
         const RenderingElement = Element;
-        return RenderingElement ? (React.createElement(RenderingElement, { key: (typeof RenderingElement === "string"
+        return RenderingElement ? (React.createElement(RenderingElement, { key: (typeof RenderingElement === 'string'
                 ? RenderingElement
@@ -98,0 +98,0 @@ : RenderingElement.name) + String(position), language: language }, children)) : (children);

dist/index.d.ts

@@ -1,4 +0,4 @@
-export * from "ronin";
-export { default } from "ronin";
-export { default as RichText } from "./components/rich-text";
-export { default as Image } from "./components/image.client";
+export * from 'ronin';
+export { default } from 'ronin';
+export { default as RichText } from './components/rich-text';
+export { default as Image } from './components/image.client';

dist/index.js

@@ -1,4 +0,4 @@
-export * from "ronin";
-export { default } from "ronin";
-export { default as RichText } from "./components/rich-text";
-export { default as Image } from "./components/image.client";
+export * from 'ronin';
+export { default } from 'ronin';
+export { default as RichText } from './components/rich-text';
+export { default as Image } from './components/image.client';

dist/types.d.ts

@@ -1,2 +0,2 @@
-export type * from "ronin/types";
-export type { RichTextContent } from "./components/rich-text";
+export type * from 'ronin/types';
+export type { RichTextContent } from './components/rich-text';

package.json

 {
   "name": "react-ronin",
-  "version": "2.3.4-dependabot-npm-and-yarn-all-c00fc9052f-experimental.0",
+  "version": "2.3.4-dependabot-npm-and-yarn-all-cb23379df0-experimental.0",
   "license": "Apache-2.0",
@@ -12,2 +12,3 @@ "main": "dist/index.js",
     "build": "tsc --project tsconfig.json",
+    "format": "bun x biome format --write .",
     "lint": "bun run lint:tsc && bun run lint:biome --",
@@ -57,14 +58,14 @@ "lint:biome": "biome check --apply .",
   "dependencies": {
-    "ronin": "4.3.0"
+    "ronin": "4.3.1"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.3",
-    "@types/bun": "1.1.8",
-    "@types/react": "18.3.5",
-    "@types/web": "0.0.159",
-    "husky": "9.1.5",
+    "@biomejs/biome": "1.9.3",
+    "@types/bun": "1.1.10",
+    "@types/react": "18.3.11",
+    "@types/web": "0.0.169",
+    "husky": "9.1.6",
     "lint-staged": "15.2.10",
-    "msw": "2.4.1",
+    "msw": "2.4.9",
     "react": "18.3.1",
-    "typescript": "5.5.4"
+    "typescript": "5.6.2"
   },
@@ -71,0 +72,0 @@ "peerDependencies": {

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

28664

increased by0.8%

Lines of code

299

increased by1.01%

Dependency changes

• + Addedronin@4.3.1(transitive)

• - Removedronin@4.3.0(transitive)

• Updatedronin@4.3.1