circuit-bricks
Version:
A modular, Lego-style SVG circuit component system for React (ALPHA - Not for production use)
157 lines (155 loc) • 5.03 kB
JavaScript
"use client";
;
const require_chunk = require('./chunk-DkEB4ore.cjs');
const require_ssrUtils = require('./ssrUtils-CCZ0gGap.cjs');
const react = require_chunk.__toESM(require("react"));
const react_jsx_runtime = require_chunk.__toESM(require("react/jsx-runtime"));
//#region src/core/SSRSafeCircuitCanvas.tsx
const CircuitCanvasImpl = react.default.lazy(() => Promise.resolve().then(function() {
return require("./CircuitCanvas-CK7FqtKN.cjs");
}).then((module$1) => ({ default: module$1.default })));
/**
* Loading placeholder component for SSR
*/
const CircuitCanvasPlaceholder = ({ width = "100%", height = "100%", className, style }) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
style: { textAlign: "center" },
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
style: { marginBottom: "8px" },
children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
})
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: "Loading Circuit..." }),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: `
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
` } })
]
})
});
/**
* Error boundary for circuit canvas
*/
var CircuitCanvasErrorBoundary = class extends react.default.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__ */ (0, react_jsx_runtime.jsxs)("div", {
style: {
padding: "20px",
textAlign: "center",
color: "#dc3545",
border: "1px solid #dc3545",
borderRadius: "4px",
backgroundColor: "#f8d7da"
},
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", { children: "Circuit Canvas Error" }),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: "Failed to load the circuit canvas. Please refresh the page." }),
process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
style: {
marginTop: "10px",
textAlign: "left"
},
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", { children: "Error Details" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
style: {
fontSize: "12px",
overflow: "auto"
},
children: this.state.error.stack
})]
})
]
});
return this.props.children;
}
};
/**
* SSR-Safe CircuitCanvas component
*/
const SSRSafeCircuitCanvas = (0, react.forwardRef)((props, ref) => {
const { className, style,...circuitProps } = props;
const isClient = require_ssrUtils.useIsClient();
const [isLoaded, setIsLoaded] = (0, react.useState)(false);
(0, react.useEffect)(() => {
if (isClient) {
const timer = setTimeout(() => {
setIsLoaded(true);
}, 0);
return () => clearTimeout(timer);
}
}, [isClient]);
if (!isClient || !isLoaded) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircuitCanvasPlaceholder, {
width: props.width,
height: props.height,
className,
style
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircuitCanvasErrorBoundary, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Suspense, {
fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircuitCanvasPlaceholder, {
width: props.width,
height: props.height,
className,
style
}),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircuitCanvasImpl, {
...circuitProps,
ref
})
}) });
});
SSRSafeCircuitCanvas.displayName = "SSRSafeCircuitCanvas";
var SSRSafeCircuitCanvas_default = SSRSafeCircuitCanvas;
//#endregion
Object.defineProperty(exports, 'SSRSafeCircuitCanvas', {
enumerable: true,
get: function () {
return SSRSafeCircuitCanvas;
}
});
Object.defineProperty(exports, 'SSRSafeCircuitCanvas_default', {
enumerable: true,
get: function () {
return SSRSafeCircuitCanvas_default;
}
});
//# sourceMappingURL=SSRSafeCircuitCanvas-DdgvHnEO.cjs.map