ember-inspector 4.11.0-alpha.2024.3.9 → 4.11.0-alpha.2024.4.2

package/dist/websocket/index.html

@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     
-<meta name="ember-inspector/config/environment" content="%7B%22modulePrefix%22%3A%22ember-inspector%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%22%2C%22locationType%22%3A%22hash%22%2C%22version%22%3A%224.11.0-alpha.2024.3.9%2B56575c0%22%2C%22emberVersionsSupported%22%3A%5B%223.16.0%22%2C%22%22%5D%2C%22previousEmberVersionsSupported%22%3A%5B%220.0.0%22%2C%222.7.0%22%2C%223.4.0%22%5D%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22name%22%3A%22ember-inspector%22%2C%22version%22%3A%224.11.0-alpha.2024.3.9%2B56575c0%2B56575c08%22%7D%7D" />
+<meta name="ember-inspector/config/environment" content="%7B%22modulePrefix%22%3A%22ember-inspector%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%22%2C%22locationType%22%3A%22hash%22%2C%22version%22%3A%224.11.0-alpha.2024.4.2%2Be4d8062%22%2C%22emberVersionsSupported%22%3A%5B%223.16.0%22%2C%22%22%5D%2C%22previousEmberVersionsSupported%22%3A%5B%220.0.0%22%2C%222.7.0%22%2C%223.4.0%22%5D%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%22name%22%3A%22ember-inspector%22%2C%22version%22%3A%224.11.0-alpha.2024.4.2%2Be4d8062%2Be4d8062b%22%7D%7D" />
 
     <style type="text/css">
       @font-face {
@@ -39,7 +39,7 @@
 
     <script src="assets/vendor.js"></script>
 <script src="assets/chunk.359.0be5d21f60d2b5d6d423.js"></script>
-<script src="assets/chunk.143.ac621af5331b75527946.js"></script>
+<script src="assets/chunk.143.9f3a22b07387ec438672.js"></script>
     <script src="assets/ember-inspector.js"></script>
 
     

package/ember-cli-build.js

@@ -381,19 +381,18 @@ module.exports = function (defaults) {
   if (env === 'test') {
     // `ember test` expects the index.html file to be in the
     // output directory.
-    output = mergeTrees([dists.basic, dists.chrome]);
-  } else {
     // Change base tag for running tests in development env.
     dists.basic = replace(dists.basic, {
       files: ['tests/index.html'],
       patterns: [
         {
           match: /<base.*\/>/,
-          replacement: '<base href="../" />',
+          replacement: '',
         },
       ],
     });
-
+    output = mergeTrees([dists.basic, dists.chrome]);
+  } else {
     dists.testing = mergeTrees([dists.basic, dists.chrome]);
 
     output = mergeTrees([

package/ember_debug/adapters/basic.js

@@ -61,17 +61,17 @@ export default class BasicAdapter extends BaseObject {
   }
 
   /**
-    Inspect a specific DOM node. This usually
+    Inspect a js value or specific DOM node. This usually
     means using the current environment's tools
     to inspect the node in the DOM.
 
     For example, in chrome, `inspect(node)`
     will open the Elements tab in dev tools
     and highlight the DOM node.
-
-    @param {Node} node
+    For functions, it will open the sources tab and goto the definition
+    @param {Node|Function} node
   */
-  inspectNode(/* node */) {}
+  inspectValue(/* value */) {}
 
   _messageReceived(message) {
     this._messageCallbacks.forEach((callback) => {

package/ember_debug/adapters/web-extension.js

@@ -28,15 +28,19 @@ export default class extends BasicAdapter {
     // "clone" them through postMessage unless they are converted to a
     // native array.
     options = deepClone(options);
-    this._chromePort.postMessage(options);
+    try {
+      this._chromePort.postMessage(options);
+    } catch (e) {
+      console.log('failed to send message', e);
+    }
   }
 
   /**
    * Open the devtools "Elements" and select an DOM node.
    *
-   * @param  {Node} node The DOM node to select
+   * @param  {Node|Function} value The DOM node to select
    */
-  inspectNode(node) {
+  inspectValue(value) {
     // NOTE:
     //
     // Basically, we are just trying to call `inspect(node)` here.
@@ -58,9 +62,9 @@ export default class extends BasicAdapter {
 
     let name = `__EMBER_INSPECTOR_${(Math.random() * 100000000).toFixed(0)}`;
 
-    window[name] = node;
+    window[name] = value;
 
-    this.namespace.port.send('view:inspectDOMNode', { name });
+    this.namespace.port.send('view:inspectJSValue', { name });
   }
 
   _listen() {

package/ember_debug/general-debug.js

@@ -87,7 +87,9 @@ export default class extends DebugPort {
        * the info tab.
        */
       getLibraries() {
-        this.sendMessage('libraries', { libraries: Ember.libraries._registry });
+        this.sendMessage('libraries', {
+          libraries: Ember.libraries?._registry,
+        });
       },
 
       getEmberCliConfig() {

package/ember_debug/libs/capture-render-tree.js

@@ -1,434 +1,15 @@
-import { compareVersion } from 'ember-debug/utils/version';
-import Ember from 'ember-debug/utils/ember';
+import { captureRenderTree, getEnv } from 'ember-debug/utils/ember';
 
 /* eslint-disable no-console, no-inner-declarations */
-
-let captureRenderTree;
-
+let capture = captureRenderTree;
 // Ember 3.14+ comes with debug render tree, but the version in 3.14.0/3.14.1 is buggy
-if (Ember._captureRenderTree && compareVersion(Ember.VERSION, '3.14.1') > 0) {
-  if (Ember.ENV._DEBUG_RENDER_TREE) {
-    captureRenderTree = Ember._captureRenderTree;
+if (captureRenderTree) {
+  if (getEnv()._DEBUG_RENDER_TREE) {
+    capture = captureRenderTree;
   } else {
-    captureRenderTree = function captureRenderTree() {
+    capture = function captureRenderTree() {
       return [];
     };
   }
-} else {
-  /**
-   * Best-effort polyfill for `Ember._captureRenderTree`.
-   *
-   * Just like the Ember API, it takes an owner (`ApplicationInstance`, specifically)
-   * and return an array of render nodes:
-   *
-   * interface CapturedRenderNode {
-   *   id: string;
-   *   type: 'outlet' | 'engine' | 'route-template' | 'component';
-   *   name: string;
-   *   args: {
-   *     named: Dict<unknown>;
-   *     positional: unknown[];
-   *   };
-   *   instance: unknown;
-   *   template: Option<string>;
-   *   bounds: Option<{
-   *     parentElement: Simple.Element;
-   *     firstNode: Simple.Node;
-   *     lastNode: Simple.Node;
-   *   }>;
-   *   children: CapturedRenderNode[];
-   * }
-   *
-   * While the API is identical, there are some differences and limitations:
-   *
-   * 1. `args` property is not available (it always report empty args).
-   * 2. `bounds` property is only available on component nodes (`null` everywhere else).
-   * 3. `{{mount}}` does not insert an `engine` node.
-   * 4. `Ember.Component` (classic components) are the only type of component in the tree
-   *    (other components are skipped over).
-   * 5. Ordering of `children` may be different (but this is also not guarenteed in the
-   *    Ember API).
-   */
-
-  const { Controller, ViewUtils, get, getOwner, guidFor } = Ember;
-  const { getRootViews, getChildViews, getViewBounds } = ViewUtils;
-
-  /**
-   * We are building the final tree by doing the following steps:
-   *
-   * 1. Get the "outlet state" tree from the router.
-   * 2. Collect the "top level" components. That is, components rendered directly from within
-   *    a route template.
-   * 3. Do an "interleaved walk" down the outlet and (classic) component tree and map things
-   *    into render nodes.
-   * 4. Return the array of render nodes we captured.
-   *
-   * Usually, this function returns an array of exactly one render node, which is the "root"
-   * outlet. However, sometimes there may be other top-level components in the app (e.g.
-   * rendered using the `Ember.Component#appendTo` API).
-   */
-  captureRenderTree = function captureRenderTree(owner) {
-    let tree = [];
-    let outletState = getOutletState(owner);
-    let components = getTopLevelComponents(owner);
-
-    if (outletState && components) {
-      tree.push(captureOutlet('root', owner, components, outletState));
-    }
-
-    return tree;
-  };
-
-  /**
-   * Get the "outlet state" tree from the router. It corresponds to the "settled",
-   * app state after resolving all the hooks, redirects, etc. The rendering layer
-   * takes this tree from the router and render it on screen.
-   *
-   * It has the following format:
-   *
-   * interface OutletState {
-   *   render: {
-   *     // The current owner, could be the app or an engine
-   *     owner: Owner;
-   *
-   *     // The name of the route
-   *     name: string;
-   *
-   *     // The controller for the route
-   *     controller: Controller;
-   *
-   *     // The template (or template factory?) for the route (can this really be undefined?)
-   *     template: OwnedTemplate | undefined;
-   *
-   *     // The name of the outlet this was rendered into (in the parent route template)
-   *     outlet: string;
-   *
-   *     // The name of the parent route (we don't use this)
-   *     into: string | undefined;
-   *   },
-   *
-   *   // The children outlets of this route, keyed by the outlet names (e.g. "main", "sidebar", ...)
-   *   outlets: Dict<OutletState | undefined>;
-   * }
-   *
-   * This function returns the "root" outlet state.
-   */
-  function getOutletState(owner) {
-    try {
-      // eslint-disable-next-line ember/no-private-routing-service
-      return owner.lookup('router:main')._toplevelView.state.ref.value();
-    } catch (error) {
-      console.log('[Ember Inspector] failed to capture render tree');
-      console.log(error);
-      return undefined;
-    }
-  }
-
-  /**
-   * Collect the "top level" components. That is, components rendered directly
-   * from within a route template.
-   *
-   * We do this by walking the classic component tree and identify components
-   * that has its "target" (~= the parent template's `{{this}}` object) set to
-   * a controller (or undefined, for root components rendered outside of the
-   * application route).
-   *
-   * This function returns a `Map` keyed by controllers (`undefiend` is also a
-   * possible key) to arrays of top-level components for that route/controller.
-   */
-  function getTopLevelComponents(owner) {
-    try {
-      let map = new Map();
-      collectComponentsByController(map, null, getRootViews(owner));
-      return map;
-    } catch (error) {
-      console.log('[Ember Inspector] failed to capture render tree');
-      console.log(error);
-      return undefined;
-    }
-  }
-
-  /**
-   * Returns the "target" of a (classic) component.
-   */
-  function targetForComponent(component) {
-    return get(component, '_target') || get(component, '_targetObject');
-  }
-
-  /**
-   * Recursively walk an array of components and add any "top level" components
-   * to the map keyed by their controller.
-   */
-  function collectComponentsByController(map, controller, components) {
-    components.forEach((component) => {
-      let target = targetForComponent(component);
-
-      if (target === undefined || target instanceof Controller) {
-        /**
-         * If our parent is already added, don't add ourself again.
-         *
-         * This is to prevent something like this:
-         *
-         *    {{!-- app/templates/application.hbs}}
-         *    <Parent>
-         *      <Child />
-         *    </Parent>
-         *
-         * Without this check, both the parent and the yielded child will be
-         * considered "top level" since they both have the controller as their
-         * target.
-         */
-        if (target !== controller) {
-          if (!map.has(target)) {
-            map.set(target, []);
-          }
-
-          map.get(target).push(component);
-        }
-
-        collectComponentsByController(map, target, getChildViews(component));
-      } else {
-        collectComponentsByController(
-          map,
-          controller,
-          getChildViews(component)
-        );
-      }
-    });
-  }
-
-  const EMPTY_ARGS = {
-    named: Object.create(null),
-    positional: [],
-  };
-
-  /**
-   * Return the module name (e.g. `my-app/templates/application.hbs`) for a
-   * template or template factory, if available. This may not be present for,
-   * e.g. templates compiled using the "inline" `hbs` tagged string method.
-   */
-  function nameForTemplate(template) {
-    if (template.meta) {
-      // Factory
-      return template.meta.moduleName || null;
-    } else if (template.referrer) {
-      // Instance
-      return template.referrer.moduleName || null;
-    } else {
-      return null;
-    }
-  }
-
-  /**
-   * Walk an outlet tree (the last parameter) and map its content into render nodes.
-   *
-   * For each level of the outlet tree, we also have to walk the (classic) component
-   * tree to attach any components for the current level (and their children) to the
-   * resulting render nodes tree.
-   *
-   * We also check if the owner has changed between the current level and the previous
-   * level, and if so, we infer that we must have just crossed an engine boundary and
-   * insert an engine render node to account for that.
-   *
-   * Because we don't have a good way to generate a stable ID for the outlet nodes, we
-   * also pass down a "path" of the routes/outlets we have encountered so far which we
-   * use to generate the ID.
-   */
-  function captureOutlet(path, owner, components, { outlets, render }) {
-    let outlet = {
-      id: `render-node:${path}@${render.outlet}`,
-      type: 'outlet',
-      name: render.outlet,
-      args: EMPTY_ARGS,
-      instance: undefined,
-      template: null,
-      bounds: null,
-      children: [],
-    };
-
-    let parent = outlet;
-
-    if (owner !== render.owner) {
-      let engine = {
-        id: `render-node:${guidFor(render.owner)}`,
-        type: 'engine',
-        name: render.owner.mountPoint,
-        args: EMPTY_ARGS,
-        instance: render.owner,
-        template: null,
-        bounds: null,
-        children: [],
-      };
-
-      parent.children.push(engine);
-      parent = engine;
-    }
-
-    let subpath = `${path}@${render.outlet}/${render.name}`;
-
-    let route = {
-      id: `render-node:${subpath}`,
-      type: 'route-template',
-      name: render.name,
-      args: EMPTY_ARGS,
-      instance: render.controller,
-      template: nameForTemplate(render.template),
-      bounds: null,
-      children: [],
-    };
-
-    parent.children.push(route);
-    parent = route;
-
-    let childOutlets = Object.keys(outlets).map((name) =>
-      captureOutlet(subpath, render.owner, components, outlets[name])
-    );
-
-    let childComponents = captureComponents(
-      components.get(render.controller) || [],
-      render.controller
-    );
-
-    parent.children.push(
-      ...mergeOutletChildren(render.controller, childOutlets, childComponents)
-    );
-
-    return outlet;
-  }
-
-  /**
-   * Its is possible to nest an outlet inside a component, one pretty common example
-   * is a "layout" component:
-   *
-   * <SidebarWrapper>
-   *   {{outlet "sidebar"}}
-   * </SidebarWrapper>
-   *
-   * On the other hand, it's not possible to put a component inside an outlet anymore
-   * when we get to this point. Try to find a suitable parent for each child outlet
-   * taking the above into account.
-   */
-  function mergeOutletChildren(controller, outlets, components) {
-    let merged = [];
-
-    for (let outlet of outlets) {
-      if (controller) {
-        let parentComponent = findOutletComponentParent(outlet.children);
-
-        if (controllerForComponent(parentComponent) === controller) {
-          let parentNode = findOutletComponentNode(components, parentComponent);
-
-          if (parentNode) {
-            parentNode.children.unshift(outlet);
-            continue;
-          }
-        }
-      }
-
-      merged.push(outlet);
-    }
-
-    merged.push(...components);
-
-    return merged;
-  }
-
-  function findOutletComponentParent(nodes) {
-    let result;
-
-    for (let node of nodes) {
-      if (node.type === 'component') {
-        result = node.instance.parentView;
-      } else if (node.type === 'engine' || node.type === 'route-template') {
-        result = findOutletComponentParent(node.children);
-      }
-
-      if (result !== undefined) {
-        return result;
-      }
-    }
-  }
-
-  function findOutletComponentNode(nodes, instance) {
-    let result;
-
-    for (let node of nodes) {
-      if (node.type === 'component') {
-        if (node.instance === instance) {
-          result = node;
-        } else {
-          result = findOutletComponentNode(node.children, instance);
-        }
-      }
-
-      if (result !== undefined) {
-        return result;
-      }
-    }
-  }
-
-  /**
-   * Returns the name of a (classic) component.
-   */
-  function nameForComponent(component) {
-    // remove "component:" prefix
-    return component._debugContainerKey.slice(10);
-  }
-
-  /**
-   * Returns the nearest controller of a (classic) component. This is so that we know
-   * whether a given component belongs to the current level (the route that we are
-   * processing right now) or not.
-   */
-  function controllerForComponent(component) {
-    let target = component;
-
-    while (target && !(target instanceof Controller)) {
-      target = targetForComponent(target);
-    }
-
-    return target;
-  }
-
-  /**
-   * Returns the template (or template factory?) for a (classic) component.
-   */
-  function templateForComponent(component) {
-    let layout = get(component, 'layout');
-
-    if (layout) {
-      return nameForTemplate(layout);
-    }
-
-    let layoutName = get(component, 'layoutName');
-
-    if (layoutName) {
-      let owner = getOwner(component);
-      let template = owner.lookup(`template:${layoutName}`);
-      return nameForTemplate(template);
-    }
-
-    return null;
-  }
-
-  /**
-   * Return the render node for a given (classic) component, and its children up
-   * until the next route boundary.
-   */
-  function captureComponents(components, controller) {
-    return components
-      .filter((component) => controllerForComponent(component) === controller)
-      .map((component) => ({
-        id: `render-node:${guidFor(component)}`,
-        type: 'component',
-        name: nameForComponent(component),
-        args: EMPTY_ARGS,
-        instance: component,
-        template: templateForComponent(component),
-        bounds: getViewBounds(component),
-        children: captureComponents(getChildViews(component), controller),
-      }));
-  }
 }
-
-export default captureRenderTree;
+export default capture;