Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

Make sure npm run watch builds ESM/UMD bundles #2765

Merged
merged 1 commit into from Feb 7, 2019

Conversation

hwillson
Copy link
Member

When testing new react-apollo changes out (during core development), it can be useful to npm link react-apollo into a test app. After the link is in place, the npm run watch script can be used to compile typescript file changes, in watch mode. So while working on the react-apollo codebase, .ts file changes will be picked up automatically, compiled, and because of the npm link, the test app will recognize that there have been changes made to react-apollo and re-run with the updated version.

Unfortunately, npm run watch doesn’t currently work as it’s missing the additional post compilation steps that npm run compile leverages via postcompile. This mean that npm run watch isn’t calling rollup and generating the associated ESM/UMD bundles. So when typescript changes are picked up and compiled, the application at the other end of the link doesn’t always recognize that react-apollo has been updated, since it doesn’t see changes in the ESM/UMD bundles (if it’s using them - e.g. create-react-app).

This commit first introduces the tsc-watch helper utility to make it easier to run scripts after watched typescript files are compiled. It then wires in changes to call npm run postcompile after watched typescript compilation has completed. This helps ensure that apps at the other end of the link see changes, since the ESM/UMD bundles are regenerated.

One thing to note is that running rollup with the current config takes about 3 seconds. This adds a delay between making changes in react-apollo and seeing them show up in the linked application.
We can reduce this time by adjusting the rollup config to accommodate watching and only generate the bundles we need, but given that this functionality is currently broken as is, this commit will at least get things back to a working state.

When testing new `react-apollo` changes out (during core
development), it can be useful to `npm link` `react-apollo`
into a test app. After the link is in place, the `npm run watch`
script can be used to compile typescript file changes, in watch
mode. So while working on the `react-apollo` codebase, .ts file
changes will be picked up automatically, compiled, and because of
the `npm link`, the test app will recognize that there have
been changes made to `react-apollo` and re-run with the updated
version.

Unfortunately, `npm run watch` doesn’t currently work as it’s
missing the additional post compilation steps that
`npm run compile` leverages via `postcompile`. This mean that
`npm run watch` isn’t calling `rollup` and generating the
associated ESM/UMD bundles. So when typescript changes are picked
up and compiled, the application at the other end of the link
doesn’t always recognize that `react-apollo` has been updated,
since it doesn’t see changes in the ESM/UMD bundles (if it’s
using them - e.g. `create-react-app` is).

This commit first introduces the `tsc-watch` helper utility to
make it easier to run scripts after watched typescript files are
compiled. It then wires in changes to call `npm run postcompile`
after watched typescript compilation has completed. This helps
ensure that apps at the other end of the link see changes,
since the ESM/UMD bundles are regenerated.

One thing to note is that running rollup with the current config
takes about 3 seconds. This adds a delay between making changes in
`react-apollo` and seeing them show up in the linked application.
We can reduce this time by adjusting the rollup config to
accommodate watching and only generate the bundles we need, but
given that this functionality is currently broken as is, this
commit will at least get things back to a working state.
@hwillson hwillson changed the title Make sure npm run watch builds ESM/UMB bundles Make sure npm run watch builds ESM/UMD bundles Jan 30, 2019
Copy link
Member

@benjamn benjamn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense!

@hwillson hwillson merged commit 9ff8f44 into release-2.5.0 Feb 7, 2019
@hwillson hwillson deleted the hwillson/rebuild-bundles-during-watch branch February 7, 2019 20:03
hwillson added a commit to apollographql/apollo-client that referenced this pull request Feb 22, 2019
Changes to make sure calling `npm run watch` in any of this
repo's child packages ensures the final bundles are built
after compilation has completed. For the full details on
why this is needed, see:

apollographql/react-apollo#2765
hwillson added a commit to apollographql/apollo-client that referenced this pull request Feb 25, 2019
Changes to make sure calling `npm run watch` in any of this
repo's child packages ensures the final bundles are built
after compilation has completed. For the full details on
why this is needed, see:

apollographql/react-apollo#2765
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants