Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Debug Render Tree (for Ember Inspector) #18372

Merged
merged 2 commits into from
Sep 16, 2019
Merged

Debug Render Tree (for Ember Inspector) #18372

merged 2 commits into from
Sep 16, 2019

Commits on Sep 16, 2019

  1. [FEATURE] Introduce debug render tree 

    1. Before loading Ember, set `ENV._DEBUG_RENDER_TREE = true;`

   This controls whether to perform extra bookkeeping needed to make
   the `captureRenderTree` API work.

   This has to be set before the ember JavaScript code is evaluated.
   This is usually done by setting one of these...

   ```
   window.EmberENV = { _DEBUG_RENDER_TREE: true };
   ```

   ```
   window.ENV = { _DEBUG_RENDER_TREE: true };
   ```

   ...before the "vendor" `<script>` tag in `index.html`.

   Setting the flag after Ember is already loaded will not work
   correctly. It may appear to work somewhat, but fundamentally broken.

   This is not intended to be set directly. Ember Inspector will enable
   the flag on behalf of the user as needed.

   This flag is always on in development mode.

   The flag is off by default in production mode, due to the cost
   associated with the the bookkeeping work.

   The expected flow is that Ember Inspector will ask the user to
   refresh the page after enabling the feature. It could also offer a
   feature where the user add some domains to the "always on" list. In
   either case, Ember Inspector will inject the code on the page to set
   the flag if needed.

2. With the flag on, `Ember._captureRenderTree()` is available.

   It takes the *application instance* as an argument and returns an
   array of `CapturedRenderNode`:

   ```typescript
   interface CapturedRenderNode {
     type: 'outlet' | 'engine' | 'route-template' | 'component';
     name: string;
     args: {
       positional: unknown[];
       named: Dict<unknown>;
     };
     instance: unknown;
     bounds: Option<{
       parentElement: Simple.Element;
       firstNode: Simple.Node;
       lastNode: Simple.Node;
     }>;
     children: CapturedRenderNode[];
   }
   ```

Co-authored-by: Yehuda Katz <[email protected]>
    @chancancode @wycats
    chancancode and wycats committed Sep 16, 2019
    Configuration menu
    Copy the full SHA
    a828887 View commit details
    Browse the repository at this point in the history

  2. Run debug render tree tests in prod

    @chancancode
    chancancode committed Sep 16, 2019
    Configuration menu
    Copy the full SHA
    d7d942e View commit details
    Browse the repository at this point in the history