@koordinates/xstate-tree 5.1.0-next.14 → 5.1.0-next.16

package/lib/builders.js

@@ -74,11 +74,19 @@ exports.viewToMachine = viewToMachine;
  * @returns an xstate-tree machine that will render the right machines based on the routing events
  */
 function buildRoutingMachine(_routes, mappings) {
+    /**
+     * States in xstate can't contain dots, since the states are named after the routing events
+     * if the routing event contains a dot that will make a state with a dot in it
+     * this function sanitizes the event name to remove dots and is used for the state names and targets
+     */
+    function sanitizeEventName(event) {
+        return event.replace(/\.([a-zA-Z])/g, (_, letter) => letter.toUpperCase());
+    }
     const contentSlot = (0, slots_1.singleSlot)("Content");
     const mappingsToStates = Object.entries(mappings).reduce((acc, [event, _machine]) => {
         return {
             ...acc,
-            [event]: {
+            [sanitizeEventName(event)]: {
                 invoke: {
                     src: event,
                     id: contentSlot.getId(),
@@ -89,7 +97,7 @@ function buildRoutingMachine(_routes, mappings) {
     const mappingsToEvents = Object.keys(mappings).reduce((acc, event) => ({
         ...acc,
         [event]: {
-            target: `.${event}`,
+            target: `.${sanitizeEventName(event)}`,
         },
     }), {});
     const machine = (0, xstate_1.setup)({

package/lib/routing/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useActiveRouteEvents = exports.useInRoutingContext = exports.TestRoutingContext = exports.RoutingContext = exports.useRouteArgsIfActive = exports.useIsRouteActive = exports.handleLocationChange = exports.matchRoute = exports.Link = exports.joinRoutes = exports.buildCreateRoute = void 0;
+exports.useActiveRouteEvents = exports.useInTestRoutingContext = 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");
@@ -19,4 +19,5 @@ 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; } });
+Object.defineProperty(exports, "useInTestRoutingContext", { enumerable: true, get: function () { return providers_1.useInTestRoutingContext; } });
 Object.defineProperty(exports, "useActiveRouteEvents", { enumerable: true, get: function () { return providers_1.useActiveRouteEvents; } });

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.useInRoutingContext = exports.RoutingContext = void 0;
+exports.TestRoutingContext = exports.useActiveRouteEvents = exports.useInTestRoutingContext = exports.useInRoutingContext = exports.RoutingContext = void 0;
 const react_1 = __importDefault(require("react"));
 const react_2 = require("react");
 exports.RoutingContext = (0, react_2.createContext)(undefined);
@@ -22,6 +22,14 @@ function useInRoutingContext() {
     return context !== undefined;
 }
 exports.useInRoutingContext = useInRoutingContext;
+/**
+ * @private
+ */
+function useInTestRoutingContext() {
+    const context = (0, react_2.useContext)(exports.RoutingContext);
+    return context?.isTestRoutingContext ?? false;
+}
+exports.useInTestRoutingContext = useInTestRoutingContext;
 /**
  * @public
  *
@@ -46,6 +54,9 @@ exports.useActiveRouteEvents = useActiveRouteEvents;
  * @param activeRouteEvents - The active route events to use in the context
  */
 function TestRoutingContext({ activeRouteEvents, children, }) {
-    return (react_1.default.createElement(exports.RoutingContext.Provider, { value: { activeRouteEvents: { current: activeRouteEvents } } }, children));
+    return (react_1.default.createElement(exports.RoutingContext.Provider, { value: {
+            activeRouteEvents: { current: activeRouteEvents },
+            isTestRoutingContext: true,
+        } }, children));
 }
 exports.TestRoutingContext = TestRoutingContext;

package/lib/xstate-tree.d.ts

@@ -712,7 +712,7 @@ export declare type View<TActionsOutput, TSelectorsOutput, TSlots extends readon
  * @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 declare function viewToMachine(view: () => JSX.Element): AnyXstateTreeMachine;
+export declare function viewToMachine(view: (args?: any) => JSX.Element): AnyXstateTreeMachine;
 
 declare type WithParentPath<TCurrent extends string, TParentPath extends string> = `${TParentPath extends "" ? "" : `${TParentPath}.`}${TCurrent}`;
 

package/lib/xstateTree.js

@@ -32,7 +32,6 @@ const fast_memoize_1 = __importDefault(require("fast-memoize"));
 const react_2 = __importStar(require("react"));
 const tiny_emitter_1 = require("tiny-emitter");
 const routing_1 = require("./routing");
-const providers_1 = require("./routing/providers");
 const useConstant_1 = require("./useConstant");
 const useService_1 = require("./useService");
 const utils_1 = require("./utils");
@@ -70,7 +69,7 @@ interpreter) {
 }
 const getViewForInterpreter = (0, fast_memoize_1.default)((interpreter) => {
     return react_2.default.memo(function InterpreterView({ children, }) {
-        const activeRouteEvents = (0, providers_1.useActiveRouteEvents)();
+        const activeRouteEvents = (0, routing_1.useActiveRouteEvents)();
         (0, react_2.useEffect)(() => {
             if (activeRouteEvents) {
                 activeRouteEvents.forEach((event) => {
@@ -247,7 +246,10 @@ function buildRootComponent(options) {
             activeRouteEventsRef.current = events;
         };
         const insideRoutingContext = (0, routing_1.useInRoutingContext)();
-        if (insideRoutingContext && typeof routing !== "undefined") {
+        const inTestRoutingContext = (0, routing_1.useInTestRoutingContext)();
+        if (!inTestRoutingContext &&
+            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);

package/package.json

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