Wrap the controller returned by BaseController constructor in a Proxy…

… that logs all non-stimulus-internal method calls and property accesses
Sub-Xaero · Jan 23, 2021 · 8dfa8b3 · 8dfa8b3
1 parent 47c3305
commit 8dfa8b3
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 11 deletions.
diff --git a/dist/base_controller.d.ts b/dist/base_controller.d.ts
@@ -1,5 +1,6 @@
-import { Controller } from "stimulus";
+import { Context, Controller } from "stimulus";
 export declare class BaseController extends Controller {
+    constructor(context: Context);
     log(functionName: string, args?: {}): void;
 }
 //# sourceMappingURL=base_controller.d.ts.map
diff --git a/dist/base_controller.d.ts.map b/dist/base_controller.d.ts.map
diff --git a/dist/stimulus-library.js b/dist/stimulus-library.js
diff --git a/dist/stimulus-library.js.map b/dist/stimulus-library.js.map
diff --git a/dist/stimulus-library.modern.js b/dist/stimulus-library.modern.js
diff --git a/dist/stimulus-library.modern.js.map b/dist/stimulus-library.modern.js.map
diff --git a/dist/stimulus-library.module.js b/dist/stimulus-library.module.js
diff --git a/dist/stimulus-library.module.js.map b/dist/stimulus-library.module.js.map
diff --git a/dist/stimulus-library.umd.js b/dist/stimulus-library.umd.js
diff --git a/dist/stimulus-library.umd.js.map b/dist/stimulus-library.umd.js.map
diff --git a/playground/controllers/debug_controller.html b/playground/controllers/debug_controller.html
@@ -15,7 +15,10 @@ <h1 class="title is-1">Stimulus Library</h1>
         <div class="has-text-centered">
           <a href="../index.html">Back</a>
 
-          <p data-controller="debug">Lorem ipsum</p>
+          <p data-controller="debug">
+            <span data-debug-target="test" data-action="click->test#foo"> Lorem</span>
+            <span data-debug-target="test"> ipsum</span>
+          </p>
 
         </div>
       </div>

diff --git a/playground/index.js b/playground/index.js
@@ -29,6 +29,8 @@ import {
 
 const application = Application.start();
 
+application.debug = true;
+
 application.register("async-block", AsyncBlockController);
 application.register("auto-submit-form", AutoSubmitFormController);
 application.register("autosize", AutosizeController);

diff --git a/src/base_controller.ts b/src/base_controller.ts
@@ -2,6 +2,30 @@ import {Context, Controller} from "stimulus";
 
 export class BaseController extends Controller {
 
+  constructor(context: Context) {
+    super(context);
+    return new Proxy(this, {
+      get: (obj, prop) => {
+        let returnVal = Reflect.get(obj, prop);
+        let self = this;
+        if (logProperty(prop.toString())) {
+          if (typeof returnVal == "function") {
+            return new Proxy(returnVal, {
+              apply(target: any, thisArg: any, argArray?: any): any {
+                self.log(prop.toString(), {
+                  args: argArray,
+                });
+                return Reflect.apply(target, thisArg, argArray);
+              },
+            });
+          } else {
+            this.log(prop.toString());
+          }
+        }
+        return returnVal;
+      },
+    });
+  }
 
   log(functionName: string, args: {} = {}): void {
     // @ts-ignore
@@ -18,3 +42,32 @@ export class BaseController extends Controller {
   }
 
 }
+
+function logProperty(prop: string): boolean {
+  switch (prop) {
+    case "application":
+    case "element":
+    case "constructor":
+    case "initialize":
+    case "log":
+    case "data":
+    case "valueDescriptorMap":
+    case "identifier":
+      return false;
+  }
+
+  if (/^.*?Target(s)?$/.test(prop)) {
+    return false;
+  }
+  if (/^.*?Value$/.test(prop)) {
+    return false;
+  }
+  if (/^.*?ValueChanged$/.test(prop)) {
+    return false;
+  }
+  if (/^.*?Class$/.test(prop)) {
+    return false;
+  }
+
+  return true;
+}