Inspector improvements for dynamic <Select> and <Menu> support.

packages/material/src/MenuItem/MenuItem.tsx

@@ -10,6 +10,7 @@ import menuItemClasses from "./menuItemClasses";
 import createComponentFactory from "@suid/base/createComponentFactory";
 import { alpha } from "@suid/system";
 import createRef from "@suid/system/createRef";
+import { createInspector } from "@suid/system/inspect";
 import { InPropsOf } from "@suid/types";
 import clsx from "clsx";
 import {
@@ -167,7 +168,7 @@ const MenuItemRoot = styled(ButtonBase, {
  * - [MenuItem API](https://mui.com/api/menu-item/)
  * - inherits [ButtonBase API](https://mui.com/api/button-base/)
  */
-const MenuItem = $.defineComponent(function MenuItem(inProps) {
+const MenuItemComponent = $.defineComponent(function MenuItem(inProps) {
   const menuItemRef = createRef<HTMLElement>(inProps);
   const props = $.useThemeProps({ props: inProps });
   const [, other] = splitProps(props, [
@@ -234,10 +235,17 @@ const MenuItem = $.defineComponent(function MenuItem(inProps) {
     }
   };
 
+  const inspector = createInspector<any>(MenuItemComponent, inProps);
+
+  const handleRef = (el: HTMLElement) => {
+    menuItemRef(el);
+    inspector(el);
+  };
+
   return (
     <ListContext.Provider value={childContext}>
       <MenuItemRoot
-        ref={menuItemRef}
+        ref={handleRef}
         role={baseProps.role}
         tabIndex={tabIndex()}
         component={baseProps.component}
@@ -252,5 +260,4 @@ const MenuItem = $.defineComponent(function MenuItem(inProps) {
     </ListContext.Provider>
   );
 });
-
-export default MenuItem;
+export default MenuItemComponent;

packages/system/src/inspect.ts

@@ -1,4 +1,4 @@
-import { Component, createMemo, JSX } from "solid-js";
+import { Component, createMemo, onCleanup, JSX } from "solid-js";
 
 export const $INSPECT = Symbol("solid-inspect");
 
@@ -13,13 +13,32 @@ type PrivateComponentObject<T = any> = ComponentObject<T> & {
 
 export type InspectResult = JSX.Element | ComponentObject;
 
+const nodeToComponent = new WeakMap();
+
 let inspectionEnabled = false;
 
+export function createInspector<T>(fn: Component<T>, props: T) {
+  let elementRef: HTMLElement | null;
+  const cleanup = () => {
+    if (elementRef) {
+      nodeToComponent.delete(elementRef);
+      elementRef = null;
+    }
+  };
+  onCleanup(cleanup);
+  return (newElementRef: HTMLElement) => {
+    cleanup();
+    elementRef = newElementRef;
+    nodeToComponent.set(elementRef, { Component: fn, props, $INSPECT });
+  };
+}
+
 export function inspect(fn: () => JSX.Element): InspectResult[] {
   try {
     inspectionEnabled = true;
-    const result = fn();
-    return Array.isArray(result) ? result : [result];
+    const ret = fn();
+    const result = Array.isArray(ret) ? ret : [ret];
+    return result.map((v: any) => nodeToComponent.get(v) || v);
   } finally {
     inspectionEnabled = false;
   }