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.

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

Can I pass a rootNode to nanohref? #704

Open
m90 opened this issue Sep 4, 2019 · 5 comments
Open

Can I pass a rootNode to nanohref? #704

m90 opened this issue Sep 4, 2019 · 5 comments

Comments

@m90
Copy link

m90 commented Sep 4, 2019

I am trying to mount a choo application in an "application shell" that is provided by a static site generator.

I would expect the routing behavior to be limited to the scope of choo's application host, yet nanohref will try to handle all anchors being clicked.

Looking at the nanohref docs, this behavior seems to be supported by passing a second rootNode argument to the nanohref function: https://github.com/choojs/nanohref#nanohrefhandlerlocation-rootnode

Looking at how choo itself is using nanohref it looks like passing a second argument is not intended: https://github.com/choojs/nanohref#nanohrefhandlerlocation-rootnode

This leads me to two questions:

  1. Is it possible to achieve this behavior in some other way?
  2. In case no, would you accept a PR that enables passing the application root to nanohref as well? In this case I have to admit I am slightly unsure how the API for this could even look like considering how there is basically zero surface area for options in choo.
@m90
Copy link
Author

m90 commented Sep 4, 2019

Hmm, maybe I am missing something here as I tried the following:

I hacked into the choo version in my node_modules adding the root node argument to the nanohref call manually, yet choo somehow still tried to handle clicks outside of the host element.

@goto-bus-stop
Copy link
Member

choo hasn't really supported being used in like a "sub application" style but it could be really good for that, so I think any feature that will help it excel in that use case would be really welcome :)

The behaviour in your second post kinda looks like a bug in nanohref to me, this is the code that uses the rootNode value:

https://github.com/choojs/nanohref/blob/80c11c4fdb1c731aad1b94f4c93b0c386b97c69c/index.js#L21-L27

So when you click something, it walks up the tree until it finds either an <a href> or arrives at the rootNode. but if you click a link outside the rootNode, it will still happily find the <a href>.

@m90
Copy link
Author

m90 commented Sep 4, 2019

Assuming the bug in nanohref is fixed, it should not be too hard to get this into choo itself, but I am really unsure where the option belongs.

A few things that could be done that I'm not a real fan of any yet:

  • Add a new key to the options passed to choo([opts]). I can't even come up with a name for this.
  • Allow a DOM Element to be passed instead of true|false to opts.href which scopes nanohref down to children of that element.
  • Add a second optional argument to app.mount that scopes the router to the given selector. I'm not sure if this actually works because of app.start.

I think option 2 would probably be the least invasive, but it's also not really what I'd call an intuitive API. Ugh.

@m90
Copy link
Author

m90 commented Sep 16, 2019

Is there any input on this one as well as choojs/nanohref#13 - I'd still love to implement this in one way or the other as it's a hard requirement of what I'm working on right now.

@blahah
Copy link
Contributor

blahah commented Jun 23, 2020

You can compose the dependencies quite simply to achieve this. See for example: https://github.com/graforlock/choo-detached

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants