browser: Initial structure for browser support

- In the VS Code Launch panel we can run the extension
  in a browser context
- It will run the code with src/extensionWeb.ts being the
  entrypoint
- Webpack is configured to bundle the browser code

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

Author: nkomonen-amazon

.vscode/launch.json

@@ -145,6 +145,15 @@
             "program": "${workspaceFolder}/scripts/lint/testLint.ts",
             "outFiles": ["${workspaceFolder}/dist/**/*.js"],
             "preLaunchTask": "${defaultBuildTask}"
+        },
+        {
+            "name": "Run Web Extension ",
+            "type": "pwa-extensionHost",
+            "debugWebWorkerHost": true,
+            "request": "launch",
+            "args": ["--extensionDevelopmentPath=${workspaceFolder}", "--extensionDevelopmentKind=web"],
+            "outFiles": ["${workspaceFolder}/dist/**/*.js"],
+            "preLaunchTask": "${defaultBuildTask}"
         }
     ],
     "compounds": [

package.json

@@ -52,6 +52,7 @@
         "onCommand:aws.codeWhisperer.accept"
     ],
     "main": "./dist/src/main",
+    "browser": "./dist/src/extensionWeb",
     "contributes": {
         "configuration": {
             "type": "object",

src/extensionWeb.ts

@@ -0,0 +1,15 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as vscode from 'vscode'
+
+export async function activate(context: vscode.ExtensionContext) {
+    vscode.window.showInformationMessage(
+        'AWS Toolkit: Browser Mode Under Development. No features are currently provided',
+        { modal: true }
+    )
+}
+
+export async function deactivate() {}

webpack.config.js

@@ -19,7 +19,10 @@ const packageJson = JSON.parse(fs.readFileSync(packageJsonFile, 'utf8'))
 const packageId = `${packageJson.publisher}.${packageJson.name}`
 const { VueLoaderPlugin } = require('vue-loader')
 
-/**@type {import('webpack').Configuration}*/
+//@ts-check
+/** @typedef {import('webpack').Configuration} WebpackConfig **/
+
+/** @type WebpackConfig */
 const baseConfig = {
     name: 'main',
     target: 'node',
@@ -91,6 +94,21 @@ const baseConfig = {
     },
 }
 
+/** @type WebpackConfig */
+const webConfig = {
+    ...baseConfig,
+    name: 'web',
+    target: 'webworker',
+    entry: {
+        'src/extensionWeb': './src/extensionWeb.ts',
+    },
+    plugins: baseConfig.plugins?.concat(
+        new webpack.optimize.LimitChunkCountPlugin({
+            maxChunks: 1, // disable chunks by default since web extensions must be a single bundle
+        })
+    ),
+}
+
 /**
  * Renames all Vue entry files to be `index`, located within the same directory.
  * Example: `src/lambda/vue/index.ts` -> `dist/src/lambda/vue/index.js`
@@ -111,6 +129,7 @@ const createVueEntries = (targetPattern = 'index.ts') => {
         .reduce((a, b) => ((a[b.name] = b.path), a), {})
 }
 
+/** @type WebpackConfig */
 const vueConfig = {
     ...baseConfig,
     name: 'vue',
@@ -135,6 +154,7 @@ const vueConfig = {
     plugins: baseConfig.plugins.concat(new VueLoaderPlugin()),
 }
 
+/** @type WebpackConfig */
 const vueHotReload = {
     ...vueConfig,
     name: 'vue-hmr',
@@ -153,4 +173,6 @@ const vueHotReload = {
 }
 
 module.exports =
-    process.env.npm_lifecycle_event === 'serve' ? [baseConfig, vueConfig, vueHotReload] : [baseConfig, vueConfig]
+    process.env.npm_lifecycle_event === 'serve'
+        ? [baseConfig, webConfig, vueConfig, vueHotReload]
+        : [baseConfig, webConfig, vueConfig]