odoo / owl

OWL: A web framework for structured, dynamic and maintainable applications
https://odoo.github.io/owl/
Other
1.14k stars 344 forks source link

Navigation through components in v2.0+ #1573

Closed KKamaa closed 9 months ago

KKamaa commented 9 months ago

Hey guys, so I'm working on an application and I noticed in the newer versions of OWL 2.0+ Links and Router were removed. My question is, how do I move from one component to another?. I know you can pass components as sub components through the static components = { } but in a situation where you move back and forth via buttons it seems cumbersome unless I'm missing something.

I'm using the browser owl.iife.js lib for v2.2.7, also running it in a browser the arrangement matter e.g script_1.js, script_2.js, script_3.js so script_1 cannot use script_3.js component since it "doesn't exist" or rather there is an issue referencing it because of how scripts are loaded. One can use defer and async though its still an issue moving around with buttons from one component to another.

The other option is to make one component and have all functionality in it. Here you can use 'hide' and 'show' when use clicks on a button. However it doesn't necessarily rely on other components unless it follows parent-child relationships. Router allowed for components to be independent and one could make a "linker/navigator" that can be shared to move from one component to another despite unrelated hierarchies. I'm more or less asking how independent components can be referenced from the owl "iife" browser lib incase you have an app that needs buttons to move from page to page without links to html files.

sdegueldre commented 9 months ago

I'm honestly not sure I understand the problem you're trying to describe. The solution here is to implement the router in user code. As far as loading order problems, this is unrelated to owl but you probably want to use a bundler to solve this.

To implement a router, there are two main approaches you could use, one is to use slots that are rendered conditionally, this is what we do in the self-order application in odoo: https://github.com/odoo/odoo/blob/17.0/addons/pos_self_order/static/src/app/router.js https://github.com/odoo/odoo/blob/17.0/addons/pos_self_order/static/src/app/self_order_index.xml

The other would be to declare routes in JS, each route would have an associated component that you would render using <t t-component="routeComponent"/>.

KKamaa commented 9 months ago

@sdegueldre thanks for this really appreciate the feedback. Owl is a good lib that we all appreciate to have.