resq

import { resq$, waitToLoadReact } from 'resq'; import React from 'react'; import ReactDOM from 'react-dom'; // A simple React component for demonstration const MyComponent = () => ( <div data-testid="my-component">Hello from MyComponent</div> ); // Another component const AnotherComponent = () => ( <p>Another one</p> ) // The main application component const App = () => ( <div> <MyComponent /> <AnotherComponent /> </div> ); // Render the application to the DOM const rootElement = document.createElement('div'); rootElement.id = 'root'; document.body.appendChild(rootElement); ReactDOM.render(<App />, rootElement); async function queryComponents() { try { // Wait for React to load, then query for 'MyComponent' await waitToLoadReact(1000); // Wait up to 1 second const myComponentNode = resq$('MyComponent'); if (myComponentNode) { console.log('Found MyComponent:', myComponentNode.name, myComponentNode.node.outerHTML); console.log('MyComponent props:', myComponentNode.props); } else { console.log('MyComponent not found after waiting.'); } // Query for multiple components using a wildcard const allMyComponents = resq$$('My*'); console.log('\nFound all My* components (count:', allMyComponents.length, '):'); allMyComponents.forEach(comp => console.log('- ' + comp.name)); } catch (error) { console.error('An error occurred during resq query:', error); } } queryComponents();