1

I am working in a implementation of monaco editor. Everything works good but in the console appears the next warning:

[Violation] 'requestAnimationFrame' handler took 50ms

and marks that line:

    /**
     * A flag to indicate if currently handling a native requestAnimationFrame callback
     */
    let inAnimationFrameRunner = false;

in dom.ts file.

I made this question before but was stopped because I didn't put the code and I could not restore the question again but I still getting the warning, so, I created the post again and added the code.

The number of the warnings is increasing per seconds or milliseconds and I think that this makes the editior functionality a little slow after had show the warning near 800+ times. I added a picture with the message and the number 1753. I was finding about that in internet but I didn't found anything about this warning and monaco editor. Why is generated it ? What can I do to prevent it ? [Warning in chrome web tools ]

The below code is how I made the implementation. I am working with javascript/es6 and React, I have a class Editor that get monaco by requireJS and is called by the React class in the componentDidMount method.

class EditorModel {
    async init() {

        require(['vs/editor/editor.main'], monaco => {
            this._monaco = monaco;

            monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
                noSemanticValidation: false,
                noSyntaxValidation: false
            });

            monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
                experimentalDecorators: true,
                allowSyntheticDefaultImports: true,
                jsx: this.monaco.languages.typescript.JsxEmit.React
            });
            // selector is the HTML Node
            const instance = monaco.editor.create(selector, {
                theme: 'vs-dark',
                language: 'typescript',
                wordWrap: 'on',
                automaticLayout: true

            });

            /**
             * File is an object that represents the file. It contains a
             * filename & source properties. The source contains the "code" property that
             * represents the content of the file.
             */
            const file = getFile();
            const uri = `/${file.filename}`;
            if (this._models.has(uri)) return this._models.get(uri);

            const model = monaco.editor.createModel(
                file.source.code,
                'typescript',// language
                monaco.Uri.file(uri) // uri
            );

            instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, () => {
                this.save();
            });
            instance.setModel(model);
            this._instance = instance;

        });

    }

    save() {
        // code to save....
    }

}

and Here is the code of the React Object

class Editor extends React.Component {
    constructor(props) {
        super(props);
        this.state = {ready: false};
        this.vs = React.createRef();
        this.editor = props.editor; //  The Editor Model
        this.id = props.id;
        this.updateState = () => this.setState({});
    }

    
    componentDidMount(props) {
        this.editor.init(this.vs.current);
        this.editor.bind('change', this.updateState);
    }

    componentWillUnmount() {
        this.editor && this.editor.instance.dispose();
        this.controller.editors.delete(this.id, this.editor);
    }


    render() {

        return (

            <div className="ds-editor__container">
                <div className="vs-editor" ref={this.vs}/>
            </div>
        );
    }
}

Editor.contextType = EditorContext;

The number of the warnings is increasing per seconds or milliseconds and I think that this makes the editior functionality a little slow after had show the warning near 800+ times. I added a picture with the message and the number 1753. I was finding about that in internet but I didn't found anything about this warning and monaco editor. Why is generated it ? What can I do to prevent it ?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.