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

fix(rnetwork): use UMD build for 3d-force-graph, avoid ESM bare specifiers 

ESM builds on esm.sh kept resolving transitive deps to latest versions
that import three/webgpu. Switch to the pre-built UMD bundle from
jsdelivr which bundles all deps including Three.js. Keep separate
import map entry for "three" ESM for custom node object creation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-12 10:23:04 -07:00
parent 14dead3896
commit f4d7448c9d
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -542,8 +542,8 @@ class FolkGraphViewer extends HTMLElement {
this.graphContainer = container; this.graphContainer = container;
try { try {
const ForceGraph3DModule = await import("3d-force-graph"); const ForceGraph3D = (window as any).ForceGraph3D;
const ForceGraph3D = ForceGraph3DModule.default || ForceGraph3DModule; if (!ForceGraph3D) throw new Error("ForceGraph3D not loaded — check UMD script tag");
const graph = ForceGraph3D({ controlType: "orbit" })(container) const graph = ForceGraph3D({ controlType: "orbit" })(container)
.backgroundColor("rgba(0,0,0,0)") .backgroundColor("rgba(0,0,0,0)")

14
modules/rnetwork/mod.ts
View File

@ -12,14 +12,14 @@ import { getModuleInfoList } from "../../shared/module";
import type { RSpaceModule } from "../../shared/module"; import type { RSpaceModule } from "../../shared/module";
import { renderLanding } from "./landing"; import { renderLanding } from "./landing";
// ── CDN importmap for Three.js + 3d-force-graph ── // ── CDN scripts for Three.js + 3d-force-graph ──
const GRAPH3D_IMPORTMAP = `<script type="importmap"> // 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>
<script type="importmap">
{ {
"imports": { "imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js", "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js"
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three/examples/jsm/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"3d-force-graph": "https://esm.sh/*3d-force-graph@1.73.4?bundle-deps&external=three"
} }
} }
</script>`; </script>`;
@ -439,7 +439,7 @@ routes.get("/", (c) => {
moduleId: "rnetwork", moduleId: "rnetwork",
spaceSlug: space, spaceSlug: space,
modules: getModuleInfoList(), modules: getModuleInfoList(),
head: GRAPH3D_IMPORTMAP, head: GRAPH3D_HEAD,
body: `<div class="rapp-nav" style="padding:0 1rem;margin-top:8px"><span class="rapp-nav__title"></span><a href="/${space}/rnetwork/crm" class="rapp-nav__btn--app-toggle">Open CRM</a></div> body: `<div class="rapp-nav" style="padding:0 1rem;margin-top:8px"><span class="rapp-nav__title"></span><a href="/${space}/rnetwork/crm" class="rapp-nav__btn--app-toggle">Open CRM</a></div>
<folk-graph-viewer space="${space}"></folk-graph-viewer>`, <folk-graph-viewer space="${space}"></folk-graph-viewer>`,
scripts: `<script type="module" src="/modules/rnetwork/folk-graph-viewer.js"></script>`, scripts: `<script type="module" src="/modules/rnetwork/folk-graph-viewer.js"></script>`,