Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-ronin

Package Overview
Dependencies
Maintainers
0
Versions
103
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-ronin - npm Package Compare versions

Comparing version 2.3.4-dependabot-npm-and-yarn-all-e1f480a424-experimental.0 to 2.3.4-dependabot-npm-and-yarn-all-f635da7422-experimental.0

12

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).

@@ -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 })));

@@ -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;

@@ -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);

@@ -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';

@@ -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';

@@ -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';
{
"name": "react-ronin",
"version": "2.3.4-dependabot-npm-and-yarn-all-e1f480a424-experimental.0",
"version": "2.3.4-dependabot-npm-and-yarn-all-f635da7422-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.1"
"ronin": "4.4.1"
},
"devDependencies": {
"@biomejs/biome": "1.8.3",
"@types/bun": "1.1.8",
"@types/react": "18.3.5",
"@types/web": "0.0.162",
"husky": "9.1.5",
"@biomejs/biome": "1.9.4",
"@types/bun": "1.1.12",
"@types/react": "18.3.12",
"@types/web": "0.0.175",
"husky": "9.1.6",
"lint-staged": "15.2.10",
"msw": "2.4.4",
"msw": "2.6.0",
"react": "18.3.1",
"typescript": "5.5.4"
"typescript": "5.6.3"
},

@@ -71,0 +72,0 @@ "peerDependencies": {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc