Barebones router #51
Replies: 1 comment
-
I see where you're coming from with this, but I think it could be even simpler, and doesn't need to be integrated into Arrow at all. Here's an attempt, briefly adapted from this post: https://gist.github.com/irskep/704747b7a36fddd0cae7ffdf459427da Essentially you treat the "router" as a class that calls functions when patterns are matched. You can add fanciness around making route syntax and URL building easier, but at the end of the day plain function calls is a good level of abstraction for an un-opinionated, minimalistic library. To render different things based on the URL, you'd use a reactive object and have your components watch it. const store = reactive({activePage: "profile"});
const router = new Router();
router.add(new RegExp('/profile'), () => store.route = "profile");
router.add(new RegExp('/feed'), () => store.route = "feed");
const pages = {
profile: function() {
return html`<div>Profile</div>`;
},
feed: function() {
return html`<div>Feed</div>`;
},
}
html`
<div>
${() => pages[store.activePage]}
</div>
`(document.body) You could just use Navigo, which is "big" at 10KB but pretty much does this. |
Beta Was this translation helpful? Give feedback.
-
Don't get me wrong, I'm excited about what ArrowJS might be able to accomplish in the future, and I'm all for people hooking it up to Remix Router and the like. Personally, in the spirit of ArrowJS believing in the power of modern vanilla JS, I wanted to see what an MVP router might look like.
By specifying an arbitrary value to check and "simply" leveraging regex (I almost said that with a straight face 😅) , you can do things like:
Of course, you could create various helpers to make setup easier, like coming up with your own syntax for mapping to regexes. This is just a jumping off point.
Beta Was this translation helpful? Give feedback.
All reactions