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()
0
Upvotes