@jsenv/core 27.3.3 → 27.5.0

package/dist/js/html_supervisor_setup.js

@@ -14,7 +14,7 @@ window.__html_supervisor__ = {
       type: "js_classic",
       isInline,
       currentScript: document.currentScript,
-      execute: () => {
+      execute: (url) => {
         return new Promise((resolve, reject) => {
           const script = document.createElement("script")
           if (crossorigin) {
@@ -23,8 +23,7 @@ window.__html_supervisor__ = {
           if (integrity) {
             script.integrity = integrity
           }
-          script.src = src
-          const scriptUrl = new URL(src, window.location).href
+          script.src = url
           let lastWindowErrorUrl
           let lastWindowError
           const windowErrorCallback = (e) => {
@@ -45,7 +44,7 @@ window.__html_supervisor__ = {
           })
           script.addEventListener("load", () => {
             cleanup()
-            if (lastWindowErrorUrl === scriptUrl) {
+            if (lastWindowErrorUrl === url) {
               reject(lastWindowError)
             } else {
               resolve()

package/dist/js/new_stylesheet.js

@@ -14,30 +14,6 @@
 
   var defineProperty = Object.defineProperty;
   var forEach = Array.prototype.forEach;
-
-  var hasBrokenRules = function () {
-    var style = bootstrapper.createElement("style");
-    style.textContent = '.x{content:"y"}';
-    bootstrapper.body.appendChild(style);
-    return style.sheet.cssRules[0].style.content !== '"y"';
-  }();
-
-  var brokenRulePatterns = [/content:\s*["']/gm];
-
-  function fixBrokenRules(content) {
-    return brokenRulePatterns.reduce(function (acc, pattern) {
-      return acc.replace(pattern, "$&%%%");
-    }, content);
-  }
-
-  var placeholderPatterns = [/(content:\s*["'])%%%/gm];
-  var getCssText = hasBrokenRules ? function (rule) {
-    return placeholderPatterns.reduce(function (acc, pattern) {
-      return acc.replace(pattern, "$1");
-    }, rule.cssText);
-  } : function (rule) {
-    return rule.cssText;
-  };
   var importPattern = /@import.+?;?$/gm;
 
   function rejectImports(contents) {
@@ -50,18 +26,6 @@
     return _contents.trim();
   }
 
-  function clearRules(sheet) {
-    for (var i = 0; i < sheet.cssRules.length; i++) {
-      sheet.deleteRule(0);
-    }
-  }
-
-  function insertAllRules(from, to) {
-    forEach.call(from.cssRules, function (rule, i) {
-      to.insertRule(getCssText(rule), i);
-    });
-  }
-
   function isElementConnected(element) {
     return "isConnected" in element ? element.isConnected : document.contains(element);
   }
@@ -106,9 +70,10 @@
     return typeof instance === "object" ? nonConstructedProto.isPrototypeOf(instance) : false;
   }
 
-  var $basicStyleSheet = new WeakMap();
+  var $basicStyleElement = new WeakMap();
   var $locations = new WeakMap();
   var $adoptersByLocation = new WeakMap();
+  var $appliedMethods = new WeakMap();
 
   function addAdopterLocation(sheet, location) {
     var adopter = document.createElement("style");
@@ -130,13 +95,15 @@
 
   function restyleAdopter(sheet, adopter) {
     requestAnimationFrame(function () {
-      clearRules(adopter.sheet);
-      insertAllRules($basicStyleSheet.get(sheet), adopter.sheet);
+      adopter.textContent = $basicStyleElement.get(sheet).textContent;
+      $appliedMethods.get(sheet).forEach(function (command) {
+        return adopter.sheet[command.method].apply(adopter.sheet, command.args);
+      });
     });
   }
 
   function checkInvocationCorrectness(self) {
-    if (!$basicStyleSheet.has(self)) {
+    if (!$basicStyleElement.has(self)) {
       throw new TypeError("Illegal invocation");
     }
   }
@@ -145,9 +112,10 @@
     var self = this;
     var style = document.createElement("style");
     bootstrapper.body.appendChild(style);
-    $basicStyleSheet.set(self, style.sheet);
+    $basicStyleElement.set(self, style);
     $locations.set(self, []);
     $adoptersByLocation.set(self, new WeakMap());
+    $appliedMethods.set(self, []);
   }
 
   var proto$1 = ConstructedStyleSheet.prototype;
@@ -166,9 +134,8 @@
 
     if (typeof contents === "string") {
       var self_1 = this;
-      var style = $basicStyleSheet.get(self_1).ownerNode;
-      style.textContent = hasBrokenRules ? fixBrokenRules(rejectImports(contents)) : rejectImports(contents);
-      $basicStyleSheet.set(self_1, style.sheet);
+      $basicStyleElement.get(self_1).textContent = rejectImports(contents);
+      $appliedMethods.set(self_1, []);
       $locations.get(self_1).forEach(function (location) {
         if (location.isConnected()) {
           restyleAdopter(self_1, getAdopterByLocation(self_1, location));
@@ -182,7 +149,15 @@
     enumerable: true,
     get: function cssRules() {
       checkInvocationCorrectness(this);
-      return $basicStyleSheet.get(this).cssRules;
+      return $basicStyleElement.get(this).sheet.cssRules;
+    }
+  });
+  defineProperty(proto$1, "media", {
+    configurable: true,
+    enumerable: true,
+    get: function media() {
+      checkInvocationCorrectness(this);
+      return $basicStyleElement.get(this).sheet.media;
     }
   });
   cssStyleSheetMethods.forEach(function (method) {
@@ -190,25 +165,18 @@
       var self = this;
       checkInvocationCorrectness(self);
       var args = arguments;
+      $appliedMethods.get(self).push({
+        method: method,
+        args: args
+      });
       $locations.get(self).forEach(function (location) {
         if (location.isConnected()) {
           var sheet = getAdopterByLocation(self, location).sheet;
           sheet[method].apply(sheet, args);
         }
       });
-
-      if (hasBrokenRules) {
-        if (method === "insertRule") {
-          args[0] = fixBrokenRules(args[0]);
-        }
-
-        if (method === "addRule") {
-          args[1] = fixBrokenRules(args[1]);
-        }
-      }
-
-      var basic = $basicStyleSheet.get(self);
-      return basic[method].apply(basic, args);
+      var basicSheet = $basicStyleElement.get(self).sheet;
+      return basicSheet[method].apply(basicSheet, args);
     };
   });
   defineProperty(ConstructedStyleSheet, Symbol.hasInstance, {

package/dist/js/server_events_client.js

@@ -0,0 +1,307 @@
+const STATUSES = {
+  CONNECTING: "connecting",
+  CONNECTED: "connected",
+  DISCONNECTED: "disconnected"
+};
+const createEventSourceConnection = (eventSourceUrl, {
+  retryMaxAttempt = Infinity,
+  retryAllocatedMs = Infinity,
+  lastEventId,
+  useEventsToManageConnection = true
+} = {}) => {
+  const {
+    EventSource
+  } = window;
+
+  if (typeof EventSource !== "function") {
+    return () => {};
+  }
+
+  let eventSource;
+  const listenersMap = new Map();
+  const callbacksMap = new Map();
+  const eventSourceOrigin = new URL(eventSourceUrl).origin;
+
+  const addEventCallbacks = namedCallbacks => {
+    let listenersMapSize = listenersMap.size;
+    Object.keys(namedCallbacks).forEach(eventName => {
+      const callback = namedCallbacks[eventName];
+      const existingCallbacks = callbacksMap.get(eventName);
+      let callbacks;
+
+      if (existingCallbacks) {
+        callbacks = existingCallbacks;
+      } else {
+        callbacks = [];
+        callbacksMap.set(eventName, callbacks);
+      }
+
+      if (callbacks.length === 0) {
+        const eventListener = e => {
+          if (e.origin === eventSourceOrigin) {
+            if (e.lastEventId) {
+              lastEventId = e.lastEventId;
+            }
+
+            callbacks.forEach(eventCallback => {
+              eventCallback(e);
+            });
+          }
+        };
+
+        listenersMap.set(eventName, eventListener);
+
+        if (eventSource) {
+          eventSource.addEventListener(eventName, eventListener);
+        }
+      }
+
+      callbacks.push(callback);
+    });
+
+    if (useEventsToManageConnection && listenersMapSize === 0 && listenersMap.size > 0 && status.value !== STATUSES.CONNECTING && status.value !== STATUSES.CONNECTED) {
+      _connect();
+    }
+
+    let removed = false;
+    return () => {
+      if (removed) return;
+      removed = true;
+      listenersMapSize = listenersMap.size;
+      Object.keys(namedCallbacks).forEach(eventName => {
+        const callback = namedCallbacks[eventName];
+        const callbacks = callbacksMap.get(eventName);
+
+        if (callbacks) {
+          const index = callbacks.indexOf(callback);
+
+          if (index > -1) {
+            callbacks.splice(index, 1);
+
+            if (callbacks.length === 0) {
+              const listener = listenersMap.get(eventName);
+
+              if (listener) {
+                listenersMap.delete(listener);
+
+                if (eventSource) {
+                  eventSource.removeEventListener(eventName, listener);
+                }
+              }
+            }
+          }
+        }
+      });
+      namedCallbacks = null; // allow garbage collect
+
+      if (useEventsToManageConnection && listenersMapSize > 0 && listenersMap.size === 0 && (status.value === STATUSES.CONNECTING || status.value === STATUSES.CONNECTED)) {
+        _disconnect();
+      }
+    };
+  };
+
+  const status = {
+    value: "default",
+    goTo: value => {
+      if (value === status.value) {
+        return;
+      }
+
+      status.value = value;
+      status.onchange();
+    },
+    onchange: () => {}
+  };
+
+  let _disconnect = () => {};
+
+  const attemptConnection = url => {
+    if (status.value === STATUSES.CONNECTING || status.value === STATUSES.CONNECTED) {
+      return;
+    }
+
+    eventSource = new EventSource(url, {
+      withCredentials: true
+    });
+
+    _disconnect = () => {
+      if (status.value !== STATUSES.CONNECTING && status.value !== STATUSES.CONNECTED) {
+        console.warn(`disconnect() ignored because connection is ${status.value}`);
+        return;
+      }
+
+      if (eventSource) {
+        eventSource.onerror = undefined;
+        eventSource.close();
+        listenersMap.forEach((listener, eventName) => {
+          eventSource.removeEventListener(eventName, listener);
+        });
+      }
+
+      eventSource = null;
+      status.goTo(STATUSES.DISCONNECTED);
+    };
+
+    let retryCount = 0;
+    let firstRetryMs = Date.now();
+
+    eventSource.onerror = errorEvent => {
+      if (errorEvent.target.readyState === EventSource.CONNECTING) {
+        if (retryCount > retryMaxAttempt) {
+          console.info(`could not connect after ${retryMaxAttempt} attempt`);
+
+          _disconnect();
+
+          return;
+        }
+
+        if (retryCount === 0) {
+          firstRetryMs = Date.now();
+        } else {
+          const allRetryDuration = Date.now() - firstRetryMs;
+
+          if (retryAllocatedMs && allRetryDuration > retryAllocatedMs) {
+            console.info(`could not connect in less than ${retryAllocatedMs} ms`);
+
+            _disconnect();
+
+            return;
+          }
+        }
+
+        retryCount++;
+        status.goTo(STATUSES.CONNECTING);
+        return;
+      }
+
+      if (errorEvent.target.readyState === EventSource.CLOSED) {
+        _disconnect();
+
+        return;
+      }
+    };
+
+    eventSource.onopen = () => {
+      status.goTo(STATUSES.CONNECTED);
+    };
+
+    listenersMap.forEach((listener, eventName) => {
+      eventSource.addEventListener(eventName, listener);
+    });
+
+    if (!listenersMap.has("welcome")) {
+      addEventCallbacks({
+        welcome: () => {} // to update lastEventId
+
+      });
+    }
+
+    status.goTo(STATUSES.CONNECTING);
+  };
+
+  let _connect = () => {
+    attemptConnection(eventSourceUrl);
+
+    _connect = () => {
+      attemptConnection(lastEventId ? addLastEventIdIntoUrlSearchParams(eventSourceUrl, lastEventId) : eventSourceUrl);
+    };
+  };
+
+  const removePageUnloadListener = listenPageUnload(() => {
+    if (status.value === STATUSES.CONNECTING || status.value === STATUSES.CONNECTED) {
+      _disconnect();
+    }
+  });
+
+  const destroy = () => {
+    removePageUnloadListener();
+
+    _disconnect();
+
+    listenersMap.clear();
+    callbacksMap.clear();
+  };
+
+  return {
+    status,
+    connect: () => _connect(),
+    addEventCallbacks,
+    disconnect: () => _disconnect(),
+    destroy
+  };
+};
+
+const addLastEventIdIntoUrlSearchParams = (url, lastEventId) => {
+  if (url.indexOf("?") === -1) {
+    url += "?";
+  } else {
+    url += "&";
+  }
+
+  return `${url}last-event-id=${encodeURIComponent(lastEventId)}`;
+}; // const listenPageMightFreeze = (callback) => {
+//   const removePageHideListener = listenEvent(window, "pagehide", (pageHideEvent) => {
+//     if (pageHideEvent.persisted === true) {
+//       callback(pageHideEvent)
+//     }
+//   })
+//   return removePageHideListener
+// }
+// const listenPageFreeze = (callback) => {
+//   const removeFreezeListener = listenEvent(document, "freeze", (freezeEvent) => {
+//     callback(freezeEvent)
+//   })
+//   return removeFreezeListener
+// }
+// const listenPageIsRestored = (callback) => {
+//   const removeResumeListener = listenEvent(document, "resume", (resumeEvent) => {
+//     removePageshowListener()
+//     callback(resumeEvent)
+//   })
+//   const removePageshowListener = listenEvent(window, "pageshow", (pageshowEvent) => {
+//     if (pageshowEvent.persisted === true) {
+//       removePageshowListener()
+//       removeResumeListener()
+//       callback(pageshowEvent)
+//     }
+//   })
+//   return () => {
+//     removeResumeListener()
+//     removePageshowListener()
+//   }
+// }
+
+
+const listenPageUnload = callback => {
+  const removePageHideListener = listenEvent(window, "pagehide", pageHideEvent => {
+    if (pageHideEvent.persisted !== true) {
+      callback(pageHideEvent);
+    }
+  });
+  return removePageHideListener;
+};
+
+const listenEvent = (emitter, event, callback) => {
+  emitter.addEventListener(event, callback);
+  return () => {
+    emitter.removeEventListener(event, callback);
+  };
+};
+
+const eventsourceConnection = createEventSourceConnection(document.location.href, {
+  retryMaxAttempt: Infinity,
+  retryAllocatedMs: 20 * 1000
+});
+const {
+  status,
+  connect,
+  addEventCallbacks,
+  disconnect
+} = eventsourceConnection;
+window.__server_events__ = {
+  addEventCallbacks,
+  status,
+  connect,
+  disconnect
+};
+connect();