🚨 Active Supply Chain Attack:node-ipc Package Compromised.Learn More
Socket
Book a DemoSign in
Socket

@rstack-dev/doc-ui

Package Overview
Dependencies
Maintainers
2
Versions
51
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rstack-dev/doc-ui - npm Package Compare versions

Comparing version
1.12.4
to
1.12.5
+9
-175
dist/benchmark/index.js
import './index.css';
import { jsx, jsxs } from "react/jsx-runtime";
import { useEffect, useInsertionEffect, useRef, useState } from "react";
import { motion } from "framer-motion";
var observerMap = /* @__PURE__ */ new Map();
var RootIds = /* @__PURE__ */ new WeakMap();
var rootId = 0;
var unsupportedValue;
function getRootId(root) {
if (!root) return "0";
if (RootIds.has(root)) return RootIds.get(root);
rootId += 1;
RootIds.set(root, rootId.toString());
return RootIds.get(root);
}
function optionsToId(options) {
return Object.keys(options).sort().filter((key)=>void 0 !== options[key]).map((key)=>`${key}_${"root" === key ? getRootId(options.root) : options[key]}`).toString();
}
function createObserver(options) {
const id = optionsToId(options);
let instance = observerMap.get(id);
if (!instance) {
const elements = /* @__PURE__ */ new Map();
let thresholds;
const observer = new IntersectionObserver((entries)=>{
entries.forEach((entry)=>{
var _a2;
const inView = entry.isIntersecting && thresholds.some((threshold)=>entry.intersectionRatio >= threshold);
if (options.trackVisibility && void 0 === entry.isVisible) entry.isVisible = inView;
null == (_a2 = elements.get(entry.target)) || _a2.forEach((callback)=>{
callback(inView, entry);
});
});
}, options);
thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [
options.threshold || 0
]);
instance = {
id,
observer,
elements
};
observerMap.set(id, instance);
}
return instance;
}
function observe(element, callback, options = {}, fallbackInView = unsupportedValue) {
if (void 0 === window.IntersectionObserver && void 0 !== fallbackInView) {
const bounds = element.getBoundingClientRect();
callback(fallbackInView, {
isIntersecting: fallbackInView,
target: element,
intersectionRatio: "number" == typeof options.threshold ? options.threshold : 0,
time: 0,
boundingClientRect: bounds,
intersectionRect: bounds,
rootBounds: bounds
});
return ()=>{};
}
const { id, observer, elements } = createObserver(options);
const callbacks = elements.get(element) || [];
if (!elements.has(element)) elements.set(element, callbacks);
callbacks.push(callback);
observer.observe(element);
return function() {
callbacks.splice(callbacks.indexOf(callback), 1);
if (0 === callbacks.length) {
elements.delete(element);
observer.unobserve(element);
}
if (0 === elements.size) {
observer.disconnect();
observerMap.delete(id);
}
};
}
function useInView({ threshold, delay, trackVisibility, rootMargin, root, triggerOnce, skip, initialInView, fallbackInView, onChange } = {}) {
var _a2;
const [ref, setRef] = useState(null);
const callback = useRef(onChange);
const lastInViewRef = useRef(initialInView);
const [state, setState] = useState({
inView: !!initialInView,
entry: void 0
});
callback.current = onChange;
useEffect(()=>{
if (void 0 === lastInViewRef.current) lastInViewRef.current = initialInView;
if (skip || !ref) return;
let unobserve;
unobserve = observe(ref, (inView, entry)=>{
const previousInView = lastInViewRef.current;
lastInViewRef.current = inView;
if (void 0 === previousInView && !inView) return;
setState({
inView,
entry
});
if (callback.current) callback.current(inView, entry);
if (entry.isIntersecting && triggerOnce && unobserve) {
unobserve();
unobserve = void 0;
}
}, {
root,
rootMargin,
threshold,
trackVisibility,
delay
}, fallbackInView);
return ()=>{
if (unobserve) unobserve();
};
}, [
Array.isArray(threshold) ? threshold.toString() : threshold,
ref,
root,
rootMargin,
triggerOnce,
skip,
trackVisibility,
fallbackInView,
delay
]);
const entryTarget = null == (_a2 = state.entry) ? void 0 : _a2.target;
const previousEntryTarget = useRef(void 0);
if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {
previousEntryTarget.current = entryTarget;
setState({
inView: !!initialInView,
entry: void 0
});
lastInViewRef.current = initialInView;
}
const result = [
setRef,
state.inView,
state.entry
];
result.ref = result[0];
result.inView = result[1];
result.entry = result[2];
return result;
}
const ProgressBar_module = {

@@ -153,18 +10,8 @@ container: "container-FuNiZu",

};
function formatTime(time, totalTime) {
if (totalTime < 1000) return `${time.toFixed(0)}ms`;
function formatTime(time) {
if (time < 1000) return `${time.toFixed(0)}ms`;
return `${(time / 1000).toFixed(2)}s`;
}
function ProgressBar({ value, max, desc, inView }) {
const [elapsedTime, setElapsedTime] = useState(0);
const TOTAL_TIME = 1000 * value;
const variants = {
initial: {
width: 0
},
animate: {
width: `${value / max * 100}%`
}
};
const formattedTime = formatTime(elapsedTime, TOTAL_TIME);
function ProgressBar({ value, max, desc }) {
const formattedTime = formatTime(1000 * value);
return /*#__PURE__*/ jsxs("div", {

@@ -175,16 +22,8 @@ className: ProgressBar_module.container,

className: ProgressBar_module.innerContainer,
children: inView ? /*#__PURE__*/ jsx(motion.div, {
children: /*#__PURE__*/ jsx("div", {
className: ProgressBar_module.bar,
initial: "initial",
animate: "animate",
variants: variants,
onUpdate: (latest)=>{
const width = Number.parseFloat(latest.width);
setElapsedTime(width * max * 10);
},
transition: {
duration: value,
ease: 'linear'
style: {
width: `${value / max * 100}%`
}
}) : null
})
}),

@@ -221,8 +60,4 @@ /*#__PURE__*/ jsxs("div", {

const maxTime = findMaxTime(data);
const { ref, inView } = useInView({
triggerOnce: true
});
return /*#__PURE__*/ jsx("div", {
className: index_module.root,
ref: ref,
children: Object.values(data).map((item)=>/*#__PURE__*/ jsxs("div", {

@@ -240,4 +75,3 @@ className: index_module.item,

max: maxTime,
desc: metric.desc,
inView: inView
desc: metric.desc
}, metric.desc))

@@ -244,0 +78,0 @@ })

+2
-3

@@ -1,7 +0,6 @@

export declare function formatTime(time: number, totalTime: number): string;
export declare function ProgressBar({ value, max, desc, inView, }: {
export declare function formatTime(time: number): string;
export declare function ProgressBar({ value, max, desc, }: {
value: number;
max: number;
desc: string;
inView: boolean;
}): import("react/jsx-runtime").JSX.Element;
{
"name": "@rstack-dev/doc-ui",
"version": "1.12.4",
"version": "1.12.5",
"type": "module",

@@ -73,5 +73,2 @@ "types": "./dist/index.d.ts",

},
"dependencies": {
"framer-motion": "^12.23.25"
},
"nano-staged": {

@@ -108,3 +105,2 @@ "*.{md,mdx,json,css,less,scss}": "prettier --write",

"react-dom": "^18.3.1",
"react-intersection-observer": "^10.0.0",
"rimraf": "~6.1.2",

@@ -111,0 +107,0 @@ "semver": "7.7.3",