Highlight JS code errors in `CodeEditor`

[erickriva]

Variables injection is working fine, but the code itself is not executed.

[erickriva]

It was an error in my code, an additional ) in foundIndex declaration 🤡. There is no way to warn this type of errors inside the block?

Could be an improvement 😅

[baptisteArno]

/bounty 80

[algora-pbc[bot]]

~~💎 $80 bounty created by baptisteArno~~ ~~🙋 If you start working on this, comment /attempt #352 to notify everyone~~ ~~👉 To claim this bounty, submit a pull request that includes the text /claim #352 somewhere in its body~~ ~~📝 Before proceeding, please make sure you can receive payouts in your country~~ ~~💵 Payment arrives in your account 2-5 days after the bounty is rewarded~~ ~~💯 You keep 100% of the bounty award~~ ~~🙏 Thank you for contributing to baptisteArno/typebot.io!~~

Attempt	Started (GMT+0)	Solution
🟢 @b4s36t4	Oct 16, 2023, 2:11:44 PM	WIP
🟢 @prateekkalra	Oct 21, 2023, 8:23:27 PM	WIP

[b4s36t4]

/attempt #352

Options

• Cancel my attempt

[b4s36t4]

@baptisteArno After some research and googling I found these 3 plausible solutions

1. By default codemirror doesn't have any linting available (ex: codepen.io) which doesn't throw any error. But codemirror does provide a linter package which we can leverage to parse the tree and return any diagnostic based on tree-parse.

2. As we're using javascript language extension provided by codemirror itself which does have eslint support embedded into it.

We might need to work with eslint configuration for browser as eslint doesn't have built-in support for browser, although there's an example provided for that.

3. Instead of using codemirror, why can't we move to monaco-editor https://github.com/microsoft/monaco-editor. I have used monaco-editor before and it's seamless.

Monaco might take some-time as it's an entire removal of a package and replacing with new one, maybe we can have it as a new feature or so?

Attaching the implementation of the 1st option as mentioned above.

[b4s36t4]

Another solution is to running linters in wasm and use that to provide diagnostic.

example: https://quick-lint-js.com/ https://quick-lint-js.com/demo/

like we have boimejs which does have wasm lib to provide linting.

[b4s36t4]

https://github.com/biomejs/biome/blob/main/website/src/playground/CodeMirror.tsx Here is full working example for integrating biome with browser env.

[baptisteArno]

Thank you for the exploration @b4s36t4. I guess option 1 would be enough? The idea is to only catch syntax issues.

If you hover on it, does it display a helper tooltip?

[b4s36t4]

Yes it does. But not on redline, beside line-number it shows an icon hovering on it shows the message.

[baptisteArno]

That's fine with me! 👍

[b4s36t4]

Cool, will raise PR soon.

[b4s36t4]

@baptisteArno Please check the PR #943

[algora-pbc[bot]]

@prateekkalra: We appreciate your enthusiasm but since you already have 2 active bounty attempts, we're going to keep this open for other contributors to attempt. 🫡

[prateekkalra]

/attempt #352

Options

• Cancel my attempt

[algora-pbc[bot]]

Note: The user @b4s36t4 is already attempting to complete issue #352 and claim the bounty. If you attempt to complete the same issue, there is a chance that @b4s36t4 will complete the issue first, and be awarded the bounty. We recommend discussing with @b4s36t4 and potentially collaborating on the same solution versus creating an alternate solution.

[baptisteArno]

This is not possible due to variable templating not being valid JS syntax