Giters

Instawork / hyperview

Server-driven mobile apps with React Native

Home Page:https://hyperview.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Is _web_ URL routing (and reverse routing) supported?

Invertisment opened this issue · comments

commented

tl;dr: The URL doesn't change when using web and navigating between screens. On mobile it doesn't matter and I want both of them to run from one codebase without HTMX.

I was trying to understand how I could do routing on web because when I navigate screens then the page is simply reloaded into the new URL. I don't think this is a good way to do things.

Does this library support web?

I also tried to use ReactRouter to do navigation for me but it didn't work and I think this library may be coupled to ReactNavigation.

There are two problems with web support:

  1. When I use <text href="" node then it does the XML backend request as it's supposed to but then doesn't wait for it to complete and handles the <a> in a regular way.
    If I run this snippet then I prevent the click from reloading the webpage and navigating to the next page and the view changes properly:Array.from(document.querySelectorAll("a")).forEach(aa => aa.onclick = (e) => e.preventDefault())
  2. When I do preventDefault on a elements in the webpage then the URL doesn't change from the current URL but the view changes properly. I want the URL to change so that I'd be able to use browser's back button as in a normal webpage.
  3. Web should be able to reload the current page (i.e. some soft of deep linking should be supported (also you refer to deep linking in your test app but it's just external app links but not links into the demo app))

Also this issue mentions that ReactNavigation is more complicated than it needs to be: react-navigation/react-navigation#2031

And I think that I don't want to have Hyperview+HTMX (two frontends) because if I'd do it then I'd have to write the same thing in two syntaxes for only two specific screens where I could make HTMX one more usable because of flexible CSS (I can just use a responsive grid framework there) and responsiveness. And I made this calendar where I support... all screens: https://invertisment.gitlab.io/cljcalendar/.
So from what I understand this library will provide a way to decide the screen size on back-end as the front-end includes the screen size header. But I don't really want to care about the screen dimensions on backend because some phones may have a square screen that's more dense than old laptops and also probably even square: https://www.gsmarena.com/samsung_galaxy_z_fold4-11737.php
And I expect that that phone would rerender the same webpage without a reload on the small screen when it's folded. So I don't want to hardcode screen size into the request.

commented

Related comment on an issue: #422 (comment)

Also #459 has a video that has different <a> handling (maybe this library was updated at some point) where they don't need to use .preventDefault and their webpage doesn't reload on a click.
ALso the URL is also not changing to retain an ability to refresh and click back buttons.