@jsenv/terminal-recorder 1.5.45 → 1.5.47

package/src/.jsenv/chrome@145.0.0/@fs/Users/dmail/Documents/dev/jsenv/core/packages/backend/server/src/plugins/autoreload_on_server_restart/client/autoreload_on_server_restart.js

@@ -0,0 +1,133 @@
+const css = /* css */ `
+  dialog {
+    opacity: 0;
+    transition: all 0.3s allow-discrete;
+  }
+  dialog::backdrop {
+    background-image: linear-gradient(
+      45deg,
+      magenta,
+      rebeccapurple,
+      dodgerblue,
+      green
+    );
+    opacity: 0;
+    transition: all 0.3s allow-discrete;
+  }
+  dialog:open {
+    opacity: 1;
+  }
+  dialog:open::backdrop {
+    opacity: 0.75;
+  }
+`;
+
+const html = /* html */ `<style>
+    ${css}
+  </style>
+  <dialog>
+    <p>Connection with server is lost</p>
+    <button autofocus name="reconnect">Retry</button>
+  </dialog>`;
+
+class JsenvAutoreloadOnServerRestart extends HTMLElement {
+  constructor({ url } = {}) {
+    super();
+    const root = this.attachShadow({ mode: "open" });
+    root.innerHTML = html;
+
+    const dialog = root.querySelector("dialog");
+    const reconnectButton = dialog.querySelector('button[name="reconnect"]');
+
+    (async () => {
+      const connect = () => {
+        const websocket = new WebSocket(url);
+        const connectedPromise = new Promise((resolve) => {
+          websocket.onerror = () => {
+            resolve(null);
+          };
+          websocket.onopen = () => {
+            resolve(websocket);
+          };
+        });
+        return connectedPromise;
+      };
+
+      const initialWebSocket = await connect();
+      if (!initialWebSocket) {
+        return;
+      }
+      initialWebSocket.onclose = async () => {
+        console.info("connection to server lost, trying to reconnect");
+        const retry = async () => {
+          let attemptCount = 0;
+          let timeToWait = 100;
+          const tryToReconnect = async () => {
+            const newWebsocket = await connect();
+            if (newWebsocket) {
+              dialog.close();
+              console.info("reconnected to server, reloading the page...");
+              window.location.reload(true);
+              return;
+            }
+            attemptCount++;
+            if (attemptCount === 10) {
+              dialog.showModal();
+              reconnectButton.onclick = async () => {
+                reconnectButton.disabled = true;
+                const previousContext = reconnectButton.textContent;
+                reconnectButton.textContent = "Retrying...";
+                await retry();
+                reconnectButton.textContent = previousContext;
+                reconnectButton.disabled = false;
+              };
+              return;
+            }
+            timeToWait += 100;
+            await new Promise((resolve) => setTimeout(resolve, timeToWait));
+            await tryToReconnect();
+          };
+          await tryToReconnect();
+        };
+        retry();
+      };
+    })();
+  }
+}
+if (!customElements.get("jsenv-autoreload-on-server-restart")) {
+  customElements.define(
+    "jsenv-autoreload-on-server-restart",
+    JsenvAutoreloadOnServerRestart,
+  );
+}
+
+const websocketEndpoint =
+  document.currentScript.getAttribute("data-ws-endpoint") ||
+  "/.internal/alive.websocket";
+
+const jsenvAutoreloadOnServerRestartElement =
+  new JsenvAutoreloadOnServerRestart({
+    url: (() => {
+      const websocketScheme =
+        self.location.protocol === "https:" ? "wss" : "ws";
+      const websocketUrl = `${websocketScheme}://${self.location.host}${websocketEndpoint}`;
+      return websocketUrl;
+    })(),
+  });
+
+// script is injected into document.body
+if (document.body) {
+  document.currentScript.parentNode.replaceChild(
+    jsenvAutoreloadOnServerRestartElement,
+    document.currentScript,
+  );
+}
+// script injected outisde document.body (likely in head)
+else {
+  document.currentScript.parentNode.removeChild(document.currentScript);
+  document.onreadystatechange = () => {
+    if (document.readyState === "interactive") {
+      document.body.appendChild(jsenvAutoreloadOnServerRestartElement);
+    }
+  };
+}

package/src/.jsenv/chrome@145.0.0/@fs/Users/dmail/Documents/dev/jsenv/core/packages/frontend/custom-elements-redefine/src/main.js

@@ -0,0 +1,217 @@
+/*
+ * https://github.com/lit/lit/issues/1844
+ * https://github.com/vegarringdal/custom-elements-hmr-polyfill/tree/master
+ */
+
+export const allowCustomElementsRedefine = ({
+  updateWholeDOMOnRedefine = false,
+} = {}) => {
+  const patchedSymbol = Symbol.for("allowCustomElementsRedefine");
+  if (customElements.define[patchedSymbol]) {
+    customElements.define[patchedSymbol].updateWholeDOMOnRedefine =
+      updateWholeDOMOnRedefine;
+    return;
+  }
+  const elementsChanged = [];
+  let timeoutId;
+  const onCustomElementChange = (
+    customElementName,
+    // customElementClass,
+    // options,
+  ) => {
+    if (!customElements.define[patchedSymbol].updateWholeDOMOnRedefine) {
+      return;
+    }
+    elementsChanged.push(customElementName);
+    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;
+        });
+      }
+      elementsChanged.length = 0;
+    }, 250);
+  };
+
+  const customElementClassMap = new Map();
+  const defineOriginal = customElements.define;
+  const definePatched = (customElementName, customElementClass, options) => {
+    const registeredCustomElement = customElements.get(customElementName);
+    customElementClassMap.set(customElementName, customElementClass);
+    if (registeredCustomElement) {
+      onCustomElementChange(customElementName, customElementClass, options);
+      return;
+    }
+    const CustomElementFacade = createCustomElementFacade(
+      customElementName,
+      customElementClass,
+    );
+    defineOriginal.call(
+      customElements,
+      customElementName,
+      CustomElementFacade,
+      options,
+    );
+  };
+  definePatched[patchedSymbol] = { updateWholeDOMOnRedefine };
+  customElements.define = definePatched;
+
+  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) {
+          update_prototype_chain: {
+            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;
+            }
+          }
+          update_prototype: {
+            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"];
+};