perf(system): avoid re-renders

packages/system/src/inspect.ts

@@ -1,8 +1,8 @@
 import {
+  children,
   Component,
   createComponent,
   createContext,
-  createMemo,
   JSX,
   useContext,
 } from "solid-js";
@@ -22,15 +22,15 @@ export type InspectResult = JSX.Element | ComponentObject;
 
 export const InspectContext = createContext<{ enabled: boolean }>();
 
-export function inspect(fn: () => JSX.Element): InspectResult[] {
+export function inspectChildren(fn: () => JSX.Element): () => InspectResult[] {
   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];
+  }) as any;
+  const result = children(cb);
+  return result.toArray;
 }
 
 export function componentTrap<T>(fn: Component<T>): Component<T> {
@@ -62,30 +62,3 @@ export function isComponentObject(input: unknown, component?: Component) {
     (!component || (input as PrivateComponentObject).Component === component)
   );
 }
-
-export function resolveChildren(children: any): unknown {
-  if (typeof children === "function" && !children.length)
-    return resolveChildren(children());
-  if (Array.isArray(children)) {
-    const results: any[] = [];
-    for (let i = 0; i < children.length; i++) {
-      const result = resolveChildren(children[i]);
-      Array.isArray(result)
-        ? // eslint-disable-next-line prefer-spread
-          results.push.apply(results, result)
-        : results.push(result);
-    }
-    return results;
-  }
-  return children;
-}
-
-export function inspectChildren(fn: () => any) {
-  const children = createMemo(() => inspect(fn));
-  const memo = createMemo(() => resolveChildren(children()) as any);
-  (memo as any).toArray = () => {
-    const c = memo();
-    return Array.isArray(c) ? c : c != null ? [c] : [];
-  };
-  return memo;
-}