microsoft
/
tsdoc
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Fix most ESLint errors for playground project

This commit is contained in:
Pete Gonzalez 2019-08-15 17:32:39 -07:00
Родитель 4b1b6b6501
Коммит 45abe7b05b
8 изменённых файлов: 72 добавлений и 43 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

1
playground/.eslintignore Normal file
Просмотреть файл

@ -0,0 +1 @@
src/samples/

69
playground/src/CodeEditor.tsx
Просмотреть файл

@ -72,7 +72,17 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
private _editor: monacoEditor.editor.IStandaloneCodeEditor | undefined;
private _placeholderDivRef: HTMLDivElement | undefined;
private _hostDivref: HTMLDivElement | undefined;
private _hostDivRef: HTMLDivElement | undefined;
public constructor(props: ICodeEditorProps) {
super(props);
this._editorId = `tsdoc-monaco-${CodeEditor._editorIdCounter++}`;
this.state = {};
this._onWindowResize = this._onWindowResize.bind(this);
this._onRefHost = this._onRefHost.bind(this);
this._onRefPlaceholder = this._onRefPlaceholder.bind(this);
}
private get _value(): string | undefined {
if (this._editor) {
@ -82,7 +92,7 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
}
}
private getEditorModel(): monacoEditor.editor.ITextModel {
private _getEditorModel(): monacoEditor.editor.ITextModel {
if (this._editor) {
const model: monacoEditor.editor.ITextModel | null = this._editor.getModel();
if (model) {
@ -118,20 +128,15 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
}
});
}
).then((monaco) => CodeEditor._monaco = monaco);
).then((monaco) => {
CodeEditor._monaco = monaco;
return monaco;
});
}
return CodeEditor._initializePromise;
}
constructor(props: ICodeEditorProps) {
super(props);
this._editorId = `tsdoc-monaco-${CodeEditor._editorIdCounter++}`;
this.state = {};
this._onWindowResize = this._onWindowResize.bind(this);
}
public componentDidMount(): void {
this._isMounted = true;
CodeEditor._initializeMonaco().then((monaco) => {
@ -149,7 +154,7 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
this._editor = undefined;
this._placeholderDivRef = undefined;
this._hostDivref = undefined;
this._hostDivRef = undefined;
window.removeEventListener('resize', this._onWindowResize);
}
@ -162,11 +167,11 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
if (CodeEditor._monaco) {
CodeEditor._monaco.editor.setModelMarkers(
this.getEditorModel(),
this._getEditorModel(),
this._editorId,
(this.props.markers || []).map((marker) => {
const startPos: monacoEditor.Position = this.getEditorModel().getPositionAt(marker.pos);
const endPos: monacoEditor.Position = this.getEditorModel().getPositionAt(marker.end);
const startPos: monacoEditor.Position = this._getEditorModel().getPositionAt(marker.pos);
const endPos: monacoEditor.Position = this._getEditorModel().getPositionAt(marker.end);
return {
startLineNumber: startPos.lineNumber,
startColumn: startPos.column,
@ -209,11 +214,11 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
// and manual resizing.
return (
<div className='playground-monaco-placeholder'
ref={ (element: HTMLDivElement) => { this._placeholderDivRef = element; } }
ref={ this._onRefPlaceholder }
style={ { display: 'flex', flexDirection: 'column', flex: 1, ...this.props.style } }>
<div className='playground-monaco-host'
ref={ (element: HTMLDivElement) => { this._hostDivref = element; this._createEditor(); } }
ref={ this._onRefHost }
style={ { display: 'block', position: 'absolute', backgroundColor: '#00FF00' } } />
</div>
@ -221,6 +226,14 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
}
}
private _onRefPlaceholder(element: HTMLDivElement): void {
this._placeholderDivRef = element;
}
private _onRefHost(element: HTMLDivElement): void{
this._hostDivRef = element; this._createEditor();
}
private _applySyntaxStyling(newSyntaxStyles: IStyledRange[]): void {
if (this._editor) {
// Find decorations to remove
@ -248,11 +261,11 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
}
}
this.getEditorModel().deltaDecorations(decorationsToRemove, []);
const decorationIds: string[] = this.getEditorModel().deltaDecorations([], decorationsToAdd.map(
this._getEditorModel().deltaDecorations(decorationsToRemove, []);
const decorationIds: string[] = this._getEditorModel().deltaDecorations([], decorationsToAdd.map(
(decoration) => {
const startPos: monacoEditor.Position = this.getEditorModel().getPositionAt(decoration.pos);
const endPos: monacoEditor.Position = this.getEditorModel().getPositionAt(decoration.end);
const startPos: monacoEditor.Position = this._getEditorModel().getPositionAt(decoration.pos);
const endPos: monacoEditor.Position = this._getEditorModel().getPositionAt(decoration.end);
return {
range: new CodeEditor._monaco.Range(
@ -290,9 +303,9 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
private _createEditor(): void {
CodeEditor._initializeMonaco().then((monaco) => {
if (!this._editor && this._hostDivref) {
if (!this._editor && this._hostDivRef) {
this._editor = monaco.editor.create(
this._hostDivref,
this._hostDivRef,
{
value: this.props.value || '',
language: this.props.language,
@ -306,7 +319,7 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
}
);
this.getEditorModel().onDidChangeContent((e) => {
this._getEditorModel().onDidChangeContent((e) => {
if (this._editor) {
this._safeOnChange(this._editor.getValue());
}
@ -314,14 +327,16 @@ export class CodeEditor extends React.Component<ICodeEditorProps, ICodeEditorSta
this._onWindowResize();
}
}).catch((e) => {
console.error('CodeEditor._createEditor() failed: ' + e.toString());
});
}
private _onWindowResize(): void {
if (this._placeholderDivRef && this._hostDivref) {
if (this._placeholderDivRef && this._hostDivRef) {
// Resize the host div to match whatever the browser did for the placeholder div
this._hostDivref.style.width = this._placeholderDivRef.clientWidth + 'px';
this._hostDivref.style.height = this._placeholderDivRef.clientHeight + 'px';
this._hostDivRef.style.width = this._placeholderDivRef.clientWidth + 'px';
this._hostDivRef.style.height = this._placeholderDivRef.clientHeight + 'px';
if (this._editor) {
this._editor.layout();

10
playground/src/DocDomView.tsx
Просмотреть файл

@ -7,7 +7,7 @@ import { DocHtmlView } from './DocHtmlView';
// the ambient typings for NodeJS, which is incompatible with our DOM typings.
//
// import * as ReactDomServer from 'react-dom/server';
// tslint:disable-next-line
// eslint-disable-next-line
const ReactDomServer: any = require('react-dom/server');
export interface IDocDomViewProps {
@ -53,7 +53,13 @@ export class DocDomView extends React.Component<IDocDomViewProps> {
let indentLevel: number = 0;
let lastTag: string = '';
while (match = tagRegExp.exec(html)) {
for (;;) {
match = tagRegExp.exec(html);
if (!match) {
break;
}
const matchIndex: number = match.index;
const textBeforeMatch: string = html.substring(lastIndex, matchIndex);

4
playground/src/DocHtmlView.tsx
Просмотреть файл

@ -72,7 +72,7 @@ export class DocHtmlView extends React.Component<IDocHtmlViewProps> {
);
}
const modifierTags: ReadonlyArray<tsdoc.DocBlockTag> = docComment.modifierTagSet.nodes;
const modifierTags: readonly tsdoc.DocBlockTag[] = docComment.modifierTagSet.nodes;
if (modifierTags.length > 0) {
const modifierElements: React.ReactNode[] = [];
@ -134,7 +134,7 @@ export class DocHtmlView extends React.Component<IDocHtmlViewProps> {
let identifier: string = '';
if (linkTag.codeDestination) {
// TODO: The library should provide a default rendering for this
const memberReferences: ReadonlyArray<tsdoc.DocMemberReference> = linkTag.codeDestination.memberReferences;
const memberReferences: readonly tsdoc.DocMemberReference[] = linkTag.codeDestination.memberReferences;
if (memberReferences.length > 0) {
const memberIdentifier: tsdoc.DocMemberIdentifier | undefined
= memberReferences[memberReferences.length - 1].memberIdentifier;

16
playground/src/PlaygroundView.tsx
Просмотреть файл

@ -44,7 +44,8 @@ export class PlaygroundView extends React.Component<IPlaygroundViewProps, IPlayg
private _reparseTimerHandle: number | undefined = undefined;
private _reparseNeeded: boolean = true;
constructor(props: IPlaygroundViewProps, context?: any) { // tslint:disable-line:no-any
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public constructor(props: IPlaygroundViewProps, context?: any) {
super(props, context);
this.state = {
@ -54,6 +55,10 @@ export class PlaygroundView extends React.Component<IPlaygroundViewProps, IPlayg
selectSampleValue: undefined,
selectedTheme: 'vs'
};
this._inputTextArea_onChange = this._inputTextArea_onChange.bind(this);
this._selectSample_onChange = this._selectSample_onChange.bind(this);
this._selectTheme_onChange = this._selectTheme_onChange.bind(this)
}
public componentDidMount(): void {
@ -108,7 +113,8 @@ export class PlaygroundView extends React.Component<IPlaygroundViewProps, IPlayg
<FlexRowDiv className='playground-header' style={ headerStyle }>
<FlexColDiv style={{ fontWeight: 400, fontSize: '26px' }}>TSDoc Playground</FlexColDiv>
<FlexColDiv style={{ fontWeight: 400, fontSize: '20px' }}>
<a style={navAnchorStyle} href='https://github.com/Microsoft/tsdoc' target='_blank'>
<a style={navAnchorStyle} href='https://github.com/Microsoft/tsdoc' target='_blank'
rel='noopener noreferrer'>
What is TSDoc?</a>
</FlexColDiv>
</FlexRowDiv>
@ -192,7 +198,7 @@ export class PlaygroundView extends React.Component<IPlaygroundViewProps, IPlayg
className='playground-input-text-editor'
style={ editorStyle }
value={ this.state.inputText }
onChange={ this._inputTextArea_onChange.bind(this) }
onChange={ this._inputTextArea_onChange }
language='typescript'
markers={ markers }
syntaxStyles={ syntaxStyles }
@ -208,7 +214,7 @@ export class PlaygroundView extends React.Component<IPlaygroundViewProps, IPlayg
className='playground-select-sample'
value={this.state.selectSampleValue}
aria-label='Select a code sample'
onChange={this._selectSample_onChange.bind(this)}>
onChange={this._selectSample_onChange}>
<option value='none'>Choose a sample...</option>
<option value='basic'>A basic example</option>
@ -224,7 +230,7 @@ export class PlaygroundView extends React.Component<IPlaygroundViewProps, IPlayg
className='playground-select-theme'
value={this.state.selectedTheme}
aria-label='Select an editor theme'
onChange={this._selectTheme_onChange.bind(this)}>
onChange={this._selectTheme_onChange}>
<option value='vs'>Light Theme</option>
<option value='vs-dark'>Dark Theme</option>

4
playground/src/SyntaxStyler/DocNodeSyntaxStyler.ts
Просмотреть файл

@ -66,7 +66,7 @@ export class DocNodeSyntaxStyler {
parserContext,
styleTokens,
theme
} = options;
}: IGetStylesForDocCommentInternalOptions = options;
if (docNode instanceof tsdoc.DocExcerpt) {
// Match the context against a color (i.e. tsdoc.link.url)
@ -249,7 +249,7 @@ export class DocNodeSyntaxStyler {
const {
theme,
styleTokens
} = options;
}: IAddTokenStylesOptions = options;
if (tagDefinition) {
switch (tagDefinition.syntaxKind) {
case tsdoc.TSDocTagSyntaxKind.BlockTag: {

6
playground/src/SyntaxStyler/DocNodeSyntaxStylerTheme.ts
Просмотреть файл

@ -9,8 +9,8 @@ export interface IDocNodeSyntaxStylerTheme {
[styleTokens: string]: IThemeRule;
}
export namespace MonacoTSDocTheme {
export const vs: IDocNodeSyntaxStylerTheme = {
export class MonacoTSDocTheme {
public static readonly vs: IDocNodeSyntaxStylerTheme = {
'tsdoc.delimiter': { foreground: 'a6a6a6' },
'tsdoc.tag.block': { foreground: '003399', fontWeight: 'bold', className: 'tsdoc-blocktag' },
'tsdoc.tag.inline': { foreground: '003399', fontWeight: 'bold' },
@ -30,7 +30,7 @@ export namespace MonacoTSDocTheme {
'tsdoc.escaped': { background: 'e0e0e0' }
};
export const vsDark: IDocNodeSyntaxStylerTheme = {
public static readonly vsDark: IDocNodeSyntaxStylerTheme = {
'tsdoc.delimiter': { foreground: 'a6a6a6' },
'tsdoc.tag.block': { foreground: '646fd1', fontWeight: 'bold', className: 'tsdoc-blocktag' },
'tsdoc.tag.inline': { foreground: '646fd1', fontWeight: 'bold' },

5
playground/src/TabPane.tsx
Просмотреть файл

@ -18,7 +18,8 @@ export interface ITabPaneState {
}
export class TabPane extends React.Component<ITabPaneProps, ITabPaneState> {
constructor(props: ITabPaneProps, context?: any) { // tslint:disable-line:no-any
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public constructor(props: ITabPaneProps, context?: any) {
super(props, context);
this.state = {
@ -65,7 +66,7 @@ export class TabPane extends React.Component<ITabPaneProps, ITabPaneState> {
<div key={`tab_${i}`} className='playground-tab-pane-inactive-tab' style={ style }>
<a href='#'
style={ { textDecorationLine: 'none', color: '#000000' } }
onClick={this._onClickTab.bind(this, i)}>
onClick={ this._onClickTab.bind(this, i) }>
{tabDefinition.title}
</a>
</div>