circuit-bricks
Version:
A modular, Lego-style SVG circuit component system for React (ALPHA - Not for production use)
142 lines (140 loc) • 4.11 kB
JavaScript
"use client";
import { useIsClient } from "./ssrUtils-Bmt4TsFY.mjs";
import React, { forwardRef, useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/core/SSRSafeCircuitCanvas.tsx
const CircuitCanvasImpl = React.lazy(() => import("./CircuitCanvas-CAZI0Jxx.mjs").then((module) => ({ default: module.default })));
/**
* Loading placeholder component for SSR
*/
const CircuitCanvasPlaceholder = ({ width = "100%", height = "100%", className, style }) => /* @__PURE__ */ jsx("div", {
className: `circuit-canvas-loading ${className || ""}`,
style: {
width,
height,
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f8f9fa",
border: "1px solid #e9ecef",
borderRadius: "4px",
color: "#6c757d",
fontSize: "14px",
fontFamily: "system-ui, -apple-system, sans-serif",
...style
},
children: /* @__PURE__ */ jsxs("div", {
style: { textAlign: "center" },
children: [
/* @__PURE__ */ jsx("div", {
style: { marginBottom: "8px" },
children: /* @__PURE__ */ jsx("svg", {
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
style: { animation: "spin 1s linear infinite" },
children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
})
}),
/* @__PURE__ */ jsx("div", { children: "Loading Circuit..." }),
/* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: `
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
` } })
]
})
});
/**
* Error boundary for circuit canvas
*/
var CircuitCanvasErrorBoundary = class extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return {
hasError: true,
error
};
}
componentDidCatch(error, errorInfo) {
console.error("CircuitCanvas Error:", error, errorInfo);
}
render() {
if (this.state.hasError) return this.props.fallback || /* @__PURE__ */ jsxs("div", {
style: {
padding: "20px",
textAlign: "center",
color: "#dc3545",
border: "1px solid #dc3545",
borderRadius: "4px",
backgroundColor: "#f8d7da"
},
children: [
/* @__PURE__ */ jsx("h4", { children: "Circuit Canvas Error" }),
/* @__PURE__ */ jsx("p", { children: "Failed to load the circuit canvas. Please refresh the page." }),
this.state.error && /* @__PURE__ */ jsxs("details", {
style: {
marginTop: "10px",
textAlign: "left"
},
children: [/* @__PURE__ */ jsx("summary", { children: "Error Details" }), /* @__PURE__ */ jsx("pre", {
style: {
fontSize: "12px",
overflow: "auto"
},
children: this.state.error.stack
})]
})
]
});
return this.props.children;
}
};
/**
* SSR-Safe CircuitCanvas component
*/
const SSRSafeCircuitCanvas = forwardRef((props, ref) => {
const { className, style,...circuitProps } = props;
const isClient = useIsClient();
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
if (isClient) {
const timer = setTimeout(() => {
setIsLoaded(true);
}, 0);
return () => clearTimeout(timer);
}
}, [isClient]);
if (!isClient || !isLoaded) return /* @__PURE__ */ jsx(CircuitCanvasPlaceholder, {
width: props.width,
height: props.height,
className,
style
});
return /* @__PURE__ */ jsx(CircuitCanvasErrorBoundary, { children: /* @__PURE__ */ jsx(React.Suspense, {
fallback: /* @__PURE__ */ jsx(CircuitCanvasPlaceholder, {
width: props.width,
height: props.height,
className,
style
}),
children: /* @__PURE__ */ jsx(CircuitCanvasImpl, {
...circuitProps,
ref
})
}) });
});
SSRSafeCircuitCanvas.displayName = "SSRSafeCircuitCanvas";
var SSRSafeCircuitCanvas_default = SSRSafeCircuitCanvas;
//#endregion
export { SSRSafeCircuitCanvas, SSRSafeCircuitCanvas_default };
//# sourceMappingURL=SSRSafeCircuitCanvas-C8GCXZfR.mjs.map