Improve runtime re-connection mechanism

Author: djblue

src/portal/ui/app.cljs

@@ -9,6 +9,7 @@
             [portal.ui.icons :as icons]
             [portal.ui.inspector :as ins]
             [portal.ui.options :as opts]
+            [portal.ui.rpc :as rpc]
             [portal.ui.select :as select]
             [portal.ui.state :as state]
             [portal.ui.styled :as s]
@@ -87,10 +88,9 @@
       [s/div {:style {:grid-row "1"}} "]"]]
      [s/div {:style {:flex "1"}}]]))
 
-(defn- runtime-info []
+(defn- use-runtime-info []
   (let [opts       (opts/use-options)
         theme      (theme/use-theme)
-        connected? (status/use-status)
         header     (if (= :dev (:mode opts))
                      (::c/diff-add theme)
                      (::c/background2 theme))]
@@ -106,70 +106,86 @@
           (str/join
            " - "
            [(:window-title opts name) platform version]))))
-     #js [opts])
-    (when-not connected?
-      [s/div
-       {:style {:color (::c/exception theme)}}
-       "ERROR: Disconnected from runtime!"])))
+     #js [opts])))
 
 (defn inspect-footer []
   (let [theme (theme/use-theme)
         state (state/use-state)
+        connected?       (status/use-status)
         selected-context (state/get-all-selected-context @state)
         viewer           (ins/get-viewer state (first selected-context))
         compatible-viewers (ins/get-compatible-viewers @ins/viewers selected-context)]
+    (use-runtime-info)
     [s/div
      {:style
       {:display :flex
        :padding-top (:padding theme)
        :padding-bottom (:padding theme)
        :padding-right (* 1.5 (:padding theme))
        :padding-left (* 1.5 (:padding theme))
-       :align-items :stretch
+       :align-items :center
        :justify-content :space-between
-       :background (::c/background2 theme)
+       :background (if-not connected?
+                     (::c/exception theme)
+                     (::c/background2 theme))
        :box-sizing :border-box
        :border-top [1 :solid (::c/border theme)]}}
-     [s/select
-      {:title "Select a different viewer."
-       :value (pr-str (:name viewer))
-       :on-change
-       (fn [e]
-         (ins/set-viewer!
-          state
-          selected-context
-          (keyword (.substr (.. e -target -value) 1))))
-       :style
-       {:background (::c/background theme)
-        :padding (:padding theme)
-        :box-sizing :border-box
-        :font-family (:font-family theme)
-        :font-size (:font-size theme)
-        :color (::c/text theme)
-        :border-radius (:border-radius theme)
-        :border [1 :solid (::c/border theme)]}}
-      (for [{:keys [name]} compatible-viewers]
-        ^{:key name}
-        [s/option {:value (pr-str name)} (pr-str name)])]
-     [runtime-info]
-     [s/button
-      {:title    "Open command palette."
-       :on-click #(commands/open-command-palette state)
-       :style
-       {:font-family (:font-family theme)
-        :background (::c/background theme)
-        :border-radius (:border-radius theme)
-        :border [1 :solid (::c/border theme)]
-        :box-sizing :border-box
-        :padding-top (:padding theme)
-        :padding-bottom (:padding theme)
-        :padding-left (* 2.5 (:padding theme))
-        :padding-right (* 2.5 (:padding theme))
-        :color (::c/tag theme)
-        :font-size (:font-size theme)
-        :font-weight :bold
-        :cursor :pointer}}
-      [icons/terminal]]]))
+     [s/div
+      {:style {:flex "1"}}
+      [s/select
+       {:title "Select a different viewer."
+        :value (pr-str (:name viewer))
+        :on-change
+        (fn [e]
+          (ins/set-viewer!
+           state
+           selected-context
+           (keyword (.substr (.. e -target -value) 1))))
+        :style
+        {:background (::c/background theme)
+         :padding (:padding theme)
+         :box-sizing :border-box
+         :font-family (:font-family theme)
+         :font-size (:font-size theme)
+         :color (::c/text theme)
+         :border-radius (:border-radius theme)
+         :border [1 :solid (::c/border theme)]}}
+       (for [{:keys [name]} compatible-viewers]
+         ^{:key name}
+         [s/option {:value (pr-str name)} (pr-str name)])]]
+
+     (when-not connected?
+       [s/div
+        {:style {:text-align :center :flex "1" :color (::c/text theme)}}
+        [s/div
+         #_{:style {:display :flex :gap (:padding theme)}}
+         [s/span {:style {:font-weight :bold}} "Error: "]
+         "Connection lost"]
+        [s/div
+         "(portal.api/start "
+         (pr-str (select-keys (rpc/resolve-connection) [:port]))
+         ")"]])
+
+     [s/div
+      {:style {:flex "1" :text-align :right}}
+      [s/button
+       {:title    "Open command palette."
+        :on-click #(commands/open-command-palette state)
+        :style
+        {:font-family (:font-family theme)
+         :background (::c/background theme)
+         :border-radius (:border-radius theme)
+         :border [1 :solid (::c/border theme)]
+         :box-sizing :border-box
+         :padding-top (:padding theme)
+         :padding-bottom (:padding theme)
+         :padding-left (* 3 (:padding theme))
+         :padding-right (* 3 (:padding theme))
+         :color (::c/tag theme)
+         :font-size (:font-size theme)
+         :font-weight :bold
+         :cursor :pointer}}
+       [icons/terminal]]]]))
 
 (defn- search-input []
   (let [ref      (react/useRef nil)

src/portal/ui/connection_status.cljs

@@ -16,12 +16,15 @@
   (let [[{:keys [errors connected?]} set-status!]
         (react/useState {:connected? true :errors 0})]
     (use-interval
-     (if (> errors 5)
-       (.error js/console "Unable to establish connection to runtime.")
-       (fn []
-         (-> (state/invoke 'portal.runtime/ping)
-             (.then  #(set-status! {:connected? true  :errors 0}))
-             (.catch #(set-status! {:connected? false :errors (inc errors)})))))
+     (fn []
+       (-> (state/invoke 'portal.runtime/ping)
+           (.then  (fn [_]
+                     ;; reconnecting to runtime
+                     (when-not (zero? errors)
+                       (state/reset-value-cache!)
+                       (set-status! {:connected? true :errors 0}))))
+           (.catch (fn [_]
+                     (set-status! {:connected? false :errors (inc errors)})))))
      5000)
     connected?))
 

src/portal/ui/rpc.cljs

@@ -1,6 +1,7 @@
 (ns portal.ui.rpc
   (:refer-clojure :exclude [read type])
-  (:require [portal.async :as a]
+  (:require [clojure.string :as str]
+            [portal.async :as a]
             [portal.runtime.cson :as cson]
             [portal.ui.cljs :as cljs]
             [portal.ui.rpc.runtime :as rt]
@@ -189,23 +190,27 @@
 
 (defn- get-host []
   (if (exists? js/PORTAL_HOST)
-    js/PORTAL_HOST
+    (first (str/split js/PORTAL_HOST #":"))
     (.-hostname js/location)))
 
 (defn- get-proto []
   (if (= (.-protocol js/location) "https:") "wss:" "ws:"))
 
 (defn- get-port []
-  (when-not (= (.-port js/location) "")
-    (.-port js/location)))
+  (if (exists? js/PORTAL_HOST)
+    (js/parseInt (second (str/split js/PORTAL_HOST #":")))
+    (when-not (= (.-port js/location) "")
+      (js/parseInt (.-port js/location)))))
+
+(defn resolve-connection []
+  {:host     (get-host)
+   :port     (get-port)
+   :protocol (get-proto)
+   :session  (get-session)})
 
 (defn connect
   ([]
-   (connect
-    {:host     (get-host)
-     :port     (get-port)
-     :protocol (get-proto)
-     :session  (get-session)}))
+   (connect (resolve-connection)))
   ([{:keys [host port protocol session]}]
    (if-let [ws @ws-promise]
      ws
@@ -220,7 +225,6 @@
                                                  (send! message))))
            (set! (.-onerror chan)   (fn [e]
                                       (reject e)
-                                      (.error js/console (pr-str e))
                                       (doseq [[_ [_ reject]] @pending-requests]
                                         (reject e))))
            (set! (.-onclose chan)   #(reset!  ws-promise nil))

src/portal/ui/state.cljs

@@ -279,10 +279,15 @@
 
 (defonce value-cache (r/atom {}))
 
+(defn reset-value-cache!
+  "Useful when establishing or re-establishing a connection with the runtime."
+  []
+  (reset! value-cache (with-meta {} {:key (.now js/Date)})))
+
 (defn clear [state]
   (a/do
     (invoke 'portal.runtime/clear-values)
-    (reset! value-cache (with-meta {} {:key (.now js/Date)}))
+    (reset-value-cache!)
     (-> state
         (dissoc :portal/value
                 :search-text