From fcd0d2dca7fc417bf352b1be2eae43da1c49b06a Mon Sep 17 00:00:00 2001
From: Taylor Lodge <taylor.lodge@koordinates.com>
Date: Mon, 12 Aug 2024 13:49:01 +1200
Subject: [PATCH] fix(builders): viewToMachine not accepting Root components

This used to work but the change that introduced allowing passing children to Root components broke it

Relaxed the typings of viewToMachine to allow any component with any props
---
 src/builders.spec.tsx | 11 +++++++++++
 src/builders.tsx      |  4 +++-
 xstate-tree.api.md    |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/builders.spec.tsx b/src/builders.spec.tsx
index 03b03c8..14cd963 100644
--- a/src/builders.spec.tsx
+++ b/src/builders.spec.tsx
@@ -17,6 +17,17 @@ describe("xstate-tree builders", () => {
 
       await waitFor(() => getByText("hello world"));
     });
+
+    it("works for Root components", async () => {
+      const ViewMachine = viewToMachine(() => <div>hello world</div>);
+      const Root = buildRootComponent(ViewMachine);
+      const RootMachine = viewToMachine(Root);
+      const RootView = buildRootComponent(RootMachine);
+
+      const { getByText } = render(<RootView />);
+
+      await waitFor(() => getByText("hello world"));
+    });
   });
 
   describe("buildRoutingMachine", () => {
diff --git a/src/builders.tsx b/src/builders.tsx
index 7ecdb9d..b03fbff 100644
--- a/src/builders.tsx
+++ b/src/builders.tsx
@@ -274,7 +274,9 @@ export function createXStateTreeMachine<
  * @param view - the React view you want to invoke in an xstate machine
  * @returns The view wrapped into an xstate-tree machine, ready to be invoked by other xstate machines or used with `buildRootComponent`
  */
-export function viewToMachine(view: () => JSX.Element): AnyXstateTreeMachine {
+export function viewToMachine(
+  view: (args?: any) => JSX.Element | null
+): AnyXstateTreeMachine {
   return createXStateTreeMachine(
     createMachine({
       initial: "idle",
diff --git a/xstate-tree.api.md b/xstate-tree.api.md
index 32d6fbb..68360ef 100644
--- a/xstate-tree.api.md
+++ b/xstate-tree.api.md
@@ -446,7 +446,7 @@ export type ViewProps<TSelectors, TActions, TSlots extends readonly Slot[], TMat
 };
 
 // @public
-export function viewToMachine(view: () => JSX.Element): AnyXstateTreeMachine;
+export function viewToMachine(view: (args?: any) => JSX.Element | null): AnyXstateTreeMachine;
 
 // @public (undocumented)
 export type XstateTreeHistory<T = unknown> = History_2<{