FormidableLabs / FormidableLabs/react-live

Avoid scope variable collisions with reserved keywords (like 'default')

Aperta
#391 2 commenti 4 reazioni 0 assegnatari Vedi su GitHub
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.