@rstack-dev/doc-ui
Advanced tools
+9
-175
| 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 @@ }) |
@@ -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; |
+1
-5
| { | ||
| "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", |
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 2 instances in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
0
-100%27
-3.57%1708824
-0.35%39396
-0.42%- Removed
- Removed
- Removed
- Removed
- Removed