Simplify dev-setup.js

This commit is contained in:
Alex Dima 2022-02-03 09:32:42 +01:00
parent 7138fd1ffb
commit 84665761ff
No known key found for this signature in database
GPG key ID: 39563C1504FDD0C9

View file

@ -1,84 +1,196 @@
//@ts-check
(function () { (function () {
const METADATA = { const corePaths = {
CORE: {
paths: {
src: '/vscode/out/vs', src: '/vscode/out/vs',
'npm/dev': 'node_modules/monaco-editor-core/dev/vs', 'npm/dev': 'node_modules/monaco-editor-core/dev/vs',
'npm/min': 'node_modules/monaco-editor-core/min/vs', 'npm/min': 'node_modules/monaco-editor-core/min/vs',
built: '/vscode/out-monaco-editor-core/min/vs', built: '/vscode/out-monaco-editor-core/min/vs',
releaseDev: 'release/dev/vs', releaseDev: 'release/dev/vs',
releaseMin: 'release/min/vs' releaseMin: 'release/min/vs'
} };
}, const pluginPaths = {
PLUGINS: [ src: 'out/amd',
{ dev: 'out/release/dev/vs',
name: 'monaco-typescript', min: 'out/release/min/vs'
modulePrefix: 'vs/language/typescript', };
paths: { const parsedQuery = parseQueryString();
src: './out/amd/language/typescript', const editorQueryName = 'editor';
dev: './out/release/dev/vs/language/typescript', const pluginsQueryName = 'plugins';
min: './out/release/min/vs/language/typescript' const defaultEditorQueryValue = 'npm/dev';
} const defaultPluginsQueryValue = 'src';
}, const editorQueryValue = parsedQuery[editorQueryName] || defaultEditorQueryValue;
{ const pluginsQueryValue = parsedQuery[pluginsQueryName] || defaultPluginsQueryValue;
name: 'monaco-css', const corePath = resolvePath(corePaths[editorQueryValue]);
modulePrefix: 'vs/language/css', const pluginPath = resolvePath(pluginPaths[pluginsQueryValue]);
paths: { const isRelease = /release/.test(editorQueryValue);
src: './out/amd/language/css',
dev: './out/release/dev/vs/language/css', (function () {
min: './out/release/min/vs/language/css' let div = document.createElement('div');
} div.className = 'dev-setup-control';
}, div.style.position = 'fixed';
{ div.style.top = '0';
name: 'monaco-json', div.style.right = '0';
modulePrefix: 'vs/language/json', div.style.background = 'lightgray';
paths: { div.style.padding = '5px 20px 5px 5px';
src: './out/amd/language/json', div.style.zIndex = '1000';
dev: './out/release/dev/vs/language/json',
min: './out/release/min/vs/language/json' div.innerHTML =
} '<ul><li>' +
}, renderLoadingOptions(true) +
{ (isRelease ? '' : `</li><li>${renderLoadingOptions(false)}`) +
name: 'monaco-html', '</li></ul>';
modulePrefix: 'vs/language/html',
paths: { document.body.appendChild(div);
src: './out/amd/language/html',
dev: './out/release/dev/vs/language/html', let aElements = document.getElementsByTagName('a');
min: './out/release/min/vs/language/html' for (let i = 0; i < aElements.length; i++) {
} let aElement = aElements[i];
}, if (aElement.className === 'loading-opts') {
{ aElement.href += window.location.search;
name: 'monaco-languages',
modulePrefix: 'vs/basic-languages',
paths: {
src: './out/amd/basic-languages',
dev: './out/release/dev/vs/basic-languages',
min: './out/release/min/vs/basic-languages'
} }
} }
] })();
/** @type {any} */
const global = self;
global.getCodiconPath = () => {
return `${corePath}/base/browser/ui/codicons/codicon/codicon.ttf`;
};
/**
*
* @param {()=>void} callback
* @param {string} [PATH_PREFIX]
*/
global.loadEditor = (callback, PATH_PREFIX) => {
PATH_PREFIX = PATH_PREFIX || '';
loadScript(`${PATH_PREFIX}${corePath}/loader.js`, () => {
global.AMD = true;
/** @type {{[name:string]: string;}} */
const loaderPathsConfig = {};
if (isRelease) {
loaderPathsConfig['vs'] = `${PATH_PREFIX}${corePath}`;
} else {
loaderPathsConfig[
'vs/fillers/monaco-editor-core'
] = `${PATH_PREFIX}/monaco-editor/out/amd/fillers/monaco-editor-core-amd`;
loaderPathsConfig['vs/language'] = `${PATH_PREFIX}${pluginPath}/language`;
loaderPathsConfig['vs/basic-language'] = `${PATH_PREFIX}${pluginPath}/basic-language`;
loaderPathsConfig['vs'] = `${PATH_PREFIX}${corePath}`;
}
console.log('LOADER CONFIG: ');
console.log(JSON.stringify(loaderPathsConfig, null, '\t'));
/** @type {any} */
const req = require;
req.config({
paths: loaderPathsConfig
// 'vs/nls' : {
// availableLanguages: {
// '*': 'de'
// }
// }
});
req(['vs/editor/editor.main'], () => {
if (isRelease) {
callback();
return;
}
// At this point we've loaded the monaco-editor-core
req(
[
'vs/basic-languages/monaco.contribution',
'vs/language/css/monaco.contribution',
'vs/language/html/monaco.contribution',
'vs/language/json/monaco.contribution',
'vs/language/typescript/monaco.contribution'
],
callback
);
});
});
}; };
let LOADER_OPTS = (function () {
function parseQueryString() { function parseQueryString() {
let str = window.location.search; const str = window.location.search.replace(/^\?/, '');
str = str.replace(/^\?/, ''); const pieces = str.split(/&/);
let pieces = str.split(/&/); /** @type {{[name:string]: string;}} */
let result = {}; const result = {};
pieces.forEach(function (piece) { pieces.forEach((piece) => {
let config = piece.split(/=/); const config = piece.split(/=/);
result[config[0]] = config[1]; result[config[0]] = config[1];
}); });
return result; return result;
} }
let overwrites = parseQueryString();
let result = {}; /**
result['editor'] = overwrites['editor'] || 'npm/dev'; * @param {string} path
METADATA.PLUGINS.map(function (plugin) { */
result[plugin.name] = overwrites[plugin.name] || 'dev'; function resolvePath(path) {
}); if (/^\//.test(path)) {
return result; return path;
})(); }
return `/monaco-editor/${path}`;
}
/**
* @param {boolean} isEditor
*/
function renderLoadingOptions(isEditor) {
const name = isEditor ? 'editor' : 'plugins';
const paths = isEditor ? corePaths : pluginPaths;
const selectedPath = isEditor ? editorQueryValue : pluginsQueryValue;
return (
'<strong style="width:130px;display:inline-block;">' +
name +
'</strong>:&#160;&#160;&#160;' +
Object.keys(paths)
.map((path) => {
if (path === selectedPath) {
return '<strong>' + path + '</strong>';
}
return '<a href="' + generateUrlForLoadingOption(isEditor, path) + '">' + path + '</a>';
})
.join('&#160;&#160;&#160;')
);
}
/**
* @param {boolean} isEditor
* @param {string} value
*/
function generateUrlForLoadingOption(isEditor, value) {
/** @type {{[name:string]: string;}} */
const newQueryOptions = {};
const newEditorQueryValue = isEditor ? value : editorQueryValue;
const newPluginsQueryValue = isEditor ? pluginsQueryValue : value;
if (newEditorQueryValue !== defaultEditorQueryValue) {
newQueryOptions[editorQueryName] = newEditorQueryValue;
}
if (newPluginsQueryValue !== defaultPluginsQueryValue) {
newQueryOptions[pluginsQueryName] = newPluginsQueryValue;
}
let search = Object.keys(newQueryOptions)
.map((key) => `${key}=${newQueryOptions[key]}`)
.join('&amp;');
if (search.length > 0) {
search = '?' + search;
}
return toHREF(search);
}
/**
* @param {string} search
*/
function toHREF(search) { function toHREF(search) {
let port = window.location.port; let port = window.location.port;
if (port.length > 0) { if (port.length > 0) {
@ -95,167 +207,12 @@
); );
} }
function Component(name, modulePrefix, paths) {
this.name = name;
this.modulePrefix = modulePrefix;
this.paths = paths;
this.selectedPath = LOADER_OPTS[name];
}
Component.prototype.isRelease = function () {
return /release/.test(this.selectedPath);
};
Component.prototype.getResolvedPath = function (PATH_PREFIX) {
let resolvedPath = this.paths[this.selectedPath];
if (!/^\//.test(resolvedPath)) {
resolvedPath = PATH_PREFIX + '/monaco-editor/' + resolvedPath;
}
return resolvedPath;
};
Component.prototype.generateLoaderConfig = function (dest, PATH_PREFIX) {
dest[this.modulePrefix] = this.getResolvedPath(PATH_PREFIX);
};
Component.prototype.generateUrlForPath = function (pathName) {
let NEW_LOADER_OPTS = {};
Object.keys(LOADER_OPTS).forEach(function (key) {
NEW_LOADER_OPTS[key] = LOADER_OPTS[key] === 'npm/dev' ? undefined : LOADER_OPTS[key];
});
NEW_LOADER_OPTS[this.name] = pathName === 'npm/dev' ? undefined : pathName;
let search = Object.keys(NEW_LOADER_OPTS)
.map(function (key) {
let value = NEW_LOADER_OPTS[key];
if (value) {
return key + '=' + value;
}
return '';
})
.filter(function (assignment) {
return !!assignment;
})
.join('&amp;');
if (search.length > 0) {
search = '?' + search;
}
return toHREF(search);
};
Component.prototype.renderLoadingOptions = function () {
return (
'<strong style="width:130px;display:inline-block;">' +
this.name +
'</strong>:&#160;&#160;&#160;' +
Object.keys(this.paths)
.map(
function (pathName) {
if (pathName === this.selectedPath) {
return '<strong>' + pathName + '</strong>';
}
return '<a href="' + this.generateUrlForPath(pathName) + '">' + pathName + '</a>';
}.bind(this)
)
.join('&#160;&#160;&#160;')
);
};
let RESOLVED_CORE = new Component('editor', 'vs', METADATA.CORE.paths);
self.RESOLVED_CORE_PATH = RESOLVED_CORE.getResolvedPath('');
let RESOLVED_PLUGINS = METADATA.PLUGINS.map(function (plugin) {
return new Component(plugin.name, plugin.modulePrefix, plugin.paths);
});
function loadScript(path, callback) { function loadScript(path, callback) {
let script = document.createElement('script'); const script = document.createElement('script');
script.onload = callback; script.onload = callback;
script.async = true; script.async = true;
script.type = 'text/javascript'; script.type = 'text/javascript';
script.src = path; script.src = path;
document.head.appendChild(script); document.head.appendChild(script);
} }
(function () {
let allComponents = [RESOLVED_CORE];
if (!RESOLVED_CORE.isRelease()) {
allComponents = allComponents.concat(RESOLVED_PLUGINS);
}
let div = document.createElement('div');
div.className = 'dev-setup-control';
div.style.position = 'fixed';
div.style.top = 0;
div.style.right = 0;
div.style.background = 'lightgray';
div.style.padding = '5px 20px 5px 5px';
div.style.zIndex = '1000';
div.innerHTML =
'<ul><li>' +
allComponents
.map(function (component) {
return component.renderLoadingOptions();
})
.join('</li><li>') +
'</li></ul>';
document.body.appendChild(div);
let aElements = document.getElementsByTagName('a');
for (let i = 0; i < aElements.length; i++) {
let aElement = aElements[i];
if (aElement.className === 'loading-opts') {
aElement.href += window.location.search;
}
}
})();
self.getCodiconPath = function (PATH_PREFIX) {
PATH_PREFIX = PATH_PREFIX || '';
const result = RESOLVED_CORE.getResolvedPath(PATH_PREFIX);
return result + '/base/browser/ui/codicons/codicon/codicon.ttf';
};
self.loadEditor = function (callback, PATH_PREFIX) {
PATH_PREFIX = PATH_PREFIX || '';
loadScript(RESOLVED_CORE.getResolvedPath(PATH_PREFIX) + '/loader.js', function () {
let loaderPathsConfig = {};
window.AMD = true;
loaderPathsConfig['vs/fillers/monaco-editor-core'] =
PATH_PREFIX + '/monaco-editor/./out/amd/fillers/monaco-editor-core-amd';
if (!RESOLVED_CORE.isRelease()) {
RESOLVED_PLUGINS.forEach(function (plugin) {
plugin.generateLoaderConfig(loaderPathsConfig, PATH_PREFIX);
});
}
RESOLVED_CORE.generateLoaderConfig(loaderPathsConfig, PATH_PREFIX);
console.log('LOADER CONFIG: ');
console.log(JSON.stringify(loaderPathsConfig, null, '\t'));
require.config({
paths: loaderPathsConfig
// 'vs/nls' : {
// availableLanguages: {
// '*': 'de'
// }
// }
});
require(['vs/editor/editor.main'], function () {
if (!RESOLVED_CORE.isRelease()) {
// At this point we've loaded the monaco-editor-core
require([
'vs/basic-languages/monaco.contribution',
'vs/language/css/monaco.contribution',
'vs/language/html/monaco.contribution',
'vs/language/json/monaco.contribution',
'vs/language/typescript/monaco.contribution'
], function () {
// At this point we've loaded all the plugins
callback();
});
} else {
callback();
}
});
});
};
})(); })();