Create pre deploy hook to automatically compile all lwc written in ts

[AllanOricil]

The vscode team enabled support to lwc written in TS. In the following guide, it is explained that developers must manually compile their LWC before deploying to SF.

https://developer.salesforce.com/docs/platform/lwc/guide/ts.html
https://github.com/forcedotcom/salesforcedx-vscode/releases/tag/v61.15.0

This manual process impacts negatively in DX because it has to be done manually every time before a deployment, and the lwc folder will always have both ts and compiled js, which can end up being pushed to git repositories by mistake, specially in projects that mix both js and ts while transioning. So, the idea is to automatically compile all lwc written in TS using a sf pre-deploy hook. You can automate this using the .ts extension, and the file that has the same name as the component's folder as the entrypoint. The resulting js must not be inside the component's folder to avoid the aforementioned issues.

[zenibako]

Totally agree that this is a pretty big gap in the DX currently. I was surprised to see that this wasn't integrated into the existing deployment workflow somehow.

[FabienTaillon]

My 2 cents here:

• during my tests I can see a .gitignore file being added for each lwc folder, ignoring the .js file so it won't get added to git repository by mistake
• for the sf pre-deploy hook, this may work in the CLI but may not work via the VS Code extensions as these are not always calling the CLI (and thus the hooks) as described here.

So I guess this would have to be embedded in the VS Code Extension, but today when you have activated TypeScript creating a new LWC ask you whether it should be written in TS or JS so there are already some changes there. I guess if TypeScript is activated the deploy feature could compile it first.

I do agree this would make lives much easier, but also let's not forget that this feature is still in developer preview and the team is still working on it 🙂

[FabienTaillon]

FYI in the meantime I'm using Activitus Bar that adds button to the bottom bar of VS Code.

By adding this to .vscode/settings.json:

"activitusbar.views": [
    {
      "name": "task.SFDX Push",
      "codicon": "cloud-upload"
    }
  ],
  "activitusbar.inactiveColour": "#FFFFFF",

and a new file, .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "SFDX Push",
      "type": "shell",
      "command": "npm run lwc:build && sf project deploy start"
    }
  ]
}

you'll get a button that will compile and deploy in one click: