refactor!: streamline and improve applayout api

solara/components/__init__.py

@@ -73,5 +73,4 @@
     logger = logging.getLogger("solara.components")
     logger.warning(f"Default container {main.default_container} not found in solara.components. Defaulting to Column.")
 
-# TODO: When Solara 2.0 releases Column should be replaced with Fragment
-reacton.core._default_container = _container or Column  # noqa: F405
+reacton.core._default_container = _container or Fragment  # noqa: F405

solara/components/applayout.py

@@ -196,9 +196,10 @@ def AppLayout(
     children=[],
     sidebar_open=True,
     title=None,
+    show_app_bar: Optional[bool] = None,
     navigation=True,
-    toolbar_dark=True,
-    color: Optional[str] = "primary",
+    toolbar_dark: Optional[bool] = None,
+    color: Optional[str] = None,
     classes: List[str] = [],
     style: Optional[Union[str, Dict[str, str]]] = None,
 ):
@@ -222,9 +223,14 @@ def AppLayout(
 
     # Arguments
 
-     * `children`: The children of the AppLayout. The first child is used as the sidebar content, the rest as the main content.
+     * `children`: The children of the AppLayout. Note: Since Solara 2.0, the first child is no longer placed in the sidebar.
+        Use [Sidebar](/documentation/components/layout/sidebar) instead.
      * `sidebar_open`: Whether the sidebar is open or not.
      * `title`: The title of the app shown in the app bar, can also be set using the [Title](/documentation/components/page/title) component.
+     * `show_app_bar`: Whether the app bar should be shown. If `None` (the default), `AppBar` is shown if:
+         * There are one or more sibling routes to the current page.
+         * **OR**: There are one or more children of the `AppBar` component.
+         * **OR**: There are one or more children of the `AppBarTitle` component.
      * `toolbar_dark`: Whether the toolbar should be dark or not.
      * `navigation`: Whether the navigation tabs based on routing should be shown.
      * `color`: The color of the toolbar.
@@ -243,18 +249,10 @@ def AppLayout(
 
     sidebar_open, set_sidebar_open = solara.use_state_or_update(sidebar_open)
     # remove the appbar from the children
-    children_without_portal_sources = [c for c in children if c.component != AppBar]
-    use_drawer = len(children_without_portal_sources) > 1
-    children_content = children
-    children_sidebar = []
-    if use_drawer:
-        child_sidebar = children_without_portal_sources.pop(0)
-        children_sidebar = [child_sidebar]
-        children_content = [c for c in children if c is not child_sidebar]
-    children_sidebar = children_sidebar + sidebar_portal.use_portal()
+    children_content = [c for c in children if c.component != AppBar]
+    children_sidebar = sidebar_portal.use_portal()
+    use_drawer = len(children_sidebar) > 0
     children_appbar = appbar_portal.use_portal()
-    if children_sidebar:
-        use_drawer = True
     title = t.use_title_get() or title
     children_appbartitle = apptitle_portal.use_portal()
     v_slots = []
@@ -267,7 +265,8 @@ def AppLayout(
             tabs_element = child_appbar
             children_appbar.remove(tabs_element)
 
-    show_app_bar = (title and (len(routes) > 1 and navigation)) or bool(children_appbar) or bool(use_drawer) or bool(children_appbartitle) or bool(tabs_element)
+    if show_app_bar is None:
+        show_app_bar = (len(routes) > 1) or bool(children_appbar) or bool(use_drawer) or bool(children_appbartitle) or bool(tabs_element)
 
     if style is None:
         style = {"height": "100%", "max-height": "100%", "overflow": "auto"}
@@ -282,7 +281,7 @@ def set_path(index):
     if (tabs_element is None) and routes and navigation and (len(routes) > 1):
         with solara.lab.Tabs(value=index, on_value=set_path, align="center") as tabs_element:
             for route in routes:
-                name = route.path if route.path != "/" else "Home"
+                name = route.label if route.label is not None else (route.path if route.path != "/" else "Home")
                 solara.lab.Tab(name)
         # with v.Tabs(v_model=index, on_v_model=set_path, centered=True) as tabs:
         #     for route in routes:
@@ -294,7 +293,7 @@ def set_path(index):
         # this version doesn't need to run fullscreen
         # also ideal in jupyter notebooks
         with v.Html(tag="div") as main:
-            if show_app_bar or use_drawer:
+            if show_app_bar:
                 with v.AppBar(color=color, dark=toolbar_dark, v_slots=v_slots):
                     if use_drawer:
                         icon = AppIcon(sidebar_open, on_click=lambda: set_sidebar_open(not sidebar_open), v_on="x.on")

solara/components/head_tag.vue

@@ -1,4 +1,5 @@
-<template><span></span></template>
+<template>
+</template>
 
 <script>
 module.exports = {

solara/settings.py

@@ -54,9 +54,8 @@ class Config:
 
 class MainSettings(BaseSettings):
     check_hooks: str = "warn"
-    allow_reactive_boolean: bool = True
-    # TODO: also change default_container in solara/components/__init__.py
-    default_container: Optional[str] = "Column"
+    allow_reactive_boolean: bool = False
+    default_container: Optional[str] = "Fragment"
 
     class Config:
         env_prefix = "solara_"

solara/toestand.py

@@ -32,6 +32,7 @@
 
 import solara
 import solara.settings
+import solara.server.settings
 from solara import _using_solara_server
 
 T = TypeVar("T")
@@ -355,7 +356,9 @@ def __init__(self, default_value: S, key=None, equals: Callable[[Any, Any], bool
         self.default_value = default_value
         self._unwrap = unwrap
         self.equals = equals
-        self._mutation_detection = solara.settings.storage.mutation_detection
+        self._mutation_detection = solara.settings.storage.mutation_detection is True or (
+            solara.settings.storage.mutation_detection is None and not solara.server.settings.main.mode == "production"
+        )
         if self._mutation_detection:
             frame = _find_outside_solara_frame()
             if frame is not None:
@@ -452,9 +455,11 @@ def mutation_detection_storage(default_value: S, key=None, equals=None) -> Value
 
 
 def default_storage(default_value: S, key=None, equals=None) -> ValueBase[S]:
-    # in solara v2 we will also do this when mutation_detection is None
-    # and we do not run on production mode
-    if solara.settings.storage.mutation_detection is True:
+    # We use mutation detection if it is explicitly enabled, or if it is not explicitly disabled and
+    # We aren't running in production mode
+    if solara.settings.storage.mutation_detection is True or (
+        solara.settings.storage.mutation_detection is None and not solara.server.settings.main.mode == "production"
+    ):
         return mutation_detection_storage(default_value, key=key, equals=equals)
     else:
         return KernelStoreValue[S](default_value, key=key, equals=equals or equals_extra)

solara/website/pages/documentation/getting_started/content/04-tutorials/60-jupyter-dashboard-part1.py

@@ -10,56 +10,54 @@
 
 @solara.component
 def Page():
-    with solara.Column(gap=0):
-        title = "Build your Jupyter dashboard using Solara"
-        solara.Meta(property="og:title", content=title)
-        solara.Meta(name="twitter:title", content=title)
-        solara.Title(title)
+    title = "Build your Jupyter dashboard using Solara"
+    solara.Meta(property="og:title", content=title)
+    solara.Meta(name="twitter:title", content=title)
+    solara.Title(title)
 
-        img = "https://dxhl76zpt6fap.cloudfront.net/public/docs/tutorial/jupyter-dashboard1.webp"
-        solara.Meta(name="twitter:image", content=img)
-        solara.Meta(property="og:image", content=img)
+    img = "https://dxhl76zpt6fap.cloudfront.net/public/docs/tutorial/jupyter-dashboard1.webp"
+    solara.Meta(name="twitter:image", content=img)
+    solara.Meta(property="og:image", content=img)
 
-        description = "Learn how to build a Jupyter dashboard and deploy it as a web app using Solara."
-        solara.Meta(name="description", property="og:description", content=description)
-        solara.Meta(name="twitter:description", content=description)
-        tags = [
-            "jupyter",
-            "jupyter dashboard",
-            "dashboard",
-            "web app",
-            "deploy",
-            "solara",
-        ]
-        solara.Meta(name="keywords", content=", ".join(tags))
-        with solara.Column():
-            Notebook(
-                Path(HERE / "_jupyter_dashboard_1.ipynb"),
-                show_last_expressions=True,
-                execute=False,
-                outputs={
-                    "a7d17a84": None,  # empty output (7)
-                    # original: https://github.com/widgetti/solara/assets/1765949/e844acdb-c77d-4df4-ba4c-a629f92f18a3
-                    "82f1d2f7": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/map.webp"),  # map (11)
-                    "3e7ea361": None,  # (13)
-                    # original: https://github.com/widgetti/solara/assets/1765949/daaa3a46-61f5-431f-8003-b42b5915da4b
-                    "56055643": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/view.webp"),  # View (15)
-                    # original: https://github.com/widgetti/solara/assets/1765949/2f4daf0f-b7d8-4f70-b04a-c27542cffdb0
-                    "c78010ec": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/page.webp"),  # Page (20)
-                    # original: https://github.com/widgetti/solara/assets/1765949/a691d9f1-f07b-4e06-b21b-20980476ad64
-                    "18290364": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/controls.webp"),  # Controls
-                    "0ca68fe8": None,
-                    "fef5d187": None,
-                    # original: https://github.com/widgetti/solara/assets/1765949/f0075ad1-808d-458c-8797-e460ce4dc06d
-                    "af686391": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/full-app.webp"),  # Full app
-                },
-            )
-            solara.Markdown(
-                """
-                Explore this app live at [solara.dev](/apps/jupyter-dashboard-1).
+    description = "Learn how to build a Jupyter dashboard and deploy it as a web app using Solara."
+    solara.Meta(name="description", property="og:description", content=description)
+    solara.Meta(name="twitter:description", content=description)
+    tags = [
+        "jupyter",
+        "jupyter dashboard",
+        "dashboard",
+        "web app",
+        "deploy",
+        "solara",
+    ]
+    solara.Meta(name="keywords", content=", ".join(tags))
+    Notebook(
+        Path(HERE / "_jupyter_dashboard_1.ipynb"),
+        show_last_expressions=True,
+        execute=False,
+        outputs={
+            "a7d17a84": None,  # empty output (7)
+            # original: https://github.com/widgetti/solara/assets/1765949/e844acdb-c77d-4df4-ba4c-a629f92f18a3
+            "82f1d2f7": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/map.webp"),  # map (11)
+            "3e7ea361": None,  # (13)
+            # original: https://github.com/widgetti/solara/assets/1765949/daaa3a46-61f5-431f-8003-b42b5915da4b
+            "56055643": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/view.webp"),  # View (15)
+            # original: https://github.com/widgetti/solara/assets/1765949/2f4daf0f-b7d8-4f70-b04a-c27542cffdb0
+            "c78010ec": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/page.webp"),  # Page (20)
+            # original: https://github.com/widgetti/solara/assets/1765949/a691d9f1-f07b-4e06-b21b-20980476ad64
+            "18290364": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/controls.webp"),  # Controls
+            "0ca68fe8": None,
+            "fef5d187": None,
+            # original: https://github.com/widgetti/solara/assets/1765949/f0075ad1-808d-458c-8797-e460ce4dc06d
+            "af686391": solara.Image("https://dxhl76zpt6fap.cloudfront.net/pages/docs/content/60-jupyter-dashboard-part1/full-app.webp"),  # Full app
+        },
+    )
+    solara.Markdown(
+        """
+        Explore this app live at [solara.dev](/apps/jupyter-dashboard-1).
 
-                Don’t miss the next tutorial and stay updated with the latest techniques and insights by subscribing to our newsletter.
-            """
-            )
-            location = solara.use_router().path
-            MailChimp(location=location)
+        Don’t miss the next tutorial and stay updated with the latest techniques and insights by subscribing to our newsletter.
+    """
+    )
+    location = solara.use_router().path
+    MailChimp(location=location)

solara/widgets/vue/navigator.vue

@@ -1,5 +1,4 @@
 <template>
-  <span></span>
 </template>
 ​
 <script>

tests/unit/toestand_test.py

@@ -759,13 +759,13 @@ def Test():
 
     box, rc = solara.render(Test(), handle_error=False)
 
-    if solara.settings.storage.mutation_detection:
+    if solara.settings.storage.mutation_detection is not False:
         # a copy is made, so get a reference to the actual used object
         df = get_storage(store).value.public
     assert rc.find(v.Alert).widget.children[0] == repr(id(df))
     df2 = df2.copy()
     store.set(df2)
-    if solara.settings.storage.mutation_detection:
+    if solara.settings.storage.mutation_detection is not False:
         df2 = get_storage(store).value.public
     assert rc.find(v.Alert).widget.children[0] == repr(id(df2))