@koordinates/xstate-tree 4.3.0-beta.2 → 4.3.0-beta.4

package/lib/routing/Link.js

@@ -1,20 +1,32 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const useHref_1 = require("./useHref");
-/**
- * @public
- *
- * Renders an anchor tag pointing at the provided Route
- *
- * The query/params/meta props are conditionally required based on the
- * route passed as the To parameter
- */
-function Link({ to, children, testId, preloadOnHoverMs, preloadOnInteraction, onMouseDown: _onMouseDown, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, ...rest }) {
+function LinkInner({ to, children, testId, preloadOnHoverMs, preloadOnInteraction, onMouseDown: _onMouseDown, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, ...rest }, ref) {
     // @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;
@@ -42,9 +54,8 @@ function Link({ to, children, testId, preloadOnHoverMs, preloadOnInteraction, on
             }
         }
         : undefined;
-    return (react_1.default.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) => {
+    return (react_1.default.createElement("a", { ...props, ref: ref, 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;
             }
@@ -53,7 +64,16 @@ function Link({ to, children, testId, preloadOnHoverMs, preloadOnInteraction, on
             if (e.metaKey || e.ctrlKey) {
                 return;
             }
+            e.preventDefault();
             to.navigate({ params, query, meta });
         } }, children));
 }
-exports.Link = Link;
+/**
+ * @public
+ *
+ * Renders an anchor tag pointing at the provided Route
+ *
+ * The query/params/meta props are conditionally required based on the
+ * route passed as the To parameter
+ */
+exports.Link = (0, react_1.forwardRef)(LinkInner);

package/lib/routing/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestRoutingContext = exports.RoutingContext = exports.useRouteArgsIfActive = exports.useIsRouteActive = exports.handleLocationChange = exports.matchRoute = exports.Link = exports.joinRoutes = exports.buildCreateRoute = void 0;
+exports.useInRoutingContext = exports.TestRoutingContext = exports.RoutingContext = exports.useRouteArgsIfActive = exports.useIsRouteActive = exports.handleLocationChange = exports.matchRoute = exports.Link = exports.joinRoutes = exports.buildCreateRoute = void 0;
 var createRoute_1 = require("./createRoute");
 Object.defineProperty(exports, "buildCreateRoute", { enumerable: true, get: function () { return createRoute_1.buildCreateRoute; } });
 var joinRoutes_1 = require("./joinRoutes");
@@ -18,3 +18,4 @@ Object.defineProperty(exports, "useRouteArgsIfActive", { enumerable: true, get:
 var providers_1 = require("./providers");
 Object.defineProperty(exports, "RoutingContext", { enumerable: true, get: function () { return providers_1.RoutingContext; } });
 Object.defineProperty(exports, "TestRoutingContext", { enumerable: true, get: function () { return providers_1.TestRoutingContext; } });
+Object.defineProperty(exports, "useInRoutingContext", { enumerable: true, get: function () { return providers_1.useInRoutingContext; } });

package/lib/routing/providers.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestRoutingContext = exports.useActiveRouteEvents = exports.RoutingContext = void 0;
+exports.TestRoutingContext = exports.useActiveRouteEvents = exports.useInRoutingContext = exports.RoutingContext = void 0;
 const react_1 = __importDefault(require("react"));
 const react_2 = require("react");
 exports.RoutingContext = (0, react_2.createContext)(undefined);
@@ -14,6 +14,14 @@ function useRoutingContext() {
     }
     return context;
 }
+/**
+ * @private
+ */
+function useInRoutingContext() {
+    const context = (0, react_2.useContext)(exports.RoutingContext);
+    return context !== undefined;
+}
+exports.useInRoutingContext = useInRoutingContext;
 function useActiveRouteEvents() {
     var _a;
     try {

package/lib/xstate-tree.d.ts

@@ -355,7 +355,21 @@ 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, preloadOnHoverMs, preloadOnInteraction, onMouseDown: _onMouseDown, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, ...rest }: LinkProps<TRoute>): JSX.Element;
+export declare const Link: <TRoute extends AnyRoute>(props: {
+    to: TRoute;
+    children: React_2.ReactNode;
+    testId?: string | undefined;
+    /**
+     * onClick works as normal, but if you return false from it the navigation will not happen
+     */
+    onClick?: ((e: React_2.MouseEvent<HTMLAnchorElement>) => boolean | void) | undefined;
+    preloadOnInteraction?: boolean | undefined;
+    preloadOnHoverMs?: number | undefined;
+} & RouteArguments<TRoute extends Route<infer TParams, any, any, any> ? TParams : undefined, TRoute extends Route<any, infer TQuery, any, any> ? TQuery : undefined, TRoute extends Route<any, any, any, infer TMeta> ? TMeta : undefined> & Omit<React_2.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "onClick"> & {
+    ref?: React_2.ForwardedRef<HTMLAnchorElement> | undefined;
+}) => ReturnType<typeof LinkInner>;
+
+declare function LinkInner<TRoute extends AnyRoute>({ to, children, testId, preloadOnHoverMs, preloadOnInteraction, onMouseDown: _onMouseDown, onMouseEnter: _onMouseEnter, onMouseLeave: _onMouseLeave, ...rest }: LinkProps<TRoute>, ref: React_2.ForwardedRef<HTMLAnchorElement>): JSX.Element;
 
 /**
  * @public

package/lib/xstateTree.js

@@ -251,6 +251,14 @@ function buildRootComponent(machine, routing) {
         const setActiveRouteEvents = (events) => {
             activeRouteEventsRef.current = events;
         };
+        const insideRoutingContext = (0, routing_1.useInRoutingContext)();
+        if (insideRoutingContext && typeof routing !== "undefined") {
+            const m = "Routing root rendered inside routing context, this implies a bug";
+            if (process.env.NODE_ENV !== "production") {
+                throw new Error(m);
+            }
+            console.error(m);
+        }
         (0, react_2.useEffect)(() => {
             function handler(event) {
                 recursivelySend(interpreter, event);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@koordinates/xstate-tree",
   "main": "lib/index.js",
   "types": "lib/xstate-tree.d.ts",
-  "version": "4.3.0-beta.2",
+  "version": "4.3.0-beta.4",
   "license": "MIT",
   "description": "Build UIs with Actors using xstate and React",
   "keywords": [
@@ -37,6 +37,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/history": "^4.7.7",
     "@types/jest": "^28.1.4",
+    "@types/node": "^20.4.9",
     "@types/react": "^17.0.29",
     "@types/react-dom": "^18.0.6",
     "@types/testing-library__jest-dom": "^5.14.1",
@@ -72,9 +73,9 @@
   },
   "peerDependencies": {
     "@xstate/react": "^3.x",
+    "react": ">= 16.8.0 < 19.0.0",
     "xstate": ">= 4.20 < 5.0.0",
-    "zod": "^3.x",
-    "react": ">= 16.8.0 < 19.0.0"
+    "zod": "^3.x"
   },
   "scripts": {
     "lint": "eslint 'src/**/*'",