Move compatibility to static polyfill handling (#24775)

* Move compatibility to static polyfill handling

* Move compatibility to static polyfill handling

* Prettier

Author: bramkragten

build-scripts/bundle.cjs

@@ -18,7 +18,7 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
+module.exports.emptyPackages = ({ isHassioBuild }) =>
   [
     // Contains all color definitions for all material color sets.
     // We don't use it
@@ -28,12 +28,6 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
     require.resolve("@polymer/font-roboto/roboto.js"),
     require.resolve("@vaadin/vaadin-material-styles/typography.js"),
     require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
-    // Compatibility not needed for latest builds
-    latestBuild &&
-      // wrapped in require.resolve so it blows up if file no longer exists
-      require.resolve(
-        path.resolve(paths.polymer_dir, "src/resources/compatibility.ts")
-      ),
     // Icons in supervisor conflict with icons in HA so we don't load.
     isHassioBuild &&
       require.resolve(

build-scripts/gulp/gather-static.js

@@ -59,6 +59,11 @@ function copyPolyfills(staticDir) {
     npmPath("@webcomponents/webcomponentsjs/webcomponents-bundle.js.map"),
     staticPath("polyfills/")
   );
+  // Lit polyfill support
+  fs.copySync(
+    npmPath("lit/polyfill-support.js"),
+    path.join(staticPath("polyfills/"), "lit-polyfill-support.js")
+  );
 
   // dialog-polyfill css
   copyFileDir(

build-scripts/rspack.cjs

@@ -155,9 +155,7 @@ const createRspackConfig = ({
         },
       }),
       new rspack.NormalModuleReplacementPlugin(
-        new RegExp(
-          bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
-        ),
+        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),

demo/src/ha-demo.ts

@@ -1,5 +1,3 @@
-// Compat needs to be first import
-import "../../src/resources/compatibility";
 import { customElement } from "lit/decorators";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";

hassio/src/entrypoint.ts

@@ -1,5 +1,3 @@
-// Compat needs to be first import
-import "../../src/resources/compatibility";
 import "./hassio-main";
 
 import("../../src/resources/ha-style");

src/common/feature-detect/support-web-components.ts

@@ -1,2 +1 @@
-export const webComponentsSupported =
-  "customElements" in window && "content" in document.createElement("template");
+export const webComponentsSupported = "attachShadow" in Element.prototype;

src/entrypoints/app.ts

@@ -1,5 +1,3 @@
-// Compat needs to be first import
-import "../resources/compatibility";
 import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min";
 import "../layouts/home-assistant";
 

src/entrypoints/authorize.ts

@@ -1,5 +1,3 @@
-// Compat needs to be first import
-import "../resources/compatibility";
 import "../auth/ha-authorize";
 
 import("../resources/ha-style");

src/entrypoints/custom-panel.ts

@@ -1,6 +1,3 @@
-// Compat needs to be first import
-import "../resources/compatibility";
-
 import type { CSSResult } from "lit";
 import { fireEvent } from "../common/dom/fire_event";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
@@ -67,9 +64,10 @@ function initialize(
   let start: Promise<unknown> = Promise.resolve();
 
   if (!webComponentsSupported) {
-    start = start.then(() =>
-      loadJS(`${__STATIC_PATH__}polyfills/webcomponents-bundle.js`)
-    );
+    start = start.then(() => {
+      loadJS(`${__STATIC_PATH__}polyfills/webcomponents-bundle.js`);
+      loadJS(`${__STATIC_PATH__}polyfills/lit-polyfill-support.js`);
+    });
   }
 
   if (__BUILD__ === "legacy") {

src/entrypoints/onboarding.ts

@@ -1,5 +1,3 @@
-// Compat needs to be first import
-import "../resources/compatibility";
 import "../onboarding/ha-onboarding";
 
 import("../resources/ha-style");

src/html/_js_base.html.template

@@ -8,13 +8,9 @@
     return document.head.appendChild(script);
   }
   window.polymerSkipLoadingFontRoboto = true;
-  if (
-    !(
-      "customElements" in window &&
-      "content" in document.createElement("template")
-    )
-  ) {
+  if (!("attachShadow" in Element.prototype)) {
     _ls("/static/polyfills/webcomponents-bundle.js", true);
+    _ls("/static/polyfills/lit-polyfill-support.js", true);
   }
   // Modern browsers are detected primarily using the user agent string.
   // A feature detection which roughly lines up with the modern targets is used