Skip to content

Commit

Permalink
refactor: webpack/build scripts (#4670)
Browse files Browse the repository at this point in the history 
* test: fix core tests prompting build task

Problem:

When we run the core tests they prompt for a build task
before running. We should not have to do this.

Solution:

Create a specific build task and explicitly use that.

I think due to our recent changes the "defaultBuildTask" cannot
be appropriately resolved which is why this change was needed.

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

* refactor: remove index files in core

Problem:

We had index files in the core package which we used to expose
certain methods once we packaged core in to a node module
for use by the toolkit and amazonq package.

We don't need it.

Solution:

Stop using the index files and go back to using the extension*.ts files

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

* refactor: dynamically build webpack configs

Now we can dynamically build webpack configs by
exporting a function instead of the config.

This will allow us to check for the 'development' mode
at creation and from there we can modify the webpack
config that we return.

So now if we have `webpack --mode development`, we can
recognize we are in development mode and incrementally change
our config to our liking.

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

* refactor: webpack/build scripts

This commit:
- Adds some comments to certain parts of the build process
- Fixes our build tasks so that `core` will build all of the
  required artifacts for `toolkit` will run properly. Before there
  were cases where running the `Extension (toolkit)` would fail due
  to a missing `dist/vue` folder
- Fixes webviews not reflecting updated code when we refresh the webview during debugging.
  This was due to the `webview serve` not being utilized correctly. Now if you change
  `.vue` code and reload the webview the changes should be seen.

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

* refactor: remove vue hot reload

This feature doesn't seem to work, or just isn't
worth the effort to get working.

This removes use of it, but we can always look to add it
in if we have a need for it.

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

* fix: post debug task not found

We had multiple debug tasks with the same name,
so when we tried to run them it didn't know which
one to use.

Solution:

Rename one of them so the names are unique

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

* refactor: webpack web configs + scripts

This commit:
- Updates the webpack web config to be dynamic, exporting a function
which is used to create the config. Previously we exported the final object.
  - As a result the users of the config had to update to work
    with this change.
  - Now we can tweak the config depending on input arguments
- Update the tasks in the launch.json to improve the debug
  mode in VS Code.
- Remove the `serve` configs from the main webpack.
  - We previously used these for hot reloading but since we do not have a
    use for them anymore we are getting rid of them and simplifying things.

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

* refactor: browser test output unique file

Problem:

We need to both compile all source code + webpack a web extension
when running the Web unit tests so that we do not have type errors
+ have an executable file (webpacked file)

The problem is that the name extensionWeb.js is shared by both the
compiled output AND webpacked output. So one gets overwritten.

Solution:

Change the name of the webpacked output so that it does not get
overwritten. Now in unit tests we target that specifically.

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

* refactor: clean up VS Code Debug menu

Problem:

The VS Code Debug launch menu is cluttered with lots
of different launch configs. It is confusing and there are
many rarely used configs.

Solution:

Clean it up and reorder the configs so they are more relevant.

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

* refactor: web mode webpack

Before we had a custom flag to not build certain Web mode
bundles. But it is instead easier to always build it, but output
the bundle with a different name.

We did this due to overlapping output files with the same name,
but with this new change it does not happen anymore.

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

* upgrade @vscode/test-web module

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

* PR comment fixes:

- Update CONTRIBUTING regarding webview dev server
- Change the script name for web development compilation

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

---------

Signed-off-by: Nikolas Komonen <[email protected]>
  • Loading branch information
@nkomonen-amazon
nkomonen-amazon authored Apr 11, 2024
1 parent 3d4c65e commit 55e3211
Show file tree
Hide file tree
Showing 25 changed files with 485 additions and 611 deletions.
8 changes: 7 additions & 1 deletion CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -517,7 +517,13 @@ requests just from the model/types.

### Webview dev-server

Webviews can be hot-reloaded (updated without restarting the extension) by running a developer server provided by webpack. This server is started automatically when running the `Extension` launch configuration. You can also start it by running `npm serve`. Note that only frontend components will be updated; if you change backend code you will still need to restart the development extension.
Webviews can be refreshed to show changes to `.vue` code when running in Debug mode. You do not have to
reload the Debug VS Code window.

- Use `Command Palette` -> `Reload Webviews`
- Only the frontend `.vue` changes will be reflected. If changing any backend code you must restart Debug mode.

This works by continuously building the final Vue webview files (`webpack watch`) and then serving them through a local server (`webpack serve`). Whenever a webview is loaded it will grab the latest build from the server.

### Font generation

Expand Down
4 changes: 2 additions & 2 deletions aws-toolkit-vscode.code-workspace
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
"path": "."
},
{
"path": "packages/core"
"path": "packages/toolkit"
},
{
"path": "packages/toolkit"
"path": "packages/core"
},
{
"path": "packages/amazonq"
Expand Down
72 changes: 0 additions & 72 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

44 changes: 22 additions & 22 deletions packages/amazonq/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,33 @@
* This is the final webpack config that collects all webpack configs.
*/

const baseConfig = require('../webpack.base.config')
const baseVueConfig = require('../webpack.vue.config')
const baseWebConfig = require('../webpack.web.config')
const baseConfigFactory = require('../webpack.base.config')
const baseVueConfigFactory = require('../webpack.vue.config')
const baseWebConfigFactory = require('../webpack.web.config')

const config = {
...baseConfig,
entry: {
'src/extension': './src/extension.ts',
},
}
module.exports = (env, argv) => {
const config = {
...baseConfigFactory(env, argv),
entry: {
'src/extension': './src/extension.ts',
},
}

const vueConfigs = baseVueConfig.configs.map(c => {
// Inject entry point into all configs.
return {
...c,
const vue = baseVueConfigFactory(env, argv)
const vueConfig = {
...vue.config,
entry: {
...baseVueConfig.utils.createVueEntries(),
...vue.createVueEntries(),
//'src/amazonq/webview/ui/amazonq-ui': './src/amazonq/webview/ui/main.ts',
},
}
})

const webConfig = {
...baseWebConfig,
entry: {
'src/extensionWeb': './src/extensionWeb.ts',
},
}
const webConfig = {
...baseWebConfigFactory(env, argv),
entry: {
'src/extensionWeb': './src/extensionWeb.ts',
},
}

module.exports = [config, ...vueConfigs, webConfig]
return [config, vueConfig, webConfig]
}
59 changes: 30 additions & 29 deletions packages/core/.vscode/launch.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"AWS_TOOLKIT_AUTOMATION": "local"
},
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"preLaunchTask": "${defaultBuildTask}"
"preLaunchTask": "build"
},
{
"name": "Extension Tests (current file)",
Expand All @@ -40,7 +40,7 @@
"AWS_TOOLKIT_AUTOMATION": "local"
},
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"preLaunchTask": "${defaultBuildTask}"
"preLaunchTask": "build"
},
{
"name": "Extension Tests (web)",
Expand All @@ -51,12 +51,11 @@
"--disable-extension=amazonwebservices.aws-toolkit-vscode",
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionDevelopmentKind=web",
"--extensionTestsPath=${workspaceFolder}/dist/src/testWeb/testRunner",
"--extensionTestsPath=${workspaceFolder}/dist/src/testWeb/testRunnerWebCore",
"${workspaceRoot}/dist/src/testFixtures/workspaceFolder"
],
"outFiles": ["${workspaceFolder}/dist/src/**/*.js"],
"preLaunchTask": "webWatch",
"postDebugTask": "webRunTerminate"
"preLaunchTask": "testsBuildWatch"
},
{
"name": "Integration Tests",
Expand All @@ -74,7 +73,7 @@
"AWS_TOOLKIT_AUTOMATION": "local"
},
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"preLaunchTask": "${defaultBuildTask}"
"preLaunchTask": "build"
},
{
"name": "Integration Tests (current file)",
Expand All @@ -93,7 +92,7 @@
"AWS_TOOLKIT_AUTOMATION": "local"
},
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"preLaunchTask": "${defaultBuildTask}"
"preLaunchTask": "build"
},
{
"name": "E2E Test (current file)",
Expand All @@ -112,37 +111,39 @@
"AWS_TOOLKIT_AUTOMATION": "local"
},
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"preLaunchTask": "${defaultBuildTask}"
"preLaunchTask": "build"
},
{
"name": "Test Lint",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/scripts/lint/testLint.ts",
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"preLaunchTask": "${defaultBuildTask}"
},
{
"name": "Attach to ASL Server",
"type": "node",
"request": "attach",
"port": 6009,
"restart": true,
"outFiles": ["${workspaceRoot}/dist/src/stepFunctions/asl/**.js"]
},
{
"name": "Attach to SSM Document Language Server",
"type": "node",
"request": "attach",
"port": 6010,
"restart": true,
"outFiles": ["${workspaceRoot}/dist/src/ssmDocument/ssm/ssmServer.js"]
"preLaunchTask": "build"
}
// ---- We do not need the following currently, and we want to reduce clutter. Re-enable if necessary ----
// {
// "name": "Attach to ASL Server",
// "type": "node",
// "request": "attach",
// "port": 6009,
// "restart": true,
// "outFiles": ["${workspaceRoot}/dist/src/stepFunctions/asl/**.js"]
// },
// {
// "name": "Attach to SSM Document Language Server",
// "type": "node",
// "request": "attach",
// "port": 6010,
// "restart": true,
// "outFiles": ["${workspaceRoot}/dist/src/ssmDocument/ssm/ssmServer.js"]
// }
],
"compounds": [
{
"name": "Extension + Attach to SSM Document Language Server",
"configurations": ["Extension", "Attach to SSM Document Language Server"]
}
// ---- We do not need the following currently, and we want to reduce clutter. Re-enable if necessary ----
// {
// "name": "Extension + Attach to SSM Document Language Server",
// "configurations": ["Extension", "Attach to SSM Document Language Server"]
// }
]
}
50 changes: 17 additions & 33 deletions packages/core/.vscode/tasks.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,47 +3,31 @@
{
"version": "2.0.0",
"tasks": [
{
// Single build task to enable parallel tasks
"label": "build",
"dependsOn": ["watch", "webpackWatch"]
},
{
"label": "watch",
"type": "npm",
"script": "watch",
"problemMatcher": "$tsc-watch",
"isBackground": true,
"group": {
"kind": "build",
"isDefault": true
},
"dependsOn": ["serve"]
"isBackground": true
},
{
"label": "serve",
"type": "npm",
"script": "serve",
"group": "build",
"label": "webpackWatch",
"command": "npm run webpackDev -- --watch",
"type": "shell",
"isBackground": true,
"problemMatcher": {
"owner": "custom",
"pattern": {
"regexp": ".",
"file": 1,
"location": 2,
"message": 3
},
"background": {
"activeOnStart": true,
"beginsPattern": "Project is running at",
"endsPattern": "compiled successfully"
}
}
"problemMatcher": "$ts-webpack-watch"
},
{
"label": "webWatch",
"type": "npm",
"script": "webWatch",
"detail": "Webpacks our toolkit code (with --watch) in preparation to be run in the browser",
"label": "testsBuildWatch",
"command": "npm run compileDev -- --watch",
"detail": "Build that is sufficient for Web mode tests",
"type": "shell",
"isBackground": true,
// Since `webpack --watch` never terminates (but finishes packaging at some point),
// VS Code uses this to parse the CLI output to pattern match something that indicates it is done
"problemMatcher": "$ts-webpack-watch"
},
/**
Expand All @@ -53,8 +37,8 @@
From: https://stackoverflow.com/a/60330174
**/
{
"label": "webRunTerminate",
"command": "echo ${input:webRunTerminate}",
"label": "webRunTerminateCore",
"command": "echo ${input:webRunTerminateCore}",
"type": "shell"
},
{
Expand Down Expand Up @@ -94,7 +78,7 @@
"args": "terminateAll"
},
{
"id": "webRunTerminate",
"id": "webRunTerminateCore",
"type": "command",
"command": "workbench.action.tasks.terminate",
"args": "webRun"
Expand Down
Loading

0 comments on commit 55e3211

Please sign in to comment.