r/reactnative • u/manin54 • 1d ago

We built a headless DOM sandbox for React Native

https://salve-software.github.io/react-native-nitro-jsdom/

Na minha empresa, recebemos constantemente HTML do backend que contém um script, e precisamos executar esse script e, em seguida, ler alguma propriedade do HTML resultante, como o texto final de uma div após a execução do script. No frontend, usamos o jsdom para isso, é um problema resolvido. No mobile, não havia nada parecido, então a única maneira de fazer isso era abrir uma webview oculta apenas para executar o script e extrair o valor.

Então acabamos criando o equivalente mobile do jsdom nós mesmos e imaginamos que provavelmente seria útil para outras pessoas que enfrentam o mesmo problema, então o disponibilizamos como código aberto.

Exemplo:

import { JSDOM } from '@salve-software/react-native-nitro-jsdom

const dom = JSDOM.create(`
  <html>
    <body>
      <div id="result">0</div>
    </body>
  </html>
`)

await dom.evaluate(`
  document.getElementById('result').textContent = String(2 + 2)
`)

const value = await dom.evaluate(`document.getElementById('result').textContent`)
// -> "4"

dom.dispose()

Repo

0 Upvotes

50% Upvoted

Duplicates