@lobehub/ui 1.138.6 → 1.138.7

package/es/LogoThree/LogoSpline.d.ts

@@ -1,5 +1,5 @@
-import { type SplineProps } from '@splinetool/react-spline';
 import { CSSProperties } from 'react';
+import { type SplineProps } from "../Spline";
 export interface LogoSplineProps extends Partial<SplineProps> {
     className?: string;
     height?: number | string;

package/es/LogoThree/LogoSpline.js

@@ -2,9 +2,9 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "style", "width", "height", "onLoad"];
-import Spline from '@splinetool/react-spline';
 import { useThemeMode } from 'antd-style';
 import { memo, useState } from 'react';
+import Spline from "../Spline";
 import Loading from "./Loading";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/LogoThree/index.d.ts

@@ -1,5 +1,5 @@
-import { type SplineProps } from '@splinetool/react-spline';
 import { CSSProperties } from 'react';
+import { type SplineProps } from "../Spline";
 export interface LogoThreeProps extends Partial<SplineProps> {
     className?: string;
     size?: number;

package/es/LogoThree/index.js

@@ -4,12 +4,12 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "style", "size", "onLoad"];
-import Spline from '@splinetool/react-spline';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { useCdnFn } from "../ConfigProvider";
 import Img from "../Img";
 import { LOGO_3D } from "../Logo/style";
+import Spline from "../Spline";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var LogoThree = /*#__PURE__*/memo(function (_ref) {

package/es/Spline/ParentSize.d.ts

@@ -0,0 +1,35 @@
+import { type CSSProperties, type ReactNode } from 'react';
+interface ResizeObserverCallback {
+    (entries: ResizeObserverEntry[], observer: ResizeObserver): void;
+}
+interface ResizeObserverPolyfill {
+    new (callback: ResizeObserverCallback): ResizeObserver;
+}
+export type ParentSizeProps = {
+    /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */
+    children: (args: {
+        ref: HTMLDivElement | null;
+        resize: (state: ParentSizeState) => void;
+    } & ParentSizeState) => ReactNode;
+    /** Optional `className` to add to the parent `div` wrapper used for size measurement. */
+    className?: string;
+    /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */
+    debounceTime?: number;
+    /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */
+    enableDebounceLeadingCall?: boolean;
+    /** Optional dimensions provided won't trigger a state change when changed. */
+    ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];
+    /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */
+    parentSizeStyles?: CSSProperties;
+    /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */
+    resizeObserverPolyfill?: ResizeObserverPolyfill;
+};
+type ParentSizeState = {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+};
+export type ParentSizeProvidedProps = ParentSizeState;
+declare const _default: import("react").ForwardRefExoticComponent<ParentSizeProps & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/es/Spline/ParentSize.js

@@ -0,0 +1,106 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children", "debounceTime", "ignoreDimensions", "parentSizeStyles", "enableDebounceLeadingCall", "resizeObserverPolyfill"];
+import { debounce } from 'lodash-es';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { mergeRefs } from 'react-merge-refs';
+
+// @TODO remove when upgraded to TS 4 which has its own declaration
+import { jsx as _jsx } from "react/jsx-runtime";
+var defaultIgnoreDimensions = [];
+var defaultParentSizeStyles = {
+  height: '100%',
+  width: '100%'
+};
+export default /*#__PURE__*/forwardRef(function ParentSize(_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$debounceTime = _ref.debounceTime,
+    debounceTime = _ref$debounceTime === void 0 ? 300 : _ref$debounceTime,
+    _ref$ignoreDimensions = _ref.ignoreDimensions,
+    ignoreDimensions = _ref$ignoreDimensions === void 0 ? defaultIgnoreDimensions : _ref$ignoreDimensions,
+    parentSizeStyles = _ref.parentSizeStyles,
+    _ref$enableDebounceLe = _ref.enableDebounceLeadingCall,
+    enableDebounceLeadingCall = _ref$enableDebounceLe === void 0 ? true : _ref$enableDebounceLe,
+    resizeObserverPolyfill = _ref.resizeObserverPolyfill,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var target = useRef(null);
+  var animationFrameID = useRef(0);
+  var _useState = useState({
+      height: 0,
+      left: 0,
+      top: 0,
+      width: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var resize = useMemo(function () {
+    var normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];
+    return debounce(function (incoming) {
+      setState(function (existing) {
+        var stateKeys = Object.keys(existing);
+        var keysWithChanges = stateKeys.filter(function (key) {
+          return existing[key] !== incoming[key];
+        });
+        var shouldBail = keysWithChanges.every(function (key) {
+          return normalized.includes(key);
+        });
+        return shouldBail ? existing : incoming;
+      });
+    }, debounceTime, {
+      leading: enableDebounceLeadingCall
+    });
+  }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);
+  useEffect(function () {
+    var LocalResizeObserver = resizeObserverPolyfill || window.ResizeObserver;
+    var observer = new LocalResizeObserver(function (entries) {
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        var _loop = function _loop() {
+          var _entry$contentRect;
+          var entry = _step.value;
+          var _ref2 = (_entry$contentRect = entry === null || entry === void 0 ? void 0 : entry.contentRect) !== null && _entry$contentRect !== void 0 ? _entry$contentRect : {},
+            left = _ref2.left,
+            top = _ref2.top,
+            width = _ref2.width,
+            height = _ref2.height;
+          animationFrameID.current = window.requestAnimationFrame(function () {
+            resize({
+              height: height,
+              left: left,
+              top: top,
+              width: width
+            });
+          });
+        };
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _loop();
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+    if (target.current) observer.observe(target.current);
+    return function () {
+      window.cancelAnimationFrame(animationFrameID.current);
+      observer.disconnect();
+      resize.cancel();
+    };
+  }, [resize, resizeObserverPolyfill]);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: className,
+    ref: mergeRefs([ref, target]),
+    style: _objectSpread(_objectSpread({}, defaultParentSizeStyles), parentSizeStyles)
+  }, restProps), {}, {
+    children: children(_objectSpread(_objectSpread({}, state), {}, {
+      ref: target.current,
+      resize: resize
+    }))
+  }));
+});

package/es/Spline/index.d.ts

@@ -0,0 +1,20 @@
+import { Application } from '@splinetool/runtime';
+import type { SplineEvent } from '@splinetool/runtime';
+import { type HTMLAttributes } from 'react';
+export interface SplineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onLoad' | 'onMouseDown' | 'onMouseUp' | 'onMouseHover' | 'onKeyDown' | 'onKeyUp' | 'onWheel'> {
+    onFollow?: (e: SplineEvent) => void;
+    onKeyDown?: (e: SplineEvent) => void;
+    onKeyUp?: (e: SplineEvent) => void;
+    onLoad?: (e: Application) => void;
+    onLookAt?: (e: SplineEvent) => void;
+    onMouseDown?: (e: SplineEvent) => void;
+    onMouseHover?: (e: SplineEvent) => void;
+    onMouseUp?: (e: SplineEvent) => void;
+    onStart?: (e: SplineEvent) => void;
+    onWheel?: (e: SplineEvent) => void;
+    renderOnDemand?: boolean;
+    scene: string;
+}
+declare const Spline: import("react").ForwardRefExoticComponent<SplineProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Spline;
+export { type SPEObject, type SplineEvent, type SplineEventName } from '@splinetool/runtime';

package/es/Spline/index.js

@@ -0,0 +1,132 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["scene", "style", "onMouseDown", "onMouseUp", "onMouseHover", "onKeyDown", "onKeyUp", "onStart", "onLookAt", "onFollow", "onWheel", "onLoad", "renderOnDemand"];
+import { Application } from '@splinetool/runtime';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import ParentSize from "./ParentSize";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Spline = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var scene = _ref.scene,
+    style = _ref.style,
+    onMouseDown = _ref.onMouseDown,
+    onMouseUp = _ref.onMouseUp,
+    onMouseHover = _ref.onMouseHover,
+    onKeyDown = _ref.onKeyDown,
+    onKeyUp = _ref.onKeyUp,
+    onStart = _ref.onStart,
+    onLookAt = _ref.onLookAt,
+    onFollow = _ref.onFollow,
+    onWheel = _ref.onWheel,
+    onLoad = _ref.onLoad,
+    _ref$renderOnDemand = _ref.renderOnDemand,
+    renderOnDemand = _ref$renderOnDemand === void 0 ? true : _ref$renderOnDemand,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var canvasRef = useRef(null);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var init = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(speApp, events) {
+      var _iterator, _step, event;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return speApp.load(scene);
+          case 2:
+            _iterator = _createForOfIteratorHelper(events);
+            try {
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                event = _step.value;
+                if (event.cb) {
+                  speApp.addEventListener(event.name, event.cb);
+                }
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
+            setIsLoading(false);
+            onLoad === null || onLoad === void 0 || onLoad(speApp);
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function init(_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  // Initialize runtime when component is mounted
+  useEffect(function () {
+    setIsLoading(true);
+    var speApp;
+    var events = [{
+      cb: onMouseDown,
+      name: 'mouseDown'
+    }, {
+      cb: onMouseUp,
+      name: 'mouseUp'
+    }, {
+      cb: onMouseHover,
+      name: 'mouseHover'
+    }, {
+      cb: onKeyDown,
+      name: 'keyDown'
+    }, {
+      cb: onKeyUp,
+      name: 'keyUp'
+    }, {
+      cb: onStart,
+      name: 'start'
+    }, {
+      cb: onLookAt,
+      name: 'lookAt'
+    }, {
+      cb: onFollow,
+      name: 'follow'
+    }, {
+      cb: onWheel,
+      name: 'scroll'
+    }];
+    if (canvasRef.current) {
+      speApp = new Application(canvasRef.current, {
+        renderOnDemand: renderOnDemand
+      });
+      init(speApp, events);
+    }
+    return function () {
+      for (var _i = 0, _events = events; _i < _events.length; _i++) {
+        var event = _events[_i];
+        if (event.cb) {
+          speApp.removeEventListener(event.name, event.cb);
+        }
+      }
+      speApp.dispose();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scene]);
+  return /*#__PURE__*/_jsx(ParentSize, _objectSpread(_objectSpread({
+    debounceTime: 50,
+    parentSizeStyles: style,
+    ref: ref
+  }, props), {}, {
+    children: function children() {
+      return /*#__PURE__*/_jsx("canvas", {
+        ref: canvasRef,
+        style: {
+          display: isLoading ? 'none' : 'block'
+        }
+      });
+    }
+  }));
+});
+export default Spline;

package/es/index.d.ts

@@ -71,6 +71,7 @@ export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as SliderWithInput, type SliderWithInputProps } from './SliderWithInput';
 export { default as Snippet, type SnippetProps } from './Snippet';
 export { default as SortableList, type SortableListProps } from './SortableList';
+export { default as Spline, type SplineProps } from './Spline';
 export { default as Spotlight, type SpotlightProps } from './Spotlight';
 export { default as SpotlightCard, type SpotlightCardProps } from './SpotlightCard';
 export { default as StoryBook, type StoryBookProps, useControls, useCreateStore, } from './StoryBook';

package/es/index.js

@@ -70,6 +70,7 @@ export { default as SideNav } from "./SideNav";
 export { default as SliderWithInput } from "./SliderWithInput";
 export { default as Snippet } from "./Snippet";
 export { default as SortableList } from "./SortableList";
+export { default as Spline } from "./Spline";
 export { default as Spotlight } from "./Spotlight";
 export { default as SpotlightCard } from "./SpotlightCard";
 export { default as StoryBook, useControls, useCreateStore } from "./StoryBook";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.138.6",
+  "version": "1.138.7",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -87,7 +87,6 @@
     "@lobehub/emojilib": "latest",
     "@react-spring/web": "^9.7.3",
     "@shikijs/transformers": "^1.3.0",
-    "@splinetool/react-spline": "^2.2.6",
     "@splinetool/runtime": "^1.1.2",
     "ahooks": "^3.7.11",
     "chroma-js": "^2.4.2",
@@ -107,6 +106,7 @@
     "react-error-boundary": "^4.0.13",
     "react-layout-kit": "^1.9.0",
     "react-markdown": "^8.0.7",
+    "react-merge-refs": "^2.1.1",
     "react-rnd": "^10.4.1",
     "react-simple-code-editor": "^0.13.1",
     "rehype-katex": "^6.0.3",