From b196443f4f0ba0b962ad0438bb1db059b5755d19 Mon Sep 17 00:00:00 2001
From: Juanra GM <juanrgm724@gmail.com>
Date: Tue, 10 Sep 2024 00:53:45 +0200
Subject: [PATCH] fix(system): inspect dynamic components

Closes #223
---
 .changeset/real-hairs-bow.md   |  5 +++++
 packages/system/src/inspect.ts | 32 +++++++++++++++++++-------------
 2 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/real-hairs-bow.md

diff --git a/.changeset/real-hairs-bow.md b/.changeset/real-hairs-bow.md
new file mode 100644
index 000000000..50a575add
--- /dev/null
+++ b/.changeset/real-hairs-bow.md
@@ -0,0 +1,5 @@
+---
+"@suid/system": patch
+---
+
+Fix `inspectChildren` function
diff --git a/packages/system/src/inspect.ts b/packages/system/src/inspect.ts
index 23dfee36d..46f4eaa9c 100644
--- a/packages/system/src/inspect.ts
+++ b/packages/system/src/inspect.ts
@@ -1,4 +1,11 @@
-import { Component, createMemo, JSX } from "solid-js";
+import {
+  Component,
+  createComponent,
+  createContext,
+  createMemo,
+  JSX,
+  useContext,
+} from "solid-js";
 
 export const $INSPECT = Symbol("solid-inspect");
 
@@ -13,21 +20,22 @@ type PrivateComponentObject<T = any> = ComponentObject<T> & {
 
 export type InspectResult = JSX.Element | ComponentObject;
 
-let inspectionEnabled = false;
+export const InspectContext = createContext<{ enabled: boolean }>();
 
 export function inspect(fn: () => JSX.Element): InspectResult[] {
-  try {
-    inspectionEnabled = true;
-    const result = fn();
-    return Array.isArray(result) ? result : [result];
-  } finally {
-    inspectionEnabled = false;
-  }
+  const cb = createComponent(InspectContext.Provider, {
+    value: { enabled: true },
+    get children() {
+      return fn();
+    },
+  }) as any as () => any;
+  const result = cb();
+  return Array.isArray(result) ? result : [result];
 }
 
 export function componentTrap<T>(fn: Component<T>): Component<T> {
   function Component(props: T) {
-    if (inspectionEnabled)
+    if (useContext(InspectContext)?.enabled)
       return {
         Component,
         props,
@@ -74,9 +82,7 @@ export function resolveChildren(children: any): unknown {
 
 export function inspectChildren(fn: () => any) {
   const children = createMemo(() => inspect(fn));
-  const memo = createMemo(() =>
-    inspect(() => resolveChildren(children()) as any)
-  );
+  const memo = createMemo(() => resolveChildren(children()) as any);
   (memo as any).toArray = () => {
     const c = memo();
     return Array.isArray(c) ? c : c != null ? [c] : [];