Add task to build extension media (#119294)

This lets us avoid checking in the compiled js files that are used inside webviews and notebooks

build/gulpfile.extensions.js

@@ -199,7 +199,38 @@ exports.watchExtensionsTask = watchExtensionsTask;
 const compileExtensionsBuildLegacyTask = task.define('compile-extensions-build-legacy', task.parallel(...tasks.map(t => t.compileBuildTask)));
 gulp.task(compileExtensionsBuildLegacyTask);
 
-// Azure Pipelines
+//#region Extension media
+
+// Additional projects to webpack. These typically build code for webviews
+const mediaCompilations = [
+	'markdown-language-features/webpack.config.js',
+	'markdown-language-features/webpack.notebook.js',
+	'notebook-markdown-extensions/webpack.notebook.js',
+];
+
+const compileExtensionMediaTask = task.define('compile-extension-media', () => buildExtensionMedia(false));
+gulp.task(compileExtensionMediaTask);
+exports.compileExtensionMediaTask = compileExtensionMediaTask;
+
+const watchExtensionMedia = task.define('watch-extension-media', () => buildExtensionMedia(true));
+gulp.task(watchExtensionMedia);
+exports.watchExtensionMedia = watchExtensionMedia;
+
+function buildExtensionMedia(isWatch, outputRoot) {
+	const webpackConfigLocations = mediaCompilations.map(p => {
+		return {
+			configPath: path.join(extensionsPath, p),
+			outputRoot: outputRoot ? path.join(root, outputRoot, path.dirname(p)) : undefined
+		};
+	});
+	return webpackExtensions('packaging extension media', isWatch, webpackConfigLocations);
+}
+const compileExtensionMediaBuildTask = task.define('compile-extension-media-build', () => buildExtensionMedia(false, '.build/extensions'));
+gulp.task(compileExtensionMediaBuildTask);
+
+//#endregion
+
+//#region Azure Pipelines
 
 const cleanExtensionsBuildTask = task.define('clean-extensions-build', util.rimraf('.build/extensions'));
 const compileExtensionsBuildTask = task.define('compile-extensions-build', task.series(
@@ -209,10 +240,12 @@ const compileExtensionsBuildTask = task.define('compile-extensions-build', task.
 ));
 
 gulp.task(compileExtensionsBuildTask);
-gulp.task(task.define('extensions-ci', task.series(compileExtensionsBuildTask)));
+gulp.task(task.define('extensions-ci', task.series(compileExtensionsBuildTask, compileExtensionMediaBuildTask)));
 
 exports.compileExtensionsBuildTask = compileExtensionsBuildTask;
 
+//#endregion
+
 const compileWebExtensionsTask = task.define('compile-web', () => buildWebExtensions(false));
 gulp.task(compileWebExtensionsTask);
 exports.compileWebExtensionsTask = compileWebExtensionsTask;
@@ -222,23 +255,39 @@ gulp.task(watchWebExtensionsTask);
 exports.watchWebExtensionsTask = watchWebExtensionsTask;
 
 async function buildWebExtensions(isWatch) {
-	const webpack = require('webpack');
-
 	const webpackConfigLocations = await nodeUtil.promisify(glob)(
 		path.join(extensionsPath, '**', 'extension-browser.webpack.config.js'),
 		{ ignore: ['**/node_modules'] }
 	);
+	return webpackExtensions('packaging web extension', isWatch, webpackConfigLocations.map(configPath => ({ configPath })));
+}
+
+/**
+ * @param {string} taskName
+ * @param {boolean} isWatch
+ * @param {{ configPath: string, outputRoot?: boolean}} webpackConfigLocations
+ */
+async function webpackExtensions(taskName, isWatch, webpackConfigLocations) {
+	const webpack = require('webpack');
 
 	const webpackConfigs = [];
 
-	for (const webpackConfigPath of webpackConfigLocations) {
-		const configOrFnOrArray = require(webpackConfigPath);
+	for (const { configPath, outputRoot } of webpackConfigLocations) {
+		const configOrFnOrArray = require(configPath);
 		function addConfig(configOrFn) {
+			let config;
 			if (typeof configOrFn === 'function') {
-				webpackConfigs.push(configOrFn({}, {}));
+				config = configOrFn({}, {});
+				webpackConfigs.push(config);
 			} else {
-				webpackConfigs.push(configOrFn);
+				config = configOrFn;
 			}
+
+			if (outputRoot) {
+				config.output.path = path.join(outputRoot, path.relative(path.dirname(configPath), config.output.path));
+			}
+
+			webpackConfigs.push(configOrFn);
 		}
 		addConfig(configOrFnOrArray);
 	}
@@ -249,7 +298,7 @@ async function buildWebExtensions(isWatch) {
 				if (outputPath) {
 					const relativePath = path.relative(extensionsPath, outputPath).replace(/\\/g, '/');
 					const match = relativePath.match(/[^\/]+(\/server|\/client)?/);
-					fancyLog(`Finished ${ansiColors.green('packaging web extension')} ${ansiColors.cyan(match[0])} with ${stats.errors.length} errors.`);
+					fancyLog(`Finished ${ansiColors.green(taskName)} ${ansiColors.cyan(match[0])} with ${stats.errors.length} errors.`);
 				}
 				if (Array.isArray(stats.errors)) {
 					stats.errors.forEach(error => {

build/gulpfile.js

@@ -13,7 +13,7 @@ const util = require('./lib/util');
 const task = require('./lib/task');
 const compilation = require('./lib/compilation');
 const { monacoTypecheckTask/* , monacoTypecheckWatchTask */ } = require('./gulpfile.editor');
-const { compileExtensionsTask, watchExtensionsTask } = require('./gulpfile.extensions');
+const { compileExtensionsTask, watchExtensionsTask, compileExtensionMediaTask } = require('./gulpfile.extensions');
 
 // Fast compile for development time
 const compileClientTask = task.define('compile-client', task.series(util.rimraf('out'), compilation.compileTask('src', 'out', false)));
@@ -23,7 +23,7 @@ const watchClientTask = task.define('watch-client', task.series(util.rimraf('out
 gulp.task(watchClientTask);
 
 // All
-const compileTask = task.define('compile', task.parallel(monacoTypecheckTask, compileClientTask, compileExtensionsTask));
+const compileTask = task.define('compile', task.parallel(monacoTypecheckTask, compileClientTask, compileExtensionsTask, compileExtensionMediaTask));
 gulp.task(compileTask);
 
 gulp.task(task.define('watch', task.parallel(/* monacoTypecheckWatchTask, */ watchClientTask, watchExtensionsTask)));

extensions/markdown-language-features/media/pre.js

@@ -1 +0,0 @@
-!function(e){var t={};function n(o){if(t[o])return t[o].exports;var s=t[o]={i:o,l:!1,exports:{}};return e[o].call(s.exports,s,s.exports,n),s.l=!0,s.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(o,s,function(t){return e[t]}.bind(null,s));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=11)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getSettings=t.getData=void 0;let o=void 0;function s(e){const t=document.getElementById("vscode-markdown-preview-data");if(t){const n=t.getAttribute(e);if(n)return JSON.parse(n)}throw new Error("Could not load data for "+e)}t.getData=s,t.getSettings=function(){if(o)return o;if(o=s("data-settings"),o)return o;throw new Error("Could not load settings")}},,,,,,,,,,,function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const o=n(12),s=n(14);window.cspAlerter=new o.CspAlerter,window.styleLoadingMonitor=new s.StyleLoadingMonitor},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.CspAlerter=void 0;const o=n(0),s=n(13);t.CspAlerter=class{constructor(){this.didShow=!1,this.didHaveCspWarning=!1,document.addEventListener("securitypolicyviolation",()=>{this.onCspWarning()}),window.addEventListener("message",e=>{e&&e.data&&"vscode-did-block-svg"===e.data.name&&this.onCspWarning()})}setPoster(e){this.messaging=e,this.didHaveCspWarning&&this.showCspWarning()}onCspWarning(){this.didHaveCspWarning=!0,this.showCspWarning()}showCspWarning(){const e=s.getStrings(),t=o.getSettings();if(this.didShow||t.disableSecurityWarnings||!this.messaging)return;this.didShow=!0;const n=document.createElement("a");n.innerText=e.cspAlertMessageText,n.setAttribute("id","code-csp-warning"),n.setAttribute("title",e.cspAlertMessageTitle),n.setAttribute("role","button"),n.setAttribute("aria-label",e.cspAlertMessageLabel),n.onclick=()=>{this.messaging.postMessage("showPreviewSecuritySelector",{source:t.source})},document.body.appendChild(n)}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getStrings=void 0,t.getStrings=function(){const e=document.getElementById("vscode-markdown-preview-data");if(e){const t=e.getAttribute("data-strings");if(t)return JSON.parse(t)}throw new Error("Could not load strings")}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.StyleLoadingMonitor=void 0;t.StyleLoadingMonitor=class{constructor(){this.unloadedStyles=[],this.finishedLoading=!1;const e=e=>{const t=e.target.dataset.source;this.unloadedStyles.push(t)};window.addEventListener("DOMContentLoaded",()=>{for(const t of document.getElementsByClassName("code-user-style"))t.dataset.source&&(t.onerror=e)}),window.addEventListener("load",()=>{this.unloadedStyles.length&&(this.finishedLoading=!0,this.poster&&this.poster.postMessage("previewStyleLoadError",{unloadedStyles:this.unloadedStyles}))})}setPoster(e){this.poster=e,this.finishedLoading&&e.postMessage("previewStyleLoadError",{unloadedStyles:this.unloadedStyles})}}}]);

extensions/markdown-language-features/webpack.config.js

@@ -6,8 +6,8 @@ const path = require('path');
 
 module.exports = {
 	entry: {
-		index: './preview-src/index.ts',
-		pre: './preview-src/pre.ts'
+		index: path.join(__dirname, 'preview-src', 'index.ts'),
+		pre: path.join(__dirname, 'preview-src', 'pre.ts'),
 	},
 	module: {
 		rules: [

extensions/markdown-language-features/webpack.notebook.js

@@ -5,8 +5,9 @@
 const path = require('path');
 
 module.exports = {
+	mode: 'production',
 	entry: {
-		index: './notebook/index.ts'
+		index: path.join(__dirname, 'notebook', 'index.ts')
 	},
 	module: {
 		rules: [

extensions/microsoft-authentication/tsconfig.json

@@ -17,5 +17,6 @@
 		"strict": true,
 		"target": "es2019"
 	},
-	"exclude": ["node_modules"]
+	"exclude": ["node_modules"],
+	"include": ["src/**/*"]
 }

extensions/notebook-markdown-extensions/package.json

@@ -31,8 +31,7 @@
   "scripts": {
     "compile": "npm run build-notebook",
     "watch": "npm run build-notebook",
-    "build-notebook": "npx webpack-cli --config webpack.notebook.js --mode production",
-    "postinstall": "npm run build-notebook"
+    "build-notebook": "npx webpack-cli --config webpack.notebook.js --mode production"
   },
   "devDependencies": {
     "@iktakahiro/markdown-it-katex": "^4.0.1",

extensions/notebook-markdown-extensions/webpack.notebook.js

@@ -6,6 +6,13 @@ const path = require('path');
 const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
+	context: path.resolve(__dirname),
+	mode: 'production',
+	performance: {
+		hints: false,
+		maxEntrypointSize: 512000,
+		maxAssetSize: 512000
+	},
 	entry: {
 		katex: './notebook/katex.ts',
 		emoji: './notebook/emoji.ts',

package.json

@@ -14,7 +14,7 @@
     "preinstall": "node build/npm/preinstall.js",
     "postinstall": "node build/npm/postinstall.js",
     "compile": "node --max_old_space_size=4095 ./node_modules/gulp/bin/gulp.js compile",
-    "watch": "npm-run-all -lp watch-client watch-extensions",
+    "watch": "npm-run-all -lp watch-client watch-extensions watch-extension-media",
     "watchd": "deemon yarn watch",
     "watch-webd": "deemon yarn watch-web",
     "kill-watchd": "deemon --kill yarn watch",
@@ -25,6 +25,7 @@
     "watch-clientd": "deemon yarn watch-client",
     "kill-watch-clientd": "deemon --kill yarn watch-client",
     "watch-extensions": "node --max_old_space_size=4095 ./node_modules/gulp/bin/gulp.js watch-extensions",
+    "watch-extension-media": "node --max_old_space_size=4095 ./node_modules/gulp/bin/gulp.js watch-extension-media",
     "watch-extensionsd": "deemon yarn watch-extensions",
     "kill-watch-extensionsd": "deemon --kill yarn watch-extensions",
     "mocha": "mocha test/unit/node/all.js --delay",