Files
ObsiGate/frontend/excalidraw-diag4.html
T
bruno 7e5cd85b8a
CI / lint (push) Failing after 10s
CI / test (push) Has been skipped
CI / build (push) Has been skipped
CI / e2e (push) Has been skipped
CI / security (push) Successful in 13s
Desktop Build / build-windows (push) Has been cancelled
Desktop Build / build-linux (push) Has been cancelled
fix(excalidraw): use esm.sh ?alias param to force React 18.3.1 across entire dependency tree
2026-07-29 11:45:09 -04:00

75 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Excalidraw Final Test</title>
<style>
body { font-family:monospace; background:#1e1e1e; color:#ddd; padding:20px; }
.pass { color:#4caf50; } .fail { color:#f44336; }
pre { background:#2d2d2d; padding:10px; border-radius:4px; }
#app { margin-top:20px; border:1px dashed #555; min-height:100px; padding:10px; }
</style>
</head>
<body>
<h2>Excalidraw Final Test (Import Map)</h2>
<pre id="log"></pre>
<div id="app"></div>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/[email protected]",
"react-dom": "https://esm.sh/[email protected]",
"react-dom/": "https://esm.sh/[email protected]/"
}
}
</script>
<script type="module">
import React from "react";
import ReactDOM from "react-dom/client";
const log = document.getElementById('log');
function add(msg, cls='') { log.innerHTML += `<span class="${cls}">${msg}</span>\n`; }
add('React version: ' + React.version, 'info');
class ErrorBoundary extends React.Component {
constructor(props) { super(props); this.state = { error: null }; }
static getDerivedStateFromError(error) { return { error }; }
componentDidCatch(error, info) {
add(`✗ ERROR: ${error.message}`, 'fail');
add(` ${(error.stack||'').split('\n').slice(0,3).join('\n')}`, 'info');
}
render() {
if (this.state.error) return React.createElement('div', {style:{color:'red',padding:'20px'}}, 'Error: '+this.state.error.message);
return this.props.children;
}
}
try {
window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/[email protected]/dist/prod/';
const ExcalidrawLib = await import('https://esm.sh/@excalidraw/[email protected]?alias=react:[email protected],react-dom:[email protected]');
const { Excalidraw } = ExcalidrawLib;
add('Excalidraw loaded', 'pass');
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(
React.createElement(ErrorBoundary, null,
React.createElement(Excalidraw, {
theme: 'dark',
excalidrawRef: (api) => add('✓ EXCALIDRAW MOUNTED!', 'pass'),
onChange: () => {},
})
)
);
add('render() called - waiting for mount...', 'info');
} catch(e) {
add(`✗ ${e.message}`, 'fail');
}
</script>
</body>
</html>