ardor-synapse
v2.4.0
Published
Ardor Synapse Bridge - A lightweight JavaScript bridge for Ardor platform integration, enabling DOM inspection, console logging, and network monitoring in iframe environments
Maintainers
olga_ardorReadme
ardor-synapse
Ardor Synapse Bridge - A lightweight JavaScript bridge for Ardor platform integration.
Features
- 🔍 DOM Inspector - Visual element inspection and highlighting
- 📊 Console Capture - Intercept and forward console logs
- 🌐 Network Monitoring - Track fetch requests and responses
- 📏 Auto Height - Automatic iframe height adjustment
- 🌳 DOM Tree - Serialized DOM tree for visualization
Installation
Using Bun
bun add ardor-synapseUsing npm
npm install ardor-synapseUsing yarn
yarn add ardor-synapseUsing pnpm
pnpm add ardor-synapseUsage
Option 1: ES Module Import (Recommended)
Import and initialize when you need it:
// In your main application file
import synapse from 'ardor-synapse';
// Initialize when ready (e.g., after DOM is loaded)
synapse.init();
// Or use named imports
import { init, toggleInspector, destroy } from 'ardor-synapse';
init();
// Later, toggle inspector
toggleInspector(true);
// Cleanup when done (optional)
destroy();Option 2: React Hook
import { useEffect } from 'react';
import synapse from 'ardor-synapse';
function App() {
useEffect(() => {
// Initialize on mount
synapse.init();
// Cleanup on unmount
return () => {
synapse.destroy();
};
}, []);
return <div>Your app</div>;
}Option 3: Conditional Initialization
import synapse from 'ardor-synapse';
// Only initialize in development or specific conditions
if (import.meta.env.DEV || process.env.NODE_ENV === 'development') {
synapse.init();
}
// Or conditionally based on URL parameter
if (new URLSearchParams(window.location.search).has('ardor')) {
synapse.init();
}Option 4: Dynamic Import
// Load only when needed
async function loadArdorSynapse() {
const synapse = await import('ardor-synapse');
synapse.default.init();
}
// Call when needed
loadArdorSynapse();Option 5: Legacy Script Tag (Backward Compatible)
For projects that don't support ES modules, you can still use the script tag:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
</head>
<body>
<!-- Your app content -->
<!-- Include Ardor Synapse -->
<script type="module">
import synapse from '/node_modules/ardor-synapse/dist/synapse.js';
synapse.init();
</script>
</body>
</html>Or copy to public and use:
cp node_modules/ardor-synapse/dist/synapse.js public/synapse.js<script type="module" src="/synapse.js"></script>
<script>
// After module loads, initialize
import('/synapse.js').then(synapse => synapse.default.init());
</script>API
ES Module API
import synapse, { init, destroy, toggleInspector } from 'ardor-synapse';
// Initialize the bridge
init();
// Toggle inspector mode
toggleInspector(true); // Enable
toggleInspector(false); // Disable
// Check if initialized
console.log(synapse.isInitialized); // true/false
// Get version
console.log(synapse.version); // "2.4.0"
// Cleanup (optional, removes all listeners and observers)
destroy();Global API (Backward Compatible)
The bridge also exposes a global window.__ARDOR__ object for backward compatibility:
// After importing and initializing
window.__ARDOR__.toggleInspector(true); // Enable
window.__ARDOR__.toggleInspector(false); // Disable
window.__ARDOR__.init(); // Initialize
window.__ARDOR__.destroy(); // CleanupMessage Protocol
The bridge communicates with parent windows using postMessage:
Outgoing Messages:
BRIDGE_READY- Sent when bridge initializesRESIZE- Sent when iframe height changesDOM_TREE_UPDATE- Sent when DOM structure changesCONSOLE_LOG- Sent for console messagesNETWORK_LOG- Sent for network requestsELEMENT_SELECTED- Sent when element is clicked in inspector mode
Incoming Messages:
TOGGLE_INSPECTOR- Enable/disable inspector modeHIGHLIGHT_NODE- Highlight a specific DOM nodeUPDATE_STYLE- Update element stylesPING- Request handshake
Browser Support
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
Version
Current version: 2.4.0
License
MIT