[BUG] SWC spans are broken with multi-byte offsets and accumulating offsets
- 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.

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