emberjs/ember.js

`{{debugger}}` in template-only glimmer components has a misleading DX

Geschlossen

#17.962 geöffnet am 24.04.2019

 (3 Kommentare) (1 Reaktion) (0 zugewiesene Personen)JavaScript (4.216 Forks)batch import
BugDocumentationHelp Wanted

Repository-Metriken

Stars
 (22.437 Sterne)
PR-Merge-Metriken
 (Durchschn. Merge 11T 14h) (20 gemergte PRs in 30 T)

Beschreibung

When using {{debugger}} in template-only glimmer components, context is understandably null because there's no backing object (by design).

The user will see the following upon arriving at a breakpoint

The following DX issues need a little cleanup

  1. context no longer applies in this situation
  2. the "For example... context === get('this');" no longer applies in this situation

We may want to add something about get('@foo') to indicate the productive path for debugging these kinds of templates.

It might even be worth splitting this debugging path up (i.e., you'll end up in a template-only-specific debugger, or the standard debugger ) since, with the introduction of these components, the debugging mechanisms have diverged

  function templateWithBackingObjectDebugCallback(context, get) {
    console.info('Use `context`, and `get(<path>)` to debug this template.'); // for example...

    context === get('this');
    debugger;
  }

  function templateOnlyDebugCallback(get) {
    console.info('Use `get(<@path>)` to debug this template.'); 
    // for example... `get('@foo');`
    debugger;
  }

  function debugCallback(context, get) {
      if (context) templateWithBackingObjectDebugCallback(context, get);
      else templateOnlyDebugCallback(get);
  }


Contributor Guide