A router that uses Fulcro dynamic queries to optimize query performance on rendering and provides a number of useful features such as easy composition, control over route targeting, on-screen component vetoes of routing requests, etc.
NOTE: This router is not concerned with HTML5 history events or URL management. This router is intended to be usable in server-side rendering, React Native, and anywhere else Fulcro might be used. Therefore it is not tied to a particular rendering platform's idea of location management (i.e. URLs).
The structure of the route composition (and its representation as a sequence of string path components) is intended to be easy to integrate with HTML5 history and URL control.
A router that uses Fulcro dynamic queries to optimize query performance on rendering and provides a number of useful features such as easy composition, control over route targeting, on-screen component vetoes of routing requests, etc. NOTE: This router is *not* concerned with HTML5 history events or URL management. This router is intended to be usable in server-side rendering, React Native, and anywhere else Fulcro might be used. Therefore it is not tied to a particular rendering platform's idea of location management (i.e. URLs). The structure of the route composition (and its representation as a sequence of string path components) is intended to be easy to integrate with HTML5 history and URL control.
INTERNAL USE ONLY. Not guaranteed to be available at runtime in production builds. This is used to aid in giving development-time warnings/errors.
Class of the routing target component, available in the notifications fns (:will-enter, :route-cancelled, :will-leave)
INTERNAL USE ONLY. Not guaranteed to be available at runtime in production builds. This is used to aid in giving development-time warnings/errors. Class of the routing target component, available in the notifications fns (:will-enter, :route-cancelled, :will-leave)
(accepts-route? component path)
Returns true if the given component is a router that manages a route target that will accept the given path.
Returns true if the given component is a router that manages a route target that will accept the given path.
(all-reachable-routers state-map component-class)
Returns a sequence of all of the routers reachable in the query of the app.
Returns a sequence of all of the routers reachable in the query of the app.
Mutation: Indicate that a given route is ready and should show the result.
router - The ident of the router, with metadata :component that is the class of the router. target - The ident of the target route, with metadata :component that is the class of the target.
Mutation: Indicate that a given route is ready and should show the result. router - The ident of the router, with metadata :component that is the class of the router. target - The ident of the target route, with metadata :component that is the class of the target.
(ast-node-for-live-router app {:keys [component children] :as ast-node})
Returns the AST node for a query that represents the closest "live" (on-screen) router
ast - A query AST node
Returns an AST node or nil if none is found.
Returns the AST node for a query that represents the closest "live" (on-screen) router ast - A query AST node Returns an AST node or nil if none is found.
(ast-node-for-route {:keys [component children] :as ast-node} path)
Returns the AST node for a query that represents the router that has a target that can accept the given path. This is a breadth-first search.
ast - A query AST node path - A vector of the current URI segments.
Returns an AST node or nil if none is found.
Returns the AST node for a query that represents the router that has a target that can accept the given path. This is a breadth-first search. ast - A query AST node path - A vector of the current URI segments. Returns an AST node or nil if none is found.
(can-change-route? this-or-app)
(can-change-route? this-or-app relative-class)
Returns true if the active on-screen targets indicate they will allow navigation.
NOTE: If your route targets have an :allow-route-change?
, then that will be used to determine if the route can
be abandoned; otherwise :will-leave
will be called to answer the question; however, this USE of will-leave
is DEPRECATED (though the hook is NOT because it serves another purpose). If you side-effect in :will-leave
this could cause strange
behavior throughout the application. It is recommended that your targets implement :allow-route-change?
if they need
to prevent routing, and only leverage :will-leave
to do things like cancel in-progress loads.
Returns true if the active on-screen targets indicate they will allow navigation. NOTE: If your route targets have an `:allow-route-change?`, then that will be used to determine if the route can be abandoned; otherwise `:will-leave` will be called to answer the question; however, this USE of `will-leave` is DEPRECATED (though the hook is NOT because it serves another purpose). If you side-effect in `:will-leave` this could cause strange behavior throughout the application. It is recommended that your targets implement `:allow-route-change?` if they need to prevent routing, and only leverage `:will-leave` to do things like cancel in-progress loads.
(change-route! this new-route)
(change-route! this new-route timeouts-and-params)
Trigger a route change.
this
- The component (or app) that is causing the route change.new-route
- A vector of URI components to pass to the router.timeouts-and-params
- A map of additional parameters and route timeouts that affect UI during deferred routes:
{:error-timeout ms :deferred-timeout ms}
. Anything extra will appear in the params
of will-enter
.The error timeout is how long to wait (default 5000ms) before showing the error-ui of a route (which must be defined on the router that is having problems). The deferred-timeout (default 100ms) is how long to wait before showing the loading-ui of a deferred router (to prevent flicker).
Trigger a route change. * `this` - The component (or app) that is causing the route change. * `new-route` - A vector of URI components to pass to the router. * `timeouts-and-params` - A map of additional parameters and route timeouts that affect UI during deferred routes: `{:error-timeout ms :deferred-timeout ms}`. Anything extra will appear in the `params` of `will-enter`. The error timeout is how long to wait (default 5000ms) before showing the error-ui of a route (which must be defined on the router that is having problems). The deferred-timeout (default 100ms) is how long to wait before showing the loading-ui of a deferred router (to prevent flicker).
DEPRECATED NAME: Use change-route-relative!
DEPRECATED NAME: Use change-route-relative!
(change-route-relative! this-or-app relative-class-or-instance new-route)
(change-route-relative! app-or-comp
relative-class-or-instance
new-route
timeouts-and-params)
Change the route, starting at the given Fulcro class or instance (scanning for the first router from there). new-route
is a vector
of string components to pass through to the nearest child router as the new path. The first argument is any live component
or the app. The timeouts-and-params
are as in change-route
.
When possible (i.e. no circular references to components) you can maintain better code navigation by
generating new-route
via path-to
. This will allow readers of your code to quickly jump to the actual
components that implement the targets when reading the code.
You may include the special keyword :..
any number of times at the beginning of new-route
to indicate the
parent(s) of relative-class-or-instance
, which allows you to do relative routing to a sibling.
(dr/change-route-relative this this [:.. "sibling-pattern"])
Change the route, starting at the given Fulcro class or instance (scanning for the first router from there). `new-route` is a vector of string components to pass through to the nearest child router as the new path. The first argument is any live component or the app. The `timeouts-and-params` are as in `change-route`. When possible (i.e. no circular references to components) you can maintain better code navigation by generating `new-route` via `path-to`. This will allow readers of your code to quickly jump to the actual components that implement the targets when reading the code. You may include the special keyword `:..` any number of times at the beginning of `new-route` to indicate the parent(s) of `relative-class-or-instance`, which allows you to do relative routing to a sibling. ``` (dr/change-route-relative this this [:.. "sibling-pattern"]) ```
(current-route this-or-app)
(current-route this-or-app relative-class-or-instance)
Returns the current active route, starting from the relative Fulcro class or instance.
Any component using this as a basis for rendering will need to add the following to their query to ensure the props of that component change on route changes:
[::uism/asm-id fq-router-kw]
where fq-router-kw
is a keyword that has the exact namespace and name of the router you're interested in. If you want
to just over-render you can use a quoted _
instead.
Returns the current active route, starting from the relative Fulcro class or instance. Any component using this as a basis for rendering will need to add the following to their query to ensure the props of that component change on route changes: ``` [::uism/asm-id fq-router-kw] ``` where `fq-router-kw` is a keyword that has the exact namespace and name of the router you're interested in. If you want to just over-render you can use a quoted `_` instead.
(current-route-class this)
Get the class of the component that is currently being routed to.
Get the class of the component that is currently being routed to.
(defrouter router-sym arglist options & body)
Define a router.
The arglist is [this props]
, which are just like defsc. The props will contains :current-state and :pending-path-segment.
The options are:
:router-targets
- (REQUIRED) A vector of ui components that are router targets. The first one is considered the "default"
(purely for the purpose of initial state; you always need to explicitly route to a particular target).
Other defsc options - (LIMITED) You may not specify query/initial-state/protocols/ident, but you can define things like react
lifecycle methods. See defsc.
:always-render-body?
- (OPTIONAL) When true this router expects that you will supply a render body, and
it will always be rendered. The props available in the body will include:
:current-state
- The state of the routing state machine. (:initial, :pending, :failed, :routed):route-factory
- A factory that can generate the current route.:route-props
- The props that should be passed to the route factory. You can augment these with computed if you
wish. The router normally passes computed through like so: (route-factory (comp/computed route-props (comp/get-computed this)))
:pending-path-segment
- The route that we're going to (when in pending state).The optional body, if defined, will only be used if the router has the :always-render-body?
option set or
it is in one of the following states:
:initial
- No route is set.:pending
- A deferred route is taking longer than expected (configurable timeout, default 100ms):failed
- A deferred route took longer than can reasonably be expected (configurable timeout, default 5s)otherwise the actual active route target will be rendered.
Define a router. The arglist is `[this props]`, which are just like defsc. The props will contains :current-state and :pending-path-segment. The options are: `:router-targets` - (REQUIRED) A *vector* of ui components that are router targets. The first one is considered the "default" (purely for the purpose of initial state; you always need to explicitly route to a particular target). Other defsc options - (LIMITED) You may not specify query/initial-state/protocols/ident, but you can define things like react lifecycle methods. See defsc. `:always-render-body?` - (OPTIONAL) When true this router expects that you will supply a render body, and it will always be rendered. The props available in the body will include: - `:current-state` - The state of the routing state machine. (:initial, :pending, :failed, :routed) - `:route-factory` - A factory that can generate the current route. - `:route-props` - The props that should be passed to the route factory. You can augment these with computed if you wish. The router normally passes computed through like so: `(route-factory (comp/computed route-props (comp/get-computed this)))` - `:pending-path-segment` - The route that we're going to (when in pending state). The optional body, if defined, will *only* be used if the router has the `:always-render-body?` option set or it is in one of the following states: - `:initial` - No route is set. - `:pending` - A deferred route is taking longer than expected (configurable timeout, default 100ms) - `:failed` - A deferred route took longer than can reasonably be expected (configurable timeout, default 5s) otherwise the actual active route target will be rendered.
(evaluate-relative-path relative-instance new-route)
Takes an on-screen instance of a react element and a new route (vector of strings) and returns a vector containing either the original arguments, or an evaluation of relative navigation up the live routing tree.
If new-route
starts with :..
(any number of times) then this function finds (and returns) the parent router
and the new route stripped of :..
prefix.
For example, say you were in a target instance that has a parent router, which in turn has a parent router called
SomeRouter
. Then:
(dr/evaluate-relative-path this [:.. :.. "some-target"])
=> [SomeRouter ["some-target"]]
This function does not work on classes. It is meant for live evaluation of on-screen instances to enable relative routing based on the actual on-screen route targets.
CAN return nil
for the router if no such parent is found.
Returns unmodified input argument if new-route
does not begin with :..
.
Takes an on-screen *instance* of a react element and a new route (vector of strings) and returns a vector containing either the original arguments, or an evaluation of relative navigation up the live routing tree. If `new-route` starts with `:..` (any number of times) then this function finds (and returns) the parent *router* and the new route stripped of `:..` prefix. For example, say you were in a target instance that has a parent router, which in turn has a parent router called `SomeRouter`. Then: ``` (dr/evaluate-relative-path this [:.. :.. "some-target"]) => [SomeRouter ["some-target"]] ``` This function does *not* work on classes. It is meant for live evaluation of on-screen instances to enable relative routing based on the actual on-screen route targets. CAN return `nil` for the router if no such parent is found. Returns unmodified input argument if `new-route` does not begin with `:..`.
(get-allow-route-change? this)
Returns the function of a route target to be called with the current component and props.
If it returns true
then the routing operation can continue. If it returns false
then whatever new route was requested will be completely abandoned. This handler MUST NOT side-effect, and
may be called multiple times on a single route request.
Returns the function of a route target to be called with the current component and props. If it returns `true` then the routing operation can continue. If it returns `false` then whatever new route was requested will be completely abandoned. This handler MUST NOT side-effect, and may be called multiple times on a single route request.
(get-route-cancelled class)
Returns the function that should be called if this target was in a deferred state and a different routing choice was made. Is given the same route parameters that were sent to will-enter
.
Returns the function that should be called if this target was in a deferred state and a different routing choice was made. Is given the same route parameters that were sent to `will-enter`.
(get-targets router)
Returns a set of classes to which this router routes.
Returns a set of classes to which this router routes.
(get-will-enter class)
Returns the function that is called before a route target is activated (if the route segment of interest has changed and the target of the result is this target). MUST return (r/route-immediate ident) or (r/route-deferred ident) to indicate what ident should be used in app state to connect the router's join. If deferred, the router must cause a call to the r/target-ready mutation (or use the target-ready* mutation helper) with a {:target ident} parameter to indicate that the route target is loaded and ready for display.
params
will be a map from any keywords found in route-segment
to the string value of that path element.
WARNING: This method MUST be side-effect free.
Returns the function that is called before a route target is activated (if the route segment of interest has changed and the target of the result is this target). MUST return (r/route-immediate ident) or (r/route-deferred ident) to indicate what ident should be used in app state to connect the router's join. If deferred, the router must cause a call to the r/target-ready mutation (or use the target-ready* mutation helper) with a {:target ident} parameter to indicate that the route target is loaded and ready for display. `params` will be a map from any keywords found in `route-segment` to the string value of that path element. WARNING: This method MUST be side-effect free.
(get-will-leave this)
Returns the function of a route target to be called with
the current component and props. If it returns true
then the routing operation will continue. If it returns false
then whatever new route was requested will be completely abandoned. If this component has a allow-route-change?
then the return value of will-leave will be ignored.
Returns the function of a route target to be called with the current component and props. If it returns `true` then the routing operation will continue. If it returns `false` then whatever new route was requested will be completely abandoned. If this component has a `allow-route-change?` then the return value of will-leave will be ignored.
(initialize! app)
Initialize the routing system. This ensures that all routers have state machines in app state.
Initialize the routing system. This ensures that all routers have state machines in app state.
(into-path prefix TargetClass & path-args)
Returns the given prefix
with the TargetClass segment appended onto it, replacing the final elements with the
given (optional) path args.
(defsc X [_ _]
{:route-segment ["a" :b]})
(into ["f" "g"] X "22") ; => ["f" "g" "a" "22"]
Returns the given `prefix` with the TargetClass segment appended onto it, replacing the final elements with the given (optional) path args. ``` (defsc X [_ _] {:route-segment ["a" :b]}) (into ["f" "g"] X "22") ; => ["f" "g" "a" "22"] ```
(matching-prefix route-segment actual-path)
Returns the elements of actual-path that match the route-segment definition.
Returns the elements of actual-path that match the route-segment definition.
(path-to & targets-and-params)
Convert a sequence of router targets and parameters into a vector of strings that represents the target route. Parameters can be sequenced inline:
(defsc A [_ _]
{:route-segment ["a" :a-param]})
(defsc B [_ _]
{:route-segment ["b" :b-param]})
(route-segment A a-param1 B b-param ...)
where the parameters for a target immediately follow the component that requires them. Alternatively
one can specify all of the parameters at the end as a single map using the parameter names that are used in
the component :route-segment
itself:
(defsc A [_ _]
{:route-segment ["a" :a-param]})
(route-segment A B C D {:a-param 1})
Convert a sequence of router targets and parameters into a vector of strings that represents the target route. Parameters can be sequenced inline: ``` (defsc A [_ _] {:route-segment ["a" :a-param]}) (defsc B [_ _] {:route-segment ["b" :b-param]}) (route-segment A a-param1 B b-param ...) ``` where the parameters for a target immediately follow the component that requires them. Alternatively one can specify all of the parameters at the end as a single map using the parameter names that are used in the component `:route-segment` itself: ``` (defsc A [_ _] {:route-segment ["a" :a-param]}) (route-segment A B C D {:a-param 1}) ```
(proposed-new-path this-or-app relative-class-or-instance new-route)
(proposed-new-path this-or-app
relative-class-or-instance
new-route
timeouts-and-params)
Internal algorithm: Returns a sequence of idents of the targets that the new-route
goes through by analyzing the current
application query and state.
Internal algorithm: Returns a sequence of idents of the targets that the `new-route` goes through by analyzing the current application query and state.
(resolve-path resolved-components params)
(resolve-path StartingClass RouteTarget params)
Attempts to resolve a path from StartingClass to the given RouteTarget. Can also be passed resolved-components
, which
is the output of resolve-path-components
.
Returns a vector of route segments. Any keywords in the result will be replaced by the values from params
, if present.
Returns nil if no path can be found.
Attempts to resolve a path from StartingClass to the given RouteTarget. Can also be passed `resolved-components`, which is the output of `resolve-path-components`. Returns a vector of route segments. Any keywords in the result will be replaced by the values from `params`, if present. Returns nil if no path can be found.
(resolve-target app new-route)
Given a new-route path (vector of strings): resolves the target (class) that is the ultimate target of that path.
Given a new-route path (vector of strings): resolves the target (class) that is the ultimate target of that path.
(retry-route! denied-target-instance relative-root path)
Retry a route that the receiving component just denied, and ignore this target's answer. All other targets will still
be asked. This is primarily used when you want to be able to use js/confirm in a component to ask the user if
they "really mean to navigate away". You MUST pass the arguments that :route-denied
received
or you can easily cause an infinite loop. Other on-screen targets can still potentially abort the route.
Retry a route that the receiving component just denied, and ignore this target's answer. All other targets will still be asked. This is primarily used when you want to be able to use js/confirm in a component to ask the user if they "really mean to navigate away". You MUST pass the arguments that `:route-denied` received or you can easily cause an infinite loop. Other on-screen targets can still potentially abort the route.
(route-cancelled class route-params)
Universal CLJC version of route-cancelled. Don't use the protocol method in CLJ.
Universal CLJC version of route-cancelled. Don't use the protocol method in CLJ.
(route-handler {:com.fulcrologic.fulcro.ui-state-machines/keys [app event-data]
:as env})
(route-segment class)
Returns a vector that describes the sub-path that a given route target represents. String elements represent explicit path elements, and keywords represent variable values (which are always pulled as strings).
Returns a vector that describes the sub-path that a given route target represents. String elements represent explicit path elements, and keywords represent variable values (which are always pulled as strings).
(route-target router-class path)
Given a router class and a path segment, returns the class of that router's target that accepts the given URI path, which is a vector of (string) URI components.
Returns nil if there is no target that accepts the path, or a map containing:
{:target class :matching-prefix prefix}
where class
is the component class that accepts the path (the target, NOT the router), and matching-prefix
is the
portion of the path that is accepted by that class.
NOTE: If more than one target matches, then the target with the longest match will be returned. A warning will be printed if more than one match of equal length is found.
Given a router class and a path segment, returns the class of *that router's* target that accepts the given URI path, which is a vector of (string) URI components. Returns nil if there is no target that accepts the path, or a map containing: {:target class :matching-prefix prefix} where `class` is the component class that accepts the path (the target, NOT the router), and `matching-prefix` is the portion of the path that is accepted by that class. NOTE: If more than one target matches, then the target with the longest match will be returned. A warning will be printed if more than one match of equal length is found.
(signal-router-leaving app-or-comp relative-class-or-instance new-route)
(signal-router-leaving app-or-comp
relative-class-or-instance
new-route
timeouts-and-params)
Tell active routers that they are about to leave the screen. Returns false if any of them deny the route change.
Tell active routers that they are about to leave the screen. Returns false if any of them deny the route change.
(subpath TargetClass & path-args)
Returns the route segment of the given TargetClass with the trailing elements replaced by path-args.
(defsc X [_ _]
{:route-segment ["a" :b]})
(subpath X "22") ; => ["a" "22"]
Returns the route segment of the given TargetClass with the trailing elements replaced by path-args. ``` (defsc X [_ _] {:route-segment ["a" :b]}) (subpath X "22") ; => ["a" "22"] ```
(target-denying-route-changes this-or-app)
(target-denying-route-changes this-or-app relative-class)
This function will return the first mounted instance of a route target that is currently indicating it would
deny a route change. If a relative-class
is given then it only looks for targets that would deny a change within
that router's subtree.
This function will return the first mounted instance of a route target that is currently indicating it would deny a route change. If a `relative-class` is given then it only looks for targets that would deny a change within that router's subtree.
Mutation: Indicate that a target is ready.
Mutation: Indicate that a target is ready.
(target-ready! component-or-app target)
Indicate a target is ready. Safe to use from within mutations.
target - The ident that was originally listed as a deferred target.
Indicate a target is ready. Safe to use from within mutations. target - The ident that was originally listed as a deferred target.
(validate-route-targets router-instance)
Run a runtime validation on route targets to verify that they at least declare a route-segment that is a vector.
Run a runtime validation on route targets to verify that they at least declare a route-segment that is a vector.
(will-enter class app params)
Universal CLJC version of will-enter.
Universal CLJC version of will-enter.
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close