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

@splinetool/react-spline

Package Overview
Dependencies
Maintainers
3
Versions
26
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@splinetool/react-spline - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0

dist/next/decodePreview.d.ts
dist/next/decodePreview.js
dist/next/SplineNext.d.ts
dist/ParentSize.js
dist/react-spline-next.js

878

dist/react-spline.js

@@ -1,850 +0,100 @@

"use client";import dr, { forwardRef as Ne, useRef as ce, useState as We, useMemo as vr, useEffect as Me } from "react";
import { Application as pr } from "@splinetool/runtime";
var re = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
function mr(t) {
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
}
var de = { exports: {} }, q = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Fe;
function br() {
if (Fe)
return q;
Fe = 1;
var t = Symbol.for("react.transitional.element"), i = Symbol.for("react.fragment");
function f(R, u, p) {
var y = null;
if (p !== void 0 && (y = "" + p), u.key !== void 0 && (y = "" + u.key), "key" in u) {
p = {};
for (var l in u)
l !== "key" && (p[l] = u[l]);
} else
p = u;
return u = p.ref, {
$$typeof: t,
type: R,
key: y,
ref: u !== void 0 ? u : null,
props: p
};
}
return q.Fragment = i, q.jsx = f, q.jsxs = f, q;
}
var X = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Ie;
function yr() {
return Ie || (Ie = 1, process.env.NODE_ENV !== "production" && function() {
var t = dr, i = !1, f = !1, R = !1, u = !0, p = !0, y = !1, l = Symbol.for("react.transitional.element"), C = Symbol.for("react.portal"), S = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), T = Symbol.for("react.profiler"), Y = Symbol.for("react.provider"), D = Symbol.for("react.consumer"), P = Symbol.for("react.context"), w = Symbol.for("react.forward_ref"), j = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), m = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), k = Symbol.for("react.offscreen"), h = Symbol.iterator, s = "@@iterator";
function N(e) {
if (e === null || typeof e != "object")
return null;
var r = h && e[h] || e[s];
return typeof r == "function" ? r : null;
}
var O = t.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
function x(e) {
{
for (var r = arguments.length, n = new Array(r > 1 ? r - 1 : 0), a = 1; a < r; a++)
n[a - 1] = arguments[a];
Ye("error", e, n);
}
}
function Ye(e, r, n) {
{
var a = O.getStackAddendum();
a !== "" && (r += "%s", n = n.concat([a]));
var o = n.map(function(d) {
return String(d);
});
o.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, o);
}
}
function Ue(e, r, n) {
var a = e.displayName;
if (a)
return a;
var o = r.displayName || r.name || "";
return o !== "" ? n + "(" + o + ")" : n;
}
function me(e) {
return e.displayName || "Context";
}
var Le = Symbol.for("react.client.reference");
function z(e) {
if (e == null)
return null;
if (typeof e == "function")
return e.$$typeof === Le ? null : e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case S:
return "Fragment";
case C:
return "Portal";
case T:
return "Profiler";
case A:
return "StrictMode";
case j:
return "Suspense";
case E:
return "SuspenseList";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && x("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
case Y:
return null;
case P:
var r = e;
return me(r) + ".Provider";
case D: {
var n = e;
return me(n._context) + ".Consumer";
}
case w:
return Ue(e, e.render, "ForwardRef");
case m:
var a = e.displayName || null;
return a !== null ? a : z(e.type) || "Memo";
case F: {
var o = e, d = o._payload, _ = o._init;
try {
return z(_(d));
} catch {
return null;
}
}
}
return null;
}
var te = Object.prototype.hasOwnProperty, B = Object.assign;
function ze(e) {
{
var r = typeof Symbol == "function" && Symbol.toStringTag, n = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
return n;
}
}
function Ve(e) {
try {
return be(e), !1;
} catch {
return !0;
}
}
function be(e) {
return "" + e;
}
function ye(e) {
if (Ve(e))
return x("The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", ze(e)), be(e);
}
var Be = Symbol.for("react.client.reference");
function Ge(e) {
return !!(typeof e == "string" || typeof e == "function" || e === S || e === T || y || e === A || e === j || e === E || R || e === k || i || f || typeof e == "object" && e !== null && (e.$$typeof === F || e.$$typeof === m || e.$$typeof === P || !p || e.$$typeof === D || e.$$typeof === w || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === Be || e.getModuleId !== void 0));
}
var Je = Array.isArray;
function ne(e) {
return Je(e);
}
var H = 0, Ee, he, ge, Re, Te, _e, Se;
function je() {
}
je.__reactDisabledLog = !0;
function He() {
{
if (H === 0) {
Ee = console.log, he = console.info, ge = console.warn, Re = console.error, Te = console.group, _e = console.groupCollapsed, Se = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: je,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
H++;
}
}
function qe() {
{
if (H--, H === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: B({}, e, {
value: Ee
}),
info: B({}, e, {
value: he
}),
warn: B({}, e, {
value: ge
}),
error: B({}, e, {
value: Re
}),
group: B({}, e, {
value: Te
}),
groupCollapsed: B({}, e, {
value: _e
}),
groupEnd: B({}, e, {
value: Se
})
});
}
H < 0 && x("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var ae;
function K(e) {
{
if (ae === void 0)
try {
throw Error();
} catch (n) {
var r = n.stack.trim().match(/\n( *(at )?)/);
ae = r && r[1] || "";
}
return `
` + ae + e;
}
}
var oe = !1, Z;
{
var Xe = typeof WeakMap == "function" ? WeakMap : Map;
Z = new Xe();
}
function Ce(e, r) {
if (!e || oe)
return "";
{
var n = Z.get(e);
if (n !== void 0)
return n;
}
oe = !0;
var a = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var o = null;
o = O.H, O.H = null, He();
var d = {
DetermineComponentFrameRoot: function() {
var L;
try {
if (r) {
var G = function() {
throw Error();
};
if (Object.defineProperty(G.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(G, []);
} catch ($) {
L = $;
}
Reflect.construct(e, [], G);
} else {
try {
G.call();
} catch ($) {
L = $;
}
e.call(G.prototype);
}
} else {
try {
throw Error();
} catch ($) {
L = $;
}
var J = e();
J && typeof J.catch == "function" && J.catch(function() {
});
}
} catch ($) {
if ($ && L && typeof $.stack == "string")
return [$.stack, L.stack];
}
return [null, null];
}
};
d.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
var _ = Object.getOwnPropertyDescriptor(d.DetermineComponentFrameRoot, "name");
_ && _.configurable && Object.defineProperty(
d.DetermineComponentFrameRoot,
// Configurable properties can be updated even if its writable descriptor
// is set to `false`.
// $FlowFixMe[cannot-write]
"name",
{
value: "DetermineComponentFrameRoot"
}
);
try {
var W = d.DetermineComponentFrameRoot(), M = W[0], U = W[1];
if (M && U) {
for (var g = M.split(`
`), c = U.split(`
`), v = 0, b = 0; v < g.length && !g[v].includes("DetermineComponentFrameRoot"); )
v++;
for (; b < c.length && !c[b].includes("DetermineComponentFrameRoot"); )
b++;
if (v === g.length || b === c.length)
for (v = g.length - 1, b = c.length - 1; v >= 1 && b >= 0 && g[v] !== c[b]; )
b--;
for (; v >= 1 && b >= 0; v--, b--)
if (g[v] !== c[b]) {
if (v !== 1 || b !== 1)
do
if (v--, b--, b < 0 || g[v] !== c[b]) {
var I = `
` + g[v].replace(" at new ", " at ");
return e.displayName && I.includes("<anonymous>") && (I = I.replace("<anonymous>", e.displayName)), typeof e == "function" && Z.set(e, I), I;
}
while (v >= 1 && b >= 0);
break;
}
}
} finally {
oe = !1, O.H = o, qe(), Error.prepareStackTrace = a;
}
var ee = e ? e.displayName || e.name : "", V = ee ? K(ee) : "";
return typeof e == "function" && Z.set(e, V), V;
}
function Ke(e) {
return Ce(e, !1);
}
function Ze(e) {
var r = e.prototype;
return !!(r && r.isReactComponent);
}
function ie(e) {
if (e == null)
return "";
if (typeof e == "function")
return Ce(e, Ze(e));
if (typeof e == "string")
return K(e);
switch (e) {
case j:
return K("Suspense");
case E:
return K("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case w:
return Ke(e.render);
case m:
return ie(e.type);
case F: {
var r = e, n = r._payload, a = r._init;
try {
return ie(a(n));
} catch {
}
}
}
return "";
}
var Qe = Symbol.for("react.client.reference");
function ue() {
{
var e = O.A;
return e === null ? null : e.getOwner();
}
}
var we, le;
le = {};
function er(e) {
if (te.call(e, "ref")) {
var r = Object.getOwnPropertyDescriptor(e, "ref").get;
if (r && r.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function rr(e) {
if (te.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function tr(e, r) {
{
var n = function() {
we || (we = !0, x("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", r));
};
n.isReactWarning = !0, Object.defineProperty(e, "key", {
get: n,
configurable: !0
});
}
}
function nr() {
{
var e = z(this.type);
le[e] || (le[e] = !0, x("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."));
var r = this.props.ref;
return r !== void 0 ? r : null;
}
}
function ar(e, r, n, a, o, d, _, W, M) {
var U;
{
var g = _.ref;
U = g !== void 0 ? g : null;
}
var c;
return c = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: l,
// Built-in properties that belong on the element
type: e,
key: r,
props: _,
// Record the component responsible for creating this element.
_owner: d
}, U !== null ? Object.defineProperty(c, "ref", {
enumerable: !1,
get: nr
}) : Object.defineProperty(c, "ref", {
enumerable: !1,
value: null
}), c._store = {}, Object.defineProperty(c._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(c, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.freeze && (Object.freeze(c.props), Object.freeze(c)), c;
}
function or(e, r, n, a, o) {
{
var d = !1;
return xe(e, r, n, d, a, o);
}
}
function ir(e, r, n, a, o) {
{
var d = !0;
return xe(e, r, n, d, a, o);
}
}
var Oe = {};
function xe(e, r, n, a, o, d) {
{
if (Ge(e)) {
var M = r.children;
if (M !== void 0)
if (a)
if (ne(M)) {
for (var U = 0; U < M.length; U++)
Ae(M[U], e);
Object.freeze && Object.freeze(M);
} else
x("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
Ae(M, e);
} else {
var _ = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (_ += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var W;
e === null ? W = "null" : ne(e) ? W = "array" : e !== void 0 && e.$$typeof === l ? (W = "<" + (z(e.type) || "Unknown") + " />", _ = " Did you accidentally export a JSX literal instead of a component?") : W = typeof e, x("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", W, _);
}
if (te.call(r, "key")) {
var g = z(e), c = Object.keys(r).filter(function($) {
return $ !== "key";
}), v = c.length > 0 ? "{key: someKey, " + c.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!Oe[g + v]) {
var b = c.length > 0 ? "{" + c.join(": ..., ") + ": ...}" : "{}";
x(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`, v, g, b, g), Oe[g + v] = !0;
}
}
var I = null, ee = null;
n !== void 0 && (ye(n), I = "" + n), rr(r) && (ye(r.key), I = "" + r.key), er(r);
var V;
if (!("key" in r))
V = r;
else {
V = {};
for (var L in r)
L !== "key" && u && (V[L] = r[L]);
}
if (I || !u) {
var G = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
I && tr(V, G);
}
var J = ar(e, I, ee, d, o, ue(), V);
return e === S && fr(J), J;
}
}
function ur() {
{
var e = ue();
if (e) {
var r = z(e.type);
if (r)
return `
Check the render method of \`` + r + "`.";
}
return "";
}
}
function Ae(e, r) {
{
if (typeof e != "object" || !e)
return;
if (e.$$typeof !== Qe)
if (ne(e))
for (var n = 0; n < e.length; n++) {
var a = e[n];
fe(a) && Pe(a, r);
}
else if (fe(e))
e._store && (e._store.validated = !0);
else {
var o = N(e);
if (typeof o == "function" && o !== e.entries) {
var d = o.call(e);
if (d !== e)
for (var _; !(_ = d.next()).done; )
fe(_.value) && Pe(_.value, r);
}
}
}
}
function fe(e) {
return typeof e == "object" && e !== null && e.$$typeof === l;
}
var ke = {};
function Pe(e, r) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var n = lr(r);
if (ke[n])
return;
ke[n] = !0;
var a = "";
if (e && e._owner != null && e._owner !== ue()) {
var o = null;
typeof e._owner.tag == "number" ? o = z(e._owner.type) : typeof e._owner.name == "string" && (o = e._owner.name), a = " It was passed a child from " + o + ".";
}
Q(e), x('Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.', n, a), Q(null);
}
}
function Q(e) {
if (e) {
var r = ie(e.type);
O.setExtraStackFrame(r);
} else
O.setExtraStackFrame(null);
}
function lr(e) {
{
var r = ur();
if (!r) {
var n = z(e);
n && (r = `
Check the top-level render call using <` + n + ">.");
}
return r;
}
}
function fr(e) {
for (var r = Object.keys(e.props), n = 0; n < r.length; n++) {
var a = r[n];
if (a !== "children" && a !== "key") {
Q(e), x("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", a), Q(null);
break;
}
}
}
var sr = or, cr = ir;
X.Fragment = S, X.jsx = sr, X.jsxs = cr;
}()), X;
}
process.env.NODE_ENV === "production" ? de.exports = br() : de.exports = yr();
var ve = de.exports, Er = "Expected a function", $e = NaN, hr = "[object Symbol]", gr = /^\s+|\s+$/g, Rr = /^[-+]0x[0-9a-f]+$/i, Tr = /^0b[01]+$/i, _r = /^0o[0-7]+$/i, Sr = parseInt, jr = typeof re == "object" && re && re.Object === Object && re, Cr = typeof self == "object" && self && self.Object === Object && self, wr = jr || Cr || Function("return this")(), Or = Object.prototype, xr = Or.toString, Ar = Math.max, kr = Math.min, se = function() {
return wr.Date.now();
};
function Pr(t, i, f) {
var R, u, p, y, l, C, S = 0, A = !1, T = !1, Y = !0;
if (typeof t != "function")
throw new TypeError(Er);
i = De(i) || 0, pe(f) && (A = !!f.leading, T = "maxWait" in f, p = T ? Ar(De(f.maxWait) || 0, i) : p, Y = "trailing" in f ? !!f.trailing : Y);
function D(s) {
var N = R, O = u;
return R = u = void 0, S = s, y = t.apply(O, N), y;
}
function P(s) {
return S = s, l = setTimeout(E, i), A ? D(s) : y;
}
function w(s) {
var N = s - C, O = s - S, x = i - N;
return T ? kr(x, p - O) : x;
}
function j(s) {
var N = s - C, O = s - S;
return C === void 0 || N >= i || N < 0 || T && O >= p;
}
function E() {
var s = se();
if (j(s))
return m(s);
l = setTimeout(E, w(s));
}
function m(s) {
return l = void 0, Y && R ? D(s) : (R = u = void 0, y);
}
function F() {
l !== void 0 && clearTimeout(l), S = 0, R = C = u = l = void 0;
}
function k() {
return l === void 0 ? y : m(se());
}
function h() {
var s = se(), N = j(s);
if (R = arguments, u = this, C = s, N) {
if (l === void 0)
return P(C);
if (T)
return l = setTimeout(E, i), D(C);
}
return l === void 0 && (l = setTimeout(E, i)), y;
}
return h.cancel = F, h.flush = k, h;
}
function pe(t) {
var i = typeof t;
return !!t && (i == "object" || i == "function");
}
function Fr(t) {
return !!t && typeof t == "object";
}
function Ir(t) {
return typeof t == "symbol" || Fr(t) && xr.call(t) == hr;
}
function De(t) {
if (typeof t == "number")
return t;
if (Ir(t))
return $e;
if (pe(t)) {
var i = typeof t.valueOf == "function" ? t.valueOf() : t;
t = pe(i) ? i + "" : i;
}
if (typeof t != "string")
return t === 0 ? t : +t;
t = t.replace(gr, "");
var f = Tr.test(t);
return f || _r.test(t) ? Sr(t.slice(2), f ? 2 : 8) : Rr.test(t) ? $e : +t;
}
var $r = Pr;
const Dr = /* @__PURE__ */ mr($r);
function Nr(t) {
return (i) => {
t.forEach((f) => {
typeof f == "function" ? f(i) : f != null && (f.current = i);
});
};
}
const Wr = [], Mr = { width: "100%", height: "100%" }, Yr = Ne(function({
className: i,
children: f,
debounceTime: R = 300,
ignoreDimensions: u = Wr,
parentSizeStyles: p,
enableDebounceLeadingCall: y = !0,
resizeObserverPolyfill: l,
...C
}, S) {
const A = ce(null), T = ce(0), [Y, D] = We({
width: 0,
height: 0,
top: 0,
left: 0
}), P = vr(() => {
const w = Array.isArray(u) ? u : [u];
return Dr(
(j) => {
D((E) => Object.keys(E).filter(
(h) => E[h] !== j[h]
).every(
(h) => w.includes(h)
) ? E : j);
},
R,
{ leading: y }
);
}, [R, y, u]);
return Me(() => {
const w = l || window.ResizeObserver, j = new w((E) => {
E.forEach((m) => {
const { left: F, top: k, width: h, height: s } = (m == null ? void 0 : m.contentRect) ?? {};
T.current = window.requestAnimationFrame(() => {
P({ width: h, height: s, top: k, left: F });
});
});
});
return A.current && j.observe(A.current), () => {
window.cancelAnimationFrame(T.current), j.disconnect(), P.cancel();
};
}, [P, l]), /* @__PURE__ */ ve.jsx(
"div",
{
style: { ...Mr, ...p },
ref: Nr([S, A]),
className: i,
...C,
children: f({
...Y,
ref: A.current,
resize: P
})
}
);
}), zr = Ne(
"use client";
import { jsx as m, jsxs as A, Fragment as E } from "react/jsx-runtime";
import { forwardRef as R, useRef as j, useState as z, useEffect as D } from "react";
import { Application as U } from "@splinetool/runtime";
import F from "./ParentSize.js";
const q = R(
({
scene: t,
style: i,
onMouseDown: f,
onMouseUp: R,
onMouseHover: u,
onKeyDown: p,
onKeyUp: y,
onStart: l,
onLookAt: C,
onFollow: S,
onWheel: A,
onLoad: T,
renderOnDemand: Y = !0,
...D
}, P) => {
const w = ce(null), [j, E] = We(!0);
return Me(() => {
E(!0);
let m;
const F = [
scene: s,
style: f,
onMouseDown: l,
onMouseUp: u,
onMouseHover: p,
onKeyDown: b,
onKeyUp: d,
onStart: v,
onLookAt: w,
onFollow: y,
onWheel: S,
onLoad: t,
renderOnDemand: k = !0,
children: g,
...h
}, x) => {
const r = j(null), [c, a] = z(!0);
return D(() => {
a(!0);
let e;
const i = [
{
name: "mouseDown",
cb: f
cb: l
},
{
name: "mouseUp",
cb: R
cb: u
},
{
name: "mouseHover",
cb: u
cb: p
},
{
name: "keyDown",
cb: p
cb: b
},
{
name: "keyUp",
cb: y
cb: d
},
{
name: "start",
cb: l
cb: v
},
{
name: "lookAt",
cb: C
cb: w
},
{
name: "follow",
cb: S
cb: y
},
{
name: "scroll",
cb: A
cb: S
}
];
if (w.current) {
m = new pr(w.current, { renderOnDemand: Y });
async function k() {
await m.load(t);
for (let h of F)
h.cb && m.addEventListener(h.name, h.cb);
E(!1), T == null || T(m);
if (r.current) {
e = new U(r.current, { renderOnDemand: k });
async function n() {
await e.load(s);
for (let o of i)
o.cb && e.addEventListener(o.name, o.cb);
a(!1), t == null || t(e);
}
k();
n();
}
return () => {
for (let k of F)
k.cb && m.removeEventListener(k.name, k.cb);
m.dispose();
for (let n of i)
n.cb && e.removeEventListener(n.name, n.cb);
e.dispose();
};
}, [t]), /* @__PURE__ */ ve.jsx(
Yr,
}, [s]), /* @__PURE__ */ m(
F,
{
ref: P,
parentSizeStyles: i,
ref: x,
parentSizeStyles: { overflow: "hidden", ...f },
debounceTime: 50,
...D,
children: () => /* @__PURE__ */ ve.jsx(
"canvas",
{
ref: w,
style: {
display: j ? "none" : "block"
...h,
children: () => /* @__PURE__ */ A(E, { children: [
c && g,
/* @__PURE__ */ m(
"canvas",
{
ref: r,
style: {
display: c ? "none" : "block"
}
}
}
)
)
] })
}

@@ -855,3 +105,3 @@ );

export {
zr as default
q as default
};

39

package.json
{
"name": "@splinetool/react-spline",
"version": "3.0.3",
"version": "3.1.0",
"packageManager": "yarn@3.3.0",

@@ -13,4 +13,7 @@ "files": [

"types": "./dist/Spline.d.ts",
"import": "./dist/react-spline.js",
"require": "./dist/react-spline.cjs"
"import": "./dist/react-spline.js"
},
"./next": {
"types": "./dist/next/SplineNext.d.ts",
"import": "./dist/react-spline-next.js"
}

@@ -22,3 +25,3 @@ },

"serve": "vite preview",
"build": "vite build && yarn build-types",
"build": "rimraf dist/ && vite build && yarn build-types",
"build-types": "tsc --skipLibCheck --isolatedModules false --noEmit false --emitDeclarationOnly --declaration --outDir dist/",

@@ -29,25 +32,37 @@ "publish": "yarn build && np --no-tests"

"@splinetool/runtime": "*",
"next": "*",
"react": "*",
"react-dom": "*"
},
"peerDependenciesMeta": {
"next": {
"optional": true
}
},
"dependencies": {
"blurhash": "2.0.5",
"lodash.debounce": "4.0.8",
"react-merge-refs": "2.1.1",
"thumbhash": "0.1.1"
},
"devDependencies": {
"@splinetool/runtime": "^1.3.10",
"@types/animejs": "^3.1.7",
"@types/animejs": "^3.1.12",
"@types/lodash.debounce": "^4.0.9",
"@types/node": "^20.12.12",
"@types/node": "^20.14.1",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.0",
"animejs": "^3.2.1",
"animejs": "^3.2.2",
"modern-normalize": "^1.1.0",
"next": "15.0.0-rc.0",
"np": "^10.0.5",
"react": "19.0.0-rc-f994737d14-20240522",
"react-dom": "19.0.0-rc-f994737d14-20240522",
"rimraf": "^5.0.7",
"rollup-plugin-rename-node-modules": "^1.3.1",
"rollup-preserve-directives": "^1.1.1",
"typescript": "^5.4.5",
"vite": "^5.2.11"
},
"dependencies": {
"lodash.debounce": "^4.0.8",
"react-merge-refs": "^2.1.1"
"vite": "^5.2.12"
}
}

19

README.md

@@ -18,2 +18,3 @@ [![](https://raw.githubusercontent.com/splinetool/react-spline/main/.github/screenshots/hero.png)](https://my.spline.design/splinereactlogocopycopy-eaa074bf6b2cc82d870c96e262a625ae/)

- [Usage](#usage)
- [Next.js](#nextjs)
- [Read and modify Spline objects](#read-and-modify-spline-objects)

@@ -67,2 +68,20 @@ - [Listen to events](#listen-to-events)

### Next.js
You can use this library in Next.js as well to take advantage of Server Side Rendering. By default the library will render on the client only, but if you use the import `@splinetool/react/next` the server will render an autogenerated blurred placeholder.
Here is an example. Export as `Next.js` from the Spline editor to autogenerate the placeholder.
```js
import Spline from '@splinetool/react-spline/next';
export default function App() {
return (
<div>
<Spline scene="https://prod.spline.design/KFonZGtsoUXP-qx7/scene.splinecode" />
</div>
);
}
```
### Read and modify Spline objects

@@ -69,0 +88,0 @@ 

dist/react-spline.cjs
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc