unpkg-bundler

import bundle from 'unpkg-bundler'; // React component code to be bundled. // unpkg-bundler will automatically fetch React and ReactDOM from unpkg. const reactCode = ` import React from 'react'; import ReactDOM from 'react-dom'; const App = () => { return ( <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}> <h1>Hello from unpkg-bundler!</h1> <h2>This code was bundled and transpiled on the client-side.</h2> <p>It automatically fetched React and ReactDOM from unpkg.com.</p> </div> ); }; // Typically, you'd render this into an existing DOM element. // For this quickstart, we'll just demonstrate the bundling output. const rootElement = document.createElement('div'); rootElement.id = 'root'; document.body.appendChild(rootElement); ReactDOM.render(<App />, rootElement); `; const runBundle = async () => { console.log('Bundling React code...'); const { code, err } = await bundle(reactCode); if (err) { console.error('Bundling error:', err); return; } console.log('Bundle successful. Executing code...'); // To execute in a browser, you can create a <script> tag or use eval. // Be cautious with eval in production due to security implications. // For demonstration: try { // This will execute the bundled code directly in the current scope. // In a real application, you might inject it into an iframe for isolation. new Function(code)(); console.log('Code executed successfully. Check the document body for the React app.'); } catch (executionError) { console.error('Error executing bundled code:', executionError); } }; runBundle();