feature/vscode web (#987)

* Add files for web extension and disable the winston-based logger

* Copy logger from VSCodeVim that is compatible both with Node and browser and fix build config for it

* Fix browser logger to filter by log levels

* Fix .gitignore

* Configure to run tests on browser

* Update .vscodeignore

* Update vscode-web:prepublish script

* Fix vscode:prepublish script to run both compiling for node and web

* Fix web-extension.webpack.config.js to exclude test code in production build

.gitignore

@@ -2,6 +2,7 @@ out
 dist
 node_modules
 .vscode-test/
+.vscode-test-web/
 *.vsix
 
 

.vscode/extensions.json

@@ -2,6 +2,7 @@
 	// See http://go.microsoft.com/fwlink/?LinkId=827846
 	// for the documentation about the extensions.json format
 	"recommendations": [
-		"dbaeumer.vscode-eslint"
+		"dbaeumer.vscode-eslint",
+		"eamodio.tsl-problem-matcher"
 	]
-}
+}

.vscode/launch.json

@@ -31,6 +31,35 @@
 				"${workspaceFolder}/out/test/**/*.js"
 			],
 			"preLaunchTask": "npm: test-compile"
+		},
+		{
+			"name": "Run Web Extension in VS Code",
+			"type": "pwa-extensionHost",
+			"debugWebWorkerHost": true,
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}",
+				"--extensionDevelopmentKind=web"
+			],
+			"outFiles": [
+				"${workspaceFolder}/dist/web/**/*.js"
+			],
+			"preLaunchTask": "npm: watch-web"
+		},
+		{
+			"name": "Extension Tests in VS Code",
+			"type": "extensionHost",
+			"debugWebWorkerHost": true,
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}",
+				"--extensionDevelopmentKind=web",
+				"--extensionTestsPath=${workspaceFolder}/dist/web/test/suite/index"
+			],
+			"outFiles": [
+				"${workspaceFolder}/dist/web/**/*.js"
+			],
+			"preLaunchTask": "npm: watch-web"
 		}
 	]
 }

.vscode/tasks.json

@@ -0,0 +1,29 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "compile-web",
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			},
+			"problemMatcher": [
+				"$ts-webpack",
+				"$tslint-webpack"
+			]
+		},
+		{
+			"type": "npm",
+			"script": "watch-web",
+			"group": "build",
+			"isBackground": true,
+			"problemMatcher": [
+				"$ts-webpack-watch",
+				"$tslint-webpack-watch"
+			]
+		}
+	]
+}

.vscodeignore

@@ -1,15 +1,24 @@
 .vscode
 .vscode-test
+.vscode-test-web
+.github
 node_modules
+yarn.lock
 out/
 src/
 .gitignore
-vsc-extension-quickstart.md
+.eslintignore
+.prettierignore
 **/tsconfig.json
 **/.eslintrc.json
 **/*.map
 **/*.ts
-**/webpack.config.js
-azure-pipelines.yml
+**/*webpack.config.js
 keybindings.json
 DEVELOPMENT.md
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*

build/web-extension.webpack.config.js

@@ -0,0 +1,71 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+//@ts-check
+'use strict';
+
+//@ts-check
+/** @typedef {import('webpack').Configuration} WebpackConfig **/
+
+const path = require('path');
+const webpack = require('webpack');
+
+const config = /** @type WebpackConfig */ {
+	context: path.dirname(__dirname),
+	mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')
+	target: 'webworker', // extensions run in a webworker context
+	entry: {
+		'extension': './src/web/extension.ts',
+	},
+	resolve: {
+		mainFields: ['browser', 'module', 'main'], // look for `browser` entry point in imported node modules
+		extensions: ['.ts', '.js'], // support ts-files and js-files
+		alias: {
+			// provides alternate implementation for node module and source files
+			vs: path.resolve(__dirname, '..', 'src', 'vs'),
+			platform: path.resolve(__dirname, '..', 'src', 'platform', 'browser'),
+		},
+		fallback: {
+			// Webpack 5 no longer polyfills Node.js core modules automatically.
+			// see https://webpack.js.org/configuration/resolve/#resolvefallback
+			// for the list of Node.js core module polyfills.
+			'assert': require.resolve('assert')
+		},
+	},
+	module: {
+		rules: [{
+			test: /\.ts$/,
+			exclude: /node_modules/,
+			use: [{
+				loader: 'ts-loader'
+			}]
+		}]
+	},
+	plugins: [
+		new webpack.ProvidePlugin({
+			process: 'process/browser', // provide a shim for the global `process` variable
+		}),
+	],
+	externals: {
+		'vscode': 'commonjs vscode', // ignored because it doesn't exist
+	},
+	performance: {
+		hints: false
+	},
+	output: {
+		filename: '[name].js',
+		path: path.join(__dirname, '../dist/web'),
+		libraryTarget: 'commonjs'
+	},
+	devtool: 'nosources-source-map' // create a source map that points to the original source file
+};
+
+module.exports = (env, argv) => {
+	if (argv.mode !== 'production') {
+		config.entry['test/suite/index'] = './src/web/test/suite/index.ts'
+	}
+
+	return config;
+};

package.json

@@ -33,7 +33,7 @@
 		"workspace"
 	],
 	"main": "./dist/extension.js",
-	"browser": "./dist/extension.js",
+	"browser": "./dist/web/extension.js",
 	"contributes": {
 		"configuration": {
 			"type": "object",
@@ -3654,7 +3654,7 @@
 		]
 	},
 	"scripts": {
-		"vscode:prepublish": "yarn && yarn gen-keys && yarn webpack:prod",
+		"vscode:prepublish": "yarn && yarn gen-keys && yarn webpack:prod && yarn run package-web",
 		"webpack:dev": "webpack --mode development",
 		"webpack:prod": "webpack --mode production",
 		"webpack": "yarn webpack:dev",
@@ -3666,21 +3666,30 @@
 		"check:prettier": "prettier --check \"src/**/*.ts\"",
 		"check:eslint": "eslint src --ext ts",
 		"pretest": "yarn run test-compile",
-		"test": "node ./out/test/runTest.js"
+		"test": "node ./out/test/runTest.js",
+		"test:web": "vscode-test-web --browserType=chromium --extensionDevelopmentPath=. --extensionTestsPath=dist/web/test/suite/index.js",
+		"pretest:web": "yarn run compile-web",
+		"compile-web": "webpack --config ./build/web-extension.webpack.config.js",
+		"watch-web": "webpack --watch --config ./build/web-extension.webpack.config.js",
+		"package-web": "webpack --mode production --devtool hidden-source-map --config ./build/web-extension.webpack.config.js"
 	},
 	"devDependencies": {
 		"@types/glob": "^7.1.4",
 		"@types/mocha": "^9.0.0",
 		"@types/node": "^16.7.4",
 		"@types/sinon": "^10.0.2",
 		"@types/vscode": "^1.59.0",
+		"@types/webpack-env": "^1.16.2",
 		"@typescript-eslint/eslint-plugin": "^4.29.3",
 		"@typescript-eslint/parser": "^4.29.3",
+		"@vscode/test-web": "^0.0.8",
+		"assert": "^2.0.0",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.3.0",
 		"glob": "^7.1.7",
 		"mocha": "^8.4.0",
 		"prettier": "^2.3.2",
+		"process": "^0.11.10",
 		"sinon": "^11.1.2",
 		"strip-json-comments": "^3.1.1",
 		"ts-loader": "^9.2.5",

src/configuration/configuration.ts

@@ -2,6 +2,7 @@
  * This file is derived from VSCodeVim/Vim.
  */
 
+import { Logger } from "../logger";
 import * as vscode from "vscode";
 import { IConfiguration, IDebugConfiguration } from "./iconfiguration";
 
@@ -72,6 +73,8 @@ export class Configuration implements IConfiguration, vscode.Disposable {
         this[option] = val;
       }
     }
+
+    Logger.configChanged(this);
   }
 
   private static unproxify(obj: { [key: string]: any }) {

src/extension.ts

@@ -5,15 +5,13 @@ import { EmacsEmulator } from "./emulator";
 import { EmacsEmulatorMap } from "./emulator-map";
 import { executeCommands } from "./execute-commands";
 import { KillRing } from "./kill-yank/kill-ring";
-import { initializeLogger, logger } from "./logger";
+import { logger } from "./logger";
 import { MessageManager } from "./message";
 
 export function activate(context: vscode.ExtensionContext): void {
   MessageManager.registerDispose(context);
   Configuration.registerDispose(context);
 
-  initializeLogger(Configuration.instance);
-
   const killRing = new KillRing(Configuration.instance.killRingMax);
 
   const emulatorMap = new EmacsEmulatorMap(killRing);

src/logger.ts

@@ -1,65 +1,30 @@
-/**
- * This file is derived from VSCodeVim/Vim.
- */
+import { ILogger } from "src/platform/common/logger";
+import { LoggerImpl } from "platform/loggerImpl";
+import { IConfiguration } from "src/configuration/iconfiguration";
 
-import * as vscode from "vscode";
-import * as winston from "winston";
-import { ConsoleForElectron } from "winston-console-for-electron";
-import TransportStream from "winston-transport";
-import { IConfiguration } from "./configuration/iconfiguration";
+export class Logger {
+  private static readonly cache = new Map<string, ILogger>();
+  private static configuration: IConfiguration | undefined = undefined;
 
-/**
- * Implementation of Winston transport
- * Displays VS Code message to user
- */
-class VsCodeMessage extends TransportStream {
-  public log(info: { level: string; message: string }, callback: () => void) {
-    switch (info.level) {
-      case "error":
-        vscode.window.showErrorMessage(info.message, "Dismiss");
-        break;
-      case "warn":
-        vscode.window.showWarningMessage(info.message, "Dismiss");
-        break;
-      case "info":
-      case "verbose":
-      case "debug":
-        vscode.window.showInformationMessage(info.message, "Dismiss");
-        break;
+  static get(prefix: string): ILogger {
+    let logger = Logger.cache.get(prefix);
+    if (logger === undefined) {
+      logger = LoggerImpl.get(prefix);
+      if (Logger.configuration) {
+        logger.configChanged(Logger.configuration);
+      }
+      Logger.cache.set(prefix, logger);
     }
 
-    if (callback) {
-      callback();
+    return logger;
+  }
+
+  static configChanged(configuration: IConfiguration): void {
+    Logger.configuration = configuration;
+    for (const logger of this.cache.values()) {
+      logger.configChanged(configuration);
     }
   }
 }
 
-export let logger = winston.createLogger({
-  format: winston.format.simple(),
-  transports: [
-    new ConsoleForElectron({
-      level: "error",
-      silent: false,
-    }),
-    new VsCodeMessage({
-      level: "error",
-      silent: false,
-    }),
-  ],
-});
-
-export function initializeLogger(configuration: IConfiguration) {
-  logger = winston.createLogger({
-    format: winston.format.simple(),
-    transports: [
-      new ConsoleForElectron({
-        level: configuration.debug.loggingLevelForConsole,
-        silent: configuration.debug.silent,
-      }),
-      new VsCodeMessage({
-        level: configuration.debug.loggingLevelForAlert,
-        silent: configuration.debug.silent,
-      }),
-    ],
-  });
-}
+export const logger = Logger.get(""); // Default logger, which is not recommended to use. Prefixed loggers should be used instead.