Add support for LWC dev via TypeScript

[Andrew Visser]

Original request:

The tabber at the bottom of the editor window is not correct when viewing a TypeScript source file for an LWC component. When I select the compiled JavaScript file, everything looks fine. When viewing the TypeScript file, the tabber shows “Text” & “Metadata” as the options.

‌Generalizing to determine what would be required to provide first-class (or as close as possible/makes sense) support for LWC development via TypeScript instead of (or perhaps in conjunction with) ES6.

What's probably needed first is a clear understanding of how folks are integrating TypeScript into their LWC development processes. I've spoken with folks about a few different approaches, though pretty much all of them are based on standard edit=>transpile=>deploy pipelines. But there are many questions including:

1. Exactly what transpilers are being used, and how are they integrated into operations that are otherwise managed by the CLI, specifically force:source:deploy and force:source:push? Is there enough consistency at this point to provide a single LWC/TS feature that would useful to enough IC2 users?
2. Are the transpilers outputting into a separate location in the filesystem and then the CLI executes against that location, or do things happen in-place?
3. If the latter, are the .ts files added to .forceignore and the resulting .js files added to .gitignore to make sure that the Salesforce CLI and VCS only "see" what they should see respectively? Can you even tell the CLI to ignore a subset of files in an LWC bundle?
4. What does this mean for metadata retrieval/reconciliation via force:source:retrieve, force:source:pull, and IC2's own usability layer atop those via Retrieve Metadata / Retrieve for Merge?

Those are the ones that come to mind. I'm sure that there are layers upon layers of additional questions to be answered behind those, though...

[Scott Wells]

Hi. This is part of a larger overall issue in that IC2 doesn't currently support TypeScript for LWC dev, only ES6. We can recast this as an enhancement request for such support, but that would need to lead to the larger discussion of how to support TypeScript for LWC dev as there are (to my knowledge) a number of different approaches to how transpiling interacts with deployment, retrieval, etc.

[Andrew Visser]

Understood. Sounds good to recast as an enhancement.

[Scott Wells]

Andrew, I imagine you just got a notification for the changes I just made to generalize this request, but if you could provide a comment answering as many of the posed questions as possible based on your own implementation, and then I'll likely post this around to get others' responses as well so that I can begin to paint a more complete picture of what this might look like.

[Andrew Visser]

1. Exactly what transpilers are being used
   Babel is doing the work. Most of the team uses VSCode which “just works” for TypeScript. My approach is to babel -w running in the background. So I make a change to the .ts file, lose editor focus to cause a save, babel runs, then I cmd+s which causes IC2 to deploy the whole LWC. It works okay.
2. Are the transpilers outputting into a separate location in the filesystem
   Nope, it’s in place. .ts and .js file live side-by-side
3. If the latter, are the .ts files added to .forceignore
   From my .forceignore, **/*.ts
4. What does this mean for metadata retrieval/reconciliation
   I’m at an ISV so those operations aren’t part of my workflow. I don’t know how those would be supported.

‌

[Scott Wells]

Thanks, Andrew. That helps. Any chance you have a super simple sample TypeScript-based component sitting around that you could share so I could tinker with this a bit myself?

[Andrew Visser]

a trivial typescript component

[Scott Wells]

Thanks! I'll play with this a bit and see what level of support might be offered--even if not entirely intuitive--by the base JetBrains IDE and what IC2 might offer to help streamline things as well.

[Andrew Visser]

Just thinking out loud, but if babel was an option with the new "Actions on Save", that would probably solve my needs. I'll keep an eye out for an plugin that can do that.

[Scott Wells]

Issue #2397 was marked as a duplicate of this issue.