emberjs/ember.js

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

Fechada

#17.962 aberto em 24 de abr. de 2019

 (3 comentários) (1 reação) (0 responsável)JavaScript (4.216 forks)batch import
BugDocumentationHelp Wanted

Métricas do repositório

Stars
 (22.437 estrelas)
Métricas de merge de PR
 (Mesclagem média 11d 14h) (20 fundiu PRs em 30d)

Description

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);
  }


Guia do colaborador