#Interface: Lynx

lynx.registerDataProcessors(...);
lynx.querySelector(...);
lynx.querySelectorAll(...);

import { root } from "@lynx-js/react"

// You MUST call this before `root.render()`
lynx.registerDataProcessors({
  defaultDataProcessor: () => {...} // default DataProcessor
  dataProcessors: {
    getScreenMetricsOverride: () => {...} // named DataProcessor
  }
})

root.render(<App/>);

import { root, Component } from "@lynx-js/react"

class App extends Component {
  static defaultDataProcessor() {
     ...
  }

  static dataProcessors = {
    getScreenMetricsOverride() {
      ...
    }
  }
}

lynx.registerDataProcessors(App); // You can pass `App` because it has the required shape
root.render(<App/>);

import { root } from "@lynx-js/react"

interface ExistingInterface {
  somePropertyFromExistingInterface: number
}

declare module '@lynx-js/react' {
  interface InitDataRaw extends ExistingInterface {
    someAnotherCustomProperty: string
  }
}

lynx.registerDataProcessors({
  defaultDataProcessor: (initDataRaw) => {
    initDataRaw.somePropertyFromExistingInterface // will be typed
  }
})

import { useInitData } from "@lynx-js/react"

interface AnotherExistingInterface {
  someAnotherPropertyFromExistingInterface: number
}

declare module '@lynx-js/react' {
  interface InitData extends AnotherExistingInterface {
    someCustomProperty: string
  }
}

lynx.registerDataProcessors({
  defaultDataProcessor: () => {
    return {
      someCustomProperty: 'value', // will be typed
      someAnotherPropertyFromExistingInterface: 1, // will be typed
    }
  }
})

function App() {
  const initData = useInitData();

  initData.someCustomProperty // will be typed
  initData.someAnotherPropertyFromExistingInterface // will be typed
}