Samples refresh (microsoft#126)

Description of changes

- Updates all extensions to the latest version of the toolkit
- Changes all default extensions to use esbuild
- Adds a hello-world-webpack sample that demonstrates how to use webpack
- Updates all default extensions to use the toolkit component registration APIs

default/component-gallery/.eslintrc.json

@@ -1,19 +1,18 @@
 {
-    "root": true,
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": 6,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "@typescript-eslint"
-    ],
-    "rules": {
-        "@typescript-eslint/naming-convention": "warn",
-        "@typescript-eslint/semi": "warn",
-        "curly": "warn",
-        "eqeqeq": "warn",
-        "no-throw-literal": "warn",
-        "semi": "off"
-    }
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@typescript-eslint/naming-convention": "warn",
+    "@typescript-eslint/semi": "warn",
+    "curly": "warn",
+    "eqeqeq": "warn",
+    "no-throw-literal": "warn",
+    "semi": "off"
+  },
+  "ignorePatterns": ["out", "dist", "**/*.d.ts"]
 }

default/component-gallery/.prettierignore

@@ -7,6 +7,7 @@
 /coverage
 
 # production
+/out
 /build
 /dist
 

default/component-gallery/.prettierrc

@@ -10,4 +10,4 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": true,
   "arrowParens": "always"
-}
+}

default/component-gallery/.vscode/extensions.json

@@ -1,7 +1,5 @@
 {
-	// See http://go.microsoft.com/fwlink/?LinkId=827846
-	// for the documentation about the extensions.json format
-	"recommendations": [
-		"dbaeumer.vscode-eslint"
-	]
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["dbaeumer.vscode-eslint", "connor4312.esbuild-problem-matchers"]
 }

default/component-gallery/.vscode/launch.json

@@ -3,32 +3,15 @@
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 {
-	"version": "0.2.0",
-	"configurations": [
-		{
-			"name": "Run Extension",
-			"type": "extensionHost",
-			"request": "launch",
-			"args": [
-				"--extensionDevelopmentPath=${workspaceFolder}"
-			],
-			"outFiles": [
-				"${workspaceFolder}/out/**/*.js"
-			],
-			"preLaunchTask": "${defaultBuildTask}"
-		},
-		{
-			"name": "Extension Tests",
-			"type": "extensionHost",
-			"request": "launch",
-			"args": [
-				"--extensionDevelopmentPath=${workspaceFolder}",
-				"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
-			],
-			"outFiles": [
-				"${workspaceFolder}/out/test/**/*.js"
-			],
-			"preLaunchTask": "${defaultBuildTask}"
-		}
-	]
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Run Extension",
+      "type": "extensionHost",
+      "request": "launch",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/out/**/*.js"],
+      "preLaunchTask": "${defaultBuildTask}"
+    }
+  ]
 }

default/component-gallery/.vscode/settings.json

@@ -1,11 +1,11 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-    "files.exclude": {
-        "out": false // set this to true to hide the "out" folder with the compiled JS files
-    },
-    "search.exclude": {
-        "out": true // set this to false to include "out" folder in search results
-    },
-    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-    "typescript.tsc.autoDetect": "off"
-}
+  "files.exclude": {
+    "out": false, // set this to true to hide the "out" folder with the compiled JS files
+  },
+  "search.exclude": {
+    "out": true, // set this to false to include "out" folder in search results
+  },
+  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+  "typescript.tsc.autoDetect": "off"
+}

default/component-gallery/.vscode/tasks.json

@@ -1,20 +1,20 @@
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 {
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"type": "npm",
-			"script": "watch",
-			"problemMatcher": "$tsc-watch",
-			"isBackground": true,
-			"presentation": {
-				"reveal": "never"
-			},
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			}
-		}
-	]
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "watch",
+      "problemMatcher": "$esbuild-watch",
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
 }

default/component-gallery/.vscodeignore

@@ -1,7 +1,9 @@
 .vscode/**
 .vscode-test/**
-out/test/**
+out/**
+node_modules/**
 src/**
+esbuild.js
 .gitignore
 .yarnrc
 vsc-extension-quickstart.md

default/component-gallery/esbuild.js

@@ -0,0 +1,91 @@
+const { build } = require("esbuild");
+const { copy } = require("esbuild-plugin-copy");
+
+//@ts-check
+/** @typedef {import('esbuild').BuildOptions} BuildOptions **/
+
+/** @type BuildOptions */
+const baseConfig = {
+  bundle: true,
+  minify: process.env.NODE_ENV === "production",
+  sourcemap: process.env.NODE_ENV !== "production",
+};
+
+// Config for extension source code (to be run in a Node-based context)
+/** @type BuildOptions */
+const extensionConfig = {
+  ...baseConfig,
+  platform: "node",
+  format: "cjs",
+  entryPoints: ["./src/extension.ts"],
+  outfile: "./out/extension.js",
+  external: ["vscode"],
+};
+
+// Config for webview source code (to be run in a web-based context)
+/** @type BuildOptions */
+const webviewConfig = {
+  ...baseConfig,
+  target: "es2020",
+  format: "esm",
+  entryPoints: ["./src/webview/main.ts"],
+  outfile: "./out/webview.js",
+  plugins: [
+    // Copy webview css and ttf files to `out` directory unaltered
+    copy({
+      resolveFrom: "cwd",
+      assets: {
+        from: ["./src/webview/*.css", "./src/webview/*.ttf"],
+        to: ["./out"],
+      },
+    }),
+  ],
+};
+
+// This watch config adheres to the conventions of the esbuild-problem-matchers
+// extension (https://github.com/connor4312/esbuild-problem-matchers#esbuild-via-js)
+/** @type BuildOptions */
+const watchConfig = {
+  watch: {
+    onRebuild(error, result) {
+      console.log("[watch] build started");
+      if (error) {
+        error.errors.forEach((error) =>
+          console.error(
+            `> ${error.location.file}:${error.location.line}:${error.location.column}: error: ${error.text}`
+          )
+        );
+      } else {
+        console.log("[watch] build finished");
+      }
+    },
+  },
+};
+
+// Build script
+(async () => {
+  const args = process.argv.slice(2);
+  try {
+    if (args.includes("--watch")) {
+      // Build and watch extension and webview code
+      console.log("[watch] build started");
+      await build({
+        ...extensionConfig,
+        ...watchConfig,
+      });
+      await build({
+        ...webviewConfig,
+        ...watchConfig,
+      });
+      console.log("[watch] build finished");
+    } else {
+      // Build extension and webview code
+      await build(extensionConfig);
+      await build(webviewConfig);
+      console.log("build complete");
+    }
+  } catch (err) {
+    process.stderr.write(err.stderr);
+    process.exit(1);
+  }
+})();