What is the best way format injected javascript in react-native?

Question

Is there an efficient way format large amounts of injected javascript strings and retain type completion + testable functionality for react-native-webview?

For react-native, the react-native-webview library allows communication across a native WebView and react-native. This requires injection of javascript in string format to customize what is communicated and how user interactions are processed.

This injection can quickly get messy, unreadable, or have small bugs that are hard to test when a bunch of functionality needs to be combined.

Does anyone have a better scalable solution for this?

My requirements for injectableStrings (that affect the Webview DOM)

1. Readable syntax
2. Type completions

The react-native-webview docs give simplified references to javascript in string format which do not have syntax or type completions.

Answer 1

Current approach and Answer

1. Create a Webview file and an injection file.
2. Utilize the injection file to contain all web typings and functionality. This functionality is formatted in javascript (not stringified)
3. Create an initializer that converts all functionality into a string version of the functionality. The initializer should always return string.

Example

Browser.injectableJavascript.ts

const registerPressHandler = () => {
 const imgNodes = document.getElementsByTagName('img')
 const linkNodes = document.getElementsByTagName('a')

 // add callbacks etc...
}

// re-registers events whenever the document re-renders nodes...
const createObservers = () => {
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      // handle cases here...and rebind events to new nodes
      registerPressHandler()
    })
  })

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  })
}

export const browserInjection = `
  ${registerPressHandler.toString()};
  // initialize web click handler
  registerPressHandler()

  ${createObservers.toString()};
  createObservers();
`

Browser.tsx

import React from 'react'
import Webview from 'react-native-webview'
import { browserInjection } from './Browser.injections'

const Browser = () => {
  return <Webview injectedJavascript={browserInjection} />
}

export default Browser

Other ideas:

• Leverage a bundler to compile a stringified version of a javascript file. (cons: it's more processing power and not as fast as the first approach)(pros: way more browser compatibility but most polyifills won't be needed since this is only targeting android and iOS webviews...might be useful for older devices on lower webview specs...)
• Use a bunch of template literals. (cons: this can get messy and is very similar to using pure strings. No type completions)