jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(rnetwork): switch to unpkg CDN with dynamic fallback for 3d-force-graph 

jsdelivr was returning 503. Switch primary CDN to unpkg and add a dynamic
fallback loader that tries both CDNs if the initial script tag fails.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-14 12:24:54 -07:00
parent 28922da39f
commit 44e7639124
2 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
modules/rnetwork/components/folk-graph-viewer.ts
View File

@ -550,8 +550,28 @@ class FolkGraphViewer extends HTMLElement {
this.graphContainer = container;
try {
const ForceGraph3D = (window as any).ForceGraph3D;
if (!ForceGraph3D) throw new Error("ForceGraph3D not loaded — check UMD script tag");
let ForceGraph3D = (window as any).ForceGraph3D;
if (!ForceGraph3D) {
// CDN script tag may have failed (503 etc) — try loading dynamically with fallback
const cdns = [
"https://unpkg.com/3d-force-graph@1.73.4/dist/3d-force-graph.min.js",
"https://cdn.jsdelivr.net/npm/3d-force-graph@1.73.4/dist/3d-force-graph.min.js",
];
for (const url of cdns) {
try {
await new Promise<void>((resolve, reject) => {
const s = document.createElement("script");
s.src = url;
s.onload = () => resolve();
s.onerror = () => reject();
document.head.appendChild(s);
});
ForceGraph3D = (window as any).ForceGraph3D;
if (ForceGraph3D) break;
} catch { /* try next CDN */ }
}
if (!ForceGraph3D) throw new Error("ForceGraph3D failed to load from all CDN sources");
}
// Pre-load THREE so nodeThreeObject callback is synchronous.
// Import from the same module the UMD build uses internally

4
modules/rnetwork/mod.ts
View File

@ -15,11 +15,11 @@ import { renderLanding } from "./landing";
// ── CDN scripts for Three.js + 3d-force-graph ──
// UMD build bundles Three.js + all transitive deps — no bare-specifier issues.
// We also provide an importmap for "three" so folk-graph-viewer can import("three") for custom meshes.
const GRAPH3D_HEAD = `<script src="https://cdn.jsdelivr.net/npm/3d-force-graph@1.73.4/dist/3d-force-graph.min.js"></script>
const GRAPH3D_HEAD = `<script src="https://unpkg.com/3d-force-graph@1.73.4/dist/3d-force-graph.min.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js"
"three": "https://unpkg.com/three@0.169.0/build/three.module.js"
}
}
</script>`;