feat: use solara instead of voila for rendering the popout widget

.github/workflows/main.yml

@@ -84,7 +84,7 @@ jobs:
       - name: Install ipypopout and test deps
         run: |
           wheel=(dist/*.whl)
-          pip install ${wheel}[test] ${wheel}[voila] "jupyter_server<2"
+          pip install ${wheel}[test] ${wheel}[voila,solara] "jupyter_server<2"
 
       - name: Install playwright browsers
         run: playwright install chromium
@@ -94,7 +94,7 @@ jobs:
 
       - name: Upload Test artifacts
         if: always()
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with:
           name: ipypopout-test-results
           path: test-results

README.md

@@ -9,9 +9,27 @@ Works with:
 
    * Jupyter notebook
    * Jupyter lab
-   * Voila (`version<0.5`)
+   * Voila (`version<0.5` only when running standalone)
    * [Solara](https://github.com/widgetti/solara/) (`version>=1.22`)
 
+In the Jupyter notebook and Jupyter lab environments, ipypopout will use either Solara or Voila to create the popout window. The exist
+
+## Installation
+
+### To use the Solara backend
+
+```
+$ pip install "ipypopout[solara]"
+```
+
+### To use the Voila backend
+
+```
+$ pip install "ipypopout[voila]"
+```
+
+*Note: ipypopout is not compatible with Voila >= 0.5 standalone (e.g. running as `voila mynotebook.ipynb`). If you use Voila >=0.5 as a Jupyter server extension, such as when running Jupyter Lab, ipypopout can only use solara and therefore you need to `pip install ipypopout[solara]`.*
+
 ## Usage
 
 ### With ipywidgets
@@ -82,13 +100,6 @@ Because Solara creates elements instead of widgets, we have to use the `use_effe
 https://github.com/widgetti/ipypopout/assets/1765949/430cae12-2527-404b-9861-610565ac1471
 
 
-## Installation
-
-```
-$ pip install "ipypopout[voila]"
-or
-$ pip install "ipypopout[solara]"
-```
 
 ## API
 
@@ -99,3 +110,7 @@ $ pip install "ipypopout[solara]"
      * `window_name - str`: If a window with the same name is available it will be reused, otherwise a new window is created (defaults to `target_model_id`).
         See [https://developer.mozilla.org/en-US/docs/Web/API/Window/open](https://developer.mozilla.org/en-US/docs/Web/API/Window/open) for more details.
      * `window_features - str`: See: [https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features)
+
+### Which backend to use
+
+Note that ipypopout will automatically detect if it can use Solara, and use it if available, otherwise it will use Voila. If you want to force the use of Voila, you can set the environment variable `IPYPOPOUT_USE_BACKEND=voila`, the other options are `auto` (the default) and `solara` (in case our auto detect fails).

ipypopout/popout_button.py

@@ -7,6 +7,9 @@
 import sys
 
 
+DEFAULT_USE_BACKEND = os.environ.get("IPYPOPOUT_USE_BACKEND", "auto")
+
+
 def get_kernel_id():
     if "solara" in sys.modules:
         import solara
@@ -38,6 +41,8 @@ class PopoutButton(v.VuetifyTemplate):
     target = traitlets.Instance(ipywidgets.Widget, allow_none=True)
     echo_available = traitlets.Bool(False).tag(sync=True)
 
+    use_backend = traitlets.Enum(values=["auto", "voila", "solara"], default_value=DEFAULT_USE_BACKEND).tag(sync=True)
+
     is_displayed = traitlets.Bool(False).tag(sync=True)
     open_window_on_display = traitlets.Bool(False).tag(sync=True)
     open_tab_on_display = traitlets.Bool(False).tag(sync=True)

ipypopout/popout_button.vue

@@ -13,9 +13,22 @@
 </template>
 <script>
 module.exports = {
+  data() {
+    return {solaraFound: false}
+  },
   created() {
-    if (!this.getBaseUrl()) {
+    const baseUrl = this.getBaseUrl();
+    if (!baseUrl) {
       console.info('BaseUrl not found, hiding popout button.');
+    } else {
+      const solaraReadyZUrl = `${baseUrl}solara/readyz`;
+      fetch(solaraReadyZUrl)
+        .then(response => {
+          if (response.ok) {
+            console.error('Solara found, using Solara popout page.');
+            this.solaraFound = true;
+          }
+        })
     }
   },
   mounted() {
@@ -31,6 +44,10 @@ module.exports = {
   },
   methods: {
     getBaseUrl() {
+      if(window.solara) { 
+        // if on solara >=1.40, the jupyter base url is different from the solara one
+        return window.solara.rootPath + "/";
+      }
       const labConfigData = document.getElementById('jupyter-config-data');
       if (labConfigData) {
         /* lab, Voila, and Solara */
@@ -69,7 +86,11 @@ module.exports = {
        if (window.solara && (solara.rootPath !== undefined)) {
         return ""
       }
-      return 'voila/templates/ipypopout/static/popout.html'
+      if(this.use_backend == "solara" || (this.use_backend == "auto" && this.solaraFound)) {
+        return 'solara';
+      } else {
+        return 'voila/templates/ipypopout/static/popout.html'
+      }
     }
   }
 }

setup.py

@@ -63,10 +63,10 @@ def get_data_files(target, src):
             "solara[pytest]",
         ],
         "voila": [
-            "voila>=0.2.10,<0.5"
+            'voila>=0.2.10,<0.5'
         ],
         "solara": [
-            "solara>=1.36"
+            'solara-server>=1.40.0'
         ]
     },
     data_files=get_data_files(os.path.join(*share_voila_target), os.path.join(template[0])),