Router Questions

Next Steps

Create a diagram - drawio? Create the demo project and the Router package Get started

Scenarios for .drawio

User clicks on link how do elements get created and destroyed

How does this work in dev tools?
It should work fine because it is driven by the state change in DomxLocation

1. Router handles body clicks
2. Tests all parent routes
3. If matches prevents default and uses Router.pushState
4. Triggers location-changed with sourceElement
5. DomxLocation parses the location and triggers location-changed on itself DomxRoute picks up the sourceElement from the location-changed event
6. All DomxRouteData elements recieve the event and update their state which includes matches, tail, routeData, queryParams
7. DomxRoute - see routeStateChanged

How do queryParams propagate down / up?

Down is easy, they get put on the element when the location changes Up? use replaceUrlParams? this would push the params on the url then trigger location-changed

• dev tools? should work

Page is navigated to from the browser

• how does state get initialized
• Easy enough, the Router will do this on initialization
• test the routes and triggers location-changed
• dev tools? its initial state

A subroute is activated

• How does this work in dev tools? Should work as normal Could add a hide-when-tail boolean property to DomxRoute in case the sub route takes over the entire page

A subroute is changed

Same as above

• How does this work
• How does this work in dev tools?

Route Not Found

There are three types of not-found behaviors all of them monitor location-changed using the domx-location. They also only have an element and an append-to attribute.

1. If declared in the root document, when location changes, it selects all domx-route elements in the DOM and if none matches it shows itself. It also monitors the route-not-found event and prevents default. If a not-found route is not declared in the root document the link clicks will not be prevented (which in some cases may be desireable)

2. If the element is inside a custom element, when the location changes, it selects all sibling routes within the shadow root (but not routes within routes) to see if none match.

3. If the element is an inline subroute it monitors checks the parents active state on location change and if active, then checks all sibling routes to see if none match.

<domx-route-not-found element="foo-bar">

<domx-route
   pattern="/docs"
>
   <domx-route
      pattern="/readme"
   ></domx-route>
   
   <domx-route-not-found element="docs-not-found" append-to="body"></domx-route-not-found>
</domx-route>