Azure Monitor: build monaco with webpack WIP

scripts/webpack/loaders/blobUrl.js

@@ -0,0 +1,6 @@
+const loaderUtils = require('loader-utils');
+
+module.exports = function blobUrl(source) {
+  const { type } = loaderUtils.getOptions(this) || {};
+  return `module.exports = URL.createObjectURL(new Blob([${JSON.stringify(source)}]${type ? `, { type: ${JSON.stringify(type)} }` : ''}));`;
+};

scripts/webpack/loaders/compile.js

@@ -0,0 +1,87 @@
+const loaderUtils = require('loader-utils');
+
+const WebWorkerTemplatePlugin = require('webpack/lib/webworker/WebWorkerTemplatePlugin');
+const ExternalsPlugin = require('webpack/lib/ExternalsPlugin');
+const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
+const LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin');
+const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
+
+const COMPILATION_METADATA = Symbol('COMPILATION_METADATA');
+
+module.exports.COMPILATION_METADATA = COMPILATION_METADATA;
+
+module.exports.pitch = function pitch(remainingRequest) {
+  const { target, plugins = [], output, emit } = loaderUtils.getOptions(this) || {};
+
+  if (target !== 'worker') {
+    throw new Error(`Unsupported compile target: ${JSON.stringify(target)}`);
+  }
+
+  this.cacheable(false);
+
+  const { filename, options = {} } = getOutputFilename(output, { target });
+
+  // eslint-disable-next-line no-underscore-dangle
+  const currentCompilation = this._compilation;
+
+  const outputFilename = loaderUtils.interpolateName(this, filename, {
+    context: options.context || currentCompilation.options.context,
+    regExp: options.regExp,
+  });
+
+  const outputOptions = {
+    filename: outputFilename,
+    chunkFilename: `${outputFilename}.[id]`,
+    namedChunkFilename: null,
+  };
+
+  const compilerOptions = currentCompilation.compiler.options;
+  const childCompiler = currentCompilation.createChildCompiler('worker', outputOptions, [
+    // https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js
+    new WebWorkerTemplatePlugin(outputOptions),
+    new LoaderTargetPlugin('webworker'),
+    ...((this.target === 'web') || (this.target === 'webworker') ? [] : [new NodeTargetPlugin()]),
+
+    // https://github.com/webpack-contrib/worker-loader/issues/95#issuecomment-352856617
+    ...(compilerOptions.externals ? [new ExternalsPlugin(compilerOptions.externals)] : []),
+
+    ...plugins,
+
+    new SingleEntryPlugin(this.context, `!!${remainingRequest}`, 'main'),
+  ]);
+
+  const subCache = `subcache ${__dirname} ${remainingRequest}`;
+
+  childCompiler.plugin('compilation', (compilation) => {
+    if (!compilation.cache) { return; }
+    if (!(subCache in compilation.cache)) { Object.assign(compilation.cache, { [subCache]: {} }); }
+    Object.assign(compilation, { cache: compilation.cache[subCache] });
+  });
+
+  const callback = this.async();
+
+  childCompiler.runAsChild((error, entries, compilation) => {
+    if (error) { return callback(error); }
+    if (entries.length === 0) { return callback(null, null); }
+    const mainFilename = entries[0].files[0];
+    if (emit === false) { delete currentCompilation.assets[mainFilename]; }
+    callback(null, compilation.assets[mainFilename].source(), null, {
+      [COMPILATION_METADATA]: entries[0].files,
+    });
+  });
+};
+
+function getOutputFilename(options, { target }) {
+  if (!options) { return { filename: `[hash].${target}.js`, options: undefined }; }
+  if (typeof options === 'string') { return { filename: options, options: undefined }; }
+  if (typeof options === 'object') {
+    return {
+      filename: options.filename,
+      options: {
+        context: options.context,
+        regExp: options.regExp,
+      },
+    };
+  }
+  throw new Error(`Invalid compile output options: ${options}`);
+}

scripts/webpack/webpack.dev.js

@@ -2,6 +2,7 @@
 
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
+const monaco = require('./webpack.monaco.js');
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require("html-webpack-plugin");
@@ -9,7 +10,7 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-module.exports = merge(common, {
+module.exports = merge(common, monaco, {
   devtool: "cheap-module-source-map",
   mode: 'development',
 

scripts/webpack/webpack.monaco.js

@@ -0,0 +1,122 @@
+const path = require('path');
+const webpack = require('webpack');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
+module.exports = {
+  // output: {
+  //   filename: 'monaco.min.js',
+  //   path: path.resolve(__dirname, 'dist'),
+  //   libraryTarget: 'umd',
+  //   library: 'monaco',
+  //   globalObject: 'self'
+  // },
+  entry: {
+    // monaco: './public/app/plugins/datasource/grafana-azure-monitor-datasource/monaco/monaco-loader.ts',
+  },
+  output: {
+    // filename: 'monaco.min.js',
+    // chunkFilename: '[name].bundle.js',
+    globalObject: 'self',
+  },
+  resolveLoader: {
+    alias: {
+      'blob-url-loader': require.resolve('./loaders/blobUrl'),
+      'compile-loader': require.resolve('./loaders/compile'),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [ 'style-loader', 'css-loader' ]
+      },
+      // {
+      //   // https://github.com/bridgedotnet/Bridge/issues/3097
+      //   test: /bridge\.js$/,
+      //   loader: 'regexp-replace-loader',
+      //   options: {
+      //     match: {
+      //       pattern: "globals\\.System\\s=\\s\\{\\};"
+      //     },
+      //     replaceWith: "$& System = globals.System; "
+      //   }
+      // },
+      // {
+      //   test: /Kusto\.JavaScript\.Client\.js$/,
+      //   loader: 'regexp-replace-loader',
+      //   options: {
+      //     match: {
+      //       pattern: '"use strict";'
+      //     },
+      //     replaceWith: "$& System = globals.System; "
+      //   }
+      // },
+      // {
+      //   test: /Kusto\.Language\.Bridge\.js$/,
+      //   loader: 'regexp-replace-loader',
+      //   options: {
+      //     match: {
+      //       pattern: '"use strict";'
+      //     },
+      //     replaceWith: "$& System = globals.System; "
+      //   }
+      // },
+      // {
+      //   test: /newtonsoft\.json\.js$/,
+      //   loader: 'regexp-replace-loader',
+      //   options: {
+      //     match: {
+      //       pattern: '"use strict";'
+      //     },
+      //     replaceWith: "$& System = globals.System; "
+      //   }
+      // },
+      // {
+      //   test: /monaco\.contribution\.js$/,
+      //   loader: 'regexp-replace-loader',
+      //   options: {
+      //     match: {
+      //       pattern: 'vs/language/kusto/kustoMode',
+      //       flags: 'g'
+      //     },
+      //     replaceWith: "./kustoMode"
+      //   }
+      // },
+    ]
+  },
+  optimization: {
+    splitChunks: {
+      // chunks: 'all',
+      cacheGroups: {
+        // monacoContribution: {
+        //   test: /(src)|(node_modules(?!\/@kusto))/,
+        //   name: 'monaco.contribution',
+        //   enforce: false,
+        //   // chunks: 'all',
+        // },
+        // bridge: {
+        //   test: /bridge/,
+        //   name: 'bridge',
+        //   chunks: 'all',
+        // },
+        // KustoJavaScriptClient: {
+        //   test: /Kusto\.JavaScript\.Client/,
+        //   name: 'kusto.javaScript.client',
+        //   chunks: 'all',
+        // },
+        // KustoLanguageBridge: {
+        //   test: /Kusto\.Language\.Bridge/,
+        //   name: 'kusto.language.bridge',
+        //   chunks: 'all',
+        // },
+      }
+    }
+  },
+  plugins: [
+    new webpack.IgnorePlugin(/^((fs)|(path)|(os)|(crypto)|(source-map-support))$/, /vs\/language\/typescript\/lib/),
+    // new webpack.optimize.LimitChunkCountPlugin({
+    //   maxChunks: 1,
+    // }),
+    // new UglifyJSPlugin()
+  ],
+};