Introduce bundling with esbuild

[afonsonf]

Hi, in this PR I'm introduce bundling of the extension using esbuild (https://esbuild.github.io/). Documentation on bundling vscode extensions: https://code.visualstudio.com/api/working-with-extensions/bundling-extension.

I'm introducing bundling to enable the refactoring of the webui component using the webui-toolkit (#261).

Changes

• Introduce bundling with esbuild
  • Entire extension code packaged to a single js file
  • Path reference to tools files changed as the js file location changed
• Update .vscodeignore to be more clear what is packaged inside the extension
• Update linter and cleanups (updated to the version used in webui-toolkit-samples)
  • Update the import of the moment module because of linter warnings
  • Remove unused variables and fix line too long

References

• https://code.visualstudio.com/api/working-with-extensions/bundling-extension
• https://github.com/microsoft/vscode-webview-ui-toolkit/blob/main/docs/getting-started.md
• https://github.com/microsoft/vscode-webview-ui-toolkit-samples/tree/main/default/hello-world

[lemmy]

@afonsonf, I just came across esbuild and am unable to provide much of a review. However, upon examining the diff, I suggest dividing the changes related to esbuild integration, linter changes, and vscode.dev support into distinct commits. This will help with when bisecting potential regressions in the future. Speaking of vscode.dev support, syntax highlighting will be a big improvement. :-) Can you make a note why "[I] was not able to make it work in codespaces"?

[lemmy]

LGTM with minor suggestions at #283 (comment)

[afonsonf]

@afonsonf, I just came across esbuild and am unable to provide much of a review. However, upon examining the diff, I suggest dividing the changes related to esbuild integration, linter changes, and vscode.dev support into distinct commits. This will help with when bisecting potential regressions in the future. Speaking of vscode.dev support, syntax highlighting will be a big improvement. :-) Can you make a note why "[I] was not able to make it work in codespaces"?

Thanks for the suggestion, I will separate the changes into different commits

From what I saw, to enable the usage of the extension in vscode.dev was just setting this field in the package.json:
https://github.com/afonsonf/vscode-tlaplus/blob/add-build-using-esbuild/package.json#L41

However there is the error pop up when starting it, because it tries to load the entire extension, it would be nice to configure it to only load the highligting and the supported components:

For testing the extension in "web" mode this is the documentation:
(https://code.visualstudio.com/api/extension-guides/web-extensions#test-your-web-extension)

• Starting a debug instance from the debug and run panel
• Start a debug instance using @vscode/test-web
• Sideloading, https://code.visualstudio.com/api/extension-guides/web-extensions#test-your-web-extension-in-on-vscode.dev

The first option did not work because the vscode debugging instance that started did not had the extension enabled or did not work, could not find why.

The errors I got in codespaces trying to use the second option where 500 erros when opening the vscode.dev instance started with @vscode/test-web. Tried changing some options ('--host' and codespace port configurations) but could not get it to work.

Locally (from a devcontainer environment), the second and thrid option worked, however the third one required more setup (I'll check if the instructions for the third one, sideloading, work from the codespace environment, and if it is the case I'll document it).

[afonsonf]

However there is the error pop up when starting it, because it tries to load the entire extension, it would be nice to configure it to only load the highligting and the supported components

I think this can be solved by introducing a new ts file as the browser extension

[afonsonf]

Divided the changes in two commits and removed the changes related to vscode.dev because I will improve it and create a new PR with those changes

[lemmy]

Feel free to push whenever you are ready. :-)

[lemmy]

The extension fails to activate the first time when debugging the extension in a second browser window on Codespaces:

Activating extension 'alygin.vscode-tlaplus' failed: Cannot find module '/workspaces/vscode-tlaplus/out/main.js'
Require stack:
- /vscode/bin/linux-x64/704ed70d4fd1c6bd6342c436f1ede30d1cff4710/out/vs/loader.js
- /vscode/bin/linux-x64/704ed70d4fd1c6bd6342c436f1ede30d1cff4710/out/bootstrap-amd.js
- /vscode/bin/linux-x64/704ed70d4fd1c6bd6342c436f1ede30d1cff4710/out/bootstrap-fork.js.

Relaunching the debug session fixed it.