react-abode icon indicating copy to clipboard operation
react-abode copied to clipboard

Request: Option to work in head tag or body

Open jafin opened this issue 3 years ago • 0 comments

Running script from head tag vs body

For apps that load the react-abode script in the head instead of bottom of body, would it be possible to amend to check for DOMContentLoaded event?

Something like the below perhaps:

export const populate = async (options?: PopulateOptions) => {
  if (/complete|interactive|loaded/.test(document.readyState)) {
    addNewComponentHandler(options);
  }
  else {
    document.addEventListener('DOMContentLoaded', ()=> addNewComponentHandler(options), false);
  }
};

const addNewComponentHandler = async (options?: PopulateOptions) => {
  await checkForAndHandleNewComponents(options);

  document.body.addEventListener('DOMNodeInserted', () =>
    checkForAndHandleNewComponents(options))
};

If I attempt to configure the script in head now, I receive the error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'addEventListener')

jafin avatar Sep 02 '22 12:09 jafin