microsoft / microsoft/TypeScript-Website

Playground code runner UX is confusing

Aperta
#3,155 0 commenti 7 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
TypeScript
Stelle
2.6k
Fork
1.5k
Merge medio
2g 2h
PR unite (30g)
7

Descrizione

The TypeScript Playground is confusing when trying to run code. It would be great to update the handbook and better yet to update the interface to make the expected behavior more clear.

  1. If Settings -> "Run JavaScript in Browser" is disabled, the "Run" button is still enabled. Clicking it creates an error in the native browser console "can't access property "id", plugin is undefined". It's unclear what the "Run JavaScript in Browser" checkbox supposed to do (is there a way for the browser interface to run javascript out of browser? I think maybe it's from a previous version of the playground where JavaScript would auto-run instead of having a run button?)

  2. Running code seems to fail if TSConfig Module is not "CommonJS", "None", or "Preserve".
    It fails silently if Module is "AMD" or "UMD". There is a helpful error if you have top-level exports ("[WRN]: "Tip: Change the Module setting to "CommonJS" in TS Config settings to allow top-level exports to work in the Playground"). I expect to see a warning or error if the settings are incompatible with the runner, and it's not clear which settings are compatible with the runner (e.g. I expect ES modules to work but not CommonJS in the browser, but the opposite appears true)

  3. Attempting to import a package from npm often shows type hints. But running the code results in a misleading error, which is contextually inappropriate. (there is no "dependency list" that I know of to check and the import declarations are at the top of the user code in the code displayed under the .js tab).

[ERR]: "Executed JavaScript Failed:"
[ERR]: Check dependency list! Synchronous require cannot resolve module 'jest'. This is the first mention of this module!

Or:

[ERR]: "Executed JavaScript Failed:"
[ERR]: import declarations may only appear at top level of a module

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con il TypeScript Playground handbook collegato e riproduci i casi Run-button, TSConfig Module e npm import descritti nell’issue. Esamina il comportamento di Playground settings, runner e .js output prima di decidere se ogni caso richieda un feedback più chiaro della UI, documentazione o entrambe. Il lavoro è completato quando le impostazioni incompatibili e gli errori di dipendenze sono spiegati nel contesto e il handbook descrive il comportamento previsto del runner.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript, typescript
Ambito
developer-experience, tooling
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
38/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.