fkling / fkling/astexplorer

[BUG] SWC spans are broken with multi-byte offsets and accumulating offsets

Open
#708 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
6.5k
Forks
772
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**
A clear and concise description of what the bug is.

#### Multi-byte offsets

Currently, if you try to insert a multi-byte character in your code on AST Explorer, this eats up more space in the span.

![Screenshot 2024-01-15 at 3 03 56 PM](https://github.com/fkling/astexplorer/assets/53054099/445f6245-5629-4637-9864-b793b8bc37de)

This is related to the fact that the span values in SWC refer to **byte positions** instead of **string indices**: https://github.com/swc-project/swc/issues/1366#issuecomment-1576294504

Code:

```js
let a = {
'❤️': 'hi'
}

console.log(a)
```

Reproducing:
- Type above code in SWC mode in the editor
- Reload (to reinitialize the parser)
- Try hovering over the ObjectExpression and notice how the span is offset by 3 extra characters

#### Accumalating Offsets

https://github.com/fkling/astexplorer/assets/53054099/1baefef0-a5cd-401e-8fc5-4229d2b82def

The above issue is related to another bug in SWC that results in spans being accumalated. Internally this is done to get their sourcemap functionality working, but to workaround this, you will need to either:

- Store the offset of the `Module` or `Script` in a separate variable and subtract all other spans by that number. This will require AST Explorer to also calculate an extra span offset for header comments, because the span of the `Module` excludes any header offsets
- Reinitialize the parser every single time the user makes a change

**Browser (please complete the following information):**
- OS: mac
- Browser chrome
- Version 120

**astexplorer settings:**
- Selected parser: swc
- Selected transformer (if applicable): none
- Contents of the local storage key `explorerSettingsV1` (code can be removed if you don't want it to be public)
```json
{
"showTransformPanel": false,
"parserSettings": {
"acorn": {
"ecmaVersion": "latest",
"sourceType": "script",
"allowReserved": false,
"allowReturnOutsideFunction": false,
"allowImportExportEverywhere": false,
"allowAwaitOutsideFunction": false,
"allowHashBang": false,
"locations": false,
"loose": false,
"ranges": false,
"preserveParens": false,
"plugins.jsx": true
},
"swc": { "syntax": "typescript", "jsx": false, "tsx": true }
},
"parserPerCategory": { "javascript": "swc" },
"workbench": {
"parser": "swc",
"keyMap": "default",
"transform": { "code": "", "transformer": null }
}
}
```

**Additional context**
Add any other context about the problem here.

Related to https://github.com/swc-project/swc/issues/1366

BTW thank you so much for making AST Explorer a thing, it helps me out a lot in my daily workflow :)

I can open up a PR to fix this if you want, bcuz I got these problems working in another project I am building that uses swc.

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue names no repository files or tests; begin at the SWC parser integration and the editor's hover-span handling, reproducing the supplied multi-byte and reload scenarios in SWC mode. Done means spans remain aligned for multi-byte characters and do not accumulate across edits, with the chosen workaround covered by an appropriate test.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.