Add webpack build for browser entrypoint (#16912)

Author: jakebailey

.gitignore

@@ -41,3 +41,4 @@ debugpy*.log
 pydevd*.log
 nodeLanguageServer/**
 nodeLanguageServer.*/**
+dist/**

build/webpack/webpack.extension.browser.config.js

@@ -0,0 +1,74 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+// @ts-check
+
+'use strict';
+
+const path = require('path');
+
+const packageRoot = path.resolve(__dirname, '..', '..');
+const outDir = path.resolve(packageRoot, 'dist');
+
+/** @type {(env: any, argv: { mode: 'production' | 'development' | 'none' }) => import('webpack').Configuration} */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const nodeConfig = (_, { mode }) => ({
+    context: packageRoot,
+    entry: {
+        extension: './src/client/browser/extension.ts',
+    },
+    target: 'webworker',
+    output: {
+        filename: '[name].browser.js',
+        path: outDir,
+        libraryTarget: 'commonjs2',
+        devtoolModuleFilenameTemplate: '../../[resource-path]',
+    },
+    devtool: 'source-map',
+    // stats: {
+    //     all: false,
+    //     errors: true,
+    //     warnings: true,
+    // },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    externals: {
+        vscode: 'commonjs vscode',
+
+        // These dependencies are ignored because we don't use them, and App Insights has try-catch protecting their loading if they don't exist
+        // See: https://github.com/microsoft/vscode-extension-telemetry/issues/41#issuecomment-598852991
+        'applicationinsights-native-metrics': 'commonjs applicationinsights-native-metrics',
+        '@opentelemetry/tracing': 'commonjs @opentelemetry/tracing',
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                loader: 'ts-loader',
+                options: {
+                    configFile: 'tsconfig.browser.json',
+                },
+            },
+            {
+                test: /\.node$/,
+                loader: 'node-loader',
+            },
+        ],
+    },
+    // optimization: {
+    //     usedExports: true,
+    //     splitChunks: {
+    //         cacheGroups: {
+    //             defaultVendors: {
+    //                 name: 'vendor',
+    //                 test: /[\\/]node_modules[\\/]/,
+    //                 chunks: 'all',
+    //                 priority: -10,
+    //             },
+    //         },
+    //     },
+    // },
+});
+
+module.exports = nodeConfig;

gulpfile.js

@@ -75,6 +75,7 @@ gulp.task('webpack', async () => {
     await buildWebPackForDevOrProduction('./build/webpack/webpack.extension.dependencies.config.js', 'production');
     await buildWebPackForDevOrProduction('./build/webpack/webpack.startPage-ui-viewers.config.js', 'production');
     await buildWebPackForDevOrProduction('./build/webpack/webpack.extension.config.js', 'extension');
+    await buildWebPackForDevOrProduction('./build/webpack/webpack.extension.browser.config.js', 'browser');
 });
 
 gulp.task('addExtensionPackDependencies', async () => {
@@ -199,6 +200,8 @@ function getAllowedWarningsForWebPack(buildConfig) {
                 'WARNING in ./node_modules/diagnostic-channel-publishers/dist/src/azure-coretracing.pub.js',
                 'WARNING in ./node_modules/applicationinsights/out/AutoCollection/NativePerformance.js',
             ];
+        case 'browser':
+            return [];
         default:
             throw new Error('Unknown WebPack Configuration');
     }

news/1 Enhancements/16869.md

@@ -0,0 +1 @@
+Add a basic web extension bundle.

news/1 Enhancements/16870.md

@@ -0,0 +1 @@
+Add basic Pylance support to the web extension.

package.json

@@ -102,6 +102,7 @@
         "workspaceContains:app.py"
     ],
     "main": "./out/client/extension",
+    "browser": "./dist/extension.browser.js",
     "contributes": {
         "walkthroughs": [
             {

src/client/browser/extension.ts

@@ -0,0 +1,61 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import * as vscode from 'vscode';
+import { LanguageClientOptions } from 'vscode-languageclient';
+import { LanguageClient } from 'vscode-languageclient/browser';
+import { ILSExtensionApi } from '../activation/node/languageServerFolderService';
+import { PYLANCE_EXTENSION_ID } from '../common/constants';
+
+interface BrowserConfig {
+    distUrl: string; // URL to Pylance's dist folder.
+}
+
+export async function activate(context: vscode.ExtensionContext): Promise<void> {
+    // Run in a promise and return early so that VS Code can go activate Pylance.
+    runPylance(context);
+}
+
+async function runPylance(context: vscode.ExtensionContext): Promise<void> {
+    const pylanceExtension = vscode.extensions.getExtension<ILSExtensionApi>(PYLANCE_EXTENSION_ID);
+    const pylanceApi = await pylanceExtension?.activate();
+    if (!pylanceApi?.languageServerFolder) {
+        throw new Error('Could not find Pylance extension');
+    }
+
+    const { path: distUrl } = await pylanceApi.languageServerFolder();
+
+    try {
+        const worker = new Worker(`${distUrl}/browser.server.bundle.js`);
+
+        // Pass the configuration as the first message to the worker so it can
+        // have info like the URL of the dist folder early enough.
+        //
+        // This is the same method used by the TS worker:
+        // https://github.com/microsoft/vscode/blob/90aa979bb75a795fd8c33d38aee263ea655270d0/extensions/typescript-language-features/src/tsServer/serverProcess.browser.ts#L55
+        const config: BrowserConfig = {
+            distUrl,
+        };
+        worker.postMessage(config);
+
+        const clientOptions: LanguageClientOptions = {
+            // Register the server for python source files.
+            documentSelector: [
+                {
+                    language: 'python',
+                },
+            ],
+            synchronize: {
+                // Synchronize the setting section to the server.
+                configurationSection: ['python'],
+            },
+        };
+
+        const languageClient = new LanguageClient('python', 'Python Language Server', clientOptions, worker);
+        const disposable = languageClient.start();
+
+        context.subscriptions.push(disposable);
+    } catch (e) {
+        console.log(e);
+    }
+}

tsconfig.browser.json

@@ -0,0 +1,6 @@
+{
+        "extends": "./tsconfig.json",
+        "include": [
+            "./src/client/browser"
+        ]
+}

typings/webworker.fix.d.ts

@@ -0,0 +1,8 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+// Fake interfaces that are required for web workers to work around
+// tsconfig's DOM and WebWorker lib options being mutally exclusive.
+// https://github.com/microsoft/TypeScript/issues/20595
+
+interface DedicatedWorkerGlobalScope {}