FormidableLabs / FormidableLabs/react-live

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

Offen
#391 2 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
4.6k
Forks
260
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### 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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne in packages/react-live/src/utils/transpile/evalCode.ts, wo scopeKeys als Argumentbindungen an new Function() übergeben werden. Verfolge, wie reservierte Namen wie default den aktuellen SyntaxError verursachen, und bestimme dann, wie evalCode den oder die betroffenen scopeKey(s) melden sollte. Als erledigt gilt die Aufgabe, wenn der Fehler die Scope-Kollision für das gemeldete Szenario eindeutig identifiziert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.