FormidableLabs / FormidableLabs/react-live
Avoid scope variable collisions with reserved keywords (like 'default')
- Lingua principale
- TypeScript
- Stelle
- 4.6k
- Fork
- 260
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
### Is there an existing issue for this?
- [X] I have searched the existing issues
### Code of Conduct
- [X] I agree to follow this project's Code of Conduct
### Feature Request
I've hit a difficult-to-debug issue which I believe this package could help others diagnose more easily. I'm happy to submit a PR with this change if it's likely to be accepted.
# Scenario
I'm using React-Live to create a playground for other developers to use. For convenience, I add everything from React to the LiveProvider scope, so that code using `useState` doesn't need to be changed to `React.useState`:
```
import * as React from 'react';
const myScope = {
...React,
...otherStuff,
};
```
# The problem
In production mode only, React provides a default export. This becomes `myScope.default` above.
Once `myScope` is passed into React-Live, it makes its way to [src/utils/transpile/evalCode.ts](https://github.com/FormidableLabs/react-live/blob/master/packages/react-live/src/utils/transpile/evalCode.ts), where the list of keys is passed to `new Function()` to become the function's arguments. It then fails because "default" is a reserved keyword: it's not a valid argument binding.
As a result, `` displays "SyntaxError: Unexpected token 'default'".
This took me some time to debug because I didn't have any "default" in my code, and because everything worked fine in development mode. It wasn't clear that "SyntaxError: Unexpected token 'default'" was actually due to a property in the scope, since there was no stacktrace or other information.
# Local fix
The user-side fix is easy: `delete myScope.default` before passing `scope={myScope}`.
# Proposed change
[evalCode](https://github.com/FormidableLabs/react-live/blob/master/packages/react-live/src/utils/transpile/evalCode.ts) could examine `scopeKeys` and return a more tailored error message if it finds `default` or any other reserved keywords.
I think that just presenting a tailored error message would be enough to help others realize the mistake if they run into this scenario in the future.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia in packages/react-live/src/utils/transpile/evalCode.ts, dove scopeKeys vengono passate a new Function() come binding degli argomenti. Traccia come nomi riservati come default producano l’attuale SyntaxError, quindi determina come evalCode dovrebbe segnalare la scope key o le scope key coinvolte. Il lavoro è completato quando l’errore identifica chiaramente la collisione di scope per lo scenario riportato.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react, typescript
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 45/100