Merge pull request #1492 from patricklx/patch-2

improve arguments error detection for inspector

Author: NullVoxPopuli

packages/@glimmer-workspace/integration-tests/test/debug-render-tree-test.ts

@@ -23,6 +23,7 @@ import {
   RenderTest,
   suite,
   test,
+  tracked,
 } from '..';
 
 interface CapturedBounds {
@@ -135,33 +136,62 @@ class DebugRenderTreeTest extends RenderTest {
 
   @test 'emberish curly components'() {
     this.registerComponent('Curly', 'HelloWorld', 'Hello World');
+    let error: Error | null = null;
+    class State {
+      @tracked doFail = false;
+      get getterWithError() {
+        if (!this.doFail) return;
+        error = new Error('error');
+        throw error;
+      }
+    }
+    const obj = new State();
 
     this.render(
-      `<HelloWorld @arg="first"/>{{#if this.showSecond}}<HelloWorld @arg="second"/>{{/if}}`,
+      `<HelloWorld @arg="first" @arg2={{this.obj.getterWithError}}/>{{#if this.showSecond}}<HelloWorld @arg="second"/>{{/if}}`,
       {
         showSecond: false,
+        obj,
       }
     );
 
+    obj.doFail = true;
+
+    this.delegate.getCapturedRenderTree();
+
+    this.assert.ok(error !== null, 'expecting an Error');
+
     this.assertRenderTree([
       {
         type: 'component',
         name: 'HelloWorld',
-        args: { positional: [], named: { arg: 'first' } },
+        args: (actual) => {
+          const args = { positional: [], named: { arg: 'first', arg2: { error } } };
+          this.assert.deepEqual(actual, args);
+          this.assert.ok(
+            !this.delegate.context.runtime.env.isArgumentCaptureError!(actual.named['arg'])
+          );
+          this.assert.ok(
+            this.delegate.context.runtime.env.isArgumentCaptureError!(actual.named['arg2'])
+          );
+          return true;
+        },
         instance: (instance: EmberishCurlyComponent) => (instance as any).arg === 'first',
         template: '(unknown template module)',
         bounds: this.nodeBounds(this.delegate.getInitialElement().firstChild),
         children: [],
       },
     ]);
 
+    obj.doFail = false;
+
     this.rerender({ showSecond: true });
 
     this.assertRenderTree([
       {
         type: 'component',
         name: 'HelloWorld',
-        args: { positional: [], named: { arg: 'first' } },
+        args: { positional: [], named: { arg: 'first', arg2: undefined } },
         instance: (instance: EmberishCurlyComponent) => (instance as any).arg === 'first',
         template: '(unknown template module)',
         bounds: this.nodeBounds(this.element.firstChild),
@@ -184,7 +214,7 @@ class DebugRenderTreeTest extends RenderTest {
       {
         type: 'component',
         name: 'HelloWorld',
-        args: { positional: [], named: { arg: 'first' } },
+        args: { positional: [], named: { arg: 'first', arg2: undefined } },
         instance: (instance: EmberishCurlyComponent) => (instance as any).arg === 'first',
         template: '(unknown template module)',
         bounds: this.nodeBounds(this.element.firstChild),

packages/@glimmer/interfaces/lib/runtime/arguments.d.ts

@@ -60,3 +60,14 @@ export interface Arguments {
   positional: readonly unknown[];
   named: Record<string, unknown>;
 }
+
+export interface ArgumentsDebug {
+  positional: readonly unknown[];
+  named: Record<string, unknown>;
+}
+
+export interface ArgumentError {
+  error: any;
+}
+
+export function isArgumentError(arg: unknown): arg is ArgumentError;

packages/@glimmer/interfaces/lib/runtime/environment.d.ts

@@ -45,4 +45,5 @@ export interface Environment {
 
   isInteractive: boolean;
   debugRenderTree?: DebugRenderTree | undefined;
+  isArgumentCaptureError?: ((error: any) => boolean) | undefined;
 }

packages/@glimmer/runtime/lib/debug-render-tree.ts

@@ -7,7 +7,7 @@ import type {
 } from '@glimmer/interfaces';
 import { assign, expect, Stack } from '@glimmer/util';
 
-import { reifyArgs } from './vm/arguments';
+import { reifyArgsDebug } from './vm/arguments';
 
 interface InternalRenderNode<T extends object> extends RenderNode {
   bounds: Nullable<Bounds>;
@@ -181,7 +181,7 @@ export default class DebugRenderTreeImpl<TBucket extends object>
     let template = this.captureTemplate(node);
     let bounds = this.captureBounds(node);
     let children = this.captureRefs(refs);
-    return { id, type, name, args: reifyArgs(args), instance, template, bounds, children };
+    return { id, type, name, args: reifyArgsDebug(args), instance, template, bounds, children };
   }
 
   private captureTemplate({ template }: InternalRenderNode<TBucket>): Nullable<string> {

packages/@glimmer/runtime/lib/environment.ts

@@ -18,6 +18,7 @@ import { track, updateTag } from '@glimmer/validator';
 
 import DebugRenderTree from './debug-render-tree';
 import { DOMChangesImpl, DOMTreeConstruction } from './dom/helper';
+import { isArgumentError } from './vm/arguments';
 
 export const TRANSACTION: TransactionSymbol = Symbol('TRANSACTION') as TransactionSymbol;
 
@@ -101,6 +102,7 @@ export class EnvironmentImpl implements Environment {
   // Delegate methods and values
   public isInteractive: boolean;
 
+  isArgumentCaptureError: ((error: any) => boolean) | undefined;
   debugRenderTree: DebugRenderTree<object> | undefined;
 
   constructor(
@@ -109,6 +111,7 @@ export class EnvironmentImpl implements Environment {
   ) {
     this.isInteractive = delegate.isInteractive;
     this.debugRenderTree = this.delegate.enableDebugTooling ? new DebugRenderTree() : undefined;
+    this.isArgumentCaptureError = this.delegate.enableDebugTooling ? isArgumentError : undefined;
     if (options.appendOperations) {
       this.appendOperations = options.appendOperations;
       this.updateOperations = options.updateOperations;

packages/@glimmer/runtime/lib/vm/arguments.ts

@@ -1,4 +1,5 @@
 import type {
+  ArgumentError,
   BlockArguments,
   BlockSymbolTable,
   BlockValue,
@@ -501,6 +502,55 @@ export function reifyArgs(args: CapturedArguments) {
   };
 }
 
+const ARGUMENT_ERROR = Symbol('ARGUMENT_ERROR');
+
+export function isArgumentError(arg: unknown): arg is ArgumentError {
+  return (
+    arg !== null &&
+    typeof arg === 'object' &&
+    (arg as { [ARGUMENT_ERROR]: boolean })[ARGUMENT_ERROR]
+  );
+}
+
+function ArgumentErrorImpl(error: any) {
+  return {
+    [ARGUMENT_ERROR]: true,
+    error,
+  };
+}
+
+export function reifyNamedDebug(named: CapturedNamedArguments) {
+  let reified = dict();
+  for (const [key, value] of Object.entries(named)) {
+    try {
+      reified[key] = valueForRef(value);
+    } catch (e) {
+      reified[key] = ArgumentErrorImpl(e);
+    }
+  }
+
+  return reified;
+}
+
+export function reifyPositionalDebug(positional: CapturedPositionalArguments) {
+  return positional.map((p) => {
+    try {
+      return valueForRef(p);
+    } catch (e) {
+      return ArgumentErrorImpl(e);
+    }
+  });
+}
+
+export function reifyArgsDebug(args: CapturedArguments) {
+  let named = reifyNamedDebug(args.named);
+  let positional = reifyPositionalDebug(args.positional);
+  return {
+    named,
+    positional,
+  };
+}
+
 export const EMPTY_NAMED = Object.freeze(Object.create(null)) as CapturedNamedArguments;
 export const EMPTY_POSITIONAL = EMPTY_REFERENCES as CapturedPositionalArguments;
 export const EMPTY_ARGS = createCapturedArgs(EMPTY_NAMED, EMPTY_POSITIONAL);