@xmachines/docs 1.0.0-beta.51 → 1.0.0-beta.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -11
- package/api/@xmachines/play/README.md +6 -5
- package/api/@xmachines/play/classes/NonNullableError.md +4 -4
- package/api/@xmachines/play/classes/PlayError.md +4 -4
- package/api/@xmachines/play/functions/assertNonNullable.md +1 -1
- package/api/@xmachines/play/type-aliases/PlayEvent.md +2 -2
- package/api/@xmachines/play-actor/README.md +2 -2
- package/api/@xmachines/play-actor/classes/AbstractActor.md +3 -3
- package/api/@xmachines/play-actor/functions/typedSpec.md +1 -1
- package/api/@xmachines/play-actor/interfaces/BaseActorProviderProps.md +5 -5
- package/api/@xmachines/play-actor/interfaces/BaseViewContextValue.md +5 -5
- package/api/@xmachines/play-actor/interfaces/PlaySpec.md +2 -2
- package/api/@xmachines/play-actor/interfaces/Routable.md +3 -3
- package/api/@xmachines/play-actor/interfaces/Viewable.md +2 -2
- package/api/@xmachines/play-dom/README.md +125 -47
- package/api/@xmachines/play-dom/classes/PlayRenderer.md +20 -10
- package/api/@xmachines/play-dom/functions/createPlayUI.md +9 -9
- package/api/@xmachines/play-dom/functions/createRenderer.md +3 -2
- package/api/@xmachines/play-dom/functions/defineRegistry.md +1 -1
- package/api/@xmachines/play-dom/functions/renderSpec.md +17 -13
- package/api/@xmachines/play-dom/interfaces/ComponentContext.md +7 -7
- package/api/@xmachines/play-dom/interfaces/CreatePlayUIOptions.md +15 -12
- package/api/@xmachines/play-dom/interfaces/DefineRegistryResult.md +4 -4
- package/api/@xmachines/play-dom/interfaces/DomRenderContext.md +17 -14
- package/api/@xmachines/play-dom/interfaces/EventHandle.md +4 -4
- package/api/@xmachines/play-dom/interfaces/MountOptions.md +10 -6
- package/api/@xmachines/play-dom/interfaces/PlayDomOptions.md +20 -8
- package/api/@xmachines/play-dom/interfaces/UIProviderOptions.md +13 -10
- package/api/@xmachines/play-dom/type-aliases/ActionFn.md +1 -1
- package/api/@xmachines/play-dom/type-aliases/Actions.md +1 -1
- package/api/@xmachines/play-dom/type-aliases/BaseComponentProps.md +7 -7
- package/api/@xmachines/play-dom/type-aliases/CatalogHasActions.md +1 -1
- package/api/@xmachines/play-dom/type-aliases/ComponentFn.md +1 -1
- package/api/@xmachines/play-dom/type-aliases/ComponentRegistry.md +1 -1
- package/api/@xmachines/play-dom/type-aliases/DefineRegistryOptions.md +2 -2
- package/api/@xmachines/play-dom/type-aliases/DomComponentRenderer.md +1 -1
- package/api/@xmachines/play-dom/type-aliases/DomRegistry.md +1 -1
- package/api/@xmachines/play-dom/type-aliases/DomSchema.md +1 -1
- package/api/@xmachines/play-dom/type-aliases/MountFn.md +6 -4
- package/api/@xmachines/play-dom/type-aliases/SetState.md +1 -1
- package/api/@xmachines/play-dom/variables/schema.md +1 -1
- package/api/@xmachines/play-dom-router/README.md +23 -25
- package/api/@xmachines/play-dom-router/functions/connectRouter.md +1 -1
- package/api/@xmachines/play-dom-router/functions/createBrowserHistory.md +1 -1
- package/api/@xmachines/play-dom-router/functions/createRouteMap.md +1 -1
- package/api/@xmachines/play-dom-router/functions/createRouter.md +1 -1
- package/api/@xmachines/play-dom-router/interfaces/BrowserHistory.md +14 -14
- package/api/@xmachines/play-dom-router/interfaces/BrowserWindow.md +14 -14
- package/api/@xmachines/play-dom-router/interfaces/ConnectRouterOptions.md +6 -6
- package/api/@xmachines/play-dom-router/interfaces/PlayRouteEvent.md +6 -6
- package/api/@xmachines/play-dom-router/interfaces/RoutableActor.md +68 -0
- package/api/@xmachines/play-dom-router/interfaces/RouteLookupContract.md +3 -3
- package/api/@xmachines/play-dom-router/interfaces/RouteMap.md +3 -3
- package/api/@xmachines/play-dom-router/interfaces/RouteMapOptions.md +2 -2
- package/api/@xmachines/play-dom-router/interfaces/RouteMapping.md +3 -3
- package/api/@xmachines/play-dom-router/interfaces/RouterBridge.md +3 -3
- package/api/@xmachines/play-dom-router/interfaces/VanillaRouter.md +4 -4
- package/api/@xmachines/play-react/README.md +3 -3
- package/api/@xmachines/play-react/classes/PlayErrorBoundary.md +5 -5
- package/api/@xmachines/play-react/functions/useActor.md +3 -3
- package/api/@xmachines/play-react/functions/usePlayView.md +1 -1
- package/api/@xmachines/play-react/functions/useSignalEffect.md +1 -1
- package/api/@xmachines/play-react/interfaces/ActorProviderProps.md +8 -8
- package/api/@xmachines/play-react/interfaces/PlayErrorBoundaryProps.md +4 -4
- package/api/@xmachines/play-react/interfaces/PlayErrorBoundaryState.md +3 -3
- package/api/@xmachines/play-react/interfaces/PlayUIProviderProps.md +8 -8
- package/api/@xmachines/play-react/interfaces/ViewContextValue.md +5 -5
- package/api/@xmachines/play-react/type-aliases/AnyPlayActor.md +11 -0
- package/api/@xmachines/play-react/variables/ActorProvider.md +1 -1
- package/api/@xmachines/play-react/variables/PlayRenderer.md +1 -1
- package/api/@xmachines/play-react/variables/PlayUIProvider.md +1 -1
- package/api/@xmachines/play-react-router/README.md +16 -1
- package/api/@xmachines/play-react-router/classes/ReactRouterBridge.md +85 -41
- package/api/@xmachines/play-react-router/classes/RouteMap.md +4 -4
- package/api/@xmachines/play-react-router/functions/PlayRouterProvider.md +4 -4
- package/api/@xmachines/play-react-router/functions/createRouteMap.md +1 -1
- package/api/@xmachines/play-react-router/functions/createRouteMapFromTree.md +1 -1
- package/api/@xmachines/play-react-router/interfaces/PlayActor.md +68 -0
- package/api/@xmachines/play-react-router/interfaces/PlayRouteEvent.md +6 -6
- package/api/@xmachines/play-react-router/interfaces/PlayRouterProviderProps.md +8 -8
- package/api/@xmachines/play-react-router/interfaces/RouteMapOptions.md +2 -2
- package/api/@xmachines/play-react-router/interfaces/RouteMapping.md +3 -3
- package/api/@xmachines/play-react-router/interfaces/RouterBridge.md +3 -3
- package/api/@xmachines/play-router/README.md +21 -18
- package/api/@xmachines/play-router/classes/RouteMap.md +4 -4
- package/api/@xmachines/play-router/classes/RouterBridgeBase.md +83 -43
- package/api/@xmachines/play-router/functions/buildPlayRouteEvent.md +1 -1
- package/api/@xmachines/play-router/functions/buildRouteTree.md +1 -1
- package/api/@xmachines/play-router/functions/createRouteMap.md +1 -1
- package/api/@xmachines/play-router/functions/createRouteMapFromTree.md +1 -1
- package/api/@xmachines/play-router/functions/createRouteMatcher.md +1 -1
- package/api/@xmachines/play-router/functions/detectDuplicateRoutes.md +1 -1
- package/api/@xmachines/play-router/functions/extractMachineRoutes.md +1 -1
- package/api/@xmachines/play-router/functions/extractQuery.md +1 -1
- package/api/@xmachines/play-router/functions/extractRouteParams.md +1 -1
- package/api/@xmachines/play-router/functions/findRouteById.md +1 -1
- package/api/@xmachines/play-router/functions/findRouteByPath.md +1 -1
- package/api/@xmachines/play-router/functions/getNavigableRoutes.md +1 -1
- package/api/@xmachines/play-router/functions/getRoutableRoutes.md +1 -1
- package/api/@xmachines/play-router/functions/getTransitionReachableRoutes.md +1 -1
- package/api/@xmachines/play-router/functions/isRouteReachable.md +1 -1
- package/api/@xmachines/play-router/functions/machineToGraph.md +1 -1
- package/api/@xmachines/play-router/functions/routeExists.md +1 -1
- package/api/@xmachines/play-router/functions/sanitizePathname.md +1 -1
- package/api/@xmachines/play-router/functions/validateRouteFormat.md +1 -1
- package/api/@xmachines/play-router/functions/validateStateExists.md +1 -1
- package/api/@xmachines/play-router/interfaces/BuildPlayRouteEventOptions.md +4 -4
- package/api/@xmachines/play-router/interfaces/LocationLike.md +3 -3
- package/api/@xmachines/play-router/interfaces/MachineEdgeData.md +3 -3
- package/api/@xmachines/play-router/interfaces/MachineNodeData.md +5 -5
- package/api/@xmachines/play-router/interfaces/PlayActor.md +68 -0
- package/api/@xmachines/play-router/interfaces/PlayRouteEvent.md +6 -6
- package/api/@xmachines/play-router/interfaces/RoutableActor.md +64 -0
- package/api/@xmachines/play-router/interfaces/RouteInfo.md +8 -8
- package/api/@xmachines/play-router/interfaces/RouteMapOptions.md +2 -2
- package/api/@xmachines/play-router/interfaces/RouteMapping.md +3 -3
- package/api/@xmachines/play-router/interfaces/RouteMatch.md +3 -3
- package/api/@xmachines/play-router/interfaces/RouteMatcher.md +4 -4
- package/api/@xmachines/play-router/interfaces/RouteNode.md +10 -10
- package/api/@xmachines/play-router/interfaces/RouteObject.md +2 -2
- package/api/@xmachines/play-router/interfaces/RouteTree.md +5 -5
- package/api/@xmachines/play-router/interfaces/RouteWatcherHandle.md +3 -3
- package/api/@xmachines/play-router/interfaces/RouterBridge.md +3 -3
- package/api/@xmachines/play-router/interfaces/WindowLike.md +3 -3
- package/api/@xmachines/play-router/type-aliases/MachineGraph.md +1 -1
- package/api/@xmachines/play-router/type-aliases/RouteMetadata.md +1 -1
- package/api/@xmachines/play-signals/README.md +4 -3
- package/api/@xmachines/play-signals/functions/watchSignal.md +1 -1
- package/api/@xmachines/play-signals/interfaces/ComputedOptions.md +2 -2
- package/api/@xmachines/play-signals/interfaces/SignalComputed.md +2 -2
- package/api/@xmachines/play-signals/interfaces/SignalOptions.md +2 -2
- package/api/@xmachines/play-signals/interfaces/SignalState.md +3 -3
- package/api/@xmachines/play-signals/interfaces/SignalWatcher.md +4 -4
- package/api/@xmachines/play-signals/type-aliases/WatcherNotify.md +1 -1
- package/api/@xmachines/play-solid/README.md +18 -20
- package/api/@xmachines/play-solid/functions/useActor.md +3 -3
- package/api/@xmachines/play-solid/functions/usePlayView.md +1 -1
- package/api/@xmachines/play-solid/interfaces/ActorProviderProps.md +8 -8
- package/api/@xmachines/play-solid/interfaces/PlayUIProviderProps.md +8 -8
- package/api/@xmachines/play-solid/interfaces/ViewContextValue.md +5 -5
- package/api/@xmachines/play-solid/type-aliases/AnyPlayActor.md +11 -0
- package/api/@xmachines/play-solid/variables/ActorContext.md +2 -2
- package/api/@xmachines/play-solid/variables/ActorProvider.md +1 -1
- package/api/@xmachines/play-solid/variables/PlayRenderer.md +1 -1
- package/api/@xmachines/play-solid/variables/PlayUIProvider.md +1 -1
- package/api/@xmachines/play-solid-router/README.md +77 -10
- package/api/@xmachines/play-solid-router/classes/RouteMap.md +4 -4
- package/api/@xmachines/play-solid-router/classes/SolidRouterBridge.md +83 -35
- package/api/@xmachines/play-solid-router/functions/PlayRouterProvider.md +4 -4
- package/api/@xmachines/play-solid-router/functions/createRouteMap.md +1 -1
- package/api/@xmachines/play-solid-router/interfaces/AbstractActor.md +3 -3
- package/api/@xmachines/play-solid-router/interfaces/PlayActor.md +68 -0
- package/api/@xmachines/play-solid-router/interfaces/PlayRouteEvent.md +6 -6
- package/api/@xmachines/play-solid-router/interfaces/PlayRouterProviderProps.md +8 -8
- package/api/@xmachines/play-solid-router/interfaces/RouteMapOptions.md +2 -2
- package/api/@xmachines/play-solid-router/interfaces/RouteMapping.md +3 -3
- package/api/@xmachines/play-solid-router/interfaces/RouterBridge.md +3 -3
- package/api/@xmachines/play-solid-router/type-aliases/RoutableActor.md +6 -4
- package/api/@xmachines/play-solid-router/type-aliases/SolidRouterHooks.md +4 -4
- package/api/@xmachines/play-svelte/README.md +23 -14
- package/api/@xmachines/play-svelte/functions/defineRegistry.md +1 -1
- package/api/@xmachines/play-svelte/functions/getActorContext.md +3 -3
- package/api/@xmachines/play-svelte/functions/getPlayViewContext.md +1 -1
- package/api/@xmachines/play-svelte/functions/setActorContext.md +4 -4
- package/api/@xmachines/play-svelte/interfaces/ActorProviderProps.md +8 -8
- package/api/@xmachines/play-svelte/interfaces/DefineRegistryOptions.md +4 -4
- package/api/@xmachines/play-svelte/interfaces/PlayUIProviderProps.md +11 -11
- package/api/@xmachines/play-svelte/interfaces/ViewContextValue.md +5 -5
- package/api/@xmachines/play-svelte/type-aliases/AnyPlayActor.md +11 -0
- package/api/@xmachines/play-svelte-spa-router/README.md +13 -13
- package/api/@xmachines/play-svelte-spa-router/classes/RouteMap.md +4 -4
- package/api/@xmachines/play-svelte-spa-router/functions/connectRouter.md +1 -1
- package/api/@xmachines/play-svelte-spa-router/functions/createRouteMap.md +1 -1
- package/api/@xmachines/play-svelte-spa-router/interfaces/ConnectRouterOptions.md +6 -6
- package/api/@xmachines/play-svelte-spa-router/interfaces/PlayRouteEvent.md +6 -6
- package/api/@xmachines/play-svelte-spa-router/interfaces/RouteMapOptions.md +2 -2
- package/api/@xmachines/play-svelte-spa-router/interfaces/RouteMapping.md +3 -3
- package/api/@xmachines/play-svelte-spa-router/interfaces/RouterBridge.md +3 -3
- package/api/@xmachines/play-svelte-spa-router/interfaces/WindowLike.md +3 -3
- package/api/@xmachines/play-svelte-spa-router/type-aliases/RoutableActor.md +1 -1
- package/api/@xmachines/play-sveltekit-router/README.md +20 -20
- package/api/@xmachines/play-sveltekit-router/classes/RouteMap.md +4 -4
- package/api/@xmachines/play-sveltekit-router/functions/connectRouter.md +1 -1
- package/api/@xmachines/play-sveltekit-router/functions/createRouteMap.md +1 -1
- package/api/@xmachines/play-sveltekit-router/interfaces/ConnectRouterOptions.md +6 -6
- package/api/@xmachines/play-sveltekit-router/interfaces/LocationLike.md +3 -3
- package/api/@xmachines/play-sveltekit-router/interfaces/PlayRouteEvent.md +6 -6
- package/api/@xmachines/play-sveltekit-router/interfaces/RouteMapOptions.md +2 -2
- package/api/@xmachines/play-sveltekit-router/interfaces/RouteMapping.md +3 -3
- package/api/@xmachines/play-sveltekit-router/interfaces/RouterBridge.md +3 -3
- package/api/@xmachines/play-sveltekit-router/type-aliases/RoutableActor.md +1 -1
- package/api/@xmachines/play-tanstack-react-router/README.md +3 -6
- package/api/@xmachines/play-tanstack-react-router/classes/RouteMap.md +4 -4
- package/api/@xmachines/play-tanstack-react-router/classes/TanStackReactRouterBridge.md +80 -35
- package/api/@xmachines/play-tanstack-react-router/functions/PlayRouterProvider.md +4 -4
- package/api/@xmachines/play-tanstack-react-router/functions/createRouteMap.md +1 -1
- package/api/@xmachines/play-tanstack-react-router/functions/createRouteMapFromTree.md +1 -1
- package/api/@xmachines/play-tanstack-react-router/functions/extractMachineRoutes.md +1 -1
- package/api/@xmachines/play-tanstack-react-router/interfaces/PlayActor.md +68 -0
- package/api/@xmachines/play-tanstack-react-router/interfaces/PlayRouteEvent.md +6 -6
- package/api/@xmachines/play-tanstack-react-router/interfaces/PlayRouterProviderProps.md +8 -8
- package/api/@xmachines/play-tanstack-react-router/interfaces/RouteMapOptions.md +2 -2
- package/api/@xmachines/play-tanstack-react-router/interfaces/RouteMapping.md +3 -3
- package/api/@xmachines/play-tanstack-react-router/interfaces/RouteNavigateEvent.md +3 -3
- package/api/@xmachines/play-tanstack-react-router/interfaces/RouterBridge.md +3 -3
- package/api/@xmachines/play-tanstack-react-router/type-aliases/TanStackRouterInstance.md +1 -1
- package/api/@xmachines/play-tanstack-react-router/type-aliases/TanStackRouterLike.md +4 -4
- package/api/@xmachines/play-tanstack-solid-router/README.md +23 -17
- package/api/@xmachines/play-tanstack-solid-router/classes/RouteMap.md +4 -4
- package/api/@xmachines/play-tanstack-solid-router/classes/{SolidRouterBridge.md → TanStackSolidRouterBridge.md} +86 -38
- package/api/@xmachines/play-tanstack-solid-router/functions/PlayRouterProvider.md +4 -4
- package/api/@xmachines/play-tanstack-solid-router/functions/createRouteMap.md +1 -1
- package/api/@xmachines/play-tanstack-solid-router/interfaces/PlayActor.md +68 -0
- package/api/@xmachines/play-tanstack-solid-router/interfaces/PlayRouteEvent.md +6 -6
- package/api/@xmachines/play-tanstack-solid-router/interfaces/PlayRouterProviderProps.md +8 -8
- package/api/@xmachines/play-tanstack-solid-router/interfaces/RouteMapOptions.md +2 -2
- package/api/@xmachines/play-tanstack-solid-router/interfaces/RouteMapping.md +3 -3
- package/api/@xmachines/play-tanstack-solid-router/interfaces/RouterBridge.md +3 -3
- package/api/@xmachines/play-tanstack-solid-router/type-aliases/RoutableActor.md +6 -4
- package/api/@xmachines/play-tanstack-solid-router/type-aliases/TanStackRouterInstance.md +2 -2
- package/api/@xmachines/play-tanstack-solid-router/type-aliases/TanStackRouterLike.md +3 -3
- package/api/@xmachines/play-vue/README.md +3 -3
- package/api/@xmachines/play-vue/functions/defineRegistry.md +1 -1
- package/api/@xmachines/play-vue/functions/getPlayViewContext.md +1 -1
- package/api/@xmachines/play-vue/functions/useActor.md +3 -3
- package/api/@xmachines/play-vue/interfaces/ActorProviderProps.md +5 -5
- package/api/@xmachines/play-vue/interfaces/PlayUIProviderProps.md +8 -8
- package/api/@xmachines/play-vue/interfaces/ViewContextValue.md +5 -5
- package/api/@xmachines/play-vue/interfaces/VisibilityProviderProps.md +1 -1
- package/api/@xmachines/play-vue/type-aliases/AnyPlayActor.md +11 -0
- package/api/@xmachines/play-vue/type-aliases/ComponentEntry.md +1 -1
- package/api/@xmachines/play-vue/type-aliases/ComponentsMap.md +1 -1
- package/api/@xmachines/play-vue/type-aliases/DefineRegistryOptions.md +2 -2
- package/api/@xmachines/play-vue/variables/PlayRenderer.md +1 -1
- package/api/@xmachines/play-vue-router/README.md +27 -17
- package/api/@xmachines/play-vue-router/classes/RouteMap.md +4 -4
- package/api/@xmachines/play-vue-router/classes/VueRouterBridge.md +81 -33
- package/api/@xmachines/play-vue-router/functions/createRouteMap.md +1 -1
- package/api/@xmachines/play-vue-router/interfaces/PlayActor.md +68 -0
- package/api/@xmachines/play-vue-router/interfaces/PlayRouteEvent.md +6 -6
- package/api/@xmachines/play-vue-router/interfaces/RouteMapOptions.md +2 -2
- package/api/@xmachines/play-vue-router/interfaces/RouteMapping.md +3 -3
- package/api/@xmachines/play-vue-router/interfaces/RouterBridge.md +3 -3
- package/api/@xmachines/play-vue-router/type-aliases/RoutableActor.md +6 -4
- package/api/@xmachines/play-vue-router/variables/PlayRouterProvider.md +3 -3
- package/api/@xmachines/play-xstate/README.md +7 -3
- package/api/@xmachines/play-xstate/classes/PlayerActor.md +12 -12
- package/api/@xmachines/play-xstate/functions/buildRouteUrl.md +1 -1
- package/api/@xmachines/play-xstate/functions/composeGuards.md +1 -1
- package/api/@xmachines/play-xstate/functions/composeGuardsOr.md +1 -1
- package/api/@xmachines/play-xstate/functions/contextFieldMatches.md +1 -1
- package/api/@xmachines/play-xstate/functions/definePlayer.md +1 -1
- package/api/@xmachines/play-xstate/functions/deriveRoute.md +1 -1
- package/api/@xmachines/play-xstate/functions/eventMatches.md +1 -1
- package/api/@xmachines/play-xstate/functions/formatPlayRouteTransitions.md +1 -1
- package/api/@xmachines/play-xstate/functions/hasContext.md +1 -1
- package/api/@xmachines/play-xstate/functions/isAbsoluteRoute.md +1 -1
- package/api/@xmachines/play-xstate/functions/negateGuard.md +1 -1
- package/api/@xmachines/play-xstate/interfaces/PlayerConfig.md +3 -3
- package/api/@xmachines/play-xstate/interfaces/PlayerFactoryResumeOptions.md +2 -2
- package/api/@xmachines/play-xstate/interfaces/PlayerOptions.md +6 -6
- package/api/@xmachines/play-xstate/interfaces/RouteContext.md +5 -5
- package/api/@xmachines/play-xstate/interfaces/RouteObject.md +17 -0
- package/api/@xmachines/play-xstate/type-aliases/ComposedGuard.md +1 -1
- package/api/@xmachines/play-xstate/type-aliases/Guard.md +1 -1
- package/api/@xmachines/play-xstate/type-aliases/GuardArray.md +1 -1
- package/api/@xmachines/play-xstate/type-aliases/PlayerFactory.md +1 -1
- package/api/@xmachines/play-xstate/type-aliases/RouteMachineConfig.md +4 -4
- package/api/@xmachines/play-xstate/type-aliases/RouteMetadata.md +9 -0
- package/api/@xmachines/play-xstate/type-aliases/RouteStateNode.md +4 -4
- package/api/@xmachines/shared/README.md +25 -12
- package/api/@xmachines/shared/vite-aliases/functions/xmAliases.md +1 -1
- package/api/@xmachines/shared/vite-aliases/functions/xmCacheDir.md +1 -1
- package/api/@xmachines/shared/vite-aliases/functions/xmOptimizeDeps.md +1 -1
- package/api/@xmachines/shared/vite-aliases/functions/xmResolve.md +1 -1
- package/api/@xmachines/shared/vitest/functions/defineXmVitestConfig.md +1 -1
- package/contributing/architecture.md +599 -0
- package/contributing/configuration.md +262 -419
- package/contributing/development.md +300 -453
- package/contributing/testing.md +165 -172
- package/examples/@xmachines/play-dom-demo/README.md +30 -21
- package/examples/@xmachines/play-dom-demo/functions/createNavBar.md +1 -1
- package/examples/@xmachines/play-dom-demo/functions/initShell.md +1 -1
- package/examples/@xmachines/play-dom-demo/type-aliases/AuthCatalog.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/About.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/Contact.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/Dashboard.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/Home.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/Login.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/NavBarView.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/Navigation.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/Overview.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/Profile.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/Settings.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/Stats.md +1 -1
- package/examples/@xmachines/play-dom-demo/variables/authCatalog.md +1 -1
- package/examples/@xmachines/play-dom-router-demo/README.md +23 -18
- package/examples/@xmachines/play-react-demo/README.md +38 -37
- package/examples/@xmachines/play-react-demo/functions/App.md +1 -1
- package/examples/@xmachines/play-react-demo/type-aliases/AuthCatalog.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/About.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/Contact.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/Dashboard.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/DebugPanel.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/Home.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/Login.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/NavBar.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/NavBarView.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/Navigation.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/Overview.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/Profile.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/Settings.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/Shell.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/Stats.md +1 -1
- package/examples/@xmachines/play-react-demo/variables/authCatalog.md +1 -1
- package/examples/@xmachines/play-react-router-demo/README.md +37 -33
- package/examples/@xmachines/play-solid-demo/README.md +5 -2
- package/examples/@xmachines/play-solid-demo/functions/App.md +1 -1
- package/examples/@xmachines/play-solid-demo/type-aliases/AuthCatalog.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/About.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/Contact.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/Dashboard.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/DebugPanel.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/Home.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/Login.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/NavBar.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/NavBarView.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/Navigation.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/Overview.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/Profile.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/Settings.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/Shell.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/Stats.md +1 -1
- package/examples/@xmachines/play-solid-demo/variables/authCatalog.md +1 -1
- package/examples/@xmachines/play-solid-router-demo/README.md +38 -25
- package/examples/@xmachines/play-svelte-demo/README.md +8 -5
- package/examples/@xmachines/play-svelte-demo/type-aliases/AuthCatalog.md +1 -1
- package/examples/@xmachines/play-svelte-demo/variables/authCatalog.md +1 -1
- package/examples/@xmachines/play-svelte-spa-router-demo/README.md +11 -9
- package/examples/@xmachines/play-sveltekit-router-demo/README.md +14 -9
- package/examples/@xmachines/play-tanstack-react-router-demo/README.md +39 -13
- package/examples/@xmachines/play-tanstack-solid-router-demo/README.md +27 -13
- package/examples/@xmachines/play-vue-demo/README.md +35 -24
- package/examples/@xmachines/play-vue-demo/type-aliases/AuthCatalog.md +1 -1
- package/examples/@xmachines/play-vue-demo/variables/App.md +1 -1
- package/examples/@xmachines/play-vue-demo/variables/authCatalog.md +1 -1
- package/examples/@xmachines/play-vue-router-demo/README.md +2 -0
- package/examples/README.md +7 -7
- package/examples/multi-router-integration.md +13 -16
- package/examples/routing-patterns.md +2 -2
- package/guides/README.md +1 -1
- package/guides/actor-model.md +2 -2
- package/guides/getting-started.md +303 -110
- package/guides/signals.md +1 -1
- package/guides/state-machines.md +1 -1
- package/package.json +2 -2
- package/api/@xmachines/play-dom/functions/connectRenderer.md +0 -70
- package/api/@xmachines/play-dom/interfaces/ConnectRendererOptions.md +0 -28
- package/api/@xmachines/play-dom-router/type-aliases/RoutableActor.md +0 -9
- package/api/@xmachines/play-react/type-aliases/PlayActor.md +0 -9
- package/api/@xmachines/play-solid/type-aliases/PlayActor.md +0 -9
- package/api/@xmachines/play-svelte/type-aliases/PlayActor.md +0 -9
- package/api/@xmachines/play-vue/type-aliases/PlayActor.md +0 -9
- package/guides/architecture.md +0 -500
|
@@ -1,12 +1,153 @@
|
|
|
1
1
|
<!-- generated-by: gsd-doc-writer -->
|
|
2
2
|
|
|
3
|
-
# Getting Started
|
|
3
|
+
# Getting Started
|
|
4
4
|
|
|
5
|
-
This guide
|
|
5
|
+
This guide serves two audiences:
|
|
6
|
+
|
|
7
|
+
1. **Contributors** setting up the XMachines JS monorepo for development.
|
|
8
|
+
2. **Application developers** installing XMachines packages into their own project.
|
|
9
|
+
|
|
10
|
+
Jump to the section that applies to you:
|
|
11
|
+
|
|
12
|
+
- [Contributor Setup](#contributor-setup) — Clone, install, build, and test the monorepo
|
|
13
|
+
- [Application Developer Quickstart](#application-developer-quickstart) — Install packages, define a machine, connect router and renderer
|
|
6
14
|
|
|
7
15
|
---
|
|
8
16
|
|
|
9
|
-
##
|
|
17
|
+
## Contributor Setup
|
|
18
|
+
|
|
19
|
+
### Prerequisites
|
|
20
|
+
|
|
21
|
+
You need the following installed before cloning the repository:
|
|
22
|
+
|
|
23
|
+
| Requirement | Version | Notes |
|
|
24
|
+
| ----------- | -------------------- | ------------------------------------------------------------ |
|
|
25
|
+
| Node.js | `>= 22.0.0` | Specified in all `package.json` `engines` fields |
|
|
26
|
+
| npm | bundled with Node 22 | The project uses npm workspaces — no separate install needed |
|
|
27
|
+
| Git | any recent version | Conventional commit format is enforced by CI |
|
|
28
|
+
|
|
29
|
+
No global TypeScript install is needed — it is installed as a dev dependency via `npm ci`.
|
|
30
|
+
|
|
31
|
+
> **Node.js version manager tip:** If you manage multiple Node versions with `nvm` or `fnm`, install and activate Node 22 before proceeding.
|
|
32
|
+
|
|
33
|
+
### Installation Steps
|
|
34
|
+
|
|
35
|
+
#### 1. Clone the repository
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
git clone git@gitlab.com:xmachin-es/xmachines-js.git
|
|
39
|
+
cd xmachines-js
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
#### 2. Install dependencies
|
|
43
|
+
|
|
44
|
+
Always use `npm ci` (not `npm install`) to respect the lockfile exactly:
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npm ci
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
This installs all workspace dependencies and automatically runs `patch-package` via the `postinstall` hook to apply the patches in `patches/`. The patch output is expected and required — do not skip it.
|
|
51
|
+
|
|
52
|
+
#### 3. Build all packages
|
|
53
|
+
|
|
54
|
+
```bash
|
|
55
|
+
npm run build
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
The root `tsc --build` command uses TypeScript project references to compile all packages in correct dependency order. Build outputs go to each package's `dist/` directory (gitignored).
|
|
59
|
+
|
|
60
|
+
### First Run
|
|
61
|
+
|
|
62
|
+
Verify your setup is working end-to-end:
|
|
63
|
+
|
|
64
|
+
```bash
|
|
65
|
+
npm test
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
All tests should pass on a freshly cloned and built repository. If they do, your environment is correctly configured.
|
|
69
|
+
|
|
70
|
+
### Dev Container (Optional)
|
|
71
|
+
|
|
72
|
+
A fully configured dev container is provided at `.devcontainer/`. It uses Docker Compose with a Node 22 Bookworm base image and includes Docker-outside-of-Docker, Claude Code, and OpenCode pre-installed.
|
|
73
|
+
|
|
74
|
+
**VS Code:** Open the repository and choose **Reopen in Container** when prompted.
|
|
75
|
+
|
|
76
|
+
**CLI:**
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
npm run devcontainer:up
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
To customize the container, copy the sample env file:
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
cp .devcontainer/.env.sample .devcontainer/.env
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Available variables:
|
|
89
|
+
|
|
90
|
+
| Variable | Default | Description |
|
|
91
|
+
| ----------------------------- | ------- | -------------------------------------------------- |
|
|
92
|
+
| `OPENCODE_EXPERIMENTAL_OXFMT` | `false` | Enables experimental oxfmt inside the opencode UI |
|
|
93
|
+
| `OPENCODE_PORT_MAPPING` | `4096` | Docker port mapping for the opencode web interface |
|
|
94
|
+
|
|
95
|
+
### Common Setup Issues (Monorepo)
|
|
96
|
+
|
|
97
|
+
#### Tests fail with `Cannot find module` errors
|
|
98
|
+
|
|
99
|
+
The test suite relies on TypeScript path aliases that resolve to source files. If aliases are not resolving:
|
|
100
|
+
|
|
101
|
+
1. Run `npm run build` first — some packages need their `dist/` present even in development.
|
|
102
|
+
2. Confirm your package's `vitest.config.ts` uses `defineXmVitestConfig` from `@xmachines/shared/vitest`, which automatically configures the `@xmachines/*` path aliases.
|
|
103
|
+
|
|
104
|
+
#### TypeScript errors about missing types after adding a dependency
|
|
105
|
+
|
|
106
|
+
Run `npm ci` again to ensure all types are installed. If you added a workspace-local dependency, also add the correct `references` entry in the package's `tsconfig.base.json`.
|
|
107
|
+
|
|
108
|
+
#### `patch-package` errors during install
|
|
109
|
+
|
|
110
|
+
The patches in `patches/` are version-specific. If you updated a `@json-render` package, regenerate the patch:
|
|
111
|
+
|
|
112
|
+
```bash
|
|
113
|
+
npx patch-package <package-name>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
#### Lint errors about import extensions
|
|
117
|
+
|
|
118
|
+
All TypeScript imports must end with `.js`, even for `.ts` source files:
|
|
119
|
+
|
|
120
|
+
```typescript
|
|
121
|
+
// ✅ Correct
|
|
122
|
+
import { PlayError } from "./errors.js";
|
|
123
|
+
|
|
124
|
+
// ❌ Wrong — will fail at runtime
|
|
125
|
+
import { PlayError } from "./errors";
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
Your editor's auto-import may omit the extension — fix it manually or configure the editor to add `.js` automatically.
|
|
129
|
+
|
|
130
|
+
#### Build is slow after `git clean`
|
|
131
|
+
|
|
132
|
+
TypeScript incremental builds depend on `.tsbuildinfo` files. After a full clean, these are gone and the initial build will be slower. This is expected.
|
|
133
|
+
|
|
134
|
+
### Next Steps (Contributors)
|
|
135
|
+
|
|
136
|
+
Once your setup is verified, continue with:
|
|
137
|
+
|
|
138
|
+
- **[Architecture](../contributing/architecture.md)** — System design, layers, invariants, and data flow
|
|
139
|
+
- **[Contributing](../../../CONTRIBUTING.md)** — Coding standards, branch conventions, and PR process
|
|
140
|
+
- **[Development](../contributing/development.md)** — Full development lifecycle: build commands, adding packages, commit conventions
|
|
141
|
+
- **[Testing](../contributing/testing.md)** — Vitest setup, test conventions, coverage thresholds, browser tests
|
|
142
|
+
- **[packages/docs/rfc/](../rfc/)** — RFC specifications (read the relevant RFC before implementing any feature)
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
## Application Developer Quickstart
|
|
147
|
+
|
|
148
|
+
This section covers installing XMachines packages into your own application and wiring together a state machine, router adapter, and view renderer.
|
|
149
|
+
|
|
150
|
+
### Prerequisites
|
|
10
151
|
|
|
11
152
|
- **Node.js** `>= 22.0.0`
|
|
12
153
|
- **npm** `>= 10.0.0`
|
|
@@ -15,11 +156,9 @@ This guide walks you through installing XMachines packages, wiring a state machi
|
|
|
15
156
|
|
|
16
157
|
All packages are ES modules (`"type": "module"`). Use `.js` extensions in all TypeScript imports.
|
|
17
158
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
## Installation
|
|
159
|
+
### Installation
|
|
21
160
|
|
|
22
|
-
|
|
161
|
+
#### Step 1: Install the core packages
|
|
23
162
|
|
|
24
163
|
Every XMachines application needs these three packages plus XState:
|
|
25
164
|
|
|
@@ -34,10 +173,10 @@ npm install xstate @xmachines/play-xstate @xmachines/play-actor @xmachines/play-
|
|
|
34
173
|
| [`@xmachines/play-actor`](../api/@xmachines/play-actor/README.md) | Abstract actor base class and interface types |
|
|
35
174
|
| [`@xmachines/play-signals`](../api/@xmachines/play-signals/README.md) | TC39 Signals polyfill (`Signal.State`, `Signal.Computed`, [`watchSignal`](../api/@xmachines/play-signals/functions/watchSignal.md)) |
|
|
36
175
|
|
|
37
|
-
|
|
176
|
+
#### Step 2: Install a router adapter (pick one)
|
|
38
177
|
|
|
39
178
|
```bash
|
|
40
|
-
#
|
|
179
|
+
# Provider pattern (framework-integrated routers)
|
|
41
180
|
npm install @xmachines/play-tanstack-react-router # TanStack Router (React)
|
|
42
181
|
npm install @xmachines/play-tanstack-solid-router # TanStack Router (SolidJS)
|
|
43
182
|
npm install @xmachines/play-react-router # React Router v7
|
|
@@ -50,7 +189,7 @@ npm install @xmachines/play-sveltekit-router # SvelteKit
|
|
|
50
189
|
npm install @xmachines/play-svelte-spa-router # Svelte SPA Router
|
|
51
190
|
```
|
|
52
191
|
|
|
53
|
-
|
|
192
|
+
#### Step 3: Install a view renderer (pick one)
|
|
54
193
|
|
|
55
194
|
```bash
|
|
56
195
|
npm install @xmachines/play-react # React 18/19
|
|
@@ -62,7 +201,7 @@ npm install @xmachines/play-dom # Vanilla DOM
|
|
|
62
201
|
|
|
63
202
|
---
|
|
64
203
|
|
|
65
|
-
|
|
204
|
+
### Core Actor (No Router, No Renderer)
|
|
66
205
|
|
|
67
206
|
The minimum viable XMachines actor — no framework dependencies:
|
|
68
207
|
|
|
@@ -132,11 +271,13 @@ actor.stop();
|
|
|
132
271
|
|
|
133
272
|
---
|
|
134
273
|
|
|
135
|
-
|
|
274
|
+
### Adding Routing
|
|
136
275
|
|
|
137
276
|
State machines control navigation through `meta.route` on states and `play.route` events. The router is passive infrastructure that observes `actor.currentRoute`.
|
|
138
277
|
|
|
139
|
-
|
|
278
|
+
#### Define a routable machine with `formatPlayRouteTransitions`
|
|
279
|
+
|
|
280
|
+
[`formatPlayRouteTransitions`](../api/@xmachines/play-xstate/functions/formatPlayRouteTransitions.md) auto-generates `play.route` handlers from `id` + `meta.route` state pairs:
|
|
140
281
|
|
|
141
282
|
```typescript
|
|
142
283
|
import { setup } from "xstate";
|
|
@@ -186,7 +327,6 @@ const appMachine = appSetup.createMachine(
|
|
|
186
327
|
guard: ({ context }) => !context.isAuthenticated,
|
|
187
328
|
actions: appSetup.assign({
|
|
188
329
|
isAuthenticated: true,
|
|
189
|
-
username: ({ event }) => (event.type === "auth.login" ? event.username : null),
|
|
190
330
|
}),
|
|
191
331
|
},
|
|
192
332
|
"auth.logout": {
|
|
@@ -225,91 +365,93 @@ actor.stop();
|
|
|
225
365
|
|
|
226
366
|
- Every routable state **must** have an `id` — [`formatPlayRouteTransitions`](../api/@xmachines/play-xstate/functions/formatPlayRouteTransitions.md) throws `MissingStateIdError` if absent.
|
|
227
367
|
- Send `play.route` events with `to: "#stateId"` — always use the `id` field prefixed with `#`, never raw URL paths.
|
|
228
|
-
- The machine
|
|
368
|
+
- The machine context **must** include `params: Record<string, string>` and `query: Record<string, string>`.
|
|
229
369
|
- Use `always` guards to protect states from direct URL access — these fire even on browser back/forward.
|
|
230
370
|
|
|
231
371
|
---
|
|
232
372
|
|
|
233
|
-
|
|
373
|
+
### Connecting a Router Adapter
|
|
234
374
|
|
|
235
375
|
Router adapters synchronize `actor.currentRoute` with the browser URL bidirectionally. There are two integration patterns:
|
|
236
376
|
|
|
237
|
-
|
|
377
|
+
#### Pattern 1: Provider pattern (React, Vue, SolidJS)
|
|
238
378
|
|
|
239
|
-
|
|
379
|
+
Used with framework-integrated routers like TanStack Router. All three props (`actor`, `router`, `routeMap`) **must be stable references** — construct them outside JSX or memoize them.
|
|
380
|
+
|
|
381
|
+
```tsx
|
|
240
382
|
// React + TanStack Router example
|
|
241
383
|
import { useMemo, useEffect } from "react";
|
|
242
384
|
import { createRouter, createRootRoute } from "@tanstack/react-router";
|
|
243
385
|
import {
|
|
244
|
-
|
|
245
|
-
|
|
386
|
+
PlayRouterProvider,
|
|
387
|
+
extractMachineRoutes,
|
|
388
|
+
createRouteMapFromTree,
|
|
246
389
|
} from "@xmachines/play-tanstack-react-router";
|
|
247
|
-
import { extractMachineRoutes } from "@xmachines/play-router";
|
|
248
390
|
|
|
249
|
-
// Build
|
|
391
|
+
// Build OUTSIDE of JSX — must be stable references
|
|
250
392
|
const routeTree = extractMachineRoutes(appMachine);
|
|
251
393
|
const routeMap = createRouteMapFromTree(routeTree);
|
|
252
394
|
const router = createRouter({ routeTree: createRootRoute() });
|
|
253
395
|
|
|
396
|
+
// Actor also created outside the component (or memoized inside)
|
|
397
|
+
const actor = createPlayer();
|
|
398
|
+
actor.start();
|
|
399
|
+
|
|
254
400
|
export function App() {
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
router={router}
|
|
267
|
-
routeMap={routeMap}
|
|
268
|
-
renderer={(currentActor) => (
|
|
269
|
-
// Your shell/layout component here
|
|
270
|
-
<Shell actor={currentActor} />
|
|
271
|
-
)}
|
|
272
|
-
/>
|
|
273
|
-
);
|
|
401
|
+
return (
|
|
402
|
+
<PlayRouterProvider
|
|
403
|
+
actor={actor}
|
|
404
|
+
router={router}
|
|
405
|
+
routeMap={routeMap}
|
|
406
|
+
renderer={(currentActor, currentRouter) => (
|
|
407
|
+
// Your shell/layout component here
|
|
408
|
+
<Shell actor={currentActor} />
|
|
409
|
+
)}
|
|
410
|
+
/>
|
|
411
|
+
);
|
|
274
412
|
}
|
|
275
413
|
```
|
|
276
414
|
|
|
277
|
-
|
|
415
|
+
#### Pattern 2: `connectRouter` pattern (Vanilla DOM, SvelteKit, Svelte)
|
|
416
|
+
|
|
417
|
+
Used with framework-agnostic or server-rendered routers. `connectRouter` handles bidirectional sync: `actor.currentRoute` signal → browser URL, and browser URL changes → `play.route` events sent to the actor.
|
|
278
418
|
|
|
279
419
|
```typescript
|
|
280
|
-
import {
|
|
420
|
+
import { createBrowserHistory, createRouter, connectRouter } from "@xmachines/play-dom-router";
|
|
421
|
+
import { extractMachineRoutes, createRouteMapFromTree } from "@xmachines/play-router";
|
|
422
|
+
|
|
423
|
+
const routeTree = extractMachineRoutes(appMachine);
|
|
424
|
+
const routeMap = createRouteMapFromTree(routeTree);
|
|
425
|
+
const history = createBrowserHistory({ window });
|
|
426
|
+
const router = createRouter({ routeTree, history });
|
|
281
427
|
|
|
282
|
-
const routeMap = createRouteMap(appMachine);
|
|
283
428
|
const actor = createPlayer();
|
|
284
429
|
actor.start();
|
|
285
430
|
|
|
286
|
-
|
|
287
|
-
// - actor.currentRoute signal → browser URL
|
|
288
|
-
// - browser URL changes → play.route event sent to actor
|
|
289
|
-
const disconnectRouter = connectRouter({ actor, routeMap });
|
|
431
|
+
const disconnectRouter = connectRouter({ actor, router, routeMap });
|
|
290
432
|
|
|
291
433
|
// Cleanup on unload
|
|
292
434
|
window.addEventListener("beforeunload", () => {
|
|
293
435
|
disconnectRouter();
|
|
436
|
+
router.destroy();
|
|
294
437
|
actor.stop();
|
|
295
438
|
});
|
|
296
439
|
```
|
|
297
440
|
|
|
298
441
|
---
|
|
299
442
|
|
|
300
|
-
|
|
443
|
+
### Connecting a View Renderer
|
|
301
444
|
|
|
302
|
-
View renderers map `meta.view` specs from your machine states to real UI components. Each framework
|
|
445
|
+
View renderers map `meta.view` specs from your machine states to real UI components. Each framework package exports a `defineRegistry` function that binds components and actions to a catalog.
|
|
303
446
|
|
|
304
|
-
|
|
447
|
+
#### React
|
|
305
448
|
|
|
306
|
-
```
|
|
307
|
-
import {
|
|
449
|
+
```tsx
|
|
450
|
+
import { PlayUIProvider, PlayRenderer, defineRegistry } from "@xmachines/play-react";
|
|
308
451
|
import { defineCatalog } from "@json-render/core";
|
|
452
|
+
import { schema } from "@xmachines/play-react";
|
|
309
453
|
import { z } from "zod";
|
|
310
|
-
import type { ComponentFn } from "@xmachines/play-dom";
|
|
311
454
|
|
|
312
|
-
// 1. Define a catalog (schema of components and actions)
|
|
313
455
|
const catalog = defineCatalog(schema, {
|
|
314
456
|
components: {
|
|
315
457
|
Home: { props: z.object({ title: z.string() }) },
|
|
@@ -321,44 +463,11 @@ const catalog = defineCatalog(schema, {
|
|
|
321
463
|
},
|
|
322
464
|
});
|
|
323
465
|
|
|
324
|
-
// 2. Implement components
|
|
325
|
-
const Home: ComponentFn<typeof catalog, "Home"> = ({ props }) => {
|
|
326
|
-
const el = document.createElement("section");
|
|
327
|
-
el.textContent = props.title;
|
|
328
|
-
return el;
|
|
329
|
-
};
|
|
330
|
-
const Login: ComponentFn<typeof catalog, "Login"> = ({ on }) => {
|
|
331
|
-
const el = document.createElement("div");
|
|
332
|
-
const btn = document.createElement("button");
|
|
333
|
-
btn.textContent = "Log in";
|
|
334
|
-
btn.addEventListener("click", () => on("submit").emit());
|
|
335
|
-
el.append(btn);
|
|
336
|
-
return el;
|
|
337
|
-
};
|
|
338
|
-
|
|
339
|
-
// 3. Build registry and mount
|
|
340
466
|
const registryResult = defineRegistry(catalog, {
|
|
341
|
-
components: {
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
logout: async () => actor.send({ type: "auth.logout" }),
|
|
467
|
+
components: {
|
|
468
|
+
Home: ({ props }) => <section>{props.title}</section>,
|
|
469
|
+
Login: ({ on }) => <button onClick={() => on("submit").emit()}>Log in</button>,
|
|
345
470
|
},
|
|
346
|
-
});
|
|
347
|
-
|
|
348
|
-
const mount = createPlayUI(registryResult);
|
|
349
|
-
const disconnect = mount(actor, document.getElementById("app")!);
|
|
350
|
-
|
|
351
|
-
// Cleanup
|
|
352
|
-
window.addEventListener("beforeunload", () => disconnect());
|
|
353
|
-
```
|
|
354
|
-
|
|
355
|
-
### React
|
|
356
|
-
|
|
357
|
-
```tsx
|
|
358
|
-
import { PlayUIProvider, PlayRenderer, defineRegistry } from "@xmachines/play-react";
|
|
359
|
-
|
|
360
|
-
const registryResult = defineRegistry(catalog, {
|
|
361
|
-
components: { Home, Login },
|
|
362
471
|
actions: {
|
|
363
472
|
login: async ({ username }) => actor.send({ type: "auth.login", username }),
|
|
364
473
|
logout: async () => actor.send({ type: "auth.logout" }),
|
|
@@ -374,7 +483,7 @@ function App() {
|
|
|
374
483
|
}
|
|
375
484
|
```
|
|
376
485
|
|
|
377
|
-
|
|
486
|
+
#### Vue 3
|
|
378
487
|
|
|
379
488
|
```html
|
|
380
489
|
<!-- App.vue -->
|
|
@@ -386,9 +495,26 @@ function App() {
|
|
|
386
495
|
|
|
387
496
|
<script setup lang="ts">
|
|
388
497
|
import { PlayUIProvider, PlayRenderer, defineRegistry } from "@xmachines/play-vue";
|
|
498
|
+
import { defineCatalog } from "@json-render/core";
|
|
499
|
+
import { schema } from "@xmachines/play-vue";
|
|
500
|
+
import { z } from "zod";
|
|
501
|
+
|
|
502
|
+
const catalog = defineCatalog(schema, {
|
|
503
|
+
components: {
|
|
504
|
+
Home: { props: z.object({ title: z.string() }) },
|
|
505
|
+
Login: { props: z.object({}) },
|
|
506
|
+
},
|
|
507
|
+
actions: {
|
|
508
|
+
login: { params: z.object({ username: z.string() }) },
|
|
509
|
+
logout: {},
|
|
510
|
+
},
|
|
511
|
+
});
|
|
389
512
|
|
|
390
513
|
const registryResult = defineRegistry(catalog, {
|
|
391
|
-
components: {
|
|
514
|
+
components: {
|
|
515
|
+
Home: { template: `<section>{{ props.title }}</section>` },
|
|
516
|
+
Login: { template: `<button @click="on('submit').emit()">Log in</button>` },
|
|
517
|
+
},
|
|
392
518
|
actions: {
|
|
393
519
|
login: async ({ username }) => actor.send({ type: "auth.login", username }),
|
|
394
520
|
logout: async () => actor.send({ type: "auth.logout" }),
|
|
@@ -397,13 +523,30 @@ function App() {
|
|
|
397
523
|
</script>
|
|
398
524
|
```
|
|
399
525
|
|
|
400
|
-
|
|
526
|
+
#### SolidJS
|
|
401
527
|
|
|
402
528
|
```tsx
|
|
403
529
|
import { PlayUIProvider, PlayRenderer, defineRegistry } from "@xmachines/play-solid";
|
|
530
|
+
import { defineCatalog } from "@json-render/core";
|
|
531
|
+
import { schema } from "@xmachines/play-solid";
|
|
532
|
+
import { z } from "zod";
|
|
533
|
+
|
|
534
|
+
const catalog = defineCatalog(schema, {
|
|
535
|
+
components: {
|
|
536
|
+
Home: { props: z.object({ title: z.string() }) },
|
|
537
|
+
Login: { props: z.object({}) },
|
|
538
|
+
},
|
|
539
|
+
actions: {
|
|
540
|
+
login: { params: z.object({ username: z.string() }) },
|
|
541
|
+
logout: {},
|
|
542
|
+
},
|
|
543
|
+
});
|
|
404
544
|
|
|
405
545
|
const registryResult = defineRegistry(catalog, {
|
|
406
|
-
components: {
|
|
546
|
+
components: {
|
|
547
|
+
Home: ({ props }) => <section>{props.title}</section>,
|
|
548
|
+
Login: ({ on }) => <button onClick={() => on("submit").emit()}>Log in</button>,
|
|
549
|
+
},
|
|
407
550
|
actions: {
|
|
408
551
|
login: async ({ username }) => actor.send({ type: "auth.login", username }),
|
|
409
552
|
logout: async () => actor.send({ type: "auth.logout" }),
|
|
@@ -419,15 +562,63 @@ function App() {
|
|
|
419
562
|
}
|
|
420
563
|
```
|
|
421
564
|
|
|
565
|
+
#### Vanilla DOM
|
|
566
|
+
|
|
567
|
+
```typescript
|
|
568
|
+
import { createPlayUI, defineRegistry, schema } from "@xmachines/play-dom";
|
|
569
|
+
import { defineCatalog } from "@json-render/core";
|
|
570
|
+
import { z } from "zod";
|
|
571
|
+
import type { ComponentFn } from "@xmachines/play-dom";
|
|
572
|
+
|
|
573
|
+
const catalog = defineCatalog(schema, {
|
|
574
|
+
components: {
|
|
575
|
+
Home: { props: z.object({ title: z.string() }) },
|
|
576
|
+
Login: { props: z.object({}) },
|
|
577
|
+
},
|
|
578
|
+
actions: {
|
|
579
|
+
login: { params: z.object({ username: z.string() }) },
|
|
580
|
+
logout: {},
|
|
581
|
+
},
|
|
582
|
+
});
|
|
583
|
+
|
|
584
|
+
const Home: ComponentFn<typeof catalog, "Home"> = ({ props }) => {
|
|
585
|
+
const el = document.createElement("section");
|
|
586
|
+
el.textContent = props.title;
|
|
587
|
+
return el;
|
|
588
|
+
};
|
|
589
|
+
|
|
590
|
+
const Login: ComponentFn<typeof catalog, "Login"> = ({ on }) => {
|
|
591
|
+
const el = document.createElement("div");
|
|
592
|
+
const btn = document.createElement("button");
|
|
593
|
+
btn.textContent = "Log in";
|
|
594
|
+
btn.addEventListener("click", () => on("submit").emit());
|
|
595
|
+
el.append(btn);
|
|
596
|
+
return el;
|
|
597
|
+
};
|
|
598
|
+
|
|
599
|
+
const registryResult = defineRegistry(catalog, {
|
|
600
|
+
components: { Home, Login },
|
|
601
|
+
actions: {
|
|
602
|
+
login: async ({ username }) => actor.send({ type: "auth.login", username }),
|
|
603
|
+
logout: async () => actor.send({ type: "auth.logout" }),
|
|
604
|
+
},
|
|
605
|
+
});
|
|
606
|
+
|
|
607
|
+
const mount = createPlayUI(registryResult);
|
|
608
|
+
const disconnect = mount(actor, document.getElementById("app")!);
|
|
609
|
+
|
|
610
|
+
window.addEventListener("beforeunload", () => disconnect());
|
|
611
|
+
```
|
|
612
|
+
|
|
422
613
|
---
|
|
423
614
|
|
|
424
|
-
|
|
615
|
+
### Common Setup Issues (Application Developers)
|
|
425
616
|
|
|
426
|
-
|
|
617
|
+
#### Missing `params` / `query` in context
|
|
427
618
|
|
|
428
619
|
**Error:** `MissingQueryContextError` at runtime when using [`formatPlayRouteTransitions`](../api/@xmachines/play-xstate/functions/formatPlayRouteTransitions.md).
|
|
429
620
|
|
|
430
|
-
**Fix:** Add `params` and `query` fields to your machine context:
|
|
621
|
+
**Fix:** Add `params` and `query` fields to your machine context type and initial value:
|
|
431
622
|
|
|
432
623
|
```typescript
|
|
433
624
|
context: {} as {
|
|
@@ -439,7 +630,7 @@ context: {} as {
|
|
|
439
630
|
context: { params: {}, query: {}, /* ...other fields */ }
|
|
440
631
|
```
|
|
441
632
|
|
|
442
|
-
|
|
633
|
+
#### Missing `id` on routable states
|
|
443
634
|
|
|
444
635
|
**Error:** `MissingStateIdError: State "home" has meta.route "/" but no id`.
|
|
445
636
|
|
|
@@ -453,7 +644,7 @@ home: { meta: { route: "/" } }
|
|
|
453
644
|
home: { id: "home", meta: { route: "/" } }
|
|
454
645
|
```
|
|
455
646
|
|
|
456
|
-
|
|
647
|
+
#### Actor sends events before `start()`
|
|
457
648
|
|
|
458
649
|
**Symptom:** Events are silently dropped; state never changes.
|
|
459
650
|
|
|
@@ -465,7 +656,7 @@ actor.start(); // required before any send()
|
|
|
465
656
|
actor.send({ type: "toggle" });
|
|
466
657
|
```
|
|
467
658
|
|
|
468
|
-
|
|
659
|
+
#### `routeMap` or `actor` recreated on every render (React/SolidJS)
|
|
469
660
|
|
|
470
661
|
**Symptom:** The router bridge disconnects and reconnects on every render.
|
|
471
662
|
|
|
@@ -476,11 +667,11 @@ actor.send({ type: "toggle" });
|
|
|
476
667
|
const routeTree = extractMachineRoutes(appMachine);
|
|
477
668
|
const routeMap = createRouteMapFromTree(routeTree);
|
|
478
669
|
|
|
479
|
-
// ✅ Or memoized inside the component
|
|
670
|
+
// ✅ Or memoized inside the component (React)
|
|
480
671
|
const routeMap = useMemo(() => createRouteMapFromTree(routeTree), [routeTree]);
|
|
481
672
|
```
|
|
482
673
|
|
|
483
|
-
|
|
674
|
+
#### Wrong Node.js version
|
|
484
675
|
|
|
485
676
|
**Error:** `SyntaxError: Cannot use import statement in a module` or TC39 Signals not available.
|
|
486
677
|
|
|
@@ -505,17 +696,19 @@ node --version
|
|
|
505
696
|
| `actor.currentRoute` | `Signal.Computed<string \| null>` — resolved URL from active state's `meta.route` |
|
|
506
697
|
| `actor.currentView` | `Signal.State<PlaySpec \| null>` — view spec from active state's `meta.view` |
|
|
507
698
|
| [`formatPlayRouteTransitions`](../api/@xmachines/play-xstate/functions/formatPlayRouteTransitions.md) | Generates `play.route` handlers from `id` + `meta.route` state pairs |
|
|
508
|
-
| `play.route` event | Navigation event — `to: "#stateId"`, `params`, `query`
|
|
699
|
+
| `play.route` event | Navigation event — `to: "#stateId"`, optional `params`, `query` |
|
|
509
700
|
| `always` guard | Protects states — fires on entry before any event, even on direct URL access |
|
|
701
|
+
| [`extractMachineRoutes`](../api/@xmachines/play-router/functions/extractMachineRoutes.md) | Extracts a `RouteTree` from a state machine — used by framework-integrated router adapters |
|
|
702
|
+
| [`createRouteMapFromTree`](../api/@xmachines/play-router/functions/createRouteMapFromTree.md) | Builds a `RouteMap` from a `RouteTree` for bidirectional state ID ↔ URL lookups |
|
|
703
|
+
| [`connectRouter`](../api/@xmachines/play-dom-router/functions/connectRouter.md) | Connects a vanilla DOM router to an actor — returns a disconnect cleanup function |
|
|
704
|
+
| [`PlayRouterProvider`](../api/@xmachines/play-tanstack-react-router/functions/PlayRouterProvider.md) | React component that connects a `PlayerActor` to TanStack React Router |
|
|
510
705
|
|
|
511
706
|
---
|
|
512
707
|
|
|
513
708
|
## Next Steps
|
|
514
709
|
|
|
515
|
-
- **[
|
|
516
|
-
- **[CONFIGURATION.md](CONFIGURATION.md)** — Environment variables and configuration options
|
|
517
|
-
- **[Routing Patterns](../packages/docs/examples/routing-patterns.md)** — `meta.route`, `play.route`, `always` guards, and parameter routes
|
|
518
|
-
- **[Multi-Router Integration](../packages/docs/examples/multi-router-integration.md)** — All 8 router adapters with full code examples
|
|
519
|
-
- **[Examples Index](../packages/docs/examples/README.md)** — Basic state machine, form validation, and traffic light demos
|
|
520
|
-
- **[API Reference](../packages/docs/api/README.md)** — Auto-generated API docs for all packages
|
|
710
|
+
- **[Architecture](../contributing/architecture.md)** — System design, layers, invariants, and data flow
|
|
521
711
|
- **[Play RFC](../rfc/play.md)** — Complete architectural specification
|
|
712
|
+
- **[API Reference](../api/README.md)** — Auto-generated API docs for all packages
|
|
713
|
+
- **[Examples](../examples/)** — Basic state machine, form validation, routing pattern demos
|
|
714
|
+
- **[Contributing](../../../CONTRIBUTING.md)** — Coding standards, branch conventions, and PR process (contributors)
|
package/guides/signals.md
CHANGED
|
@@ -161,6 +161,6 @@ Failing to clean up watchers causes memory leaks and stale callbacks firing afte
|
|
|
161
161
|
- [Understanding the Actor Model](concepts-actor-model.md) — why the actor owns all signal writes
|
|
162
162
|
- [Understanding State Machines](concepts-state-machines.md) — how state nodes produce the metadata that signals derive
|
|
163
163
|
- [Getting Started](getting-started.md) — hands-on walkthrough using signals to observe an actor
|
|
164
|
-
- [@xmachines/play-signals
|
|
164
|
+
- [@xmachines/play-signals](../api/@xmachines/play-signals/README.md) — API reference
|
|
165
165
|
- [Play RFC](../rfc/play.md) — architectural specification
|
|
166
166
|
- [TC39 Signals proposal](https://github.com/tc39/proposal-signals) — upstream proposal
|
package/guides/state-machines.md
CHANGED
|
@@ -283,6 +283,6 @@ actor.start();
|
|
|
283
283
|
- [Understanding TC39 Signals](signals.md) — how the actor's state is observed by infrastructure
|
|
284
284
|
- [Getting Started](getting-started.md) — step-by-step walkthrough building your first machine and actor
|
|
285
285
|
- [Routing Patterns](../examples/routing-patterns.md) — worked examples of `meta.route` and guards
|
|
286
|
-
- [@xmachines/play-xstate
|
|
286
|
+
- [@xmachines/play-xstate](../api/@xmachines/play-xstate/README.md) — full API reference for [`definePlayer`](../api/@xmachines/play-xstate/functions/definePlayer.md), [`PlayerActor`](../api/@xmachines/play-xstate/classes/PlayerActor.md), guard combinators
|
|
287
287
|
- [XState v5 documentation](https://stately.ai/docs/xstate) — upstream state machine library documentation
|
|
288
288
|
- [Play RFC](../rfc/play.md) — complete architectural specification
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xmachines/docs",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.53",
|
|
4
4
|
"description": "Documentation for XMachines",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"documentation",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"test": "vitest run"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@xmachines/shared": "1.0.0-beta.
|
|
54
|
+
"@xmachines/shared": "1.0.0-beta.53",
|
|
55
55
|
"oxfmt": "^0.47.0",
|
|
56
56
|
"oxlint": "^1.62.0",
|
|
57
57
|
"typedoc": "^0.28.19",
|