react-render-tracker icon indicating copy to clipboard operation
react-render-tracker copied to clipboard

Using via `import` / `require()`

Open MikeRomaa opened this issue 3 years ago • 3 comments

It would be really convenient if the connection to the tracker can be initiated via an npm package import instead of a script tag (similarly to how react-devtools does it).

I'm trying to optimize a program running in an iframe and this would be perfect for that.

import 'react-render-tracker';
import React from 'react';
...

MikeRomaa avatar Jan 16 '22 04:01 MikeRomaa

Solution:

Rename index entry file to bootstrap and put it to new index file:

if (process.env.NODE_ENV === 'production') {
  require('./bootstrap');
} else {
  (() => {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.defer = false;
    script.src = 'https://cdn.jsdelivr.net/npm/react-render-tracker';
    script.onload = () => require('./bootstrap');

    document.head.appendChild(script);
  })();
}

It will be loaded before the 'react-dom' module, it's a temporary, but working solution to use it without access to HTML markup.

fnpen avatar Feb 03 '22 07:02 fnpen

I consider that's a required functionality in some cases. It can't be polyfilled in some cases / scenarios, e.g. for React Native support (#11). I'm going to add such a functionality. I can't say ETA for sure, but maybe in next 1-2 months.

lahmatiy avatar Aug 17 '22 16:08 lahmatiy

For a clarification, it's not about NPM availability (it's available) but about issues related to using (injecting) with require / import.

lahmatiy avatar Aug 17 '22 16:08 lahmatiy