Custom Panel to allow passing two builds (#6104)

src/panels/custom/ha-panel-custom.ts

@@ -3,7 +3,10 @@ import { navigate } from "../../common/navigate";
 import { CustomPanelInfo } from "../../data/panel_custom";
 import { HomeAssistant, Route } from "../../types";
 import { createCustomPanelElement } from "../../util/custom-panel/create-custom-panel-element";
-import { loadCustomPanel } from "../../util/custom-panel/load-custom-panel";
+import {
+  loadCustomPanel,
+  getUrl,
+} from "../../util/custom-panel/load-custom-panel";
 import { setCustomPanelProperties } from "../../util/custom-panel/set-custom-panel-properties";
 
 declare global {
@@ -74,9 +77,10 @@ export class HaPanelCustom extends UpdatingElement {
 
   private _createPanel(panel: CustomPanelInfo) {
     const config = panel.config!._panel_custom;
+    const panelUrl = getUrl(config);
 
     const tempA = document.createElement("a");
-    tempA.href = config.html_url || config.js_url || config.module_url || "";
+    tempA.href = panelUrl.url;
 
     if (
       !config.trust_external &&

src/util/custom-panel/load-custom-panel.ts

@@ -1,34 +1,71 @@
 import { loadJS, loadModule } from "../../common/dom/load_resource";
+import { CustomPanelConfig } from "../../data/panel_custom";
 
 // Make sure we only import every JS-based panel once (HTML import has this built-in)
 const JS_CACHE = {};
 
-export const loadCustomPanel = (panelConfig): Promise<unknown> => {
+export const getUrl = (
+  panelConfig: CustomPanelConfig
+): { type: "module" | "html" | "js"; url: string } => {
   if (panelConfig.html_url) {
+    return {
+      type: "html",
+      url: panelConfig.html_url,
+    };
+  }
+
+  // if both module and JS provided, base url on frontend build
+  if (panelConfig.module_url && panelConfig.js_url) {
+    if (__BUILD__ === "latest") {
+      return {
+        type: "module",
+        url: panelConfig.module_url,
+      };
+    }
+
+    return {
+      type: "js",
+      url: panelConfig.js_url,
+    };
+  }
+
+  if (panelConfig.module_url) {
+    return {
+      type: "module",
+      url: panelConfig.module_url,
+    };
+  }
+
+  return {
+    type: "js",
+    url: panelConfig.js_url!,
+  };
+};
+
+export const loadCustomPanel = (
+  panelConfig: CustomPanelConfig
+): Promise<unknown> => {
+  const panelSource = getUrl(panelConfig);
+
+  if (panelSource.type === "html") {
     const toLoad = [
       import(
         /* webpackChunkName: "import-href-polyfill" */ "../../resources/html-import/import-href"
       ),
     ];
 
-    if (!panelConfig.embed_iframe) {
-      toLoad.push(
-        import(/* webpackChunkName: "legacy-support" */ "../legacy-support")
-      );
-    }
-
     return Promise.all(toLoad).then(([{ importHrefPromise }]) =>
-      importHrefPromise(panelConfig.html_url)
+      importHrefPromise(panelSource.url)
     );
   }
-  if (panelConfig.js_url) {
-    if (!(panelConfig.js_url in JS_CACHE)) {
-      JS_CACHE[panelConfig.js_url] = loadJS(panelConfig.js_url);
+  if (panelSource.type === "js") {
+    if (!(panelSource.url in JS_CACHE)) {
+      JS_CACHE[panelSource.url] = loadJS(panelSource.url);
     }
-    return JS_CACHE[panelConfig.js_url];
+    return JS_CACHE[panelSource.url];
   }
-  if (panelConfig.module_url) {
-    return loadModule(panelConfig.module_url);
+  if (panelSource.type === "module") {
+    return loadModule(panelSource.url);
   }
   return Promise.reject("No valid url found in panel config.");
 };