Merge pull request #13 from lifeart/ember-inspector-support

ember inspector support

Author: lifeart

package.json

@@ -15,7 +15,8 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build --mode development",
+    "build:prod": "tsc && vite build",
     "build-lib": "tsc && vite build -- --lib",
     "preview": "vite preview",
     "prepublishOnly": "npm run build-lib && node ./utils/write-compiler-types.js",
@@ -28,6 +29,7 @@
     "dist/index.d.ts",
     "dist/gxt.index.es.js",
     "dist/gxt.compiler.es.js",
+    "dist/gxt.ember-inspector.es.js",
     "compiler.d.ts"
   ],
   "module": "./dist/gxt.index.es.js",
@@ -40,6 +42,10 @@
     "./compiler": {
       "import": "./dist/gxt.compiler.es.js",
       "types": "./dist/compiler.d.ts"
+    },
+    "./ember-inspector": {
+      "import": "./dist/gxt.ember-inspector.es.js",
+      "types": "./dist/src/utils/ember-inspector.d.ts"
     }
   },
   "devDependencies": {
@@ -70,6 +76,7 @@
     "@babel/core": "^7.23.6",
     "@babel/preset-typescript": "^7.23.3",
     "@glimmer/syntax": "^0.87.1",
+    "backburner.js": "^2.8.0",
     "content-tag": "^1.2.2"
   }
 }

plugins/compiler.ts

@@ -2,13 +2,24 @@ import { type Plugin } from 'vite';
 import { Preprocessor } from 'content-tag';
 import { transform } from './test';
 import { MAIN_IMPORT } from './symbols';
+import { flags } from './flags.ts';
+
 const p = new Preprocessor();
 
 export function compiler(mode: string): Plugin {
   return {
     enforce: 'pre',
     name: 'glimmer-next',
-
+    config(config, mode) {
+      const isLibBuild = config.build?.lib !== undefined;
+      const defineValues: Record<string, boolean> = flags;
+      if (!isLibBuild) {
+        defineValues['IS_DEV_MODE'] = mode.mode === 'development';
+      }
+      return {
+        define: defineValues,
+      };
+    },
     transform(code: string, file: string) {
       const ext = file.split('.').pop();
       if (ext === 'gjs' || ext === 'gts') {

pnpm-lock.yaml

@@ -1,6 +1,5 @@
 import '@glint/environment-glimmerx';
 import '@glint/environment-ember-template-imports';
-
 import './style.css';
 
 import { createBenchmark } from '@/utils/benchmark';
@@ -17,6 +16,9 @@ import {
 // https://github.com/glimmerjs/glimmer-vm/issues/1540
 
 export default async function render() {
+  if (IS_DEV_MODE) {
+    await import('@lifeart/gxt/ember-inspector');
+  }
   const benchmark = createBenchmark();
 
   // starting app

src/index.ts

@@ -120,7 +120,7 @@ export class Component<T extends Props = any>
   template!: ComponentReturnType;
 }
 async function destroyNode(node: Node) {
-  if (import.meta.env.DEV) {
+  if (IS_DEV_MODE) {
     if (node === undefined) {
       console.warn(`Trying to destroy undefined`);
       return;
@@ -248,14 +248,16 @@ export async function destroyElement(
 
 var $newDestructors = new WeakMap<any, Destructors>();
 
-window['getDestructors'] = () => $newDestructors;
+if (IS_DEV_MODE) {
+  window['getDestructors'] = () => $newDestructors;
+}
 
 export function associateDestroyable(ctx: any, destructors: Destructors) {
   if (destructors.length === 0) {
     return;
   }
 
-  if (import.meta.env.DEV) {
+  if (IS_DEV_MODE) {
     if (ctx.ctx && ctx.ctx !== ctx) {
       throw new Error(`Invalid context`);
     }
@@ -266,7 +268,7 @@ export function associateDestroyable(ctx: any, destructors: Destructors) {
 }
 
 export function removeDestructor(ctx: any, destructor: DestructorFn) {
-  if (import.meta.env.DEV) {
+  if (IS_DEV_MODE) {
     if (ctx.ctx && ctx.ctx !== ctx) {
       throw new Error(`Invalid context`);
     }

src/utils/component.ts

@@ -33,6 +33,7 @@ import {
   $eventsProp,
   addToTree,
   RENDER_TREE,
+  setBounds,
 } from './shared';
 
 // EMPTY DOM PROPS
@@ -43,6 +44,10 @@ const $_className = 'className';
 
 let ROOT: Component<any> | null = null;
 
+export function getRoot() {
+  return ROOT;
+}
+
 type ModifierFn = (
   element: HTMLElement,
   ...args: unknown[]
@@ -296,7 +301,7 @@ export function $_unstableChildComponentWrapper(
 ) {
   return component(
     function UnstableChildWrapper(this: Component<any>) {
-      if (import.meta.env.DEV) {
+      if (IS_DEV_MODE) {
         // @ts-expect-error construct signature
         this.debugName = `UnstableChildWrapper-${unstableWrapperId++}`;
       }
@@ -308,29 +313,36 @@ export function $_unstableChildComponentWrapper(
   );
 }
 
-function buildGraph(obj: Record<string, unknown>, root: any, children: any[]) {
-  const name =
-    root.debugName || root?.constructor?.name || root?.tagName || 'unknown';
-  if (children.length === 0) {
-    obj[name] = null;
+if (IS_DEV_MODE) {
+  function buildGraph(
+    obj: Record<string, unknown>,
+    root: any,
+    children: any[],
+  ) {
+    const name =
+      root.debugName || root?.constructor?.name || root?.tagName || 'unknown';
+    if (children.length === 0) {
+      obj[name] = null;
+      return obj;
+    }
+    obj[name] = children.map((child) => {
+      return buildGraph({}, child, RENDER_TREE.get(child) ?? []);
+    });
     return obj;
   }
-  obj[name] = children.map((child) => {
-    return buildGraph({}, child, RENDER_TREE.get(child) ?? []);
-  });
-  return obj;
-}
 
-function drawTreeToConsole() {
-  const ref = buildGraph(
-    {} as Record<string, unknown>,
-    ROOT,
-    RENDER_TREE.get(ROOT!) ?? [],
-  );
-  console.log(JSON.stringify(ref, null, 2));
-  console.log(RENDER_TREE);
+  function drawTreeToConsole() {
+    const ref = buildGraph(
+      {} as Record<string, unknown>,
+      ROOT,
+      RENDER_TREE.get(ROOT!) ?? [],
+    );
+    console.log(JSON.stringify(ref, null, 2));
+    console.log(RENDER_TREE);
+  }
+  window.drawTreeToConsole = drawTreeToConsole;
 }
-window.drawTreeToConsole = drawTreeToConsole;
+
 // hello, basic component manager
 function component(
   comp: ComponentReturnType | Component,
@@ -353,12 +365,18 @@ function component(
       // here is workaround for simple components @todo - figure out how to show context-less components in tree
       // for now we don't adding it
       addToTree(ctx, result.ctx);
+      if (IS_DEV_MODE) {
+        setBounds(result);
+      }
     }
     return result;
   }
   if (instance.ctx !== null) {
     // for now we adding only components with context
     addToTree(ctx, instance.ctx);
+    if (IS_DEV_MODE) {
+      setBounds(instance);
+    }
   }
   return instance;
 }
@@ -378,7 +396,7 @@ function mergeComponents(
   const nodes: Array<Node> = [];
   const contexts: Array<Component> = [];
   components.forEach((component) => {
-    if (import.meta.env.DEV) {
+    if (IS_DEV_MODE) {
       if (typeof component === 'boolean' || typeof component === 'undefined') {
         throw new Error(`
           Woops, looks like we trying to render boolean or undefined to template, check used helpers.
@@ -583,7 +601,28 @@ const ArgProxyHandler = {
 };
 export function $_args(args: Record<string, unknown>) {
   if (IS_GLIMMER_COMPAT_MODE) {
-    return new Proxy(args, ArgProxyHandler);
+    if (IS_DEV_MODE) {
+      const newArgs: Record<string, () => unknown> = {};
+      Object.keys(args).forEach((key) => {
+        try {
+          Object.defineProperty(newArgs, key, {
+            get() {
+              if (!isFn(args[key])) {
+                return args[key];
+              }
+              // @ts-expect-error function signature
+              return args[key]();
+            },
+            enumerable: true,
+          });
+        } catch (e) {
+          console.error(e);
+        }
+      });
+      return newArgs;
+    } else {
+      return new Proxy(args, ArgProxyHandler);
+    }
   } else {
     return args;
   }
@@ -613,7 +652,7 @@ export function $_fin(
     }
   });
   if (!isStable) {
-    if (import.meta.env.DEV) {
+    if (IS_DEV_MODE) {
       nodes.unshift(
         api.comment(`unstable root enter node: ${ctx?.constructor.name}`),
       );