resolveTypeReferenceDirective support for yarn PnP

[johnnyreilly]

This PR should (when completed) add resolveTypeReferenceDirective support to ts-loader to complement the existing resolveModuleName added by @arcanis in #862 which was added to support yarn PnP.

Other inspiration: TypeStrong/fork-ts-checker-webpack-plugin#250

I've a number of questions which I'm hoping people can advise on. I'd like to use this PR to go through these as I think the answers to them will be a generally useful resource in future.

Heads up: I have never used PnP before, but I'm excited the possibilities it may provide. I think it's somewhat useful that I don't know tons about it as the questions I ask will likely be the sorts of things that others wonder about too.

I hope this is cool with you @arcanis?

So this PR should be a combination of discussion and then implementation informed by the discussion.

[arcanis]

Awesome 👍

[johnnyreilly]

First question: pnp-webpack-plugin vs ts-pnp

The PnP docs point you here: https://github.com/arcanis/pnp-webpack-plugin#ts-loader-integration

Which suggests you should use the pnp-webpack-plugin to marry ts-loader and PnP:

const PnpWebpackPlugin = require(`pnp-webpack-plugin`);

module.exports = {
  module: {
    rules: [{
      test: /\.ts$/,
      loader: require.resolve('ts-loader'),
      options: PnpWebpackPlugin.tsLoaderOptions(),
    }],
  },
};

In fact ts-pnp itself suggests:

Note that ts-pnp is a low-level package - you shouldn't have to use it unless you're writing a TS compiler host. If you just want to write TypeScript and have it Just Work™, take a look at pnp-webpack-plugin instead.

So it looks like we should be using pnp-webpack-plugin and not ts-pnp.

That being the case, It looks like a tweak may be required here:

https://github.com/arcanis/pnp-webpack-plugin/blob/b09fbdc2a9f16dc3837454b8d367963b1a30655f/index.js#L140

module.exports.tsLoaderOptions = (options = {}) => pnp ? Object.assign({}, options, {
  resolveModuleName: require('ts-pnp').resolveModuleName,
}) : options;

To add in resolveTypeReferenceDirective to this. (Once it exists in ts-loader)

Does that sound right?

Also, I'm guessing using tsLoaderOptions is mandatory if you want to use ts-loader with PnP as it's this that supplies resolveModuleName to ts-loader.

Otherwise you would have to manually supply this option to ts-loader like so:

  resolveModuleName: require('ts-pnp').resolveModuleName,

Do I have this about right?

[arcanis]

Does that sound right?

Yep - although my warning in ts-pnp is maybe a bit too strong in that as you can see there isn't much boilerplate needed to integrate ts-pnp with ts-loader without going through pnp-webpack-plugin (ts-pnp isn't a "private api" and will respect semver, so it's safe to use it directly).

The wording is mostly intended for average users, which don't really care much about the setup of TS and PnP and just want something that work out of the box. In their case they can just use pnp-webpack-plugin which will take care of this through a simplified API.

[johnnyreilly]

Hey @arcanis,

I've implemented what I think makes sense based on our conversation. Do you want to take a quick glance and let me know if I'm headed roughly in the right direction? There's a bit of noise in the servicesHost.ts module but hopefully otherwise it makes sense...

[arcanis]

Looks good to me from an implem standpoint!

[arcanis]

Eheh it was 😅

[johnnyreilly]

I know, right? How could I imagine a comment like that wouldn't come back to bite me 😄