detect backend automatically

splitbrain · splitbrain · commit 365ece417138 · 2025-03-26T08:53:34.000+01:00
diff --git a/frontend/src/components/meh-comments/meh-comments.tsx b/frontend/src/components/meh-comments/meh-comments.tsx
@@ -1,5 +1,5 @@
 import {Component, Element, h, Prop, State} from '@stencil/core';
-import {formatRelativeTime, isAdmin, makeApiRequest, TranslationManager} from '../../utils/utils';
+import {formatRelativeTime, isAdmin, makeApiRequest, TranslationManager, detectBackendUrl} from '../../utils/utils';
 
 @Component({
   tag: 'meh-comments',
@@ -20,7 +20,7 @@ export class MehComments {
 
   /**
    * The base URL for where the meh system is hosted
-   * If not provided, defaults to same origin
+   * If not provided, attempts to detect from script tag
    */
   @Prop() backend: string = '';
 
@@ -78,10 +78,8 @@ export class MehComments {
       this.post = window.location.pathname;
     }
 
-    // remove trailing slash from backend URL
-    if (this.backend.endsWith('/')) {
-      this.backend = this.backend.slice(0, -1);
-    }
+    // Process the backend URL (clean or detect)
+    this.backend = detectBackendUrl(this.backend);
 
     // Initialize the TranslationManager with default translations
     this.translator = new TranslationManager(this.defaultTranslations);
diff --git a/frontend/src/components/meh-count/meh-count.tsx b/frontend/src/components/meh-count/meh-count.tsx
@@ -1,5 +1,5 @@
 import {Component, Prop, h, State} from '@stencil/core';
-import {TranslationManager, makeApiRequest} from '../../utils/utils';
+import {TranslationManager, makeApiRequest, detectBackendUrl} from '../../utils/utils';
 
 @Component({
   tag: 'meh-count',
@@ -18,7 +18,7 @@ export class MehCount {
 
   /**
    * The base URL for where the meh system is hosted
-   * If not provided, defaults to same origin
+   * If not provided, attempts to detect from script tag
    */
   @Prop() backend: string = '';
 
@@ -77,10 +77,8 @@ export class MehCount {
       this.post = window.location.pathname;
     }
 
-    // remove trailing slash from backend URL
-    if (this.backend.endsWith('/')) {
-      this.backend = this.backend.slice(0, -1);
-    }
+    // Process the backend URL (clean or detect)
+    this.backend = detectBackendUrl(this.backend);
 
     // Initialize the TranslationManager with default translations
     this.translator = new TranslationManager(this.defaultTranslations);
diff --git a/frontend/src/components/meh-form/meh-form.tsx b/frontend/src/components/meh-form/meh-form.tsx
@@ -1,5 +1,5 @@
 import {Component, Prop, h, State, Element} from '@stencil/core';
-import { TranslationManager, TOKEN_STORAGE_KEY, makeApiRequest } from '../../utils/utils';
+import { TranslationManager, TOKEN_STORAGE_KEY, makeApiRequest, detectBackendUrl } from '../../utils/utils';
 
 @Component({
   tag: 'meh-form',
@@ -21,7 +21,7 @@ export class MehForm {
 
   /**
    * The base URL for where the meh system is hosted
-   * If not provided, defaults to same origin
+   * If not provided, attempts to detect from script tag
    */
   @Prop() backend: string = '';
 
@@ -95,10 +95,8 @@ export class MehForm {
       this.post = window.location.pathname;
     }
 
-    // remove trailing slash from backend URL
-    if (this.backend.endsWith('/')) {
-      this.backend = this.backend.slice(0, -1);
-    }
+    // Process the backend URL (clean or detect)
+    this.backend = detectBackendUrl(this.backend);
 
     // Initialize the TranslationManager with default translations
     this.translator = new TranslationManager(this.defaultTranslations);
diff --git a/frontend/src/components/meh-login/meh-login.tsx b/frontend/src/components/meh-login/meh-login.tsx
@@ -1,5 +1,5 @@
 import {Component, Prop, h, State} from '@stencil/core';
-import {TranslationManager, TOKEN_STORAGE_KEY, isAdmin, makeApiRequest} from '../../utils/utils';
+import {TranslationManager, TOKEN_STORAGE_KEY, isAdmin, makeApiRequest, detectBackendUrl} from '../../utils/utils';
 
 @Component({
   tag: 'meh-login',
@@ -13,7 +13,7 @@ import {TranslationManager, TOKEN_STORAGE_KEY, isAdmin, makeApiRequest} from '..
 export class MehLogin {
   /**
    * The base URL for where the meh system is hosted
-   * If not provided, defaults to same origin
+   * If not provided, attempts to detect from script tag
    */
   @Prop() backend: string = '';
 
@@ -68,10 +68,8 @@ export class MehLogin {
   }
 
   async componentWillLoad() {
-    // remove trailing slash from backend URL
-    if (this.backend.endsWith('/')) {
-      this.backend = this.backend.slice(0, -1);
-    }
+    // Process the backend URL (clean or detect)
+    this.backend = detectBackendUrl(this.backend);
 
     // Initialize the TranslationManager with default translations
     this.translator = new TranslationManager(this.defaultTranslations);
diff --git a/frontend/src/components/meh-mastodon/meh-mastodon.tsx b/frontend/src/components/meh-mastodon/meh-mastodon.tsx
@@ -1,5 +1,5 @@
 import {Component, h, Prop, State} from '@stencil/core';
-import {TranslationManager, makeApiRequest} from '../../utils/utils';
+import {TranslationManager, makeApiRequest, detectBackendUrl} from '../../utils/utils';
 
 @Component({
   tag: 'meh-mastodon',
@@ -18,7 +18,7 @@ export class MehMastodon {
 
   /**
    * The base URL for where the meh system is hosted
-   * If not provided, defaults to same origin
+   * If not provided, attempts to detect from script tag
    */
   @Prop() backend: string = '';
 
@@ -67,10 +67,8 @@ export class MehMastodon {
       this.post = window.location.pathname;
     }
 
-    // remove trailing slash from backend URL
-    if (this.backend.endsWith('/')) {
-      this.backend = this.backend.slice(0, -1);
-    }
+    // Process the backend URL (clean or detect)
+    this.backend = detectBackendUrl(this.backend);
 
     // Initialize the TranslationManager with default translations
     this.translator = new TranslationManager(this.defaultTranslations);
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
@@ -1,5 +1,49 @@
 import {jwtDecode, JwtPayload} from "jwt-decode"
 
+/**
+ * Process the backend URL:
+ * - If a URL is provided, clean it (remove trailing slash)
+ * - If no URL is provided, attempt to detect it from the script tag
+ *
+ * @param backendUrl - The backend URL provided by the component, if any
+ * @returns The processed backend URL
+ */
+export function detectBackendUrl(backendUrl: string = ''): string {
+  // If a backend URL is provided, just clean it
+  if (backendUrl) {
+    // Remove trailing slash if present
+    return backendUrl.endsWith('/') ? backendUrl.slice(0, -1) : backendUrl;
+  }
+
+  // Otherwise, try to detect it from the script tag
+  try {
+    // Find the script tag that loaded meh.esm.js
+    const scriptTags = document.querySelectorAll('script[src*="meh.esm.js"]');
+    if (scriptTags.length === 0) return '';
+
+    // Get the src attribute of the first matching script tag
+    const scriptSrc = scriptTags[0].getAttribute('src');
+    if (!scriptSrc) return '';
+
+    // Extract the base path from the script src
+    const urlObj = new URL(scriptSrc, window.location.href);
+    const pathParts = urlObj.pathname.split('/');
+
+    // Remove the filename and 'meh' directory from the path
+    pathParts.pop(); // Remove 'meh.esm.js'
+    if (pathParts[pathParts.length - 1] === 'meh') {
+      pathParts.pop(); // Remove 'meh' directory
+    }
+
+    // Construct the backend URL with protocol, hostname, and port if present
+    const port = urlObj.port ? `:${urlObj.port}` : '';
+    return `${urlObj.protocol}//${urlObj.hostname}${port}${pathParts.join('/')}`;
+  } catch (error) {
+    console.error('Error detecting backend URL:', error);
+    return '';
+  }
+}
+
 // Define a custom interface that extends JwtPayload to include scopes
 interface MehJwtPayload extends JwtPayload {
   scopes?: string[];
@@ -57,15 +101,15 @@ export async function makeApiRequest<T = any>(
 
   // Build the URL
   let url = `${backend}/api/${site}/${endpoint}`;
-  
+
   // For GET requests, convert body to query parameters
   if (method === 'GET' && body !== undefined) {
     const params = new URLSearchParams();
     Object.entries(body).forEach(([key, value]) => {
       params.append(key, String(value));
     });
     url += `?${params.toString()}`;
-  } 
+  }
   // For non-GET requests, add body as JSON
   else if (method !== 'GET' && body !== undefined) {
     requestOptions.body = JSON.stringify(body);
@@ -208,20 +252,20 @@ export class TranslationManager<T extends Record<string, string>> {
   get<K extends keyof T | string>(key: K): string {
     // Check if this is a template string with `key` format
     const match = String(key).match(/^`([^`]+)`(.*)$/);
-    
+
     if (match) {
       // Template format found
       const [, templateKey, fallbackText] = match;
-      
+
       // Check if key exists in translations
       if (templateKey in this.translations) {
         return this.translations[templateKey as keyof T] as string;
       }
-      
+
       // Return fallback text (trimming leading space if present)
       return fallbackText.trim();
     }
-    
+
     // Not a template format, treat as regular key
     return (this.translations[key as keyof T] as string) || String(key);
   }
