fix: add .js suffix to proto cross-reference imports

[paralin]

When importing a cross-referenced file, a line like this is generated:

import { MyMessage } from '../myother/myother'

.. assuming there's a proto at ../myother/myother.proto

But if we add the suffix '.pb.ts' to the generated files:

import { MyMessage } from '../myother/myother.pb'

Is not recognized as a TypeScript import by tsc because of the .pb suffix.

To fix this, we can just add .js, and the TypeScript compiler recognizes that we actually mean the .ts file:

import { MyMessage } from '../myother/myother.pb.js'

Fixes #601

[stephenh]

Huh! I didn't know that if you have a file called foo.ts, you're allowed to import it as foo.js.

That makes sense, I guess, since it will all wash out to *.js files in the end / post-compilation.

I dunno, that said, does it work to make this .ts?

Personally I think that'd be less surprising to the reader, since they would normally be reading the files as pre-tsc TS code. And I assume tsc will make all of the foo.ts imports into foo.js in the output anyway (?).

[paralin]

does it work to make this .ts?

No, this returns an error from the compiler (counter-intuitively)

[stephenh]

Also huh!

Wdyt about doing a s,\./_/ on the file names, so that your myother.pb.ts files end up as myother_bs and imports like like:

import { MyMessage } from '../myother/myother_pb'

It seems like this would be less disruptive to existing users that aren't use the .pb naming convention.

Granted, it sounds like file extensions are becoming defacto required in ESM, but hopefully/surely they've fixed/allow .ts extensions by then.

[paralin]

I'm very interested in using .pb.js since I'm using .pb.go - and with this patch it's working correctly.

We're going to have to use the .js suffix for all non-package imports with ESM anyway - (for example protobufjs/minimal.js) so eventually this will be required. And already the TypeScript compiler ignores the .js suffix and finds the .ts file, so it shouldn't be backwards incompatible, right?

If it causes an issue I guess it could be another option (to add .js as the suffix everywhere we try to import a ts file).

[stephenh]

Yeah, totally get/agree we'll need it with ESM, albeit I'm ~80% sure that *.ts suffixes will be/are kosher with that tsconfig (I've only seen the TS release notes go by, haven't personally used it yet).

Maybe do a conditional here, like if importString has a . in it, add the .js export?

I'm just thinking, while this makes a ton of sense for you, for the other pre-ESM users of ts-proto, they might read the imports and just do an raised eyebrow about "why is that there?", even if I agree it won't break anything for them.

If the conditional-if-.-in-importString fixes your .pb.js use case, let's do that? But if not, yeah, I'm good with always having it.

[paralin]

I've tried importing with the .ts suffix and it was straight-up not allowed by the compiler. I suggest you give it a try and see for yourself. It throws errors as far as I know.

Ideally I'd love to move to using esm soon. Currently the only reason I'm still using the "module": legacy setting is ts-proto.

[stephenh]

Oh damn, you're right. I had read this part of the release notes:

To overlay the way TypeScript works in this system, .ts and .tsx files now work the same way. 

As ".ts files work in the same way" --> "can be imported with .ts/.tsx file extensions".

But you're right, further down:

As a result, it will have to be rewritten to use the extension of the _output_ of foo.ts – so bar.ts will instead have to import from ./foo.js.

Weird. Okay, yeah, this is the future 🤷 , so sgtm.

[paralin]

I agree it's confusing and at first when I saw the .js imports in files I was like.. wat?

But like you said, it's the way the TypeScript developers decided to go for this, and I guess it's slightly less ambiguous than guessing to add the .ts suffix.

[paralin]

With regards to importing with '.ts' suffix: microsoft/TypeScript#37582

[stephenh]

Nice! Thanks for the link to the TS issue re .ts imports.

[paralin]

Probably can be done in a separate PR but this is also necessary if ESM is enabled:

import * as _m0 from 'protobufjs/minimal.js';

[paralin]

#603 (merged)

[paralin]

@stephenh Fixed.

Ts-jest doesn't support the .js import alias yet, so it required adding resolver: 'jest-ts-webcompat-resolver' to the jest.config.js.

[paralin]

Okay, I think it's good to go now 👍🏽

[stephenh]

🎉 This PR is included in version 1.116.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release
• v1.116.1

Your semantic-release bot 📦🚀

[zsmatrix62]

I think this change is making my error like below today: " Module not found: Error: Can't resolve '.xxxx.js' in ...

Are there any options to control the output just remove .js extension? .. im reverting the versions to use old libs...

[paralin]

@zsmatrix62 if you use typescript 4.7 or later, it will correctly resolve the .js to the .ts

[zsmatrix62]

@zsmatrix62 if you use typescript 4.7 or later, it will correctly resolve the .js to the .ts

I'm using Angular13 which runs on ts 4.4 and only.