urql-graphql / urql-devtools-exchange

The exchange for usage with Urql Devtools
https://www.npmjs.com/package/@urql/devtools
MIT License
54 stars 6 forks source link

Remove esmodule support #39

Closed andyrichardson closed 4 years ago

andyrichardson commented 4 years ago

About

Fix #37

JoviDeCroock commented 4 years ago

This transformation is not the case as pointed out in https://github.com/FormidableLabs/urql-devtools-exchange/issues/37

Making Terser remove it, this however isn't the case anymore if we'd add process && there because the replace step only takes the full string to be replaced by the stringified value.

For instance stryingifying process to JSON.stringify({}) would make that work but that isn't the standard. At this moment this doesn't work either for production builds though else bundlephobia would report 100 bytes rather than a few KB. BundlePhobia applies the replace step to determine size.

RegExp to find and replace

My first suggestion would've been to use the export-maps and unpkg fields to provide browser-optimized builds. This because webpack uses it's own resolve mechanism and doesn't seem to be going towards using the new export proposal. This would make our support for rollup and parcel worse since they rely on the Node resolution algorithm.

PikaPkg uses exports.module to find the browser compatible builds. Unpkg uses unpkg and module.

Mainly throwing this information out there to see if anyone has a good idea to support this, React for instance does this by saying the umd has to be referenced directly, so .development or .production in your script.url, which doesn't feel like an ideal solution either.

andyrichardson commented 4 years ago

Making Terser remove it, this however isn't the case anymore if we'd add process

My understanding was that DefinePlugin is responsible for the conditional transformation in the notes.

andyrichardson commented 4 years ago

With the many bundling options out there, I'm tempted to leave the inclusion of the exchange up to the users like so

import { devtoolsExchange, noopExchange } from '@urql/devtools'

// Webpack / parcel
createClient({
  exchanges: [
    process.env.NODE_ENV === "production" ? devtoolsExchange : noopExchange,
// ...

// Esmodule / no process variable
createClient({
  exchanges: [
    process.env.NODE_ENV === "production" ? devtoolsExchange : noopExchange,
// ...