Vscode-extension-for-zowe: Bundle VSCode extension with webpack

[ChrisBoehmCA]

Microsoft recommends bundling VSCode extensions before publishing

https://code.visualstudio.com/api/working-with-extensions/bundling-extension

[Colin-Stone]

Should we link with https://github.com/zowe/vscode-extension-for-zowe/issues/34

[Colin-Stone]

@zFernand0 I think this means altering the packaging to incorporate webpack but is this something that we would also need to do some updates to the CI/CD process too?.

[zFernand0]

@zFernand0 I think this means altering the packaging to incorporate webpack but is this something that we would also need to do some updates to the CI/CD process too?.

Hey @Colin-Stone,
I believe it'd be good if we could incorporate webpacking into the publishing step.

[Colin-Stone]

Maybe do in conjunction with https://github.com/zowe/vscode-extension-for-zowe/issues/5

[lauren-li]

I have been working with my teammate to try integrating webpack into Microsoft's basic i18n sample, just to be sure we can get the implementation right for a more basic set of files before bringing it into the Zowe VS Code extension. The i18n sample by itself runs as expected. I've created a repo for work on bringing webpack into the i18n sample: https://github.com/lauren-li/vscode-extension-samples/tree/add-webpack/i18n-sample

We are currently using vscode-nls-dev's webpack-loader in our webpack config, but we are also modifying the gulp file to pull in the webpack config as part of the build task. (VSCode-nls is our localization library.)

With webpack, the resulting file structure looks like it is getting close to what it should be, and the command titles are getting localized, but I am getting errors when running the commands themselves:

Localized command titles:

Errors when running commands:

Resulting file structure with webpack*:

For reference, this is the compiled i18n sample file structure without webpack*:

*The out vs dist folder between these two file structures is just a difference in naming choice, but these both function as the output folder for the generated files.

**Edit: The generated nls.ja.json files are also showing English values, where they should instead be showing Japanese values.

[lauren-li]

An example of webpack with vscode-nls: https://github.com/microsoft/vscode-cpptools/tree/master/Extension

[lauren-li]

Our team has an i18n-sample branch working with both webpack and vscode-nls: https://github.com/lauren-li/vscode-extension-samples/tree/prasang-add-webpack/i18n-sample

The extension builds, packages, and works great (including debugging).
Next step would be to transfer the implementation into the Zowe VS Code extension.

A huge thanks to my teammate @PrasangAPrajapati for his help on this!

[Colin-Stone]

Fantastic thanks guys. Do we have any idea if this affects the size of distributable or if it means faster starting?

[PrasangAPrajapati]

@Colin-Stone Well definitely it will not affect the size of the distributable but as we know, Loading one single file is always faster compare to loading small 100 different files. So it will load faster than before so it will be a better performance.

Vscode community also suggests everyone to use webpack to decrease the size and also for the better performance.
https://code.visualstudio.com/api/working-with-extensions/bundling-extension#using-webpack

[lauren-li]

Current progress on this story is in the add-webpack branch of @phaumer's fork: https://github.com/phaumer/vscode-extension-for-zowe/tree/add-webpack

NLS files now look like they are overall being generated correctly, but the when running VS Code in French, the strings from the ts files that should be translated are still showing in English. However, the translated strings from package.json are in French.

This branch is currently also breaking a significant number (30/70) of integration tests, but unit tests are all passing.

Items left to fix:

• Get the extension to use French language bundles when VS Code is running in French.
• Fix integration tests.
• (_Unrelated to the two points above_): See if there is a way to bring back the dynamic path for the log4js require statement in extension.ts. (Currently, in order to get this to work, the require statement is a hard-coded relative path.) Webpack prefers to follow static paths, and throws errors with dynamic paths in require statements.
  Some additional info:
  
  
  
  • https://webpack.js.org/guides/dependency-management/#require-with-expression
  
  
  • https://webpack.js.org/plugins/context-replacement-plugin/
  
  

[dogboydog]

@zowe/imperative which is included in this extension also has dynamic require statements, if I recall correctly. Hopefully that doesn't cause problems.

[lauren-li]

@dogboydog I haven't seen problems directly with @zowe/imperative yet, but it seems that for external libraries, we can list them under the webpack config file's externals if they cause issues. Thank you for mentioning that!

[dogboydog]

No problem, thanks. I guess it would still be @brightside/imperative here instead of @zowe/imperative so I misspoke. Hopefully won't cause any problems though

[MikeBauerCA]

@dogboydog we are updating to @zowe/imperative via #295

[lauren-li]

FYI to run the integration tests with the add-webpack branch, I found that I have to press Ctrl + C in my terminal after starting the integration tests in order to get them to actually kick off.

[lauren-li]

New branch for trying to implement webpack incrementally, first without internationalization: https://github.com/phaumer/vscode-extension-for-zowe/tree/add-webpack-no-i18n

[lauren-li]

Here is my latest branch for implementing webpack: https://github.com/phaumer/vscode-extension-for-zowe/tree/webpack-separate-dist

Information:

• This branch separates the output from running webpack and gulp into the dist folder (which is also used for running the extension), while the out folder is used for testing purposes.
• This branch has webpack working with internationalization! (Despite the plan to first implement webpack without internationlization.)
  
  
  
  • This can be tested by switching the VS Code display language to French. The following text should be in French:
  
  
  • Hover text for the "Create New Data Set" icon. (Tests package.json i18n)
  
  
  • QuickPick text that appears when deleting a data set. (Tests i18n for TypeScript files.)
  
  

Concerns:

• Unit tests are all passing, but 31/77 of the integration tests are failing. It appears that the Profile is not getting instantiated properly during the tests, and so integration tests that depend on profiles are failing.
  
  
  
  • Note: Integration tests start normally now (no more need to press Ctrl+C to kick them off after starting, which was an issue in a previous branch).
  
  
• To initialize the Imperative Logger in extension.ts (around line 113), a static relative path is used: const loggerConfig = require("../log4jsconfig.json");.

[lauren-li]

https://github.com/zowe/vscode-extension-for-zowe/tree/add-webpack-out

The above branch has webpack working with localization, and has running/passing integration tests. Aside from being slightly behind master, the branch is almost PR-ready, except for one more issue: the logger does not seem to work when the extension is Webpacked.

I created a PR for log4js to address an issue when using Webpack with log4js's FileSync appender. This is now fixed in version 6.3.0 of log4js. I will be making PRs to Zowe Imperative (and Zowe CLI, if necessary) to update their version of log4js to 6.3.0, as it appears that Zowe Explorer uses the version of log4js that they pull in.

[lauren-li]

PR submitted to update Zowe Imperative log4js version to 6.3.0: https://github.com/zowe/imperative/pull/408

[lauren-li]

zowe/imperative#408 has been merged into master and released in Zowe Imperative version 4.6.3. Zowe CLI version 6.14.0 has been updated to use version 4.6.4 of Zowe Imperative.

Zowe Explorer PR #835 has been opened to update our version of Zowe CLI to 6.14.0.

[ChrisBoehmCA]

You guys rock... thanks for seeing this all the way through 🎉