Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create a flow.navigate property to allow falling back to server-side routing in Vaadin Router #6219

Closed
vlukashov opened this issue Aug 12, 2019 · 1 comment
Closed

Create a flow.navigate property to allow falling back to server-side routing in Vaadin Router #6219

vlukashov opened this issue Aug 12, 2019 · 1 comment
Assignees
@manolo
Labels
hilla Issues related to Hilla
Milestone
CCDM MVP

Comments

@vlukashov
Copy link

vlukashov commented Aug 12, 2019 •
edited

When using client-side routing in a Vaadin 15+ app I want to have a flow.navigate instance property on the flow object that works as a custom route action for Vaadin Router, so that I can delegate to server-side routing from the client-side routing config.

Example:

import {Router} from '@vaadin/router';
import {Flow} from '@vaadin/flow';

const flow = new Flow({
  imports: () => import('./generated/flow-imports.js')
});

const routes = [
 {
   path: '/',
   module: import('./main-layout'),
   children: [
     {
       path: '/client-side',
       module: () => import('./client-side-view')
     },
     {
       // fall back to server-side routing if no client-side routes match
       path: '(.*)',
       action: flow.navigate
     }
   ]
 }
];

const router = new Router(document.body);
router.setRoutes(routes);
@Route(value = "server-side")
public class ServerSideView extends Div {
}
  • Create a DOM structure for a given URL and return to the client to be inserted into the router outlet by Vaadin Router. It’s based on a server-side @Route class. This is the API to use in the client-side router configuration.
  • Flow's client engine should be initialized the first time the method is run
  • When using this method, Flow should not listen to router-link and popstate events. Furthermore, Flow should not attach the navigation target directly to <body>, but other things attached to the UI (e.g. <vaadin-notification> instances) should still be attached. One way of doing this would be that the navigation target component is attached as a virtual child and then the id of that child is passed back to the client. (This is thus the same mechanism as is used by Flow's component renderer)
  • The navigate method needs to be bound to the right flow instance, so it cannot just be a regular class function. Constructor could do something like this.navigate = this.internalNavigate.bind(this);.
  • Need to test what happens when someone calls navigate before the previous call has resolved?
  • Does not need to fire any server-side navigation events at this point (will be implemented separately)
  • Server-side handler that processes the ‘navigate’ requests
  • Could/should potentially be implemented using ReturnChannelMap
@vlukashov vlukashov added the hilla Issues related to Hilla label Aug 12, 2019
@project-bot project-bot bot added this to Inbox - needs triage in OLD Vaadin Flow ongoing work (Vaadin 10+) Aug 12, 2019
@pleku pleku added hilla Issues related to Hilla and removed hilla Issues related to Hilla labels Aug 12, 2019
@pleku pleku removed this from Inbox - needs triage in OLD Vaadin Flow ongoing work (Vaadin 10+) Aug 12, 2019
@vlukashov vlukashov added this to the CCDM MVP milestone Aug 12, 2019
@manolo
Copy link
Member

manolo commented Aug 12, 2019 •
edited

  • Create a DOM structure for a given URL and return to the client to be inserted into the router outlet by Vaadin Router. It’s based on a server-side @route class. This is the API to use in the client-side router configuration.

  • Flow's client engine should be initialized the first time the method is run.

  • When using this method, Flow should not listen to router-link and popstate events. Furthermore, Flow should not attach the navigation target directly to , but other things attached to the UI (e.g. instances) should still be attached. One way of doing this would be that the navigation target component is attached as a virtual child and then the id of that child is passed back to the client. (This is thus the same mechanism as is used by Flow's component renderer)

  • The navigate method needs to be bound to the right flow instance, so it cannot just be a regular class function. Constructor could do something like this.navigate = this.internalNavigate.bind(this);.

  • Need to test what happens when someone calls navigate before the previous call has resolved?
    Does not need to fire any server-side navigation events at this point (will be implemented separately)

  • Server-side handler that processes the ‘navigate’ requests

  • Could/should potentially be implemented using ReturnChannelMap

@manolo manolo mentioned this issue Aug 13, 2019
Merged
@manolo manolo closed this as completed Aug 15, 2019
@vlukashov vlukashov mentioned this issue Feb 27, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@manolo manolo

Labels
hilla Issues related to Hilla
Projects
None yet
Milestone
CCDM MVP
Development

No branches or pull requests
3 participants
@manolo @pleku @vlukashov