Support loose (invalid) JavaScript

[remcohaszing]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Problem

While typing, code is often invalid. Various IntelliSense features typically work on invalid code. TypeScript supports this, but acorn does not. Currently invalid syntax is caught, but IntelliSense doesn’t work. We need to find a way to deal with invalid syntax.

Solution

Needs investigation

Alternatives

🤷

[ChristianMurphy]

Maybe https://github.com/acornjs/acorn/tree/master/acorn-loose/ would be of interest?

[wooorm]

the micromark utils do a low an acorn instance to be passed, so that might also indeed allow the loose version? Worth to check, but might not be strong enough

[remcohaszing]

I think acorn-loose is a good candidate, although currently it doesn’t work as a drop-in replacement, because it doesn’t implement parseExpressionAt.

import {Parser} from 'acorn'
import {LooseParser} from 'acorn-loose'
import jsx from 'acorn-jsx'
import remarkMdx from 'remark-mdx'
import remarkParse from 'remark-parse'
import {unified} from 'unified'

// const parser = Parser.extend(jsx())
const parser = LooseParser.extend(jsx())

const processor = unified().use(remarkParse).use(remarkMdx, {acorn: parser})

const mdx = `
import { Button } from './button.js'

Click the button

<Button>Click me!</Button>
`

console.dir(processor.parse(mdx))

---

Also worth considering is @typescript-eslint/typescript-estree, or possibly even just TypeScript, as we’re not really interested in the estree.