@koordinates/xstate-tree 4.1.6 → 4.3.0-beta.1

package/README.md

@@ -185,6 +185,14 @@ These events can be added anywhere, either next to a component for component spe
 2. If they are tied to a component they need to be in the index.ts file that imports the view/selectors/actions etc and calls `createXStateTreeMachine`. If they are in the file containing those functions the index.d.ts file will not end up importing them.
 
 
+### Type helpers
+
+There are some exported type helpers for use with xstate-tree
+
+* `SelectorsFrom<TMachine>`: Takes a machine and returns the type of the selectors object
+* `ActionsFrom<TMachine>`: Takes a machine and returns the type of the actions object
+
+
 ### [Storybook](https://storybook.js.org)
 
 It is relatively simple to display xstate-tree views directly in Storybook. Since the views are plain React components that accept selectors/actions/slots/inState as props you can just import the view and render it in a Story

package/lib/routing/Link.js

@@ -8,13 +8,37 @@ import { useHref } from "./useHref";
  * The query/params/meta props are conditionally required based on the
  * route passed as the To parameter
  */
-export function Link({ to, children, testId, ...rest }) {
+export function Link({ to, children, testId, preloadOnHoverMs, preloadOnInteraction, onMouseDown: _onMouseDown, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, ...rest }) {
     // @ts-ignore, these fields _might_ exist, so typechecking doesn't believe they exist
     // and everything that consumes params/query already checks for undefined
     const { params, query, meta, ...props } = rest;
+    let timeout;
     const href = useHref(to, params, query);
-    return (React.createElement("a", { ...props, href: href, "data-testid": testId, onClick: (e) => {
+    const onMouseDown = preloadOnInteraction
+        ? (e) => {
+            _onMouseDown === null || _onMouseDown === void 0 ? void 0 : _onMouseDown(e);
+            to.preload({ params, query, meta });
+        }
+        : undefined;
+    const onMouseEnter = preloadOnHoverMs !== undefined
+        ? (e) => {
+            _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(e);
+            timeout = setTimeout(() => {
+                to.preload({ params, query, meta });
+            }, preloadOnHoverMs);
+        }
+        : undefined;
+    const onMouseLeave = preloadOnHoverMs !== undefined
+        ? (e) => {
+            _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(e);
+            if (timeout !== undefined) {
+                clearTimeout(timeout);
+            }
+        }
+        : undefined;
+    return (React.createElement("a", { ...props, href: href, "data-testid": testId, onMouseDown: onMouseDown !== null && onMouseDown !== void 0 ? onMouseDown : _onMouseDown, onMouseEnter: onMouseEnter !== null && onMouseEnter !== void 0 ? onMouseEnter : _onMouseEnter, onMouseLeave: onMouseLeave !== null && onMouseLeave !== void 0 ? onMouseLeave : _onMouseLeave, onClick: (e) => {
             var _a;
+            e.preventDefault();
             if (((_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e)) === false) {
                 return;
             }
@@ -23,7 +47,6 @@ export function Link({ to, children, testId, ...rest }) {
             if (e.metaKey || e.ctrlKey) {
                 return;
             }
-            e.preventDefault();
             to.navigate({ params, query, meta });
         } }, children));
 }

package/lib/routing/createRoute/createRoute.js

@@ -66,7 +66,7 @@ export function buildCreateRoute(history, basePath) {
                 }
                 return parentRoutes;
             }
-            return ({ event, matcher, reverser, paramsSchema, querySchema, redirect, }) => {
+            return ({ event, matcher, reverser, paramsSchema, querySchema, redirect, preload, }) => {
                 let fullParamsSchema = paramsSchema;
                 let parentRoute = baseRoute;
                 while (fullParamsSchema && parentRoute) {
@@ -156,6 +156,14 @@ export function buildCreateRoute(history, basePath) {
                             history: this.history(),
                         });
                     },
+                    // @ts-ignore :cry:
+                    preload(args) {
+                        const parentRoutes = getParentArray();
+                        parentRoutes.forEach((route) => {
+                            route === null || route === void 0 ? void 0 : route.preload(args);
+                        });
+                        preload === null || preload === void 0 ? void 0 : preload(args);
+                    },
                 };
             };
         },

package/lib/routing/handleLocationChange/handleLocationChange.js

@@ -24,9 +24,10 @@ export function handleLocationChange(routes, basePath, path, search, meta) {
         const matchedEvent = match.event;
         matchedEvent.meta = { ...(meta !== null && meta !== void 0 ? meta : {}) };
         matchedEvent.meta.indexEvent = true;
-        const { params } = match.event;
+        const { params, query } = match.event;
         const routingEvents = [];
         let route = match.route;
+        route.preload({ params, query, meta: matchedEvent.meta });
         while (route.parent) {
             routingEvents.push(route.parent.getEvent({ params, query: {}, meta: { ...(meta !== null && meta !== void 0 ? meta : {}) } }));
             route = route.parent;

package/lib/xstate-tree.d.ts

@@ -26,6 +26,17 @@ export declare type Actions<TMachine extends AnyStateMachine, TSelectorsOutput,
     selectors: TSelectorsOutput;
 }) => TOut;
 
+/**
+ * @public
+ *
+ * Retrieves the actions return type from the xstate-tree machine
+ */
+export declare type ActionsFrom<TMachine extends AnyXstateTreeMachine> = TMachine extends StateMachine<any, infer TMeta, any> ? TMeta extends {
+    meta: {
+        actions: infer TOut;
+    };
+} ? TOut extends (...args: any) => any ? ReturnType<TOut> : never : never : never;
+
 /**
  * @public
  */
@@ -40,6 +51,7 @@ export declare type AnyRoute = {
     navigate: any;
     getEvent: any;
     event: string;
+    preload: any;
     basePath: string;
     history: () => XstateTreeHistory;
     parent?: AnyRoute;
@@ -116,6 +128,7 @@ export declare function buildCreateRoute(history: () => XstateTreeHistory, baseP
         querySchema?: TQuerySchema | undefined;
         meta?: TMeta | undefined;
         redirect?: RouteRedirect<MergeRouteTypes<RouteParams<TBaseRoute>, ResolveZodType<TParamsSchema>>, ResolveZodType<TQuerySchema>, MergeRouteTypes<RouteMeta<TBaseRoute>, TMeta> & SharedMeta> | undefined;
+        preload?: RouteArgumentFunctions<void, MergeRouteTypes<RouteParams<TBaseRoute>, ResolveZodType<TParamsSchema>>, ResolveZodType<TQuerySchema>, MergeRouteTypes<RouteMeta<TBaseRoute>, TMeta>, RouteArguments<MergeRouteTypes<RouteParams<TBaseRoute>, ResolveZodType<TParamsSchema>>, ResolveZodType<TQuerySchema>, MergeRouteTypes<RouteMeta<TBaseRoute>, TMeta>>> | undefined;
     }) => Route<MergeRouteTypes<RouteParams<TBaseRoute>, ResolveZodType<TParamsSchema>>, ResolveZodType<TQuerySchema>, TEvent, MergeRouteTypes<RouteMeta<TBaseRoute>, TMeta> & SharedMeta>;
     route<TBaseRoute_1 extends AnyRoute>(baseRoute?: TBaseRoute_1 | undefined): <TEvent_1 extends string, TParamsSchema_1 extends Z.ZodObject<any, "strip", Z.ZodTypeAny, {
         [x: string]: any;
@@ -125,7 +138,7 @@ export declare function buildCreateRoute(history: () => XstateTreeHistory, baseP
         [x: string]: any;
     }, {
         [x: string]: any;
-    }> | undefined, TMeta_1 extends Record<string, unknown>>({ event, matcher, reverser, paramsSchema, querySchema, redirect, }: {
+    }> | undefined, TMeta_1 extends Record<string, unknown>>({ event, matcher, reverser, paramsSchema, querySchema, redirect, preload, }: {
         event: TEvent_1;
         paramsSchema?: TParamsSchema_1 | undefined;
         querySchema?: TQuerySchema_1 | undefined;
@@ -146,6 +159,7 @@ export declare function buildCreateRoute(history: () => XstateTreeHistory, baseP
          * Supplied with params/query objects and constructs the correct URL based on them
          */
         reverser: RouteArgumentFunctions<string, MergeRouteTypes<RouteParams<TBaseRoute_1>, ResolveZodType<TParamsSchema_1>>, ResolveZodType<TQuerySchema_1>, MergeRouteTypes<RouteMeta<TBaseRoute_1>, TMeta_1>, RouteArguments<MergeRouteTypes<RouteParams<TBaseRoute_1>, ResolveZodType<TParamsSchema_1>>, ResolveZodType<TQuerySchema_1>, MergeRouteTypes<RouteMeta<TBaseRoute_1>, TMeta_1>>>;
+        preload?: RouteArgumentFunctions<void, MergeRouteTypes<RouteParams<TBaseRoute_1>, ResolveZodType<TParamsSchema_1>>, ResolveZodType<TQuerySchema_1>, MergeRouteTypes<RouteMeta<TBaseRoute_1>, TMeta_1>, RouteArguments<MergeRouteTypes<RouteParams<TBaseRoute_1>, ResolveZodType<TParamsSchema_1>>, ResolveZodType<TQuerySchema_1>, MergeRouteTypes<RouteMeta<TBaseRoute_1>, TMeta_1>>> | undefined;
     }) => Route<MergeRouteTypes<RouteParams<TBaseRoute_1>, ResolveZodType<TParamsSchema_1>>, ResolveZodType<TQuerySchema_1>, TEvent_1, MergeRouteTypes<RouteMeta<TBaseRoute_1>, TMeta_1> & SharedMeta>;
 };
 
@@ -341,7 +355,7 @@ export declare function lazy<TMachine extends AnyStateMachine>(factory: () => Pr
  * The query/params/meta props are conditionally required based on the
  * route passed as the To parameter
  */
-export declare function Link<TRoute extends AnyRoute>({ to, children, testId, ...rest }: LinkProps<TRoute>): JSX.Element;
+export declare function Link<TRoute extends AnyRoute>({ to, children, testId, preloadOnHoverMs, preloadOnInteraction, onMouseDown: _onMouseDown, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, ...rest }: LinkProps<TRoute>): JSX.Element;
 
 /**
  * @public
@@ -354,6 +368,8 @@ export declare type LinkProps<TRoute extends AnyRoute, TRouteParams = TRoute ext
      * onClick works as normal, but if you return false from it the navigation will not happen
      */
     onClick?: (e: React_2.MouseEvent<HTMLAnchorElement>) => boolean | void;
+    preloadOnInteraction?: boolean;
+    preloadOnHoverMs?: number;
 } & RouteArguments<TRouteParams, TRouteQuery, TRouteMeta> & Omit<React_2.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick">;
 
 /**
@@ -513,6 +529,17 @@ export declare type Route<TParams, TQuery, TEvent, TMeta> = {
      * url via History.push
      */
     navigate: RouteArgumentFunctions<void, TParams, TQuery, TMeta>;
+    /**
+     * Preloads data required by the route. Passed in query/params/meta objects as required by the route
+     *
+     * Must be idempotent as it may be called multiple times
+     *
+     * Can be called on
+     * * Mouse down on a Link
+     * * Hovering on a Link
+     * * When a route is matched
+     */
+    preload: RouteArgumentFunctions<void, TParams, TQuery, TMeta>;
     /**
      * Returns an event object for this route based on the supplied params/query/meta
      *
@@ -619,6 +646,17 @@ export declare type Selectors<TMachine extends AnyStateMachine, TOut> = (args: {
     inState: MatchesFrom<TMachine>;
 }) => TOut;
 
+/**
+ * @public
+ *
+ * Retrieves the selector return type from the xstate-tree machine
+ */
+export declare type SelectorsFrom<TMachine extends AnyXstateTreeMachine> = TMachine extends StateMachine<any, infer TMeta, any> ? TMeta extends {
+    meta: {
+        selectors: infer TOut;
+    };
+} ? TOut extends (...args: any) => any ? ReturnType<TOut> : never : never : never;
+
 /**
  * @public
  */

package/package.json

@@ -2,7 +2,7 @@
   "name": "@koordinates/xstate-tree",
   "main": "lib/index.js",
   "types": "lib/xstate-tree.d.ts",
-  "version": "4.1.6",
+  "version": "4.3.0-beta.1",
   "license": "MIT",
   "description": "Build UIs with Actors using xstate and React",
   "keywords": [
@@ -34,7 +34,7 @@
     "@testing-library/dom": "^8.14.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/history": "^4.7.7",
     "@types/jest": "^28.1.4",
     "@types/react": "^17.0.29",