Add support for LWC dev via TypeScript
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:
- Exactly what transpilers are being used, and how are they integrated into operations that are otherwise managed by the CLI, specifically
force:source:deploy
andforce:source:push
? Is there enough consistency at this point to provide a single LWC/TS feature that would useful to enough IC2 users? - 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?
- 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? - 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...
Comments (10)
-
repo owner -
reporter Understood. Sounds good to recast as an enhancement.
-
repo owner - changed title to Add support for LWC dev via TypeScript
- removed version
- marked as enhancement
- edited description
-
repo owner 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.
-
reporter - 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 tobabel -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. - Are the transpilers outputting into a separate location in the filesystem
Nope, it’s in place. .ts and .js file live side-by-side - If the latter, are the
.ts
files added to.forceignore
From my .forceignore,**/*.ts
- 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.
- Exactly what transpilers are being used
-
repo owner 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?
-
reporter - attached stackedDateTime.zip
a trivial typescript component
-
repo owner 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.
-
reporter 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. -
repo owner Issue
#2397was marked as a duplicate of this issue. - Log in to comment
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.