Use of dash.register_page() with DashBlueprint()?

[andsommerarau]

Hello Dash Extensions Developers,

I've been enjoying using the DashBlueprints feature from dash-extensions, which is, as I understand, inspired by Flask's Blueprints. It's been very beneficial in structuring my Dash applications.

In your documentation, the use of DashBlueprints is demonstrated with "pages" from the dash-labs plugin (DashBlueprints documentation). Given the recent development where Dash has included an official "pages" feature using a different structure, the method described in the documentation seems to be outdated (Assuming that the 'pages' feature of dash_labs is superseded). Since Dash has introduced its own official "pages" implementation, I'm curious about the correct way to employ DashBlueprints with Dash's built-in "pages" and how to make use of dash.register_page().

To provide a clear picture, below is the example using the official Dash "pages" feature but without DashBlueprints:

### File: pages/page1.py ########

import dash
from dash import html, dcc, callback, Input, Output

dash.register_page(__name__)

layout = html.Div(children=[
    html.H1(children='This is our Analytics page'),
	html.Div([ "Select a city: ",  dcc.RadioItems(['New York City', 'Montreal','San Francisco'],
                         'Montreal',  id='analytics-input')
    ]),	html.Br(),
    html.Div(id='analytics-output'),
])

@callback(
    Output('analytics-output', 'children'),
    Input('analytics-input', 'value')
)
def update_city_selected(input_value):
    return f'You selected: {input_value}'

### File: app.py ########
from dash import Dash, html, dcc
import dash

app = Dash(__name__, use_pages=True)

app.layout = html.Div([	
    html.H1('Multi-page app with Dash Pages'),
    html.Div( 
          [ html.Div( dcc.Link( f"{page['name']} - {page['path']}", href=page["relative_path"]) )
            for page in dash.page_registry.values() ]
    ),
    dash.page_container
])

if __name__ == '__main__':
	app.run(debug=True)

If I want to transform the above example into a DashBlueprint, my main point of confusion arises when using bp = DashBlueprint(): Should I utilize bp.register(app, "page name") and access the app object when I'm within the page1.py file, which ideally shouldn't contain the app object? As you can see from the above code snippets, Dash "pages" are registered using dash.register_page(__name__), eliminating the need to use the app object.

Any help or guidance you can provide to transform above example in DashBlueprint would be greatly appreciated. Thank you for your time and effort put into developing this helpful library.

Best regards,
Andres

[Emil Haldrup Eriksen]

Yes, the current code was written before the pages feature was merged. It's on my TODO list to update the library to support the new pages implementation. If you have ideas/preferences for how the syntax should/could look, please post them here, and I'll take them into consideration :)