Esm supports

[morrys]

This PR is an alternative version to https://github.com/relay-tools/relay-hooks/pull/161 and revisiting the first version in which rollup was integrated https://github.com/relay-tools/relay-hooks/pull/106

I have tried and it works with both CRA applications, NextJS and using the library in react-relay-offline.

@n1ru4l what do you think about it?

[n1ru4l]

I tried importing it with Node.j1 14 and it seems to work

// node.mjs
import * as test from "relay-hooks"
console.log(test)

laurin@Laurins-MacBook-Pro:~/projects/relay-hooks-test$ node node.mjs 
[Module] {
  FORWARD: 'forward',
  FRAGMENT_NAME: 'useFragment',
  NETWORK_ONLY: 'network-only',
  PAGINATION_NAME: 'usePagination',
  REFETCHABLE_NAME: 'useRefetchable',
  ReactRelayContext: <ref *1> {
    '$$typeof': Symbol(react.context),
    _calculateChangedBits: null,
    _currentValue: null,
    _currentValue2: null,
    _threadCount: 0,
    Provider: { '$$typeof': Symbol(react.provider), _context: [Circular *1] },
    Consumer: {
      '$$typeof': Symbol(react.context),
      _context: [Circular *1],
      _calculateChangedBits: null
    },
    _currentRenderer: null,
    _currentRenderer2: null,
    displayName: 'RelayContext'
  },
  RelayEnvironmentProvider: [Function (anonymous)],
  STORE_ONLY: 'store-only',
  STORE_OR_NETWORK: 'store-or-network',
  STORE_THEN_NETWORK: 'store-and-network',
  __esModule: true,
  applyOptimisticMutation: [Function: applyOptimisticMutation],
  commitLocalUpdate: [Function: commitLocalUpdate],
  commitMutation: [Function: commitMutation],
  default: {
    applyOptimisticMutation: [Function: applyOptimisticMutation],
    commitLocalUpdate: [Function: commitLocalUpdate],
    commitMutation: [Function: commitMutation],
    fetchQuery: [Function: fetchQuery],
    graphql: [Function: graphql],
    requestSubscription: [Function: requestSubscription],
    ReactRelayContext: <ref *1> {
      '$$typeof': Symbol(react.context),
      _calculateChangedBits: null,
      _currentValue: null,
      _currentValue2: null,
      _threadCount: 0,
      Provider: [Object],
      Consumer: [Object],
      _currentRenderer: null,
      _currentRenderer2: null,
      displayName: 'RelayContext'
    },
    useQuery: [Function (anonymous)],
    useLazyLoadQuery: [Function (anonymous)],
    loadQuery: [Function (anonymous)],
    loadLazyQuery: [Function (anonymous)],
    usePreloadedQuery: [Function (anonymous)],
    useFragment: [Function: useFragment],
    useSuspenseFragment: [Function: useSuspenseFragment],
    useMutation: [Function: useMutation],
    useSubscription: [Function: useSubscription],
    useOssFragment: [Function: useOssFragment],
    usePagination: [Function: usePagination],
    usePaginationFragment: [Function: usePaginationFragment],
    useRefetchable: [Function: useRefetchable],
    useRefetchableFragment: [Function: useRefetchableFragment],
    useRelayEnvironment: [Function: useRelayEnvironment],
    RelayEnvironmentProvider: [Function (anonymous)],
    NETWORK_ONLY: 'network-only',
    STORE_THEN_NETWORK: 'store-and-network',
    STORE_OR_NETWORK: 'store-or-network',
    STORE_ONLY: 'store-only',
    PAGINATION_NAME: 'usePagination',
    REFETCHABLE_NAME: 'useRefetchable',
    FRAGMENT_NAME: 'useFragment',
    FORWARD: 'forward'
  },
  fetchQuery: [Function: fetchQuery],
  graphql: [Function: graphql],
  loadLazyQuery: [Function (anonymous)],
  loadQuery: [Function (anonymous)],
  requestSubscription: [Function: requestSubscription],
  useFragment: [Function: useFragment],
  useLazyLoadQuery: [Function (anonymous)],
  useMutation: [Function: useMutation],
  useOssFragment: [Function: useOssFragment],
  usePagination: [Function: usePagination],
  usePaginationFragment: [Function: usePaginationFragment],
  usePreloadedQuery: [Function (anonymous)],
  useQuery: [Function (anonymous)],
  useRefetchable: [Function: useRefetchable],
  useRefetchableFragment: [Function: useRefetchableFragment],
  useRelayEnvironment: [Function: useRelayEnvironment],
  useSubscription: [Function: useSubscription],
  useSuspenseFragment: [Function: useSuspenseFragment]
}

[n1ru4l]

The package now included duplicated definitions files. I think we should be fine with only having them included once?

Also, the es output is heavily transpiled down to be es5 compatible. E.g. object spread results in assign helpers within the code. We should probably target more like es2019, and if people still rely on older features they can transpile the js themselves?

[morrys]

I tried with es2020 and the cra project did not start me, so I preferred to use the same target as the commonjs version.

If this version of esm supports seems to be fine, you can adjust your PR and we close this one.

[n1ru4l]

Hmm I don't think it makes sense to do stricter transformation than what relay does. If I am not mistaking they apply the following transform: https://github.com/facebook/relay/blob/30e2a47d21bdc145270f954698aa754a5e925e55/gulpfile.js#L15-L28

[morrys]

I mean relay-hooks has always used es5 https://github.com/relay-tools/relay-hooks/blob/master/tsconfig.json#L6

What I would like to avoid, with ESM support, are breaking changes especially for Create React App

[n1ru4l]

Yes, I am just questioning whether it even makes sense as this library that can only be used with relay, supports older browsers/ECMA features than relay does. But I don't wanna block this pull request with it, we can also continue the discussion elsewhere.

[morrys]

you are right but it is better to discuss and evaluate this aspect in another PR 👍

So this version works fine for you? also with @restart/hooks?

[n1ru4l]

Yes, did not complain with Node.js 14. But I did not test with vite and/or snowpack yet, there @restart/hooks caused issues.

[n1ru4l]

@morrys I can confirm it is working, lets ship this :)

[morrys]

@n1ru4l released with version 5.0.0 let me know if you find any problems :)