mirrors/compiler-explorer
1
0
Fork 0
mirror of https://github.com/compiler-explorer/compiler-explorer.git synced 2025-12-27 10:33:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Convert tool.js to typescript (based off #4166) (#4474)

Browse Source 
Signed-off-by: Markus <28785953+MarkusJx@users.noreply.github.com>
Signed-off-by: Marc Poulhiès <dkm@kataplop.net>
Signed-off-by: Miguel Ojeda <ojeda@kernel.org>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: MarkusJx <28785953+markusjx@users.noreply.github.com>
Co-authored-by: Rubén Rincón Blanco <ruben@rinconblanco.es>
Co-authored-by: partouf <partouf@gmail.com>
Co-authored-by: Jeremy Rifkin <51220084+jeremy-rifkin@users.noreply.github.com>
Co-authored-by: Marc Poulhiès <dkm@kataplop.net>
Co-authored-by: Paul Taylor <paul.e.taylor@me.com>
Co-authored-by: Mats Larsen <me@supergrecko.com>
Co-authored-by: David Spickett <DavidSpickett@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Compiler Explorer Bot <mattgodbolt@users.noreply.github.com>
Co-authored-by: Enrico Seiler <eseiler@users.noreply.github.com>
Co-authored-by: Quinton Miller <nicetas.c@gmail.com>
Co-authored-by: James Murphy <72399781+mCodingLLC@users.noreply.github.com>
Co-authored-by: Miguel Ojeda <ojeda@users.noreply.github.com>
Co-authored-by: Ofek <ofekshilon@gmail.com>
Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
Co-authored-by: Sebastian Büttner <mail@bueddl.de>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Daniel Thornburgh <mysterymath@gmail.com>
Co-authored-by: Cory Bloor <Cordell.Bloor@amd.com>
Co-authored-by: marcosmartinezfco <marcosmartinezfco@gmail.com>
Co-authored-by: amyspark <amy@amyspark.me>
Co-authored-by: Robert Cohn <robert.s.cohn@intel.com>
Co-authored-by: Steve <hez2010@outlook.com>
Co-authored-by: Ofek <ofek@istraresearch.com>
Co-authored-by: kasperk81 <83082615+kasperk81@users.noreply.github.com>
Co-authored-by: Samuel Bronson <naesten@gmail.com>
Co-authored-by: Alfredo Correa <alfredo.correa+work@gmail.com>
Co-authored-by: Anastasia Stulova <38433336+AnastasiaStulova@users.noreply.github.com>
Co-authored-by: Michael Debertol <michael.debertol@gmail.com>
Co-authored-by: Madhur Chauhan <madhur4127@gmail.com>
Co-authored-by: Jessica Clarke <jrtc27@jrtc27.com>
Co-authored-by: Tobias Hieta <tobias@hieta.se>
This commit is contained in:
Matt Godbolt
2023-02-08 10:22:02 -06:00
committed by GitHub
parent 4a276f58f4
commit fb47642ff7
7 changed files with 626 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
static/components.interfaces.ts
View File

@@ -110,17 +110,17 @@ export type OutputState = StateWithTree & {
editor: number; // EditorId
};
export type ToolViewState = StateWithTree & {
compiler: number; // CompilerId
editor: number; // EditorId
toolId: string;
args: unknown;
monacoStdin: boolean;
};
export type ToolViewState = StateWithTree &
ToolState & {
id: number; // CompilerID (TODO(#4703): Why is this not part of StateWithTree)
compilerName: string; // Compiler Name (TODO(#4703): Why is this not part of StateWithTree)
editorId: number; // EditorId
toolId: string;
};
export type EmptyToolInputViewState = EmptyState;
export type PopulatedToolInputViewState = {
compilerId: string;
compilerId: number;
toolId: string;
toolName: string;
};

12
static/components.ts
View File

@@ -275,8 +275,9 @@ export function getOutput(compiler: number, editor: number, tree: number): Compo
/** Get a tool view component with the given configuration. */
export function getToolViewWith(
compiler: number,
editor: number,
compilerId: number,
compilerName: string,
editorId: number,
toolId: string,
args: string,
monacoStdin: boolean,
@@ -286,8 +287,9 @@ export function getToolViewWith(
type: 'component',
componentName: TOOL_COMPONENT_NAME,
componentState: {
compiler,
editor,
id: compilerId,
compilerName,
editorId,
toolId,
args,
tree,
@@ -307,7 +309,7 @@ export function getToolInputView(): ComponentConfig<EmptyToolInputViewState> {
/** Get a tool input view component with the given configuration. */
export function getToolInputViewWith(
compilerId: string,
compilerId: number,
toolId: string,
toolName: string
): ComponentConfig<PopulatedToolInputViewState> {

2
static/event-map.ts
View File

@@ -75,7 +75,7 @@ export type EventMap = {
editorDisplayFlow: (editorId: number, flow: MessageWithLocation[]) => void;
editorLinkLine: (editorId: number, lineNumber: number, colBegin: number, colEnd: number, reveal: boolean) => void;
editorOpen: (editorId: number) => void;
editorSetDecoration: (editorId: number, lineNumber: number, reveal: boolean) => void;
editorSetDecoration: (editorId: number, lineNumber: number, reveal: boolean, column?: number) => void;
executeResult: (executorId: number, compiler: any, result: any, language: Language) => void;
executor: (
executorId: number,

9
static/panes/compiler.ts
View File

@@ -415,7 +415,13 @@ export class Compiler extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Co
readOnly: true,
language: 'asm',
glyphMargin: !options.embedded,
// guides: false,
guides: {
bracketPairs: false,
bracketPairsHorizontal: false,
highlightActiveBracketPair: false,
highlightActiveIndentation: false,
indentation: false,
},
vimInUse: false,
},
this.settings
@@ -2422,6 +2428,7 @@ export class Compiler extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Co
}
return Components.getToolViewWith(
this.id,
this.getCompilerName(),
this.sourceEditorId ?? 0,
toolId,
args,

35
static/panes/tool.interfaces.ts Normal file
View File

@@ -0,0 +1,35 @@
// Copyright (c) 2023, Compiler Explorer Authors
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright
// notice, this list of conditions and the following disclaimer in the
// documentation and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
type ToolState = {
toolId: any;
monacoStdin?: boolean;
monacoEditorOpen?: boolean;
monacoEditorHasBeenAutoOpened?: boolean;
argsPanelShown?: boolean;
stdinPanelShown?: boolean;
args?: string;
stdin?: string;
wrap?: boolean;
};

631
static/panes/tool.js
View File

@@ -1,631 +0,0 @@
// Copyright (c) 2018, Compiler Explorer Authors
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright
// notice, this list of conditions and the following disclaimer in the
// documentation and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
'use strict';
var _ = require('underscore');
var $ = require('jquery');
var FontScale = require('../widgets/fontscale').FontScale;
var AnsiToHtml = require('../ansi-to-html').Filter;
var Toggles = require('../widgets/toggles').Toggles;
var ga = require('../analytics').ga;
var Components = require('../components');
var monaco = require('monaco-editor');
var monacoConfig = require('../monaco-config');
var ceoptions = require('../options').options;
var utils = require('../utils');
var PaneRenaming = require('../widgets/pane-renaming').PaneRenaming;
var saveAs = require('file-saver').saveAs;
function makeAnsiToHtml(color) {
return new AnsiToHtml({
fg: color ? color : '#333',
bg: '#f5f5f5',
stream: true,
escapeXML: true,
});
}
function Tool(hub, container, state) {
this.hub = hub;
this.container = container;
this.compilerId = state.compiler;
this.editorId = state.editor;
this.treeId = state.tree;
this.toolId = state.toolId;
this.toolName = 'Tool';
this.compilerService = hub.compilerService;
this.eventHub = hub.createEventHub();
this.domRoot = container.getElement();
this.domRoot.html($('#tool-output').html());
this.editorContentRoot = this.domRoot.find('.monaco-placeholder');
this.plainContentRoot = this.domRoot.find('pre.content');
this.optionsToolbar = this.domRoot.find('.options-toolbar');
this.badLangToolbar = this.domRoot.find('.bad-lang');
this.compilerName = '';
this.monacoStdin = state.monacoStdin || false;
this.monacoEditorOpen = state.monacoEditorOpen || false;
this.monacoEditorHasBeenAutoOpened = state.monacoEditorHasBeenAutoOpened || false;
this.monacoStdinField = '';
this.normalAnsiToHtml = makeAnsiToHtml();
this.optionsField = this.domRoot.find('input.options');
this.localStdinField = this.domRoot.find('textarea.tool-stdin');
this.outputEditor = monaco.editor.create(
this.editorContentRoot[0],
monacoConfig.extendConfig({
readOnly: true,
language: 'text',
fontFamily: 'courier new',
lineNumbersMinChars: 5,
guides: false,
})
);
this.fontScale = new FontScale(this.domRoot, state, '.content');
this.fontScale.on(
'change',
_.bind(function () {
this.saveState();
}, this)
);
this.createToolInputView = _.bind(function () {
return Components.getToolInputViewWith(this.compilerId, this.toolId, this.toolName);
}, this);
this.initButtons(state);
this.options = new Toggles(this.domRoot.find('.options'), state);
this.options.on('change', _.bind(this.onOptionsChange, this));
this.paneRenaming = new PaneRenaming(this, state);
this.initArgs(state);
this.initCallbacks();
this.onOptionsChange();
ga.proxy('send', {
hitType: 'event',
eventCategory: 'OpenViewPane',
eventAction: 'Tool',
});
this.eventHub.emit('toolOpened', this.compilerId, this.currentState());
this.eventHub.emit('requestSettings');
}
Tool.prototype.initCallbacks = function () {
this.container.on('resize', this.resize, this);
this.container.on('shown', this.resize, this);
this.container.on('destroy', this.close, this);
this.paneRenaming.on('renamePane', this.saveState.bind(this));
this.eventHub.on('compileResult', this.onCompileResult, this);
this.eventHub.on('compilerClose', this.onCompilerClose, this);
this.eventHub.on('settingsChange', this.onSettingsChange, this);
this.eventHub.on('languageChange', this.onLanguageChange, this);
this.eventHub.on('toolInputChange', this.onToolInputChange, this);
this.eventHub.on('toolInputViewClosed', this.onToolInputViewClosed, this);
this.toggleArgs.on(
'click',
_.bind(function () {
this.togglePanel(this.toggleArgs, this.panelArgs);
}, this)
);
this.toggleStdin.on(
'click',
_.bind(function () {
if (!this.monacoStdin) {
this.togglePanel(this.toggleStdin, this.panelStdin);
} else {
if (!this.monacoEditorOpen) {
this.openMonacoEditor();
} else {
this.monacoEditorOpen = false;
this.toggleStdin.removeClass('active');
this.eventHub.emit('toolInputViewCloseRequest', this.compilerId, this.toolId);
}
}
}, this)
);
if (MutationObserver !== undefined) {
new MutationObserver(_.bind(this.resize, this)).observe(this.localStdinField[0], {
attributes: true,
attributeFilter: ['style'],
});
}
};
Tool.prototype.onLanguageChange = function (editorId, newLangId) {
if (this.editorId && this.editorId === editorId) {
var tools = ceoptions.tools[newLangId];
this.toggleUsable(tools && tools[this.toolId]);
}
};
Tool.prototype.toggleUsable = function (isUsable) {
if (isUsable) {
this.plainContentRoot.css('opacity', '1');
this.badLangToolbar.hide();
this.optionsToolbar.show();
} else {
this.plainContentRoot.css('opacity', '0.5');
this.optionsToolbar.hide();
this.badLangToolbar.show();
}
};
Tool.prototype.onSettingsChange = function (newSettings) {
this.outputEditor.updateOptions({
contextmenu: newSettings.useCustomContextMenu,
minimap: {
enabled: newSettings.showMinimap,
},
fontFamily: newSettings.editorsFFont,
codeLensFontFamily: newSettings.editorsFFont,
fontLigatures: newSettings.editorsFLigatures,
});
};
Tool.prototype.initArgs = function (state) {
var optionsChange = _.debounce(
_.bind(function (e) {
this.onOptionsChange($(e.target).val());
this.eventHub.emit('toolSettingsChange', this.compilerId);
}, this),
800
);
if (this.optionsField) {
this.optionsField.on('change', optionsChange).on('keyup', optionsChange);
if (state.args) {
this.optionsField.val(state.args);
}
}
if (this.localStdinField) {
this.localStdinField.on('change', optionsChange).on('keyup', optionsChange);
if (state.stdin) {
if (!this.monacoStdin) {
this.localStdinField.val(state.stdin);
} else {
this.eventHub.emit('setToolInput', this.compilerId, this.toolId, state.stdin);
}
}
}
};
Tool.prototype.getInputArgs = function () {
if (this.optionsField) {
return this.optionsField.val();
} else {
return '';
}
};
Tool.prototype.onToolInputChange = function (compilerId, toolId, input) {
if (this.compilerId === compilerId && this.toolId === toolId) {
this.monacoStdinField = input;
this.onOptionsChange();
this.eventHub.emit('toolSettingsChange', this.compilerId);
}
};
Tool.prototype.onToolInputViewClosed = function (compilerId, toolId, input) {
if (this.compilerId === compilerId && this.toolId === toolId) {
// Duplicate close messages have been seen, with the second having no value.
// If we have a current value and the new value is empty, ignore the message.
if (this.monacoStdinField && input) {
this.monacoStdinField = input;
this.monacoEditorOpen = false;
this.toggleStdin.removeClass('active');
this.onOptionsChange();
this.eventHub.emit('toolSettingsChange', this.compilerId);
}
}
};
Tool.prototype.getInputStdin = function () {
if (!this.monacoStdin) {
if (this.localStdinField) {
return this.localStdinField.val();
} else {
return '';
}
} else {
return this.monacoStdinField;
}
};
Tool.prototype.openMonacoEditor = function () {
this.monacoEditorHasBeenAutoOpened = true; // just in case we get here in an unexpected way
this.monacoEditorOpen = true;
this.toggleStdin.addClass('active');
var insertPoint =
this.hub.findParentRowOrColumn(this.container) || this.container.layoutManager.root.contentItems[0];
insertPoint.addChild(this.createToolInputView);
this.onOptionsChange();
this.eventHub.emit('setToolInput', this.compilerId, this.toolId, this.monacoStdinField);
};
Tool.prototype.getEffectiveOptions = function () {
return this.options.get();
};
Tool.prototype.resize = function () {
utils.updateAndCalcTopBarHeight(this.domRoot, this.optionsToolbar, this.hideable);
var barsHeight = this.optionsToolbar.outerHeight() + 2;
if (!this.panelArgs.hasClass('d-none')) {
barsHeight += this.panelArgs.outerHeight();
}
if (!this.panelStdin.hasClass('d-none')) {
barsHeight += this.panelStdin.outerHeight();
}
this.outputEditor.layout({
width: this.domRoot.width(),
height: this.domRoot.height() - barsHeight,
});
this.plainContentRoot.height(this.domRoot.height() - barsHeight);
};
Tool.prototype.onOptionsChange = function () {
var options = this.getEffectiveOptions();
this.plainContentRoot.toggleClass('wrap', options.wrap);
this.wrapButton.prop('title', '[' + (options.wrap ? 'ON' : 'OFF') + '] ' + this.wrapTitle);
this.saveState();
};
Tool.prototype.initButtons = function (state) {
this.wrapButton = this.domRoot.find('.wrap-lines');
this.wrapTitle = this.wrapButton.prop('title');
this.panelArgs = this.domRoot.find('.panel-args');
this.panelStdin = this.domRoot.find('.panel-stdin');
this.hideable = this.domRoot.find('.hideable');
this.initButtonsVisibility(state);
};
Tool.prototype.initButtonsVisibility = function (state) {
this.toggleArgs = this.domRoot.find('.toggle-args');
this.toggleStdin = this.domRoot.find('.toggle-stdin');
this.artifactBtn = this.domRoot.find('.artifact-btn');
this.artifactText = this.domRoot.find('.artifact-text');
if (state.argsPanelShown === true) {
this.showPanel(this.toggleArgs, this.panelArgs);
}
if (state.stdinPanelShown === true) {
if (!this.monacoStdin) {
this.showPanel(this.toggleStdin, this.panelStdin);
} else {
if (!this.monacoEditorOpen) {
this.openMonacoEditor();
}
}
}
this.artifactBtn.addClass('d-none');
};
Tool.prototype.showPanel = function (button, panel) {
panel.removeClass('d-none');
button.addClass('active');
this.resize();
};
Tool.prototype.hidePanel = function (button, panel) {
panel.addClass('d-none');
button.removeClass('active');
this.resize();
};
Tool.prototype.togglePanel = function (button, panel) {
if (panel.hasClass('d-none')) {
this.showPanel(button, panel);
} else {
this.hidePanel(button, panel);
}
this.saveState();
};
Tool.prototype.currentState = function () {
var options = this.getEffectiveOptions();
var state = {
compiler: this.compilerId,
editor: this.editorId,
tree: this.treeId,
wrap: options.wrap,
toolId: this.toolId,
args: this.getInputArgs(),
stdin: this.getInputStdin(),
stdinPanelShown:
(this.monacoStdin && this.monacoEditorOpen) || (this.panelStdin && !this.panelStdin.hasClass('d-none')),
monacoStdin: this.monacoStdin,
monacoEditorOpen: this.monacoEditorOpen,
monacoEditorHasBeenAutoOpened: this.monacoEditorHasBeenAutoOpened,
argsPanelShow: !this.panelArgs.hasClass('d-none'),
};
this.paneRenaming.addState(state);
this.fontScale.addState(state);
return state;
};
Tool.prototype.saveState = function () {
this.container.setState(this.currentState());
};
Tool.prototype.setLanguage = function (languageId) {
if (languageId) {
this.options.enableToggle('wrap', false);
monaco.editor.setModelLanguage(this.outputEditor.getModel(), languageId);
this.outputEditor.setValue('');
this.fontScale.setTarget(this.outputEditor);
$(this.plainContentRoot).hide();
$(this.editorContentRoot).show();
} else {
this.options.enableToggle('wrap', true);
this.plainContentRoot.empty();
this.fontScale.setTarget('.content');
$(this.editorContentRoot).hide();
$(this.plainContentRoot).show();
}
};
Tool.prototype.clickableUrls = function (text) {
return text.replace(
// URL detection regex grabbed from https://stackoverflow.com/a/3809435
/(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/,
'<a href="$1" target="_blank">$1</a>'
);
};
Tool.prototype.onCompileResult = function (id, compiler, result) {
try {
if (id !== this.compilerId) return;
if (compiler) this.compilerName = compiler.name;
var foundTool = _.find(
compiler.tools,
function (tool) {
return tool.tool.id === this.toolId;
},
this
);
this.toggleUsable(foundTool);
var toolResult = null;
if (result && result.tools) {
toolResult = _.find(
result.tools,
function (tool) {
return tool.id === this.toolId;
},
this
);
} else if (result && result.result && result.result.tools) {
toolResult = _.find(
result.result.tools,
function (tool) {
return tool.id === this.toolId;
},
this
);
}
var toolInfo = null;
if (compiler && compiler.tools) {
toolInfo = _.find(
compiler.tools,
function (tool) {
return tool.tool.id === this.toolId;
},
this
);
}
if (toolInfo) {
this.toggleStdin.prop('disabled', false);
if (this.monacoStdin && !this.monacoEditorOpen && !this.monacoEditorHasBeenAutoOpened) {
this.monacoEditorHasBeenAutoOpened = true;
this.openMonacoEditor();
} else if (!this.monacoStdin && toolInfo.tool.stdinHint) {
this.localStdinField.prop('placeholder', toolInfo.tool.stdinHint);
if (toolInfo.tool.stdinHint === 'disabled') {
this.toggleStdin.prop('disabled', true);
} else {
this.showPanel(this.toggleStdin, this.panelStdin);
}
} else {
this.localStdinField.prop('placeholder', 'Tool stdin...');
}
}
// reset stream styles
this.normalAnsiToHtml.reset();
if (toolResult) {
if (toolResult.languageId && toolResult.languageId === 'stderr') {
toolResult.languageId = false;
}
this.setLanguage(toolResult.languageId);
if (toolResult.languageId) {
this.setEditorContent(_.pluck(toolResult.stdout, 'text').join('\n'));
} else {
this.plainContentRoot.empty();
_.each(
(toolResult.stdout || []).concat(toolResult.stderr || []),
function (obj) {
if (obj.text === '') {
this.add('<br/>');
} else {
this.add(
this.clickableUrls(this.normalAnsiToHtml.toHtml(obj.text)),
obj.tag ? obj.tag.line : obj.line,
obj.tag ? obj.tag.column : 0,
obj.tag ? obj.tag.flow : null
);
}
},
this
);
}
this.toolName = toolResult.name;
this.updateTitle();
if (toolResult.sourcechanged && this.editorId) {
this.eventHub.emit('newSource', this.editorId, toolResult.newsource);
}
this.artifactBtn.off('click');
if (toolResult.artifact) {
this.artifactBtn.removeClass('d-none');
this.artifactText.text('Download ' + toolResult.artifact.title);
this.artifactBtn.click(
_.bind(function () {
// The artifact content can be passed either as plain text or as a base64 encoded binary file
if (toolResult.artifact.type === 'application/octet-stream') {
// Fetch is the most convenient non ES6 way to build a binary blob out of a base64 string
fetch('data:application/octet-stream;base64,' + toolResult.artifact.content)
.then(res => res.blob())
.then(blob => saveAs(blob, toolResult.artifact.name));
} else {
saveAs(
new Blob([toolResult.artifact.content], {
type: toolResult.artifact.type,
}),
toolResult.artifact.name
);
}
}, this)
);
} else {
this.artifactBtn.addClass('d-none');
}
} else {
this.setEditorContent('No tool result');
}
} catch (e) {
this.setLanguage(false);
this.add('javascript error: ' + e.message);
}
};
Tool.prototype.add = function (msg, lineNum, column, flow) {
var elem = $('<div/>').appendTo(this.plainContentRoot);
if (lineNum && this.editorId) {
elem.html(
$('<a></a>')
.prop('href', 'javascript:;')
.html(msg)
.on(
'click',
_.bind(function (e) {
this.eventHub.emit('editorSetDecoration', this.editorId, lineNum, true, column);
if (flow) {
this.eventHub.emit('editorDisplayFlow', this.editorId, flow);
}
e.preventDefault();
return false;
}, this)
)
.on(
'mouseover',
_.bind(function () {
this.eventHub.emit('editorSetDecoration', this.editorId, lineNum, false, column);
}, this)
)
);
} else {
elem.html(msg);
}
};
Tool.prototype.setEditorContent = function (content) {
if (!this.outputEditor || !this.outputEditor.getModel()) return;
var editorModel = this.outputEditor.getModel();
var visibleRanges = this.outputEditor.getVisibleRanges();
var currentTopLine = visibleRanges.length > 0 ? visibleRanges[0].startLineNumber : 1;
editorModel.setValue(content);
this.outputEditor.revealLine(currentTopLine);
this.setNormalContent();
};
Tool.prototype.setNormalContent = function () {
this.outputEditor.updateOptions({
lineNumbers: true,
codeLens: false,
});
if (this.codeLensProvider) {
this.codeLensProvider.dispose();
}
};
Tool.prototype.getPaneName = function () {
var name = this.toolName + ' #' + this.compilerId;
if (this.compilerName) name += ' with ' + this.compilerName;
return name;
};
Tool.prototype.updateTitle = function () {
var name = this.paneName ? this.paneName : this.getPaneName();
this.container.setTitle(_.escape(name));
};
Tool.prototype.onCompilerClose = function (id) {
if (id === this.compilerId) {
this.close();
_.defer(function (self) {
self.container.close();
}, this);
}
};
Tool.prototype.close = function () {
this.eventHub.emit('toolClosed', this.compilerId, this.currentState());
this.eventHub.unsubscribe();
this.outputEditor.dispose();
};
module.exports = {
Tool: Tool,
};

567
static/panes/tool.ts Normal file
View File

@@ -0,0 +1,567 @@
// Copyright (c) 2023, Compiler Explorer Authors
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright
// notice, this list of conditions and the following disclaimer in the
// documentation and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
import _ from 'underscore';
import $ from 'jquery';
import {ga} from '../analytics';
import * as AnsiToHtml from '../ansi-to-html';
import {Toggles} from '../widgets/toggles';
import * as Components from '../components';
import * as monaco from 'monaco-editor';
import * as monacoConfig from '../monaco-config';
import {options as ceoptions} from '../options';
import * as utils from '../utils';
import * as fileSaver from 'file-saver';
import {MonacoPane} from './pane';
import {Hub} from '../hub';
import {Container} from 'golden-layout';
import {MonacoPaneState} from './pane.interfaces';
import {CompilerService} from '../compiler-service';
import {ComponentConfig, PopulatedToolInputViewState} from '../components.interfaces';
import {unwrap, unwrapString} from '../assert';
function makeAnsiToHtml(color?: string) {
return new AnsiToHtml.Filter({
fg: color ?? '#333',
bg: '#f5f5f5',
stream: true,
escapeXML: true,
});
}
export class Tool extends MonacoPane<monaco.editor.IStandaloneCodeEditor, ToolState> {
toolId: any;
toolName = 'Tool';
compilerService: CompilerService;
// todo: re-evaluate all these
editorContentRoot: JQuery;
plainContentRoot: JQuery;
optionsToolbar: JQuery;
badLangToolbar: JQuery;
monacoStdin: boolean;
monacoEditorOpen: boolean;
monacoEditorHasBeenAutoOpened: boolean;
monacoStdinField = '';
normalAnsiToHtml: AnsiToHtml.Filter;
optionsField: JQuery;
localStdinField: JQuery;
createToolInputView: () => ComponentConfig<PopulatedToolInputViewState>;
wrapButton: JQuery;
wrapTitle: JQuery;
panelArgs: JQuery;
panelStdin: JQuery;
toggleArgs: JQuery;
toggleStdin: JQuery;
artifactBtn: JQuery;
artifactText: JQuery;
options: Toggles;
constructor(hub: Hub, container: Container, state: ToolState & MonacoPaneState) {
// canonicalize state
if ((state as any).compiler) state.id = (state as any).compiler;
if ((state as any).editor) state.editorid = (state as any).editor;
if ((state as any).tree) state.treeid = (state as any).tree;
super(hub, container, state);
this.toolId = state.toolId;
this.compilerService = hub.compilerService;
this.monacoStdin = state.monacoStdin || false;
this.monacoEditorOpen = state.monacoEditorOpen || false;
this.monacoEditorHasBeenAutoOpened = state.monacoEditorHasBeenAutoOpened || false;
this.normalAnsiToHtml = makeAnsiToHtml();
this.createToolInputView = () =>
Components.getToolInputViewWith(this.compilerInfo.compilerId, this.toolId, this.toolName);
this.options = new Toggles(this.domRoot.find('.options'), state as any as Record<string, boolean>);
this.options.on('change', this.onOptionsChange.bind(this));
this.initArgs(state);
this.onOptionsChange();
this.updateTitle();
this.eventHub.emit('toolOpened', this.compilerInfo.compilerId, this.getCurrentState());
this.eventHub.emit('requestSettings');
}
override getInitialHTML() {
return $('#tool-output').html();
}
override registerOpeningAnalyticsEvent() {
ga.proxy('send', {
hitType: 'event',
eventCategory: 'OpenViewPane',
eventAction: 'Tool',
});
}
override createEditor(editorRoot: HTMLElement) {
return monaco.editor.create(
editorRoot,
monacoConfig.extendConfig({
readOnly: true,
language: 'text',
fontFamily: 'courier new',
lineNumbersMinChars: 5,
guides: {
bracketPairs: false,
bracketPairsHorizontal: false,
highlightActiveBracketPair: false,
highlightActiveIndentation: false,
indentation: false,
},
})
);
}
override registerDynamicElements(state: ToolState) {
super.registerDynamicElements(state);
this.editorContentRoot = this.domRoot.find('.monaco-placeholder');
this.plainContentRoot = this.domRoot.find('pre.content');
this.optionsToolbar = this.domRoot.find('.options-toolbar');
this.badLangToolbar = this.domRoot.find('.bad-lang');
this.optionsField = this.domRoot.find('input.options');
this.localStdinField = this.domRoot.find('textarea.tool-stdin');
}
override registerCallbacks() {
super.registerCallbacks();
this.eventHub.on('languageChange', this.onLanguageChange, this);
this.eventHub.on('toolInputChange', this.onToolInputChange, this);
this.eventHub.on('toolInputViewClosed', this.onToolInputViewClosed, this);
this.toggleArgs.on('click', () => this.togglePanel(this.toggleArgs, this.panelArgs));
this.toggleStdin.on('click', () => {
if (!this.monacoStdin) {
this.togglePanel(this.toggleStdin, this.panelStdin);
} else {
if (!this.monacoEditorOpen) {
this.openMonacoEditor();
} else {
this.monacoEditorOpen = false;
this.toggleStdin.removeClass('active');
this.eventHub.emit('toolInputViewCloseRequest', this.compilerInfo.compilerId, this.toolId);
}
}
});
if ('MutationObserver' in window) {
new MutationObserver(this.resize.bind(this)).observe(this.localStdinField[0], {
attributes: true,
attributeFilter: ['style'],
});
}
}
onLanguageChange(editorId, newLangId) {
if (this.compilerInfo.editorId && this.compilerInfo.editorId === editorId) {
const tools = ceoptions.tools[newLangId];
this.toggleUsable(tools && tools[this.toolId]);
}
}
toggleUsable(isUsable) {
if (isUsable) {
this.plainContentRoot.css('opacity', '1');
this.badLangToolbar.hide();
this.optionsToolbar.show();
} else {
this.plainContentRoot.css('opacity', '0.5');
this.optionsToolbar.hide();
this.badLangToolbar.show();
}
}
initArgs(state: ToolState & MonacoPaneState) {
const optionsChange = _.debounce(e => {
this.onOptionsChange();
this.eventHub.emit('toolSettingsChange', this.compilerInfo.compilerId);
}, 800);
this.optionsField.on('change', optionsChange).on('keyup', optionsChange);
if (state.args) {
this.optionsField.val(state.args);
}
this.localStdinField.on('change', optionsChange).on('keyup', optionsChange);
if (state.stdin) {
if (!this.monacoStdin) {
this.localStdinField.val(state.stdin);
} else {
this.eventHub.emit('setToolInput', this.compilerInfo.compilerId, this.toolId, state.stdin);
}
}
}
getInputArgs() {
return unwrapString(this.optionsField.val());
}
onToolInputChange(compilerId: number, toolId: string, input: string) {
if (this.compilerInfo.compilerId === compilerId && this.toolId === toolId) {
this.monacoStdinField = input;
this.onOptionsChange();
this.eventHub.emit('toolSettingsChange', this.compilerInfo.compilerId);
}
}
onToolInputViewClosed(compilerId: number, toolId: string, input: string) {
if (this.compilerInfo.compilerId === compilerId && this.toolId === toolId) {
// Duplicate close messages have been seen, with the second having no value.
// If we have a current value and the new value is empty, ignore the message.
if (this.monacoStdinField && input) {
this.monacoStdinField = input;
this.monacoEditorOpen = false;
this.toggleStdin.removeClass('active');
this.onOptionsChange();
this.eventHub.emit('toolSettingsChange', this.compilerInfo.compilerId);
}
}
}
getInputStdin() {
if (!this.monacoStdin) {
return unwrapString(this.localStdinField.val());
} else {
return this.monacoStdinField;
}
}
openMonacoEditor() {
this.monacoEditorHasBeenAutoOpened = true; // just in case we get here in an unexpected way
this.monacoEditorOpen = true;
this.toggleStdin.addClass('active');
const insertPoint =
this.hub.findParentRowOrColumn(this.container.parent) || this.container.layoutManager.root.contentItems[0];
insertPoint.addChild(this.createToolInputView());
this.onOptionsChange();
this.eventHub.emit('setToolInput', this.compilerInfo.compilerId, this.toolId, this.monacoStdinField);
}
getEffectiveOptions() {
return this.options.get();
}
override resize() {
utils.updateAndCalcTopBarHeight(this.domRoot, this.optionsToolbar, this.hideable);
let barsHeight = unwrap(this.optionsToolbar.outerHeight()) + 2;
if (!this.panelArgs.hasClass('d-none')) {
barsHeight += unwrap(this.panelArgs.outerHeight());
}
if (!this.panelStdin.hasClass('d-none')) {
barsHeight += unwrap(this.panelStdin.outerHeight());
}
this.editor.layout({
width: unwrap(this.domRoot.width()),
height: unwrap(this.domRoot.height()) - barsHeight,
});
this.plainContentRoot.height(unwrap(this.domRoot.height()) - barsHeight);
}
onOptionsChange() {
const options = this.getEffectiveOptions();
this.plainContentRoot.toggleClass('wrap', options.wrap);
this.wrapButton.prop('title', '[' + (options.wrap ? 'ON' : 'OFF') + '] ' + this.wrapTitle);
this.updateState();
}
override registerButtons(state: ToolState & MonacoPaneState) {
super.registerButtons(state);
this.wrapButton = this.domRoot.find('.wrap-lines');
this.wrapTitle = this.wrapButton.prop('title');
this.panelArgs = this.domRoot.find('.panel-args');
this.panelStdin = this.domRoot.find('.panel-stdin');
this.initButtonsVisibility(state);
}
initButtonsVisibility(state: ToolState & MonacoPaneState) {
this.toggleArgs = this.domRoot.find('.toggle-args');
this.toggleStdin = this.domRoot.find('.toggle-stdin');
this.artifactBtn = this.domRoot.find('.artifact-btn');
this.artifactText = this.domRoot.find('.artifact-text');
if (state.argsPanelShown === true) {
this.showPanel(this.toggleArgs, this.panelArgs);
}
if (state.stdinPanelShown === true) {
if (!this.monacoStdin) {
this.showPanel(this.toggleStdin, this.panelStdin);
} else {
if (!this.monacoEditorOpen) {
this.openMonacoEditor();
}
}
}
this.artifactBtn.addClass('d-none');
}
showPanel(button: JQuery, panel: JQuery) {
panel.removeClass('d-none');
button.addClass('active');
this.resize();
}
hidePanel(button: JQuery, panel: JQuery) {
panel.addClass('d-none');
button.removeClass('active');
this.resize();
}
togglePanel(button: JQuery, panel: JQuery) {
if (panel.hasClass('d-none')) {
this.showPanel(button, panel);
} else {
this.hidePanel(button, panel);
}
this.updateState();
}
override getCurrentState() {
const options = this.getEffectiveOptions();
const state: MonacoPaneState & ToolState = {
...super.getCurrentState(),
wrap: options.wrap,
toolId: this.toolId,
args: this.getInputArgs(),
stdin: this.getInputStdin(),
stdinPanelShown: (this.monacoStdin && this.monacoEditorOpen) || !this.panelStdin.hasClass('d-none'),
monacoStdin: this.monacoStdin,
monacoEditorOpen: this.monacoEditorOpen,
monacoEditorHasBeenAutoOpened: this.monacoEditorHasBeenAutoOpened,
argsPanelShown: !this.panelArgs.hasClass('d-none'),
};
return state as MonacoPaneState;
}
setLanguage(languageId: false | string) {
if (languageId) {
this.options.enableToggle('wrap', false);
monaco.editor.setModelLanguage(unwrap(this.editor.getModel()), languageId);
this.editor.setValue('');
this.fontScale.setTarget(this.editor);
$(this.plainContentRoot).hide();
$(this.editorContentRoot).show();
} else {
this.options.enableToggle('wrap', true);
this.plainContentRoot.empty();
this.fontScale.setTarget('.content');
$(this.editorContentRoot).hide();
$(this.plainContentRoot).show();
}
}
clickableUrls(text: string) {
return text.replace(
// URL detection regex grabbed from https://stackoverflow.com/a/3809435
/(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/,
'<a href="$1" target="_blank">$1</a>'
);
}
override onCompiler(compilerId: number, compiler: any, options: string, editorId: number, treeId: number) {
// TODO(jeremy-rifkin): This should probably be done in the base pane / standard across all panes
if (this.compilerInfo.compilerId !== compilerId) return;
this.compilerInfo.compilerName = compiler ? compiler.name : '';
this.compilerInfo.editorId = editorId;
this.compilerInfo.treeId = treeId;
this.updateTitle();
}
override onCompileResult(id: number, compiler, result) {
try {
if (id !== this.compilerInfo.compilerId) return;
if (compiler) this.compilerInfo.compilerName = compiler.name;
const foundTool = _.find(compiler.tools, tool => tool.tool.id === this.toolId);
this.toggleUsable(foundTool);
// any for now for typing reasons... TODO(jeremy-rifkin)
let toolResult: any = null;
if (result && result.tools) {
toolResult = _.find(result.tools, tool => tool.id === this.toolId);
} else if (result && result.result && result.result.tools) {
toolResult = _.find(result.result.tools, tool => tool.id === this.toolId);
}
// any for now for typing reasons... TODO(jeremy-rifkin)
let toolInfo: any = null;
if (compiler && compiler.tools) {
toolInfo = _.find(compiler.tools, tool => tool.tool.id === this.toolId);
}
if (toolInfo) {
this.toggleStdin.prop('disabled', false);
if (this.monacoStdin && !this.monacoEditorOpen && !this.monacoEditorHasBeenAutoOpened) {
this.monacoEditorHasBeenAutoOpened = true;
this.openMonacoEditor();
} else if (!this.monacoStdin && toolInfo.tool.stdinHint) {
this.localStdinField.prop('placeholder', toolInfo.tool.stdinHint);
if (toolInfo.tool.stdinHint === 'disabled') {
this.toggleStdin.prop('disabled', true);
} else {
this.showPanel(this.toggleStdin, this.panelStdin);
}
} else {
this.localStdinField.prop('placeholder', 'Tool stdin...');
}
}
// reset stream styles
this.normalAnsiToHtml.reset();
if (toolResult) {
if (toolResult.languageId && toolResult.languageId === 'stderr') {
toolResult.languageId = false;
}
this.setLanguage(toolResult.languageId);
if (toolResult.languageId) {
this.setEditorContent(_.pluck(toolResult.stdout, 'text').join('\n'));
} else {
this.plainContentRoot.empty();
for (const obj of (toolResult.stdout || []).concat(toolResult.stderr || [])) {
if (obj.text === '') {
this.add('<br/>');
} else {
this.add(
this.clickableUrls(this.normalAnsiToHtml.toHtml(obj.text)),
obj.tag ? obj.tag.line : obj.line,
obj.tag ? obj.tag.column : 0,
obj.tag ? obj.tag.flow : null
);
}
}
}
this.toolName = toolResult.name;
this.updateTitle();
if (toolResult.sourcechanged && this.compilerInfo.editorId) {
this.eventHub.emit('newSource', this.compilerInfo.editorId, toolResult.newsource);
}
this.artifactBtn.off('click');
if (toolResult.artifact) {
this.artifactBtn.removeClass('d-none');
this.artifactText.text('Download ' + toolResult.artifact.title);
this.artifactBtn.on('click', () => {
// The artifact content can be passed either as plain text or as a base64 encoded binary file
if (toolResult.artifact.type === 'application/octet-stream') {
// Fetch is the most convenient non ES6 way to build a binary blob out of a base64 string
fetch('data:application/octet-stream;base64,' + toolResult.artifact.content)
.then(res => res.blob())
.then(blob => fileSaver.saveAs(blob, toolResult.artifact.name));
} else {
fileSaver.saveAs(
new Blob([toolResult.artifact.content], {
type: toolResult.artifact.type,
}),
toolResult.artifact.name
);
}
});
} else {
this.artifactBtn.addClass('d-none');
}
} else {
this.setEditorContent('No tool result');
}
} catch (e: any) {
this.setLanguage(false);
this.add('javascript error: ' + e.message);
}
}
add(msg: string, lineNum?: number, column?: number, flow?: number) {
const elem = $('<div/>').appendTo(this.plainContentRoot);
if (lineNum && this.compilerInfo.editorId) {
elem.empty();
const editorId = unwrap(this.compilerInfo.editorId);
$('<a></a>')
.prop('href', 'javascript:;')
.html(msg)
.on('click', e => {
this.eventHub.emit('editorSetDecoration', editorId, lineNum, true, column);
if (flow) {
// TODO(jeremy-rifkin): Flow's type does not match what the event expects.
this.eventHub.emit('editorDisplayFlow', editorId, flow as any);
}
e.preventDefault();
return false;
})
.on('mouseover', () => this.eventHub.emit('editorSetDecoration', editorId, lineNum, false, column))
.appendTo(elem);
} else {
elem.html(msg);
}
}
setEditorContent(content: string) {
if (!this.editor.getModel()) return;
const editorModel = this.editor.getModel();
const visibleRanges = this.editor.getVisibleRanges();
const currentTopLine = visibleRanges.length > 0 ? visibleRanges[0].startLineNumber : 1;
unwrap(editorModel).setValue(content);
this.editor.revealLine(currentTopLine);
this.setNormalContent();
}
setNormalContent() {
this.editor.updateOptions({
lineNumbers: 'on',
codeLens: false,
});
}
override getDefaultPaneName() {
return this.toolName;
}
override close() {
this.eventHub.emit('toolClosed', this.compilerInfo.compilerId, this.getCurrentState());
this.eventHub.unsubscribe();
this.editor.dispose();
}
}