From 8b48dd728b449b0073bebdce9688d2fd7ee6d0b5 Mon Sep 17 00:00:00 2001
From: Iisakki Rotko <iisakki.rotko@gmail.com>
Date: Fri, 30 Aug 2024 15:29:26 +0200
Subject: [PATCH 1/2] fix: vscode fails to load scripts from _solara/cdn

We fetch from an online cdn instead. Implements the same method as in https://github.com/widgetti/solara/commit/7238a3751935857348a88d0b5be3a9d5ff63bf6e for vegalite for other vue template components.
---
 .../solara_enterprise/search/search.py                 |  8 ++++++++
 .../solara_enterprise/search/search.vue                |  2 +-
 solara/components/echarts.py                           |  8 ++++++++
 solara/components/echarts.vue                          |  2 +-
 solara/components/markdown.py                          | 10 ++++++++++
 solara/components/markdown_editor.py                   |  8 ++++++++
 solara/components/markdown_editor.vue                  |  3 ++-
 solara/components/sql_code.py                          |  8 ++++++++
 solara/components/sql_code.vue                         |  2 +-
 solara/widgets/vue/gridlayout.vue                      |  2 +-
 solara/widgets/widgets.py                              |  8 ++++++++
 11 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/packages/solara-enterprise/solara_enterprise/search/search.py b/packages/solara-enterprise/solara_enterprise/search/search.py
index 863d02936..42da7af06 100644
--- a/packages/solara-enterprise/solara_enterprise/search/search.py
+++ b/packages/solara-enterprise/solara_enterprise/search/search.py
@@ -10,6 +10,14 @@ class SearchWidget(ipyvue.VueTemplate):
     query = traitlets.Unicode("", allow_none=True).tag(sync=True)
     search_open = traitlets.Bool(False).tag(sync=True)
     failed = traitlets.Bool(False).tag(sync=True)
+    cdn = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+
+    @traitlets.default("cdn")
+    def _cdn(self):
+        import solara.settings
+
+        if not solara.settings.assets.proxy:
+            return solara.settings.assets.cdn
 
 
 @solara.component
diff --git a/packages/solara-enterprise/solara_enterprise/search/search.vue b/packages/solara-enterprise/solara_enterprise/search/search.vue
index 148381883..5e9fac156 100644
--- a/packages/solara-enterprise/solara_enterprise/search/search.vue
+++ b/packages/solara-enterprise/solara_enterprise/search/search.vue
@@ -154,7 +154,7 @@ module.exports = {
             return base
         },
         getCdn() {
-            return window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`;
+            return this.cdn || (window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`);
         },
     }
 }
diff --git a/solara/components/echarts.py b/solara/components/echarts.py
index 036230e0d..b2d8a65c5 100644
--- a/solara/components/echarts.py
+++ b/solara/components/echarts.py
@@ -20,6 +20,14 @@ class EchartsWidget(ipyvuetify.VuetifyTemplate):
     on_mouseout = traitlets.Callable(None, allow_none=True)
     # same, for performance
     on_mouseout_enabled = traitlets.Bool(False).tag(sync=True)
+    cdn = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+
+    @traitlets.default("cdn")
+    def _cdn(self):
+        import solara.settings
+
+        if not solara.settings.assets.proxy:
+            return solara.settings.assets.cdn
 
     def vue_on_click(self, data):
         if self.on_click is not None:
diff --git a/solara/components/echarts.vue b/solara/components/echarts.vue
index 334e1b7e4..7a93eaefa 100644
--- a/solara/components/echarts.vue
+++ b/solara/components/echarts.vue
@@ -110,7 +110,7 @@ module.exports = {
       return base;
     },
     getCdn() {
-      return window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`
+      return this.cdn || (window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`);
     },
   },
 };
diff --git a/solara/components/markdown.py b/solara/components/markdown.py
index 6ffa3b873..66de1f543 100644
--- a/solara/components/markdown.py
+++ b/solara/components/markdown.py
@@ -76,6 +76,12 @@ def _markdown_template(
     html,
     style="",
 ):
+    cdn = r"null"
+    import solara.settings
+
+    if not solara.settings.assets.proxy:
+        cdn = solara.settings.assets.cdn
+
     template = (
         """
 <template>
@@ -89,6 +95,10 @@ def _markdown_template(
 <script>
 module.exports = {
     async mounted() {
+        this.cdn = '"""
+        + cdn
+        + r"""';
+        console.log("cdn", this.cdn)
         await this.loadRequire();
         this.mermaid = await this.loadMermaid();
         this.mermaid.init();
diff --git a/solara/components/markdown_editor.py b/solara/components/markdown_editor.py
index 15238fb9e..8df637715 100644
--- a/solara/components/markdown_editor.py
+++ b/solara/components/markdown_editor.py
@@ -11,6 +11,14 @@ class MarkdownEditorWidget(ipyvuetify.VuetifyTemplate):
 
     value = traitlets.Unicode("").tag(sync=True)
     height = traitlets.Unicode("180px").tag(sync=True)
+    cdn = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+
+    @traitlets.default("cdn")
+    def _cdn(self):
+        import solara.settings
+
+        if not solara.settings.assets.proxy:
+            return solara.settings.assets.cdn
 
 
 @solara.component
diff --git a/solara/components/markdown_editor.vue b/solara/components/markdown_editor.vue
index 759d48e3b..74e8f5268 100644
--- a/solara/components/markdown_editor.vue
+++ b/solara/components/markdown_editor.vue
@@ -255,6 +255,7 @@ module.exports = {
       const labConfigData = document.getElementById('jupyter-config-data');
       if(labConfigData) {
         /* lab and Voila */
+        // console.log("HOHAODHWa", JSON.parse(labConfigData.textContent).baseUrl);
         return JSON.parse(labConfigData.textContent).baseUrl;
       }
       let base = document.body.dataset.baseUrl || document.baseURI;
@@ -264,7 +265,7 @@ module.exports = {
       return base
     },
     getCdn() {
-      return window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`;
+      return this.cdn || (window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`);
     },
   },
 };
diff --git a/solara/components/sql_code.py b/solara/components/sql_code.py
index e1deffd0d..ce785933a 100644
--- a/solara/components/sql_code.py
+++ b/solara/components/sql_code.py
@@ -13,6 +13,14 @@ class SqlCodeWidget(ipyvue.VueTemplate):
     query = traitlets.Unicode(allow_none=True, default_value=None).tag(sync=True)
     tables = traitlets.Dict(allow_none=True, default_value=None).tag(sync=True)
     height = traitlets.Unicode("180px").tag(sync=True)
+    cdn = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+
+    @traitlets.default("cdn")
+    def _cdn(self):
+        import solara.settings
+
+        if not solara.settings.assets.proxy:
+            return solara.settings.assets.cdn
 
 
 @solara.component
diff --git a/solara/components/sql_code.vue b/solara/components/sql_code.vue
index c7686bd48..d7218a2b2 100644
--- a/solara/components/sql_code.vue
+++ b/solara/components/sql_code.vue
@@ -100,7 +100,7 @@
         return base
       },
       getCdn() {
-        return window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`;
+        return this.cdn || (window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`);
       },
     }
   }
diff --git a/solara/widgets/vue/gridlayout.vue b/solara/widgets/vue/gridlayout.vue
index fefb7d6b1..9277eb1b2 100644
--- a/solara/widgets/vue/gridlayout.vue
+++ b/solara/widgets/vue/gridlayout.vue
@@ -94,7 +94,7 @@ module.exports = {
           return base
         },
         getCdn() {
-          return window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`;
+          return this.cdn || (window.solara ? window.solara.cdn : `${this.getJupyterBaseUrl()}_solara/cdn`);
         },
     }
 }
diff --git a/solara/widgets/widgets.py b/solara/widgets/widgets.py
index 265f7a77f..38e3fd063 100644
--- a/solara/widgets/widgets.py
+++ b/solara/widgets/widgets.py
@@ -51,6 +51,14 @@ class GridLayout(v.VuetifyTemplate):
     grid_layout = traitlets.List(default_value=cast(List[Dict], [])).tag(sync=True)
     draggable = traitlets.CBool(True).tag(sync=True)
     resizable = traitlets.CBool(True).tag(sync=True)
+    cdn = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+
+    @traitlets.default("cdn")
+    def _cdn(self):
+        import solara.settings
+
+        if not solara.settings.assets.proxy:
+            return solara.settings.assets.cdn
 
 
 class HTML(v.VuetifyTemplate):

From 5185c5cc22f9f41ee880c51be93ef97b211bac65 Mon Sep 17 00:00:00 2001
From: Iisakki Rotko <iisakki.rotko@gmail.com>
Date: Fri, 30 Aug 2024 16:04:42 +0200
Subject: [PATCH 2/2] incorporate suggestions from review

Co-Authored-by: maartenbreddels <maartenbreddels@gmail.com>
---
 solara/components/markdown.py         | 9 ++++-----
 solara/components/markdown_editor.vue | 1 -
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/solara/components/markdown.py b/solara/components/markdown.py
index 66de1f543..3ec900f08 100644
--- a/solara/components/markdown.py
+++ b/solara/components/markdown.py
@@ -76,7 +76,7 @@ def _markdown_template(
     html,
     style="",
 ):
-    cdn = r"null"
+    cdn = None
     import solara.settings
 
     if not solara.settings.assets.proxy:
@@ -95,10 +95,9 @@ def _markdown_template(
 <script>
 module.exports = {
     async mounted() {
-        this.cdn = '"""
-        + cdn
-        + r"""';
-        console.log("cdn", this.cdn)
+        this.cdn = """
+        + (rf"'{cdn}'" if cdn is not None else r"null")
+        + r""";
         await this.loadRequire();
         this.mermaid = await this.loadMermaid();
         this.mermaid.init();
diff --git a/solara/components/markdown_editor.vue b/solara/components/markdown_editor.vue
index 74e8f5268..5663d42c8 100644
--- a/solara/components/markdown_editor.vue
+++ b/solara/components/markdown_editor.vue
@@ -255,7 +255,6 @@ module.exports = {
       const labConfigData = document.getElementById('jupyter-config-data');
       if(labConfigData) {
         /* lab and Voila */
-        // console.log("HOHAODHWa", JSON.parse(labConfigData.textContent).baseUrl);
         return JSON.parse(labConfigData.textContent).baseUrl;
       }
       let base = document.body.dataset.baseUrl || document.baseURI;