add support for plugin-specific public path

Override the public path from which files generated by this plugin will be served. This wins out over Webpack's dynamic runtime path and can be useful to avoid attempting to load workers cross-origin when using a CDN for other static resources.
This commit is contained in:
James Diefenderfer 2019-11-15 12:46:16 -08:00
parent 1d1473de8e
commit c9c13e7b55
No known key found for this signature in database
GPG key ID: EDE86934D2A0665C
3 changed files with 29 additions and 9 deletions

View file

@ -48,6 +48,8 @@ Options can be passed in to `MonacoWebpackPlugin`. They can be used to generate
* `output` (`string`) - custom output path for worker scripts, relative to the main webpack `output.path`. * `output` (`string`) - custom output path for worker scripts, relative to the main webpack `output.path`.
* default value: `''`. * default value: `''`.
* `publicPath` (`string`) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. This wins out over Webpack's dynamic runtime path and can be useful to avoid attempting to load workers cross-origin when using a CDN for other static resources. Use e.g. '/' if you want to load your resources from the current origin..
* default value: `''`.
* `languages` (`string[]`) - include only a subset of the languages supported. * `languages` (`string[]`) - include only a subset of the languages supported.
* default value: `['apex', 'azcli', 'bat', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sql', 'st', 'swift', 'typescript', 'vb', 'xml', 'yaml']`. * default value: `['apex', 'azcli', 'bat', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sql', 'st', 'swift', 'typescript', 'vb', 'xml', 'yaml']`.

8
index.d.ts vendored
View file

@ -17,6 +17,14 @@ interface IMonacoEditorWebpackPluginOpts {
* Use e.g. '!contextmenu' to exclude a certain feature. * Use e.g. '!contextmenu' to exclude a certain feature.
*/ */
features?: string[]; features?: string[];
/**
* Override the public path from which files generated by this plugin will be served.
* This wins out over Webpack's dynamic runtime path and can be useful to avoid attempting to load workers cross-
* origin when using a CDN for other static resources.
* Use e.g. '/' if you want to load your resources from the current origin.
*/
publicPath?: string;
} }
declare class MonacoEditorWebpackPlugin extends Plugin { declare class MonacoEditorWebpackPlugin extends Plugin {

View file

@ -53,22 +53,22 @@ class MonacoWebpackPlugin {
constructor(options = {}) { constructor(options = {}) {
const languages = options.languages || Object.keys(languagesById); const languages = options.languages || Object.keys(languagesById);
const features = getFeaturesIds(options.features || [], featuresById); const features = getFeaturesIds(options.features || [], featuresById);
const output = options.output || '';
this.options = { this.options = {
languages: languages.map((id) => languagesById[id]).filter(Boolean), languages: languages.map((id) => languagesById[id]).filter(Boolean),
features: features.map(id => featuresById[id]).filter(Boolean), features: features.map(id => featuresById[id]).filter(Boolean),
output, output: options.output || '',
publicPath: options.publicPath || ''
}; };
} }
apply(compiler) { apply(compiler) {
const { languages, features, output } = this.options; const { languages, features, output, publicPath } = this.options;
const publicPath = getPublicPath(compiler); const compilationPublicPath = getCompilationPublicPath(compiler);
const modules = [EDITOR_MODULE].concat(languages).concat(features); const modules = [EDITOR_MODULE].concat(languages).concat(features);
const workers = modules.map( const workers = modules.map(
({ label, alias, worker }) => worker && (mixin({ label, alias }, worker)) ({ label, alias, worker }) => worker && (mixin({ label, alias }, worker))
).filter(Boolean); ).filter(Boolean);
const rules = createLoaderRules(languages, features, workers, output, publicPath); const rules = createLoaderRules(languages, features, workers, output, publicPath, compilationPublicPath);
const plugins = createPlugins(workers, output); const plugins = createPlugins(workers, output);
addCompilerRules(compiler, rules); addCompilerRules(compiler, rules);
addCompilerPlugins(compiler, plugins); addCompilerPlugins(compiler, plugins);
@ -85,11 +85,11 @@ function addCompilerPlugins(compiler, plugins) {
plugins.forEach((plugin) => plugin.apply(compiler)); plugins.forEach((plugin) => plugin.apply(compiler));
} }
function getPublicPath(compiler) { function getCompilationPublicPath(compiler) {
return compiler.options.output && compiler.options.output.publicPath || ''; return compiler.options.output && compiler.options.output.publicPath || '';
} }
function createLoaderRules(languages, features, workers, outputPath, publicPath) { function createLoaderRules(languages, features, workers, outputPath, pluginPublicPath, compilationPublicPath) {
if (!languages.length && !features.length) { return []; } if (!languages.length && !features.length) { return []; }
const languagePaths = flatArr(languages.map(({ entry }) => entry).filter(Boolean)); const languagePaths = flatArr(languages.map(({ entry }) => entry).filter(Boolean));
const featurePaths = flatArr(features.map(({ entry }) => entry).filter(Boolean)); const featurePaths = flatArr(features.map(({ entry }) => entry).filter(Boolean));
@ -110,6 +110,16 @@ function createLoaderRules(languages, features, workers, outputPath, publicPath)
workerPaths['razor'] = workerPaths['html']; workerPaths['razor'] = workerPaths['html'];
} }
// Determine the public path from which to load worker JS files. In order of precedence:
// 1. Plugin-specific public path.
// 2. Dynamic runtime public path.
// 3. Compilation public path.
const pathPrefix = Boolean(pluginPublicPath)
? JSON.stringify(pluginPublicPath)
: `typeof window.__webpack_public_path__ === 'string' ` +
`? window.__webpack_public_path__ ` +
`: ${JSON.stringify(compilationPublicPath)}`
const globals = { const globals = {
'MonacoEnvironment': `(function (paths) { 'MonacoEnvironment': `(function (paths) {
function stripTrailingSlash(str) { function stripTrailingSlash(str) {
@ -117,7 +127,7 @@ function createLoaderRules(languages, features, workers, outputPath, publicPath)
} }
return { return {
getWorkerUrl: function (moduleId, label) { getWorkerUrl: function (moduleId, label) {
var pathPrefix = (typeof window.__webpack_public_path__ === 'string' ? window.__webpack_public_path__ : ${JSON.stringify(publicPath)}); var pathPrefix = ${pathPrefix};
return (pathPrefix ? stripTrailingSlash(pathPrefix) + '/' : '') + paths[label]; return (pathPrefix ? stripTrailingSlash(pathPrefix) + '/' : '') + paths[label];
} }
}; };