@koordinates/xstate-tree 4.1.0-beta.3 → 4.1.0-beta.5

package/lib/builders.js

@@ -122,7 +122,7 @@ export function createXStateTreeMachine(machine, options) {
     const xstateTreeMeta = {
         selectors,
         actions,
-        view: options.view,
+        View: options.View,
         slots: (_c = options.slots) !== null && _c !== void 0 ? _c : [],
     };
     machine.meta = {

package/lib/index.js

@@ -3,6 +3,6 @@ export * from "./slots";
 export { broadcast, buildRootComponent, onBroadcast } from "./xstateTree";
 export * from "./types";
 export { buildTestRootComponent, buildViewProps, genericSlotsTestingDummy, slotTestingDummyFactory, } from "./testingUtilities";
-export { Link, buildCreateRoute, matchRoute, } from "./routing";
+export { Link, buildCreateRoute, matchRoute, useIsRouteActive, useRouteArgsIfActive, } from "./routing";
 export { loggingMetaOptions } from "./useService";
 export { lazy } from "./lazy";

package/lib/routing/index.js

@@ -4,4 +4,5 @@ export { Link } from "./Link";
 export { matchRoute } from "./matchRoute";
 export { handleLocationChange, } from "./handleLocationChange";
 export { useIsRouteActive } from "./useIsRouteActive";
+export { useRouteArgsIfActive } from "./useRouteArgsIfActive";
 export { RoutingContext } from "./providers";

package/lib/routing/useIsRouteActive.js

@@ -1,11 +1,12 @@
 import { useActiveRouteEvents } from "./providers";
 /**
+ * @public
  * Accepts Routes and returns true if any route is currently active. False if not.
  *
  * If used outside of a RoutingContext, an error will be thrown.
  * @param routes - the routes to check
  * @returns true if any route is active, false if not
- * @throws if used outside of a RoutingContext
+ * @throws if used outside of an xstate-tree root
  */
 export function useIsRouteActive(...routes) {
     const activeRouteEvents = useActiveRouteEvents();

package/lib/routing/useRouteArgsIfActive.js

@@ -0,0 +1,26 @@
+import { assertIsDefined } from "../utils";
+import { useActiveRouteEvents } from "./providers";
+import { useIsRouteActive } from "./useIsRouteActive";
+/**
+ * @public
+ * Returns the arguments for the given route if the route is active.
+ * Returns undefined if the route is not active.
+ *
+ * @param route - the route to get the arguments for
+ * @returns the arguments for the given route if the route is active, undefined otherwise
+ * @throws if used outside of an xstate-tree root
+ */
+export function useRouteArgsIfActive(route) {
+    const isActive = useIsRouteActive(route);
+    const activeRoutes = useActiveRouteEvents();
+    if (!isActive) {
+        return undefined;
+    }
+    const activeRoute = activeRoutes === null || activeRoutes === void 0 ? void 0 : activeRoutes.find((activeRoute) => activeRoute.type === route.event);
+    assertIsDefined(activeRoute, "active route is not defined, but the route is active??");
+    return {
+        params: activeRoute.params,
+        query: activeRoute.query,
+        meta: activeRoute.meta,
+    };
+}

package/lib/xstate-tree.d.ts

@@ -697,6 +697,28 @@ declare type States = {
  */
 export declare type StyledLink<TStyleProps = {}> = <TRoute extends AnyRoute>(props: LinkProps<TRoute> & TStyleProps) => JSX.Element;
 
+/**
+ * @public
+ * Accepts Routes and returns true if any route is currently active. False if not.
+ *
+ * If used outside of a RoutingContext, an error will be thrown.
+ * @param routes - the routes to check
+ * @returns true if any route is active, false if not
+ * @throws if used outside of an xstate-tree root
+ */
+export declare function useIsRouteActive(...routes: AnyRoute[]): boolean;
+
+/**
+ * @public
+ * Returns the arguments for the given route if the route is active.
+ * Returns undefined if the route is not active.
+ *
+ * @param route - the route to get the arguments for
+ * @returns the arguments for the given route if the route is active, undefined otherwise
+ * @throws if used outside of an xstate-tree root
+ */
+export declare function useRouteArgsIfActive<TRoute extends AnyRoute>(route: TRoute): ArgumentsForRoute<TRoute> | undefined;
+
 /**
  * @public
  */
@@ -709,7 +731,7 @@ export declare type V2BuilderMeta<TMachine extends AnyStateMachine, TSelectorsOu
     selectors?: Selectors<TMachine, TSelectorsOutput>;
     actions?: Actions<TMachine, TSelectorsOutput, TActionsOutput>;
     slots?: TSlots;
-    view: View<TActionsOutput, TSelectorsOutput, TSlots>;
+    View: View<TActionsOutput, TSelectorsOutput, TSlots>;
 };
 
 /**

package/lib/xstateTree.js

@@ -165,7 +165,7 @@ export function XstateTreeView({ interpreter }) {
             const ViewV1 = interpreter.machine.meta.view;
             return (React.createElement(ViewV1, { selectors: selectorsRef.current, actions: actions, slots: slots, inState: inState }));
         case 2:
-            const ViewV2 = interpreter.machine.meta.view;
+            const ViewV2 = interpreter.machine.meta.View;
             return (React.createElement(ViewV2, { selectors: selectorsRef.current, actions: actions, slots: slots }));
         default:
             throw new Error("builderVersion not set");
@@ -199,8 +199,17 @@ export function buildRootComponent(machine, routing) {
     if (!machine.meta) {
         throw new Error("Root machine has no meta");
     }
-    if (!machine.meta.view) {
-        throw new Error("Root machine has no associated view");
+    switch (machine.meta.builderVersion) {
+        case 1:
+            if (!machine.meta.view) {
+                throw new Error("Root machine has no associated view");
+            }
+            break;
+        case 2:
+            if (!machine.meta.View) {
+                throw new Error("Root machine has no associated view");
+            }
+            break;
     }
     const RootComponent = function XstateTreeRootComponent() {
         const [_, __, interpreter] = useMachine(machine, { devTools: true });

package/package.json

@@ -2,7 +2,7 @@
   "name": "@koordinates/xstate-tree",
   "main": "lib/index.js",
   "types": "lib/xstate-tree.d.ts",
-  "version": "4.1.0-beta.3",
+  "version": "4.1.0-beta.5",
   "license": "MIT",
   "description": "Build UIs with Actors using xstate and React",
   "keywords": [