15$: Website: Show error messages

[strager]

This task involves writing browser JS.

In the web demo (https://quick-lint-js.com/demo/), we highlight errors, but we give no indication what the error is. Include a message somewhere in the UI so people can understand the errors reported by quick-lint-js.

[matttheus]

hello strager

I claim this for-hire task. I expect payment after I complete this task. I will email the quick-lint-js team if I am assigned this task.

[matttheus]

I was playing around with the demo and this show up when I wrote function test(){}. There is some bug here or I miss configure something?

Edit 1: I am build it locally

Edit 2: I guess this error is related to this TODO at website/demo/index.html file, am I right?

loadQuickLintJS()
  .then((quickLintJS) => {
    function lintAndUpdate() {
      synchronizeContent();

      // TODO(strager): On crash, show the error to the user.
      let input = codeInputElement.value;
      let marks = quickLintJS.parseAndLint(input);
      markEditorText(shadowCodeInputElement, window, marks);
    }
    codeInputElement.addEventListener("input", (event) => {
      lintAndUpdate();
    });
    lintAndUpdate();
  })
  .catch((error) => {
    // TODO(strager): Show this error to the user.
    console.error(error);
  });

[matttheus]

Where you suggest I look to find where the errors come from? I looked up at website/demo/editor.mjs and website/demo/index.html but I could not figure out where this error message come from.

I suppose the error should come from this line of code from website/demo/index.html.

let marks = quickLintJS.parseAndLint(input);

Can you help figure out this?

[strager]

I was playing around with the demo and this show up when I wrote function test(){}. There is some bug here or I miss configure something?

Edit 1: I am build it locally

That's quick-lint-js crashing. #109 tracks fixing this.

Edit 2: I guess this error is related to this TODO at website/demo/index.html file, am I right?

Yes. But that's not related to this task (#258).

[strager]

Where you suggest I look to find where the errors come from? I looked up at website/demo/editor.mjs and website/demo/index.html but I could not figure out where this error message come from.

I think the unreachable executed exception comes from a call to QLJS_UNREACHABLE. I assume the error message itself comes from emscripten. (But this exception is not related to this task.)

[strager]

I suppose the error should come from this line of code from website/demo/index.html.

let marks = quickLintJS.parseAndLint(input);

This task is talking about marks. marks includes error locations, but I think it doesn't include error messages. This task involves making quickLintJS.parseAndLint return the messages, and having the messages appear in the UI.

The (non-LSP) VS Code plugin (in vscode/plugin/) shows messages. Perhaps we can copy what the VS Code plugin does to extract messages from the C++ code.

[strager]

I plan on adding some features to the vscode.h interface. I might switch the web demo over to the vscode.h interface as a result. If I do that, I think this task should be easier.

[matttheus]

My plan is to work at this issue at weekends. Sorry I did not made to much progress yet, I'm not too familar with c++ and with the respository. I plan finish this next weekend.

[strager]

#313 would make this task a lot easier.

@matttheus, I recommend focusing on the front-end part of this task (#258). When #313 is complete, it should be easy to connect the front-end to the back-end.

If you have progress already, please show it so I can avoid stepping on your toes.

[matttheus]

Look here #323 please.

[strager]

Commit 31a88b4 added some UI for this task. It's not touch-interface-friendly, but I hope people don't try programming on their phones.

The UI doesn't show for the error documentation, but that wasn't originally part of this task.