refactor: various Browser related changes (#3785)

* fix: package-lock.json not updated

Problem:

We recently updated the vscode engine in
package.json.

'npm install' was not run so the package-lock.json
was not updated.

Solution:

Ran npm install and got the updated package-lock.json

Signed-off-by: nkomonen <[email protected]>

* npm: install webpack types package

Add npm types to stop errors in webpack.browser.config.js

Signed-off-by: Nikolas Komonen <[email protected]>

* fix imports

Signed-off-by: nkomonen <[email protected]>

* refactor: only create instance when it will be used

This was done due to the instance being created when
running in the browser context and failing since the
MetadatService of the DefaultEc2MetadataClient was being
indicated as not existing.

Signed-off-by: Nikolas Komonen <[email protected]>

* refactor: update logger utils to use new filesystem class

Signed-off-by: nkomonen <[email protected]>

* vscode-nls: Fix localize() not working in browser

See the long comment in the code for info.

Signed-off-by: Nikolas Komonen <[email protected]>

* refactor: move promisify call inside class

Problem:
When this module is loaded the promisify call gets called
and it fails in the browser.

We are not explicitly using the functionality at the moment.

Solution:
Move the promisify call to inside the class where it is used.
If we do end up using this in the browser we will need to revisit
this.
But for now it allows things to run in the browser

Signed-off-by: nkomonen <[email protected]>

* dependency: remove 'filer' module

It is not needed anymore. It just existed for
testing purposes initially.

Signed-off-by: nkomonen <[email protected]>

* browser: polyfill 'fs' with 'memfs' temporarily

Execution of the extension fails in browser mode
partly due to 'fs' not working in the browser.

Solution:

polyfill 'fs' with 'memfs' TEMPORARILY during the
development phase.

Eventually we will need to see what still depends
on 'fs' and if it is out of our control we may want
to remove our dependency from it.

Signed-off-by: nkomonen <[email protected]>

* tests: setup initial browser tests

- launch config to run the browser tests
- temporary test the ensure things run
- test the isInBrowser function is properly set

- The browser extension is activated
- We can test that the isInBrowser function has
  been properly set

Signed-off-by: Nikolas Komonen <[email protected]>

* feat: isInBrowser function

Function that tells us if we are in the browser.

Signed-off-by: Nikolas Komonen <[email protected]>

* build: remove vscode-nls copyFiles script logic

During the copyFiles script we can indicate for
nls.metadata files (that are generated by the
now disabled loader in the base webpack config)
to be copied to 'dist'.

Since the files are not generated anymore we disable
the copying of these files from being attempted.

Signed-off-by: nkomonen <[email protected]>

* logger: don't fs.watch log file when in browser

This will skip watching the log file for changes when
we are in the browser.

We will eventually want to remove this function as a whole
and instead throw errors on attempts to interact
with the file and it is not where we expect it to be.

Signed-off-by: nkomonen <[email protected]>

---------

Signed-off-by: nkomonen <[email protected]>
Signed-off-by: Nikolas Komonen <[email protected]>

Author: nkomonen-amazon

.vscode/launch.json

@@ -30,7 +30,7 @@
             "request": "launch",
             "args": ["--extensionDevelopmentPath=${workspaceFolder}", "--extensionDevelopmentKind=web"],
             "outFiles": ["${workspaceFolder}/dist/**/*.js"],
-            "preLaunchTask": "${defaultBuildTask}"
+            "preLaunchTask": "npm: buildBrowser"
         },
         {
             "name": "Extension (webpack)",
@@ -78,6 +78,21 @@
             "outFiles": ["${workspaceFolder}/dist/**/*.js"],
             "preLaunchTask": "${defaultBuildTask}"
         },
+        {
+            "name": "Extension Tests (browser)",
+            "type": "extensionHost",
+            "debugWebWorkerHost": true,
+            "request": "launch",
+            "args": [
+                "--disable-extensions",
+                "--extensionDevelopmentPath=${workspaceFolder}",
+                "--extensionDevelopmentKind=web",
+                "--extensionTestsPath=${workspaceFolder}/dist/src/testBrowser/testRunner",
+                "${workspaceRoot}/dist/src/testFixtures/workspaceFolder"
+            ],
+            "outFiles": ["${workspaceFolder}/dist/src/**/*.js"],
+            "preLaunchTask": "npm: buildBrowser"
+        },
         {
             "name": "Integration Tests",
             "type": "extensionHost",

.vscode/tasks.json

@@ -36,6 +36,13 @@
                 }
             }
         },
+        {
+            "label": "npm: buildBrowser",
+            "type": "npm",
+            "script": "buildBrowser",
+            "dependsOn": ["watch"],
+            "detail": "Builds the webpacked browser bundle"
+        },
         {
             "type": "npm",
             "script": "lint",

package-lock.json

@@ -3554,13 +3554,13 @@
     },
     "scripts": {
         "prepare": "ts-node ./scripts/build/prepare.ts",
-        "vscode:prepublish": "npm run clean && npm run buildScripts && webpack --mode production && npm run copyFiles -- --webpacked",
+        "vscode:prepublish": "npm run clean && npm run buildScripts && webpack --mode production && npm run copyFiles",
         "clean": "ts-node ./scripts/clean.ts dist",
         "reset": "npm run clean -- node_modules && npm install",
         "copyFiles": "ts-node ./scripts/build/copyFiles.ts",
         "buildScripts": "npm run generateClients && npm run generatePackage && npm run generateNonCodeFiles && npm run copyFiles",
-        "buildBrowser": "npm run clean && npm run buildScripts && webpack --config webpack.browser.config.js --mode production && npm run copyFiles -- --webpacked",
-        "compile": "npm run clean && npm run buildScripts && webpack --mode development && npm run copyFiles -- --webpacked",
+        "buildBrowser": "npm run clean && npm run buildScripts && webpack --config webpack.browser.config.js --mode production && npm run copyFiles",
+        "compile": "npm run clean && npm run buildScripts && webpack --mode development && npm run copyFiles",
         "watch": "npm run clean && npm run buildScripts && tsc -watch -p ./",
         "postinstall": "npm run generateTelemetry && npm run generateConfigurationAttributes",
         "testCompile": "npm run buildScripts && tsc -p ./ && npm run instrument",
@@ -3607,6 +3607,7 @@
         "@types/uuid": "^9.0.1",
         "@types/vscode": "^1.65.0",
         "@types/vscode-webview": "^1.57.1",
+        "@types/webpack-env": "^1.18.1",
         "@types/xml2js": "^0.4.11",
         "@typescript-eslint/eslint-plugin": "^5.59.0",
         "@typescript-eslint/parser": "^5.59.1",

package.json

@@ -85,6 +85,7 @@ async function copy(task: CopyTask): Promise<void> {
 ;(async () => {
     const args = process.argv.slice(2)
 
+    // To use this something like: "npm run copyFiles -- --webpacked"
     if (args.includes('--webpacked')) {
         tasks.push(...webpackedTasks)
     }

scripts/build/copyFiles.ts

@@ -1,5 +1,7 @@
 # Browser
 
+This folder should only contain code which must run in the Browser.
+
 For the AWS VS Code Toolkit extension to work in the browser (eg: [vscode.dev](https://vscode.dev/)), we
 need to ensure that certain functionality which may have previously only been able to
 run in a desktop environment can additionally run in a browser environment.

src/browser/README.md

@@ -3,10 +3,13 @@
     "description": "Browser specific modules to separate concerns from main package.json",
     "license": "Apache-2.0",
     "dependencies": {
-        "filer": "^1.4.1",
+        "memfs": "^4.2.1",
         "os-browserify": "^0.3.0",
         "path-browserify": "^1.0.1",
         "process": "^0.11.10",
         "stream-browserify": "^3.0.0"
+    },
+    "devDependencies": {
+        "assert": "^2.0.0"
     }
 }

src/browser/package.json

@@ -0,0 +1,10 @@
+# Common
+
+This folder is for code that can be used in any environment (eg: Node.js or Browser).
+
+### Examples
+
+Examples of what should **NOT** be in this folder:
+
+-   `fs`: only works with Node.js
+-   `window`: only exists in the Browser

src/common/README.md

@@ -0,0 +1,14 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+let inBrowser = false
+/** Set the value of if we are in the browser. Impacts {@link isInBrowser}. */
+export function setInBrowser(value: boolean) {
+    inBrowser = value
+}
+/** Return true if we are running in the browser, false otherwise. */
+export function isInBrowser() {
+    return inBrowser
+}

src/common/browserUtils.ts

@@ -4,16 +4,14 @@
  */
 
 import * as vscode from 'vscode'
-
-// The following is required so that the copyFiles script does not fail.
-// I'm assuming this generates something when run that the script can use.
-import * as nls from 'vscode-nls'
-nls.loadMessageBundle()
+import { setInBrowser } from './common/browserUtils'
 
 export async function activate(context: vscode.ExtensionContext) {
+    setInBrowser(true)    
+
     vscode.window.showInformationMessage(
         'AWS Toolkit: Browser Mode Under Development. No features are currently provided',
-        { modal: true }
+        { modal: false }
     )
 }