Async javascript editor at top-level

[marcolubian]

Describe the feature

I need a way to setup the ace editor in javascript mode in order to consider its content in a top-level async context.

Note: The feature request is related to #4505

Use Case

My current limitation is that if I write this inside the editor in javascript mode:

const p = async() => {
    await f();
};

I have no problem, but if I do any await inside the editor itself, it goes in error:

const p = async() => {
    await f();
};
await p(); // this line will be highlighted in error

Proposed Solution

For what I've seen, the best would be to have an option that allows to consider the script as if it was written inside an async function. For example, changing the this.onUpdate method of file

https://github.com/ajaxorg/ace/blob/master/lib/ace/mode/javascript_worker.js

with something like this:

    ...
    this.onUpdate = function() {
        var value = this.doc.getValue();
        value = value.replace(/^#!.*\n/, "\n");
        if (!value)
            return this.sender.emit("annotate", []);

        var errors = [];

        // var start = new Date();
        if (this.topLevelAsync) {
            valueTopLevelAsync = 'async function asyncFn() {\n' + value + '\n}';
            lint(valueTopLevelAsync, this.options, this.options.globals);
        }
        else {
            lint(value, this.options, this.options.globals);
        }
        var results = lint.errors;
    ....

I understand that this can't be done generically, because I imagine that in other contexts someone would like to have the await commands highlighted as errors. Maybe this could be conditioned by an option (the async wrapping could be done with a parameter), I was imagining something like topLevelAsync or something like that...

Other Information

No response

Acknowledgements

• [ ] I may be able to implement this feature request
• [ ] This feature might incur a breaking change

ACE version used

Ace builds 1.30.0

[whazor]

Hi. Could you try out whether ace-linters would be better for you?

[marcolubian]

Hi. Could you try out whether ace-linters would be better for you?

It seems that the javascript lint case available in their example https://mkslanc.github.io/ace-linters/default_services.html is affected by the same issue. It allows the top level await only if the script is expected to be a module and suggests to add a export {} clause to force it as a module, but it's not my case.

[mkslanc]

@marcolubian Hi! If you need just to ignore that error, you could use ace-linters with

languageProvider.setGlobalOptions("typescript", {
    errorCodesToIgnore: [
        "1375"
    ]
});

[y4n6]

@marcolubian Hi! If you need just to ignore that error, you could use ace-linters with

languageProvider.setGlobalOptions("typescript", {
    errorCodesToIgnore: [
        "1375"
    ]
});

Can this only be used with typescript? Are there any examples for javascript?

[mkslanc]

@marcolubian Hi! If you need just to ignore that error, you could use ace-linters with

languageProvider.setGlobalOptions("typescript", {
    errorCodesToIgnore: [
        "1375"
    ]
});

Can this only be used with typescript? Are there any examples for javascript?

It's just service name - it supports typescript, tsx, javascript and jsx

[y4n6]

Hi. Could you try out whether ace-linters would be better for you?

It seems that the javascript lint case available in their example https://mkslanc.github.io/ace-linters/default_services.html is affected by the same issue. It allows the top level await only if the script is expected to be a module and suggests to add a export {} clause to force it as a module, but it's not my case.

Is your problem solved?

[y4n6]

I've read the javascript-service.js and found that the current version of ace-linters does not support 'errorCodesToIgnore' and 'errorMessagesToIgnore'. Maybe I'm wrong.The best approach is to set a Reg by 'errorMessagesToTreatAsInfo'. Here is my code, which might help people who encounter this problem in the future.

const worker = new Worker(new URL('./webworker.ts', import.meta.url), { type: 'module' });
const languageProvider = LanguageProvider.create(worker);
languageProvider.setGlobalOptions('javascript', {
  errorMessagesToTreatAsInfo: [/Unexpected token this/, /Missing ";" before statement/],
});
languageProvider.registerEditor(editor.value);

However, this will affect the 'enableBasicAutocompletion' feature of Ace. Maybe I'm wrong again. I gave up finally.

[mkslanc]

@y4n6 I updated typescript service to support errorMessagesToIgnore, also problem here was that by default for js files both eslint and typescript services are working in conjunction, so you saw error from eslint, which is not supporting esNext. So here fully workable example with typescript service

And also, if you still want to use eslint, I fixed bug with non-ignored message in this service, so you could use it like that