En caso de que la extensión de la pregunta pueda asustar, el resumen de la pregunta es cómo interactuar con una aplicación front-end desde un servidor de nodo. Creo que el uso del titiritero debería venir junto con esa solicitud resuelta. La pregunta es grande porque expliqué todos mis intentos fallidos de lograr que el código de fondo (titiritero) funcionara en el navegador. Además de construir y ejecutar el repositorio que, aunque es fácil seguir las instrucciones puede llevar algo de tiempo, creo que la pregunta debería ser factible para un programador regular de javascript/nodo. Ahí va, gracias por leer.

Cloné, construí y ejecuté el repositorio imgui-js con éxito. Quiero usarlo junto con titiritero para una aplicación pequeña. Todos los comandos npm dentro y las cosas probadas están dentro del proyecto imgui-js mencionado.
Lo intenté:

1.- Ejecutar el ejemplo de nodo del proyecto : Con npm run-script start-example-node . Esto ejecuta el script example/index.js, pero no se dibuja nada ya que no estamos en el navegador y la ventana no está definida. Se puede verificar la depuración en main.ts:

 if (typeof(window) !== "undefined") { window.requestAnimationFrame(done ? _done : _loop); }

Entonces no entiendo el propósito de este ejemplo en el repositorio. Editar: parece que se puede hacer la comunicación cliente-servidor, pero no sé cómo hacerlo.

2.- Titiritero browserify: Seguí el browserify hola mundo . Solo un resumen de los pasos:

1. npm install -g browserify
2. npm i puppeteer
3. Vaya a la carpeta de compilación para generar el archivo bundle.js para mi const puppeteer = require('puppeteer'); secuencia de comandos, así que cd example de cd build de cd, browserify myScript.js -o bundle.js
4. Agregue <script src="./build/bundle.js"></script> al ejemplo/index.html.

me sale este error:

 Uncaught TypeError: System.register is not a function at Object.96.puppeteer (bundle.js:19470:8) at o (bundle.js:1:265) at r (bundle.js:1:431) at bundle.js:1:460

También intenté buscar main.js junto con mi script: browserify main.js myScript.js -o bundle.js . Mismo error.

3.- Prueba a configurar puppeter con el paquete de módulos rollup : siguiendo este recurso entre otros. Así que haciendo:

 npm install --save-dev rollup tape-modern puppeteer npm install --save-dev rollup-plugin-node-resolve npm install --save-dev rollup-plugin-commonjs npm install --save-dev sirv tape-browser-color

Y traté de agregar que el archivo de configuración imgui-js rollup.config.js. Piense que no funciona porque toda la configuración del servidor en el npm start , etc., no se realiza con el resumen.

4.- Titiritero-web: Siguiendo los pasos deeste recurso intenté ejecutar titiritero en el navegador.

1. npm i puppeteer-web
2. Código en el cliente y el servidor:

Cliente:

 <script src="https://unpkg.com/puppeteer-web"></script> <script> const browser = await puppeteer.connect({ browserWSEndpoint: `ws://0.0.0.0:8080`, // <-- connect to a server running somewhere ignoreHTTPSErrors: true }); const pagesCount = (await browser.pages()).length; const browserWSEndpoint = await browser.wsEndpoint(); console.log({ browserWSEndpoint, pagesCount }); </script>

Servidor (secuencia de comandos server.js):

 const httpProxy = require("http-proxy"); const host = "0.0.0.0"; const port = 8080; async function createServer(WSEndPoint, host, port) { await httpProxy .createServer({ target: WSEndPoint, // where we are connecting ws: true, localAddress: host // where to bind the proxy }) .listen(port); // which port the proxy should listen to return `ws://${host}:${port}`; // ie: ws://123.123.123.123:8080 } const puppeteer = require("puppeteer"); puppeteer.launch().then(async browser=>{ const pagesCount = (await browser.pages()).length; // just to make sure we have the same stuff on both place const browserWSEndpoint = await browser.wsEndpoint(); const customWSEndpoint = await createServer(browserWSEndpoint, host, port); // create the server here console.log({ browserWSEndpoint, customWSEndpoint, pagesCount }); })

3. Ejecute el script del servidor: node server.js . El servidor parece creado correctamente. Registro de terminales:

   browserWSEndpoint: 'ws://127.0.0.1:57640/devtools/browser/58dda865- b26e-4696-a057-25158dbc4093',
customWSEndpoint: 'ws://0.0.0.0:8080',
pagesCount: 1

4. npm start (desde una nueva terminal para asegurar que el servidor creado no termine)

Obtengo el error en el cliente:

 WebSocket connection to 'ws://0.0.0.0:8080/' failed: (anonymous) @ puppeteer-web:13354

Solo quiero usar titiritero con esta biblioteca front-end en mi aplicación, obteniendo datos con titiritero para mostrar la interfaz de usuario y proporcionar la entrada del usuario a titiritero.

Mi solución ideal sería la número 1, donde podría usar cualquier paquete npm además de titiritero y comunicarme desde el backend (servidor de nodo) al cliente (interfaz de usuario de imgui) de un lado a otro.

Gracias por cualquier ayuda.

EDITAR: más menos lo logré con el servidor de solución de servidor de nodos, que es mi escenario deseado, con expressjs y nodemon, ejecutando un servidor diferente en la aplicación y comunicándome con la aplicación. Ahora encontraría más valiosa cualquier ayuda en:

1.- La solución de navegación y/o información sobre por qué fallaron mis intentos con este enfoque.
2.- La solución que guarda todo en un mismo servidor, ese sería el servidor que en el repositorio sirve el html al navegador con "start-example-html": "http-server -c-1 -o example/index.html" . No se si eso es posible. Es porque no perdería la vida cargando, etc. si sirvo ambas cosas con mi servidor expressjs agregado por mí mismo. Algo así como lo que hace la aplicación Create React con las solicitudes de API de proxy
3.- Como se sugiere en los comentarios, la orientación o la solución para hacer que el código del servidor represente una ventana a través del nodo con la salida imgui ( npm start-example-node ), por supuesto, sería una respuesta válida a la pregunta.

No parece del todo correcto cambiar las condiciones de la pregunta durante la recompensa con un nuevo escenario un poco amplio, pero ahora que las condiciones han cambiado, trato de aprovechar al máximo la inversión y la investigación ya realizada en el tema, también debido a mi falta de experiencia en el área de configuración de agrupación de módulos wev-dev, por lo que se puede otorgar una recompensa por los consejos más valiosos en cualquiera de los dos temas mencionados anteriormente. Gracias por su comprensión.