feature(q): generalize webpack configs, add browser entry for amazonq

hayemaxi · hayemaxi · commit 9ea04403fb60 · 2024-02-13T16:08:41.000-05:00
Webpack configs can now be used by subprojects, with overrides. Also cleans up some npm scripts for amazonq, and cleans up the root tsconfig.json a little.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,12 +56,16 @@
         "@vscode/test-electron": "^2.3.8",
         "@vscode/test-web": "^0.0.50",
         "@vscode/vsce": "^2.19.0",
+        "@types/webpack-env": "^1.18.1",
         "prettier": "^2.8.8",
         "prettier-plugin-sh": "^0.12.8",
         "pretty-quick": "^3.1.3",
         "husky": "^9.0.7",
         "typescript": "^5.0.4",
-        "ts-node": "^10.9.1"
+        "ts-node": "^10.9.1",
+        "webpack": "^5.83.0",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^4.15.1"
     },
     "dependencies": {
         "vscode-nls": "^5.2.0",
diff --git a/packages/amazonq/package.json b/packages/amazonq/package.json
@@ -40,13 +40,16 @@
         "onStartupFinished",
         "onUri"
     ],
-    "main": "./dist/src/main.js",
+    "main": "./dist/src/extension",
+    "browser": "./dist/src/extensionWeb",
     "scripts": {
+        "vscode:prepublish": "npm run clean && npm run compile && webpack --mode production",
         "clean": "ts-node ../../scripts/clean.ts dist/",
-        "compile": "tsc -p ./",
-        "testCompile": "npm run compile",
+        "compile": "npm run clean && tsc -p ./ && webpack --mode development",
+        "testCompile": "tsc -p ./",
         "watch": "npm run clean && tsc -watch -p ./",
-        "serve": "echo 1"
+        "serve": "webpack serve --config-name vue-hmr --mode development",
+        "package": "ts-node ../../scripts/package.ts"
     },
     "dependencies": {},
     "devDependencies": {},
diff --git a/packages/amazonq/src/extension.ts b/packages/amazonq/src/extension.ts
@@ -4,14 +4,10 @@
  */
 
 import * as vscode from 'vscode'
+import { activateShared } from './extensionShared'
 
 export async function activate(context: vscode.ExtensionContext) {
-    void vscode.window.showInformationMessage(
-        'Amazon Q + CodeWhisperer: This extension is under development and offers no features at this time.'
-    )
+    await activateShared()
 }
 
 export async function deactivate() {}
-
-export const awsQActivate = activate
-export const awsQDeactivate = deactivate
diff --git a/packages/amazonq/src/extensionShared.ts b/packages/amazonq/src/extensionShared.ts
@@ -0,0 +1,12 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as vscode from 'vscode'
+
+export async function activateShared() {
+    void vscode.window.showInformationMessage(
+        'Amazon Q + CodeWhisperer: This extension is under development and offers no features at this time.'
+    )
+}
diff --git a/packages/amazonq/src/extensionWeb.ts b/packages/amazonq/src/extensionWeb.ts
@@ -0,0 +1,13 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as vscode from 'vscode'
+import { activateShared } from './extensionShared'
+
+export async function activate(context: vscode.ExtensionContext) {
+    await activateShared()
+}
+
+export async function deactivate() {}
diff --git a/packages/amazonq/src/main.ts b/packages/amazonq/src/main.ts
diff --git a/packages/amazonq/webpack.browser.config.js b/packages/amazonq/webpack.browser.config.js
@@ -0,0 +1,17 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * This config exists separately so it can be invoked from the webpack CLI.
+ */
+
+const browserConfig = {
+    ...require('../webpack.browser.config'),
+    entry: {
+        'src/extensionWeb': './src/extensionWeb.ts',
+    },
+}
+
+module.exports = browserConfig
diff --git a/packages/amazonq/webpack.config.js b/packages/amazonq/webpack.config.js
@@ -0,0 +1,35 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * This is the final webpack config that collects all webpack configs.
+ */
+
+const baseConfig = require('../webpack.base.config')
+const baseVueConfig = require('../webpack.vue.config')
+const baseBrowserConfig = require('./webpack.browser.config')
+
+const config = {
+    ...baseConfig,
+    entry: {
+        'src/extension': './src/extension.ts',
+    },
+}
+
+const vueConfigs = baseVueConfig.configs.map(c => {
+    // Inject entry point into all configs.
+    return {
+        ...c,
+        entry: {
+            ...baseVueConfig.utils.createVueEntries(),
+            //'src/amazonq/webview/ui/amazonq-ui': './src/amazonq/webview/ui/main.ts',
+        },
+    }
+})
+
+// baseBrowserConfigs is set up in another file.
+const browserConfig = { ...baseBrowserConfig }
+
+module.exports = [config, ...vueConfigs, browserConfig]
diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
@@ -4297,7 +4297,6 @@
         "@types/sinonjs__fake-timers": "^8.1.2",
         "@types/tcp-port-used": "^1.0.1",
         "@types/uuid": "^9.0.1",
-        "@types/webpack-env": "^1.18.1",
         "@types/whatwg-url": "^11.0.4",
         "@types/xml2js": "^0.4.11",
         "@typescript-eslint/eslint-plugin": "^5.59.0",
@@ -4324,9 +4323,6 @@
         "vue-loader": "^17.2.2",
         "vue-style-loader": "^4.1.3",
         "webfont": "^11.2.26",
-        "webpack": "^5.83.0",
-        "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^4.15.1",
         "typescript": "^5.0.4",
         "ts-node": "^10.9.1"
     },
diff --git a/packages/toolkit/webpack.browser.config.js b/packages/toolkit/webpack.browser.config.js
@@ -4,72 +4,15 @@
  */
 
 /**
- * Notes:
- *
- * Followed guide from: https://code.visualstudio.com/api/extension-guides/web-extensions#webpack-configuration
- *
+ * This config exists separately so it can be invoked from the webpack CLI.
  */
-const webpack = require('webpack')
 
-const baseConfig = require('./webpack.base.config')
-
-/** @type WebpackConfig */
-const webConfig = {
-    ...baseConfig,
-    name: 'web',
-    target: 'webworker',
-    /**
-     * The keys in the following 'entry' object are the relative paths of the final output files in 'dist'.
-     * They are suffixed with '.js' implicitly.
-     */
+const browserConfig = {
+    ...require('../webpack.browser.config'),
     entry: {
         'src/extensionWeb': './src/extensionWeb.ts',
         'src/testBrowser/testRunner': './src/testBrowser/testRunner.ts',
     },
-    plugins: (baseConfig.plugins ?? []).concat(
-        new webpack.optimize.LimitChunkCountPlugin({
-            maxChunks: 1, // disable chunks by default since web extensions must be a single bundle
-        }),
-        // some modules are provided globally and dont require an explicit import,
-        // so we need to polyfill them using this method
-        new webpack.ProvidePlugin({
-            process: require.resolve('process/browser'),
-            Buffer: ['buffer', 'Buffer'],
-        }),
-        new webpack.EnvironmentPlugin({
-            NODE_DEBUG: 'development',
-            READABLE_STREAM: 'disable',
-        })
-    ),
-    resolve: {
-        extensions: ['.ts', '.js'],
-        fallback: {
-            stream: require.resolve('stream-browserify'),
-            os: require.resolve('os-browserify/browser'),
-            path: require.resolve('path-browserify'),
-            assert: require.resolve('assert'),
-            fs: false,
-            crypto: require.resolve('crypto-browserify'),
-            'fs-extra': false,
-
-            // *** If one of these modules actually gets used an error will be raised ***
-            // You may see something like: "TypeError: path_ignored_0.join is not a function"
-
-            // We don't need these yet, but as we start enabling functionality in the web
-            // we may need to polyfill.
-            http: false, // http: require.resolve('stream-http'),
-            https: false, // https: require.resolve('https-browserify'),
-            zlib: false, // zlib: require.resolve('browserify-zlib'),
-            constants: false, //constants: require.resolve('constants-browserify'),
-            // These do not have a straight forward replacement
-            child_process: false, // Reason for error: 'TypeError: The "original" argument must be of type Function'
-            async_hooks: false,
-        },
-    },
-    mode: 'production', // lets see if we can change this to 'development' later
-    optimization: {
-        minimize: false,
-    },
 }
 
-module.exports = [webConfig]
+module.exports = browserConfig
diff --git a/packages/toolkit/webpack.config.js b/packages/toolkit/webpack.config.js
@@ -7,8 +7,30 @@
  * This is the final webpack config that collects all webpack configs.
  */
 
-const baseConfig = require('./webpack.base.config')
-const vueConfigs = require('./webpack.vue.config')
-const browserConfigs = require('./webpack.browser.config')
+const baseConfig = require('../webpack.base.config')
+const baseVueConfig = require('../webpack.vue.config')
+const baseBrowserConfig = require('./webpack.browser.config')
 
-module.exports = [baseConfig, ...vueConfigs, ...browserConfigs]
+const config = {
+    ...baseConfig,
+    entry: {
+        'src/main': './src/main.ts',
+        'src/stepFunctions/asl/aslServer': './src/stepFunctions/asl/aslServer.ts',
+    },
+}
+
+const vueConfigs = baseVueConfig.configs.map(c => {
+    // Inject entry point into all configs.
+    return {
+        ...c,
+        entry: {
+            ...baseVueConfig.utils.createVueEntries(),
+            'src/amazonq/webview/ui/amazonq-ui': './src/amazonq/webview/ui/main.ts',
+        },
+    }
+})
+
+// baseBrowserConfigs is set up in another file.
+const browserConfig = { ...baseBrowserConfig }
+
+module.exports = [config, ...vueConfigs, browserConfig]
diff --git a/packages/webpack.base.config.js b/packages/webpack.base.config.js
@@ -13,7 +13,10 @@ const { ESBuildMinifyPlugin } = require('esbuild-loader')
 const fs = require('fs')
 const { NLSBundlePlugin } = require('vscode-nls-dev/lib/webpack-bundler')
 const CircularDependencyPlugin = require('circular-dependency-plugin')
-const packageJsonFile = path.join(__dirname, 'package.json')
+
+// Webpack must run from subproject/package dir.
+const currentDir = process.cwd()
+const packageJsonFile = path.join(currentDir, 'package.json')
 const packageJson = JSON.parse(fs.readFileSync(packageJsonFile, 'utf8'))
 const packageId = `${packageJson.publisher}.${packageJson.name}`
 
@@ -24,12 +27,8 @@ const packageId = `${packageJson.publisher}.${packageJson.name}`
 const baseConfig = {
     name: 'main',
     target: 'node',
-    entry: {
-        'src/main': './src/main.ts',
-        'src/stepFunctions/asl/aslServer': './src/stepFunctions/asl/aslServer.ts',
-    },
     output: {
-        path: path.resolve(__dirname, 'dist'),
+        path: path.resolve(currentDir, 'dist'),
         filename: '[name].js',
         libraryTarget: 'commonjs2',
     },
diff --git a/packages/webpack.browser.config.js b/packages/webpack.browser.config.js
diff --git a/packages/webpack.vue.config.js b/packages/webpack.vue.config.js
diff --git a/tsconfig.json b/tsconfig.json
