// shell.jsx — the single-page shell for index.html. // // Implements a lazy-loading, keep-alive multi-view shell that hosts the // three formerly-standalone pages (docs / material viewer / node graph // editor) as views inside one app, switched via a lightweight hash router // (#!viewer, #!graph; anything else — including empty and legacy // #/lib/group/name docs permalinks — means docs). // // Each view's CDN + local script/CSS dependencies are fetched only the // first time that view becomes active, then the view is kept mounted // (hidden via CSS `display: none`, not unmounted) so switching back is // instant and preserves state. Each top-level view component // (App / MaterialViewerApp / NodeGraphApp, and Node3DPreview inside // docs) accepts an `active` boolean prop (default true) so it can pause // expensive work (e.g. render loops) while hidden — this shell always // passes `active={activeView === ''}` explicitly. // // Embed mode renders a focused, docs-only view for the graph editor's // DocsDialog iframe (index.html?embed=1#/lib/group/name) — no header/ // footer/other views, and the router is pinned to 'docs'. See EMBED below. // EMBED is set by index.html's bootstrap script when this page is // loaded as ?embed=1 inside the graph editor's docs dialog iframe. const EMBED = !!window.__MTLX_EMBED; // ------------------------------------------------------------------ // Script/CSS loading utilities (module scope, cached by URL so repeated // activations of a view are no-ops after the first). // ------------------------------------------------------------------ const __scriptCache = new Map(); function loadScript(src) { if (__scriptCache.has(src)) return __scriptCache.get(src); const p = new Promise((resolve, reject) => { const el = document.createElement('script'); el.src = src; el.onload = () => resolve(); el.onerror = () => reject(new Error('Failed to load script: ' + src)); document.head.appendChild(el); }); __scriptCache.set(src, p); return p; } const __cssCache = new Map(); function loadCss(href) { if (__cssCache.has(href)) return __cssCache.get(href); const p = new Promise((resolve, reject) => { const el = document.createElement('link'); el.rel = 'stylesheet'; el.href = href; el.onload = () => resolve(); el.onerror = () => reject(new Error('Failed to load stylesheet: ' + href)); document.head.appendChild(el); }); __cssCache.set(href, p); return p; } // ------------------------------------------------------------------ // Lazy JSX loading via fetch + Babel.transform. Shares the __scriptCache // map/dedup with loadScript (keyed by src) — safe since .jsx src strings // never collide with the CDN URLs used by loadScript. // ------------------------------------------------------------------ // IMPORTANT: injected code below IS wrapped in an IIFE, and this is // REQUIRED, not dangerous. babel-standalone's own text/babel script // processing never shares global-lexical scope across files either — it // executes each script inside its own function scope, with cross-file // access flowing exclusively through each file's explicit window.* // exports (e.g. `window.X = X`). Two lazily-injected files can therefore // both declare a top-level `const EMBED` (js/node-preview.jsx and // js/docs-app.jsx) without colliding, exactly as they never collided when // served as separate text/babel tags. The module-flavored-output // assertion below plus the global-presence check in the view-loading // effect remain the correct mitigations for genuine parse/load failures. async function loadJsxApp(src) { if (__scriptCache.has(src)) return __scriptCache.get(src); const p = (async () => { const res = await fetch(src); if (!res.ok) throw new Error('Failed to fetch ' + src + ': ' + res.status); const source = await res.text(); const { code } = Babel.transform(source, { presets: [['react', { runtime: 'classic' }]], sourceType: 'script', filename: src, }); // A module-flavored output cannot run as a classic script; fail loudly // with the filename instead of letting the browser throw an opaque // parse error that bypasses this promise chain entirely. if (/^\s*(import|export)\s/m.test(code)) { throw new Error(src + ' transformed to module code (unexpected import/export) — cannot inject as a classic script'); } const el = document.createElement('script'); // Execute inside a private function scope, replicating how // babel-standalone runs each text/babel script: top-level const/let // stay file-local (two files may declare the same identifier, e.g. // EMBED in node-preview.jsx AND docs-app.jsx), and cross-file access // flows exclusively through each file's explicit window.* exports — // exactly as on the former standalone pages. el.textContent = ';(function () {\n' + code + '\n})();'; document.head.appendChild(el); })(); __scriptCache.set(src, p); return p; } // The engine is eagerly loaded by app.html's own