Enhancement: add routing backward compatibility to extension

devtools/common/url.js

@@ -2,6 +2,28 @@ function getLiveDebuggerSessionURL(browserElement) {
   return new Promise((resolve, reject) => {
     const script = `
       (function() {
+        function getMetaTag() {
+          const metaTag = document.querySelector('meta[name="live-debugger-config"]');
+          if (metaTag) {
+            return metaTag;
+          } else {
+            handleMetaTagError();
+          }
+        }
+
+        function handleMetaTagError() {
+          throw new Error("LiveDebugger meta tag not found!");
+        }
+
+        function getLiveDebuggerBaseURL(metaTag) {
+          return metaTag.getAttribute('url');
+        }
+
+        function getVersion(metaTag) {
+          const version = metaTag.getAttribute('version');
+          return version ? version : "0.2"
+        }
+
         function getSessionId() {
           let el;
           if ((el = document.querySelector('[data-phx-main]'))) {
@@ -16,27 +38,26 @@ function getLiveDebuggerSessionURL(browserElement) {
           return null;
         }
 
-        function handleMetaTagError() {
-          throw new Error("LiveDebugger meta tag not found!");
-        }
-
-        function getLiveDebuggerBaseURL() {
-          const metaTag = document.querySelector('meta[name="live-debugger-config"]');
-          if (metaTag) {
-            return metaTag.getAttribute('url');
+        function getSessionURL(baseURL, version, sessionId) {
+          let prefix = '';
+          if (version.startsWith("0.2")) {
+            prefix = "transport_pid";
           } else {
-            handleMetaTagError();
+            prefix = "redirect";
           }
-        }
 
-        function getSessionURL(baseURL) {
-          const session_id = getSessionId();
-          const session_path = session_id ? \`redirect/\${session_id}\` : '';
+          const session_path = sessionId ? \`\${prefix}/\${sessionId}\` : '';
           return \`\${baseURL}/\${session_path}\`;
         }
 
-        const baseURL = getLiveDebuggerBaseURL();
-        return getSessionURL(baseURL);
+        const metaTag = getMetaTag();
+
+        const version = getVersion(metaTag);
+        const baseURL = getLiveDebuggerBaseURL(metaTag);
+        const sessionId = getSessionId();
+        const url = getSessionURL(baseURL, version, sessionId);
+
+        return url;
       })();
     `;
 
@@ -48,7 +69,7 @@ function getLiveDebuggerSessionURL(browserElement) {
         } else {
           resolve(result);
         }
-      },
+      }
     );
   });
 }

lib/live_debugger.ex

@@ -85,6 +85,7 @@ defmodule LiveDebugger do
     browser_features? = Keyword.get(config, :browser_features?, true)
     debug_button? = Keyword.get(config, :debug_button?, true)
     highlighting? = Keyword.get(config, :highlighting?, true)
+    version = Application.spec(:live_debugger)[:vsn] |> to_string()
 
     live_debugger_url = "http://#{ip_string}:#{port}"
     live_debugger_assets_url = "http://#{ip_string}:#{port}/#{@assets_path}"
@@ -94,7 +95,8 @@ defmodule LiveDebugger do
       assets_url: live_debugger_assets_url,
       browser_features?: browser_features?,
       debug_button?: debug_button?,
-      highlighting?: highlighting?
+      highlighting?: highlighting?,
+      version: version
     }
 
     tags = LiveDebuggerWeb.Components.Config.live_debugger_tags(assigns)

lib/live_debugger_web/components/config.ex

@@ -11,12 +11,14 @@ defmodule LiveDebuggerWeb.Components.Config do
   attr(:browser_features?, :boolean, default: true)
   attr(:debug_button?, :boolean, default: true)
   attr(:highlighting?, :boolean, default: true)
+  attr(:version, :string, default: nil)
 
   def live_debugger_tags(assigns) do
     ~H"""
     <meta
       name="live-debugger-config"
       url={@url}
+      version={@version}
       debug-button={@debug_button?}
       highlighting={@highlighting?}
     />