@jsenv/core 41.1.0 → 41.2.0

package/dist/build/build.js

@@ -8735,6 +8735,39 @@ const jsenvPluginCacheControl = ({
 
 const SECONDS_IN_30_DAYS = 60 * 60 * 24 * 30;
 
+const jsenvPluginCustomElementsRedefine = () => {
+  const customElementsRedefineClientFileUrl = import.meta
+    .resolve("../client/custom_elements_redefine/custom_elements_redefine.js");
+
+  return {
+    name: "jsenv:custom_elements_redefine",
+    appliesDuring: "dev",
+    transformUrlContent: {
+      html: (urlInfo) => {
+        const htmlAst = parseHtml({ html: urlInfo.content, url: urlInfo.url });
+        const reference = urlInfo.dependencies.inject({
+          type: "script",
+          subtype: "js_module",
+          expectedType: "js_module",
+          specifier: customElementsRedefineClientFileUrl,
+        });
+        injectJsenvScript(htmlAst, {
+          type: "module",
+          src: reference.generatedSpecifier,
+          initCall: {
+            callee: "allowCustomElementsRedefine",
+          },
+          pluginName: "jsenv:custom_elements_redefine",
+        });
+        const htmlModified = stringifyHtmlAst(htmlAst);
+        return {
+          content: htmlModified,
+        };
+      },
+    },
+  };
+};
+
 const jsenvPluginRibbon = ({
   rootDirectoryUrl,
   htmlInclude = "/**/*.html",
@@ -9206,6 +9239,7 @@ const getCorePlugins = ({
   scenarioPlaceholders = true,
   ribbon = true,
   dropToOpen = true,
+  customElementsRedefine = true,
   packageSideEffects = false,
 } = {}) => {
   if (cacheControl === true) {
@@ -9302,6 +9336,7 @@ const getCorePlugins = ({
     ...(cacheControl ? [jsenvPluginCacheControl(cacheControl)] : []),
     ...(ribbon ? [jsenvPluginRibbon({ rootDirectoryUrl, ...ribbon })] : []),
     ...(dropToOpen ? [jsenvPluginDropToOpen()] : []),
+    ...(customElementsRedefine ? [jsenvPluginCustomElementsRedefine()] : []),
     jsenvPluginCleanHTML(),
     ...(packageSideEffects
       ? [jsenvPluginPackageSideEffects({ packageDirectory })]

package/dist/client/custom_elements_redefine/custom_elements_redefine.js

@@ -0,0 +1,208 @@
+/*
+ * https://github.com/lit/lit/issues/1844
+ * https://github.com/vegarringdal/custom-elements-hmr-polyfill/tree/master
+ */
+
+const allowCustomElementsRedefine = ({
+  updateWholeDOMOnRedefine = false,
+} = {}) => {
+  let timeoutId;
+  const onCustomElementChange = (
+    customElementName,
+    // customElementClass,
+    // options,
+  ) => {
+    if (!updateWholeDOMOnRedefine) {
+      return;
+    }
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      if (document.body) {
+        requestAnimationFrame(() => {
+          // re-render the whole DOM
+          // this will make less calls to connectedCallback/disconnectedCallback on replaced child node when created.
+          const oldBodyHtml = document.body.innerHTML;
+          document.body.innerHTML = "";
+          document.body.innerHTML = oldBodyHtml;
+        });
+      }
+    }, 250);
+  };
+
+  const customElementClassMap = new Map();
+  const defineOriginal = customElements.define;
+  customElements.define = (customElementName, customElementClass, options) => {
+    const registeredCustomElement = customElements.get(customElementName);
+    customElementClassMap.set(customElementName, customElementClass);
+    if (registeredCustomElement) {
+      onCustomElementChange();
+      return;
+    }
+    const CustomElementFacade = createCustomElementFacade(
+      customElementName,
+      customElementClass,
+    );
+    defineOriginal.call(
+      customElements,
+      customElementName,
+      CustomElementFacade,
+      options,
+    );
+  };
+
+  const observerSymbol = Symbol.for("observedAttributesObserver");
+  const createCustomElementFacade = (
+    customElementName,
+    customElementFirstClass,
+  ) => {
+    class CustomElementFacade extends customElementFirstClass {
+      static get observedAttributes() {
+        return [];
+      }
+
+      constructor(...args) {
+        const CustomElementClass = customElementClassMap.get(customElementName);
+
+        if (CustomElementClass !== customElementFirstClass) {
+          {
+            let ClassCandidate = CustomElementClass;
+            while (ClassCandidate) {
+              const nextClassCandidate = Object.getPrototypeOf(ClassCandidate);
+              if (!nextClassCandidate) {
+                break;
+              }
+              const name = nextClassCandidate.name;
+              if (name) {
+                const constructor = window[name];
+                if (constructor && constructor.prototype instanceof Element) {
+                  patchProperties(
+                    CustomElementFacade.prototype,
+                    ClassCandidate.prototype,
+                  );
+                  break;
+                }
+              }
+              ClassCandidate = nextClassCandidate;
+            }
+          }
+          {
+            const CustomElementPrototype = CustomElementClass.prototype;
+            patchProperties(
+              CustomElementFacade.prototype,
+              CustomElementPrototype,
+            );
+          }
+        }
+        const customElementInstance = Reflect.construct(
+          CustomElementClass,
+          args,
+          CustomElementFacade,
+        );
+        // eslint-disable-next-line no-constructor-return
+        return customElementInstance;
+      }
+
+      connectedCallback(...args) {
+        const CustomElementClass = customElementClassMap.get(customElementName);
+        const CustomElementPrototype = CustomElementClass.prototype;
+        const observedAttributes = CustomElementClass.observedAttributes;
+
+        // call initial callback when class is created
+        if (observedAttributes) {
+          if (Array.isArray(observedAttributes)) {
+            observedAttributes.forEach((observedAttributeName) => {
+              const haveAtt = this.getAttributeNode(observedAttributeName);
+              if (haveAtt) {
+                CustomElementPrototype.attributeChangedCallback.call(
+                  this,
+                  observedAttributeName,
+                  null,
+                  this.getAttribute(observedAttributeName),
+                  null,
+                );
+              }
+            });
+          } else {
+            console.warn(
+              `observedAttributes in ${customElementName} is not array, please fix`,
+            );
+          }
+        }
+        const mutationObserver = new MutationObserver((mutationList) => {
+          mutationList.forEach((mutation) => {
+            if (
+              CustomElementPrototype.attributeChangedCallback &&
+              observedAttributes &&
+              observedAttributes.includes(mutation.attributeName)
+            ) {
+              CustomElementPrototype.attributeChangedCallback.call(
+                this,
+                mutation.attributeName,
+                mutation.oldValue,
+                this.getAttribute(mutation.attributeName),
+                null,
+              );
+            }
+          });
+        });
+        this[observerSymbol] = mutationObserver;
+        mutationObserver.observe(this, {
+          childList: false,
+          attributes: true,
+          attributeOldValue: true,
+          subtree: false,
+        });
+
+        if (CustomElementPrototype.connectedCallback) {
+          CustomElementPrototype.connectedCallback.call(this, ...args);
+        }
+      }
+
+      disconnectedCallback(...args) {
+        this[observerSymbol].disconnect();
+        this[observerSymbol] = null;
+
+        const CustomElementClass = customElementClassMap.get(customElementName);
+        const CustomElementPrototype = CustomElementClass.prototype;
+        if (CustomElementPrototype.disconnectedCallback) {
+          CustomElementPrototype.disconnectedCallback.call(this, ...args);
+        }
+      }
+
+      adoptedCallback(...args) {
+        const CustomElementClass = customElementClassMap.get(customElementName);
+        const CustomElementPrototype = CustomElementClass.prototype;
+        if (CustomElementPrototype.adoptedCallback) {
+          CustomElementPrototype.adoptedCallback.call(this, ...args);
+        }
+      }
+    }
+    return CustomElementFacade;
+  };
+  const patchProperties = (into, from) => {
+    const ownPropertyNames = Object.getOwnPropertyNames(from);
+    ownPropertyNames.forEach((ownPropertyName) => {
+      if (PROPERTY_NAMES_TO_SKIP.includes(ownPropertyName)) {
+        return;
+      }
+      const propertyDescriptor = Object.getOwnPropertyDescriptor(
+        from,
+        ownPropertyName,
+      );
+      if (!propertyDescriptor) {
+        return;
+      }
+      if (!propertyDescriptor.configurable) {
+        console.warn(
+          "[custom-elements-redefined]",
+          `${ownPropertyName} is not configurable, skipping`,
+        );
+        return;
+      }
+      Object.defineProperty(into, ownPropertyName, propertyDescriptor);
+    });
+  };
+  const PROPERTY_NAMES_TO_SKIP = ["name", "prototype", "length"];
+};
+
+export { allowCustomElementsRedefine };

package/dist/start_dev_server/start_dev_server.js

@@ -5687,6 +5687,39 @@ const jsenvPluginCacheControl = ({
 
 const SECONDS_IN_30_DAYS = 60 * 60 * 24 * 30;
 
+const jsenvPluginCustomElementsRedefine = () => {
+  const customElementsRedefineClientFileUrl = import.meta
+    .resolve("../client/custom_elements_redefine/custom_elements_redefine.js");
+
+  return {
+    name: "jsenv:custom_elements_redefine",
+    appliesDuring: "dev",
+    transformUrlContent: {
+      html: (urlInfo) => {
+        const htmlAst = parseHtml({ html: urlInfo.content, url: urlInfo.url });
+        const reference = urlInfo.dependencies.inject({
+          type: "script",
+          subtype: "js_module",
+          expectedType: "js_module",
+          specifier: customElementsRedefineClientFileUrl,
+        });
+        injectJsenvScript(htmlAst, {
+          type: "module",
+          src: reference.generatedSpecifier,
+          initCall: {
+            callee: "allowCustomElementsRedefine",
+          },
+          pluginName: "jsenv:custom_elements_redefine",
+        });
+        const htmlModified = stringifyHtmlAst(htmlAst);
+        return {
+          content: htmlModified,
+        };
+      },
+    },
+  };
+};
+
 const jsenvPluginRibbon = ({
   rootDirectoryUrl,
   htmlInclude = "/**/*.html",
@@ -6158,6 +6191,7 @@ const getCorePlugins = ({
   scenarioPlaceholders = true,
   ribbon = true,
   dropToOpen = true,
+  customElementsRedefine = true,
   packageSideEffects = false,
 } = {}) => {
   if (cacheControl === true) {
@@ -6254,6 +6288,7 @@ const getCorePlugins = ({
     ...(cacheControl ? [jsenvPluginCacheControl(cacheControl)] : []),
     ...(ribbon ? [jsenvPluginRibbon({ rootDirectoryUrl, ...ribbon })] : []),
     ...(dropToOpen ? [jsenvPluginDropToOpen()] : []),
+    ...(customElementsRedefine ? [jsenvPluginCustomElementsRedefine()] : []),
     jsenvPluginCleanHTML(),
     ...(packageSideEffects
       ? [jsenvPluginPackageSideEffects({ packageDirectory })]
@@ -9608,15 +9643,17 @@ const parseSecChUaHeader = (secChUa) => {
     brand = brands[0];
   }
   const runtimeName = brandNameToRuntimeName(brand.name);
-  const runtimeVersion = brand.version;
+  const runtimeVersion = `${brand.version}.0.0`;
   return { runtimeName, runtimeVersion };
 };
-
 const brandNameToRuntimeName = (brandName) => {
   const lower = brandName.toLowerCase();
   if (lower === "google chrome") {
     return "chrome";
   }
+  if (lower === "headlesschrome") {
+    return "chrome";
+  }
   if (lower === "microsoft edge") {
     return "edge";
   }
@@ -9629,7 +9666,8 @@ const brandNameToRuntimeName = (brandName) => {
   if (lower === "chromium") {
     return "chrome";
   }
-  return lower;
+  // other Chromium-based browsers share Chrome's compatibility
+  return "chrome";
 };
 
 const parseUserAgentHeader = (userAgent) => {
@@ -9673,7 +9711,9 @@ const parseUserAgentHeader = (userAgent) => {
     return { runtimeName: "firefox", runtimeVersion: `${major}.${minor}.0` };
   }
   // generic Chromium-based fallback (should normally be handled by sec-ch-ua)
-  const chromeMatch = userAgent.match(/\bChrome\/(\d+)\.(\d+)\b/);
+  const chromeMatch = userAgent.match(
+    /(?:HeadlessChrome|Chrome)\/(\d+)\.(\d+)\b/,
+  );
   if (chromeMatch) {
     const major = chromeMatch[1];
     const minor = chromeMatch[2] || "0";
@@ -10145,6 +10185,7 @@ const startDevServer = async ({
   cacheControl = true,
   ribbon = true,
   dropToOpen = true,
+  customElementsRedefine = true,
   // toolbar = false,
   onKitchenCreated = () => {},
   spa,
@@ -10260,6 +10301,7 @@ const startDevServer = async ({
       cacheControl,
       ribbon,
       dropToOpen,
+      customElementsRedefine,
     }),
   ]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "41.1.0",
+  "version": "41.2.0",
   "description": "Tool to develop, test and build js projects",
   "repository": {
     "type": "git",
@@ -93,6 +93,7 @@
     "@jsenv/assert": "workspace:*",
     "@jsenv/cli": "workspace:*",
     "@jsenv/core": "./",
+    "@jsenv/custom-elements-redefine": "workspace:*",
     "@jsenv/database-manager": "workspace:*",
     "@jsenv/eslint-config-relax": "workspace:*",
     "@jsenv/file-size-impact": "workspace:*",

package/src/dev/dev_server_plugins/runtime_from_request.js

@@ -47,15 +47,17 @@ const parseSecChUaHeader = (secChUa) => {
     brand = brands[0];
   }
   const runtimeName = brandNameToRuntimeName(brand.name);
-  const runtimeVersion = brand.version;
+  const runtimeVersion = `${brand.version}.0.0`;
   return { runtimeName, runtimeVersion };
 };
-
 const brandNameToRuntimeName = (brandName) => {
   const lower = brandName.toLowerCase();
   if (lower === "google chrome") {
     return "chrome";
   }
+  if (lower === "headlesschrome") {
+    return "chrome";
+  }
   if (lower === "microsoft edge") {
     return "edge";
   }
@@ -68,7 +70,8 @@ const brandNameToRuntimeName = (brandName) => {
   if (lower === "chromium") {
     return "chrome";
   }
-  return lower;
+  // other Chromium-based browsers share Chrome's compatibility
+  return "chrome";
 };
 
 const parseUserAgentHeader = (userAgent) => {
@@ -112,7 +115,9 @@ const parseUserAgentHeader = (userAgent) => {
     return { runtimeName: "firefox", runtimeVersion: `${major}.${minor}.0` };
   }
   // generic Chromium-based fallback (should normally be handled by sec-ch-ua)
-  const chromeMatch = userAgent.match(/\bChrome\/(\d+)\.(\d+)\b/);
+  const chromeMatch = userAgent.match(
+    /(?:HeadlessChrome|Chrome)\/(\d+)\.(\d+)\b/,
+  );
   if (chromeMatch) {
     const major = chromeMatch[1];
     const minor = chromeMatch[2] || "0";

package/src/dev/start_dev_server.js

@@ -90,6 +90,7 @@ export const startDevServer = async ({
   cacheControl = true,
   ribbon = true,
   dropToOpen = true,
+  customElementsRedefine = true,
   // toolbar = false,
   onKitchenCreated = () => {},
   spa,
@@ -206,6 +207,7 @@ export const startDevServer = async ({
       cacheControl,
       ribbon,
       dropToOpen,
+      customElementsRedefine,
     }),
   ]);
 

package/src/plugins/custom_elements_redefine/jsenv_plugin_custom_elements_redefine.js

@@ -0,0 +1,34 @@
+import { injectJsenvScript, parseHtml, stringifyHtmlAst } from "@jsenv/ast";
+
+export const jsenvPluginCustomElementsRedefine = () => {
+  const customElementsRedefineClientFileUrl = import.meta
+    .resolve("@jsenv/custom-elements-redefine/src/main.js");
+
+  return {
+    name: "jsenv:custom_elements_redefine",
+    appliesDuring: "dev",
+    transformUrlContent: {
+      html: (urlInfo) => {
+        const htmlAst = parseHtml({ html: urlInfo.content, url: urlInfo.url });
+        const reference = urlInfo.dependencies.inject({
+          type: "script",
+          subtype: "js_module",
+          expectedType: "js_module",
+          specifier: customElementsRedefineClientFileUrl,
+        });
+        injectJsenvScript(htmlAst, {
+          type: "module",
+          src: reference.generatedSpecifier,
+          initCall: {
+            callee: "allowCustomElementsRedefine",
+          },
+          pluginName: "jsenv:custom_elements_redefine",
+        });
+        const htmlModified = stringifyHtmlAst(htmlAst);
+        return {
+          content: htmlModified,
+        };
+      },
+    },
+  };
+};

package/src/plugins/plugins.js

@@ -21,6 +21,7 @@ import { jsenvPluginImportMetaCss } from "./import_meta_css/jsenv_plugin_import_
 import { jsenvPluginImportMetaHot } from "./import_meta_hot/jsenv_plugin_import_meta_hot.js";
 import { jsenvPluginAutoreload } from "./autoreload/jsenv_plugin_autoreload.js";
 import { jsenvPluginCacheControl } from "./cache_control/jsenv_plugin_cache_control.js";
+import { jsenvPluginCustomElementsRedefine } from "./custom_elements_redefine/jsenv_plugin_custom_elements_redefine.js";
 // other
 import { jsenvPluginRibbon } from "./ribbon/jsenv_plugin_ribbon.js";
 import { jsenvPluginDropToOpen } from "./drop_to_open/jsenv_plugin_drop_to_open.js";
@@ -58,6 +59,7 @@ export const getCorePlugins = ({
   scenarioPlaceholders = true,
   ribbon = true,
   dropToOpen = true,
+  customElementsRedefine = true,
   packageSideEffects = false,
 } = {}) => {
   if (cacheControl === true) {
@@ -154,6 +156,7 @@ export const getCorePlugins = ({
     ...(cacheControl ? [jsenvPluginCacheControl(cacheControl)] : []),
     ...(ribbon ? [jsenvPluginRibbon({ rootDirectoryUrl, ...ribbon })] : []),
     ...(dropToOpen ? [jsenvPluginDropToOpen()] : []),
+    ...(customElementsRedefine ? [jsenvPluginCustomElementsRedefine()] : []),
     jsenvPluginCleanHTML(),
     ...(packageSideEffects
       ? [jsenvPluginPackageSideEffects({ packageDirectory })]