Skip to content

Commit

Permalink
fix: incorrect content hash
Browse files Browse the repository at this point in the history
  • Loading branch information
@chenchen32
chenchen32 committed Aug 27, 2023
1 parent 38e1e3d commit c694acf
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 94 deletions.
141 changes: 68 additions & 73 deletions webpack-plugin/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import type * as webpack from 'webpack';
import * as path from 'path';
import * as loaderUtils from 'loader-utils';
import * as fs from 'fs';
import { AddWorkerEntryPointPlugin } from './plugins/AddWorkerEntryPointPlugin';
import { IFeatureDefinition } from './types';
import { ILoaderOptions } from './loaders/include';
import { EditorLanguage, EditorFeature, NegatedEditorFeature } from 'monaco-editor/esm/metadata';
import { EditorFeature, EditorLanguage, NegatedEditorFeature } from 'monaco-editor/esm/metadata';

const INCLUDE_LOADER_PATH = require.resolve('./loaders/include');

Expand Down Expand Up @@ -37,19 +35,6 @@ function resolveMonacoPath(filePath: string, monacoEditorPath: string | undefine
return require.resolve(filePath);
}

/**
* Return the interpolated final filename for a worker, respecting the file name template.
*/
function getWorkerFilename(
filename: string,
entry: string,
monacoEditorPath: string | undefined
): string {
return loaderUtils.interpolateName(<any>{ resourcePath: entry }, filename, {
content: fs.readFileSync(resolveMonacoPath(entry, monacoEditorPath))
});
}

interface EditorMetadata {
features: IFeatureDefinition[];
languages: IFeatureDefinition[];
Expand Down Expand Up @@ -147,6 +132,7 @@ declare namespace MonacoEditorWebpackPlugin {
globalAPI?: boolean;
}
}

interface IInternalMonacoEditorWebpackPluginOpts {
languages: IFeatureDefinition[];
features: IFeatureDefinition[];
Expand All @@ -156,8 +142,18 @@ interface IInternalMonacoEditorWebpackPluginOpts {
globalAPI: boolean;
}

type IWorkerPathsMap = Record<string, string>;

interface IWorkerTaskAction {
resolve: () => void;
reject: (err: Error) => void;
}

class MonacoEditorWebpackPlugin implements webpack.WebpackPluginInstance {
private readonly options: IInternalMonacoEditorWebpackPluginOpts;
public workerTaskActions: Record<string, IWorkerTaskAction>;
public workersTask: Promise<void[]>;
public workerPathsMap: IWorkerPathsMap;

constructor(options: MonacoEditorWebpackPlugin.IMonacoEditorWebpackPluginOpts = {}) {
const monacoEditorPath = options.monacoEditorPath;
Expand All @@ -172,6 +168,9 @@ class MonacoEditorWebpackPlugin implements webpack.WebpackPluginInstance {
publicPath: options.publicPath || '',
globalAPI: options.globalAPI || false
};
this.workerTaskActions = {};
this.workersTask = Promise.resolve([]);
this.workerPathsMap = {};
}

apply(compiler: webpack.Compiler): void {
Expand All @@ -188,19 +187,35 @@ class MonacoEditorWebpackPlugin implements webpack.WebpackPluginInstance {
});
}
});

this.workerPathsMap = collectWorkerPathsMap(workers);

const plugins = createPlugins(compiler, workers, filename, monacoEditorPath, this);
const rules = createLoaderRules(
languages,
features,
workers,
filename,
monacoEditorPath,
publicPath,
compilationPublicPath,
globalAPI
globalAPI,
this
);
const plugins = createPlugins(compiler, workers, filename, monacoEditorPath);
addCompilerRules(compiler, rules);
addCompilerPlugins(compiler, plugins);

compiler.hooks.thisCompilation.tap(AddWorkerEntryPointPlugin.name, () => {
const tasks: Promise<void>[] = [];
Object.keys(this.workerPathsMap).forEach((workerKey) => {
const task = new Promise<void>((resolve, reject) => {
this.workerTaskActions[workerKey] = {
resolve,
reject
};
});
tasks.push(task);
});
this.workersTask = Promise.all(tasks);
});
}
}

Expand Down Expand Up @@ -235,39 +250,41 @@ function getCompilationPublicPath(compiler: webpack.Compiler): string {
return '';
}

function collectWorkerPathsMap(workers: ILabeledWorkerDefinition[]): IWorkerPathsMap {
const map = fromPairs(workers.map(({ label }) => [label, '']));
if (map['typescript']) {
// javascript shares the same worker
map['javascript'] = map['typescript'];
}
if (map['css']) {
// scss and less share the same worker
map['less'] = map['css'];
map['scss'] = map['css'];
}

if (map['html']) {
// handlebars, razor and html share the same worker
map['handlebars'] = map['html'];
map['razor'] = map['html'];
}

return map;
}

function createLoaderRules(
languages: IFeatureDefinition[],
features: IFeatureDefinition[],
workers: ILabeledWorkerDefinition[],
filename: string,
monacoEditorPath: string | undefined,
pluginPublicPath: string,
compilationPublicPath: string,
globalAPI: boolean
globalAPI: boolean,
pluginInstance: MonacoEditorWebpackPlugin
): webpack.RuleSetRule[] {
if (!languages.length && !features.length) {
return [];
}
const languagePaths = flatArr(coalesce(languages.map((language) => language.entry)));
const featurePaths = flatArr(coalesce(features.map((feature) => feature.entry)));
const workerPaths = fromPairs(
workers.map(({ label, entry }) => [label, getWorkerFilename(filename, entry, monacoEditorPath)])
);
if (workerPaths['typescript']) {
// javascript shares the same worker
workerPaths['javascript'] = workerPaths['typescript'];
}
if (workerPaths['css']) {
// scss and less share the same worker
workerPaths['less'] = workerPaths['css'];
workerPaths['scss'] = workerPaths['css'];
}

if (workerPaths['html']) {
// handlebars, razor and html share the same worker
workerPaths['handlebars'] = 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.
Expand All @@ -279,35 +296,10 @@ function createLoaderRules(
`? __webpack_public_path__ ` +
`: ${JSON.stringify(compilationPublicPath)}`;

const globals = {
MonacoEnvironment: `(function (paths) {
function stripTrailingSlash(str) {
return str.replace(/\\/$/, '');
}
return {
globalAPI: ${globalAPI},
getWorkerUrl: function (moduleId, label) {
var pathPrefix = ${pathPrefix};
var result = (pathPrefix ? stripTrailingSlash(pathPrefix) + '/' : '') + paths[label];
if (/^((http:)|(https:)|(file:)|(\\/\\/))/.test(result)) {
var currentUrl = String(window.location);
var currentOrigin = currentUrl.substr(0, currentUrl.length - window.location.hash.length - window.location.search.length - window.location.pathname.length);
if (result.substring(0, currentOrigin.length) !== currentOrigin) {
if(/^(\\/\\/)/.test(result)) {
result = window.location.protocol + result
}
var js = '/*' + label + '*/importScripts("' + result + '");';
var blob = new Blob([js], { type: 'application/javascript' });
return URL.createObjectURL(blob);
}
}
return result;
}
};
})(${JSON.stringify(workerPaths, null, 2)})`
};
const options: ILoaderOptions = {
globals,
pluginInstance,
publicPath: pathPrefix,
globalAPI,
pre: featurePaths.map((importPath) => resolveMonacoPath(importPath, monacoEditorPath)),
post: languagePaths.map((importPath) => resolveMonacoPath(importPath, monacoEditorPath))
};
Expand All @@ -328,18 +320,21 @@ function createPlugins(
compiler: webpack.Compiler,
workers: ILabeledWorkerDefinition[],
filename: string,
monacoEditorPath: string | undefined
monacoEditorPath: string | undefined,
pluginInstance: MonacoEditorWebpackPlugin
): AddWorkerEntryPointPlugin[] {
const webpack = compiler.webpack ?? require('webpack');

return (<AddWorkerEntryPointPlugin[]>[]).concat(
workers.map(
({ id, entry }) =>
({ id, entry, label }) =>
new AddWorkerEntryPointPlugin({
id,
entry: resolveMonacoPath(entry, monacoEditorPath),
filename: getWorkerFilename(filename, entry, monacoEditorPath),
plugins: [new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })]
label,
filename,
plugins: [new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })],
pluginInstance
})
)
);
Expand Down
71 changes: 61 additions & 10 deletions webpack-plugin/src/loaders/include.ts
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,28 @@
import type { PitchLoaderDefinitionFunction } from 'webpack';
import * as loaderUtils from 'loader-utils';
import type * as MonacoEditorWebpackPlugin from '../index';

export interface ILoaderOptions {
globals?: { [key: string]: string };
pluginInstance: MonacoEditorWebpackPlugin;
publicPath: string;
globalAPI: boolean;
pre?: string[];
post?: string[];
}

export const pitch: PitchLoaderDefinitionFunction<ILoaderOptions> = function pitch(
remainingRequest
) {
const { globals = undefined, pre = [], post = [] } = (this.query as ILoaderOptions) || {};
const {
pluginInstance,
publicPath,
globalAPI,
pre = [],
post = []
} = (this.query as ILoaderOptions) || {};

this.cacheable(false);
const callback = this.async();

// HACK: NamedModulesPlugin overwrites existing modules when requesting the same module via
// different loaders, so we need to circumvent this by appending a suffix to make the name unique
Expand All @@ -26,16 +38,55 @@ export const pitch: PitchLoaderDefinitionFunction<ILoaderOptions> = function pit
return loaderUtils.stringifyRequest(this, request);
};

return [
...(globals
? Object.keys(globals).map((key) => `self[${JSON.stringify(key)}] = ${globals[key]};`)
: []),
...pre.map((include: any) => `import ${stringifyRequest(include)};`),
`
const getContent = () => {
const globals: Record<string, string> = {
MonacoEnvironment: `(function (paths) {
function stripTrailingSlash(str) {
return str.replace(/\\/$/, '');
}
return {
globalAPI: ${globalAPI},
getWorkerUrl: function (moduleId, label) {
var pathPrefix = ${publicPath};
var result = (pathPrefix ? stripTrailingSlash(pathPrefix) + '/' : '') + paths[label];
if (/^((http:)|(https:)|(file:)|(\\/\\/))/.test(result)) {
var currentUrl = String(window.location);
var currentOrigin = currentUrl.substr(0, currentUrl.length - window.location.hash.length - window.location.search.length - window.location.pathname.length);
if (result.substring(0, currentOrigin.length) !== currentOrigin) {
if(/^(\\/\\/)/.test(result)) {
result = window.location.protocol + result
}
var js = '/*' + label + '*/importScripts("' + result + '");';
var blob = new Blob([js], { type: 'application/javascript' });
return URL.createObjectURL(blob);
}
}
return result;
}
};
})(${JSON.stringify(pluginInstance.workerPathsMap, null, 2)})`
};

return [
...(globals
? Object.keys(globals).map((key) => `self[${JSON.stringify(key)}] = ${globals[key]};`)
: []),
...pre.map((include: any) => `import ${stringifyRequest(include)};`),
`
import * as monaco from ${stringifyRequest(`!!${remainingRequest}`)};
export * from ${stringifyRequest(`!!${remainingRequest}`)};
export default monaco;
`,
...post.map((include: any) => `import ${stringifyRequest(include)};`)
].join('\n');
...post.map((include: any) => `import ${stringifyRequest(include)};`)
].join('\n');
};

pluginInstance.workersTask.then(
() => {
callback(null, getContent());
},
(err) => {
callback(err, getContent());
}
);
};
Loading

0 comments on commit c694acf

Please sign in to comment.