brut-js 0.0.10 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brut-js",
-  "version": "0.0.10",
+  "version": "0.0.20",
   "type": "module",
   "keywords": [ "WebComponents", "Custom Elements" ],
   "bugs": {

package/specs/ConstraintViolationMessage.spec.js

@@ -11,8 +11,8 @@ describe("<brut-cv>", () => {
   })
 
   withHTML(`
-    <brut-i18n-translation key="problem"               value="%{field} has a problem"></brut-i18n-translation>
-    <brut-i18n-translation key="general.cv.this_field" value="THAT FIELD"></brut-i18n-translation>
+    <brut-i18n-translation key="problem"       value="%{field} has a problem"></brut-i18n-translation>
+    <brut-i18n-translation key="cv.this_field" value="THAT FIELD"></brut-i18n-translation>
 
     <brut-cv input-name="some-field" key="problem"></brut-cv>
   `).test("Inserts using the this_field key as the placeholder", ({document,assert}) => {
@@ -21,9 +21,9 @@ describe("<brut-cv>", () => {
   })
 
   withHTML(`
-    <brut-i18n-translation key="problem"                             value="%{field} has a problem"></brut-i18n-translation>
-    <brut-i18n-translation key="general.cv.this_field"               value="THAT FIELD"></brut-i18n-translation>
-    <brut-i18n-translation key="general.cv.fe.fieldNames.some-field" value="Some Field"></brut-i18n-translation>
+    <brut-i18n-translation key="problem"                     value="%{field} has a problem"></brut-i18n-translation>
+    <brut-i18n-translation key="cv.this_field"               value="THAT FIELD"></brut-i18n-translation>
+    <brut-i18n-translation key="cv.fe.fieldNames.some-field" value="Some Field"></brut-i18n-translation>
 
     <brut-cv input-name="some-field" key="problem"></brut-cv>
   `).test("Inserts using the this_field key as the placeholder", ({document,assert}) => {

package/specs/ConstraintViolationMessages.spec.js

@@ -2,8 +2,8 @@ import { withHTML } from "./SpecHelper.js"
 
 describe("<brut-cv-messages>", () => {
   withHTML(`
-    <brut-i18n-translation key="general.cv.fe.patternMismatch" value="%{field} does not match the pattern"></brut-i18n-translation>
-    <brut-i18n-translation key="general.cv.fe.rangeOverflow" value="%{field} is above the range"></brut-i18n-translation>
+    <brut-i18n-translation key="cv.fe.patternMismatch" value="%{field} does not match the pattern"></brut-i18n-translation>
+    <brut-i18n-translation key="cv.fe.rangeOverflow" value="%{field} is above the range"></brut-i18n-translation>
 
     <brut-cv-messages input-name="some-field"></brut-cv-messages>
   `).test("Inserts constraint violation messages based on validity state", ({document,assert}) => {

package/specs/Form.spec.js

@@ -51,9 +51,9 @@ describe("<brut-form>", () => {
     assert(gotInvalid)
     assert.equal(brutForm.getAttribute("submitted-invalid"),"")
 
-    let error = textFieldLabel.querySelector("brut-cv[key='general.cv.fe.valueMissing']")
+    let error = textFieldLabel.querySelector("brut-cv[key='cv.fe.valueMissing']")
     assert(error)
-    error = numberFieldLabel.querySelector("brut-cv[key='general.cv.fe.valueMissing']")
+    error = numberFieldLabel.querySelector("brut-cv[key='cv.fe.valueMissing']")
     assert(error)
 
     const textField = textFieldLabel.querySelector("input")
@@ -71,9 +71,9 @@ describe("<brut-form>", () => {
     assert(gotInvalid)
     assert.equal(brutForm.getAttribute("submitted-invalid"),"")
 
-    error = textFieldLabel.querySelector("brut-cv[key='general.cv.fe.valueMissing']")
+    error = textFieldLabel.querySelector("brut-cv[key='cv.fe.valueMissing']")
     assert(!error)
-    error = numberFieldLabel.querySelector("brut-cv[key='general.cv.fe.valueMissing']")
+    error = numberFieldLabel.querySelector("brut-cv[key='cv.fe.valueMissing']")
     assert(error)
 
     const numberField = numberFieldLabel.querySelector("input")
@@ -174,7 +174,7 @@ describe("<brut-form>", () => {
     assert(gotInvalid)
     assert.equal(brutForm.getAttribute("submitted-invalid"),"")
 
-    let error = brutForm.querySelector("brut-cv[input-name='text'][key='general.cv.fe.valueMissing']")
+    let error = brutForm.querySelector("brut-cv[input-name='text'][key='cv.fe.valueMissing']")
     assert(error)
 
   })

package/specs/public/js/bundle.js

@@ -299,7 +299,7 @@
     /** Override this to perform whatever logic your element must perform.
      * Because changes to your element's attributes can happen at any time and in any order,
      * you will want to consolidate all logic into one method—this one. You will also
-     * want to make sure that this method is idempotent and fault-tolerant.
+     * want to make sure that this method is idempotent and fault-tolerant. It will be called multiple times.
      *
      * It is called by {@link BaseCustomElement#attributeChangedCallback|attributeChangedCallback} and {@link BaseCustomElement#connectedCallback|connectedCallback}, however
      * it will *not* be called after the elment has been disconnected.
@@ -395,7 +395,7 @@
      * @param {...String} keyPath - parts of the path of the key after the namespace that Brut manages.
      */
     static i18nKey(...keyPath) {
-      const path = ["general", "cv"];
+      const path = ["cv"];
       return path.concat(keyPath).join(".");
     }
     #key = null;
@@ -455,7 +455,7 @@
      * This should be called as part of a Form validation event to provide a customized UX for
      * the error messages, beyond what the browser would do by default.  The keys used are the same
      * as the attributes of a `ValidityState`, so for example, a range underflow would mean that `validity.rangeUnderflow` would return
-     * true.  Thus, a `<brut-cv>` would be created with `key="general.cv.fe.rangeUnderflow"`.
+     * true.  Thus, a `<brut-cv>` would be created with `key="cv.fe.rangeUnderflow"`.
      *
      * The `cv.fe` is hard-coded to be consistent with Brut's server-side translation management.
      *
@@ -785,6 +785,44 @@
   };
   var AjaxSubmit_default = AjaxSubmit;
 
+  // src/Autosubmit.js
+  var Autosubmit = class extends BaseCustomElement_default {
+    static tagName = "brut-autosubmit";
+    static observedAttributes = [
+      "show-warnings"
+    ];
+    #submitForm = (event) => {
+      const form2 = this.closest("form");
+      if (!form2) {
+        this.logger.info("No longer a form containing this element");
+        return;
+      }
+      if (event.target.form != form2) {
+        this.logger.info("Event target %o's form is not the form that contains this element", event.target);
+        return;
+      }
+      form2.requestSubmit();
+    };
+    update() {
+      const form2 = this.closest("form");
+      if (!form2) {
+        this.logger.info("No form containing this element - nothing to autosubmit");
+        return;
+      }
+      const inputs = Array.from(this.querySelectorAll("input, textarea, select")).filter((element) => {
+        return element.form == form2;
+      });
+      if (inputs.length == 0) {
+        this.logger.info("No input, textarea, or select inside this element belongs to the form containing this element");
+        return;
+      }
+      inputs.forEach((input) => {
+        input.addEventListener("change", this.#submitForm);
+      });
+    }
+  };
+  var Autosubmit_default = Autosubmit;
+
   // src/ConfirmationDialog.js
   var ConfirmationDialog = class extends BaseCustomElement_default {
     static tagName = "brut-confirmation-dialog";
@@ -1101,6 +1139,84 @@
   };
   var Form_default = Form;
 
+  // src/LocaleDetection.js
+  var LocaleDetection = class extends BaseCustomElement_default {
+    static tagName = "brut-locale-detection";
+    static observedAttributes = [
+      "locale-from-server",
+      "timezone-from-server",
+      "url",
+      "timeout-before-ping-ms",
+      "show-warnings"
+    ];
+    #localeFromServer = null;
+    #timezoneFromServer = null;
+    #reportingURL = null;
+    #timeoutBeforePing = 1e3;
+    #serverContacted = false;
+    localeFromServerChangedCallback({ newValue }) {
+      this.#localeFromServer = newValue;
+    }
+    timezoneFromServerChangedCallback({ newValue }) {
+      this.#timezoneFromServer = newValue;
+    }
+    urlChangedCallback({ newValue }) {
+      if (this.#serverContacted) {
+        this.#serverContacted = false;
+      }
+      this.#reportingURL = newValue;
+    }
+    timeoutBeforePingMsChangedCallback({ newValue }) {
+      this.#timeoutBeforePing = newValue;
+    }
+    update() {
+      if (this.#timeoutBeforePing == 0) {
+        this.#pingServerWithLocaleInfo();
+      } else {
+        setTimeout(this.#pingServerWithLocaleInfo.bind(this), this.#timeoutBeforePing);
+      }
+    }
+    #pingServerWithLocaleInfo() {
+      if (!this.#reportingURL) {
+        this.logger.info("no url= set, so nowhere to report to");
+        return;
+      }
+      if (this.#localeFromServer && this.#timezoneFromServer) {
+        this.logger.info("locale and timezone both set, not contacting server");
+        return;
+      }
+      if (this.#serverContacted) {
+        this.logger.info("server has already been contacted at the given url, not doing it again");
+        return;
+      }
+      this.#serverContacted = true;
+      const formatOptions = Intl.DateTimeFormat().resolvedOptions();
+      const request = new Request(
+        this.#reportingURL,
+        {
+          headers: {
+            "Content-Type": "application/json"
+          },
+          method: "POST",
+          body: JSON.stringify({
+            locale: formatOptions.locale,
+            timeZone: formatOptions.timeZone
+          })
+        }
+      );
+      window.fetch(request).then((response) => {
+        if (response.ok) {
+          this.logger.info("Server gave us the OK");
+        } else {
+          console.warn(response);
+        }
+      }).catch((e) => {
+        console.warn(e);
+      });
+    }
+  };
+  var LocaleDetection_default = LocaleDetection;
+
   // src/Message.js
   var Message = class _Message extends BaseCustomElement_default {
     static tagName = "brut-message";
@@ -1219,121 +1335,174 @@
   };
   var Tabs_default = Tabs;
 
-  // src/LocaleDetection.js
-  var LocaleDetection = class extends BaseCustomElement_default {
-    static tagName = "brut-locale-detection";
+  // src/Tracing.js
+  var Tracing = class extends BaseCustomElement_default {
+    static tagName = "brut-tracing";
     static observedAttributes = [
-      "locale-from-server",
-      "timezone-from-server",
       "url",
-      "timeout-before-ping-ms",
       "show-warnings"
     ];
-    #localeFromServer = null;
-    #timezoneFromServer = null;
-    #reportingURL = null;
-    #timeoutBeforePing = 1e3;
-    #serverContacted = false;
-    localeFromServerChangedCallback({ newValue }) {
-      this.#localeFromServer = newValue;
-    }
-    timezoneFromServerChangedCallback({ newValue }) {
-      this.#timezoneFromServer = newValue;
-    }
-    urlChangedCallback({ newValue }) {
-      if (this.#serverContacted) {
-        this.#serverContacted = false;
+    #url = null;
+    #sent = {};
+    #payload = {};
+    #timeOrigin = null;
+    #supportedTypes = [];
+    #performanceObserver = new PerformanceObserver((entries) => {
+      const navigation = entries.getEntriesByType("navigation")[0];
+      if (navigation && navigation.loadEventEnd != 0 && !this.#payload.navigation) {
+        this.#payload.navigation = this.#parseNavigation(navigation);
       }
-      this.#reportingURL = newValue;
+      const largestContentfulPaint = entries.getEntriesByType("largest-contentful-paint");
+      if (largestContentfulPaint.length > 0 && !this.#payload["largest-contentful-paint"]) {
+        this.#payload["largest-contentful-paint"] = this.#parseLargestContentfulPaint(largestContentfulPaint);
+      }
+      const paint = entries.getEntriesByName("first-contentful-paint", "paint")[0];
+      if (paint && !this.#payload.paint) {
+        this.#payload.paint = this.#parseFirstContentfulPaint(paint);
+      }
+      if (this.#supportedTypes.every((type) => this.#payload[type])) {
+        this.#sendSpans();
+        this.#payload = {};
+      }
+    });
+    constructor() {
+      super();
+      this.#timeOrigin = Date.now();
+      this.#supportedTypes = [
+        "navigation",
+        "largest-contentful-paint",
+        "paint"
+      ].filter((type) => {
+        return PerformanceObserver.supportedEntryTypes.includes(type);
+      });
     }
-    timeoutBeforePingMsChangedCallback({ newValue }) {
-      this.#timeoutBeforePing = newValue;
+    urlChangedCallback({ newValue }) {
+      this.#url = newValue;
     }
     update() {
-      if (this.#timeoutBeforePing == 0) {
-        this.#pingServerWithLocaleInfo();
-      } else {
-        setTimeout(this.#pingServerWithLocaleInfo.bind(this), this.#timeoutBeforePing);
-      }
+      this.#supportedTypes.forEach((type) => {
+        this.#performanceObserver.observe({ type, buffered: true });
+      });
     }
-    #pingServerWithLocaleInfo() {
-      if (!this.#reportingURL) {
-        this.logger.info("no url= set, so nowhere to report to");
+    #sendSpans() {
+      const headers = this.#initializerHeadersIfCanContinue();
+      if (!headers) {
         return;
       }
-      if (this.#localeFromServer && this.#timezoneFromServer) {
-        this.logger.info("locale and timezone both set, not contacting server");
-        return;
+      const span = this.#payload.navigation;
+      if (this.#payload.paint) {
+        span.events.push({
+          name: this.#payload.paint.name,
+          timestamp: this.#timeOrigin + this.#payload.paint.startTime
+        });
       }
-      if (this.#serverContacted) {
-        this.logger.info("server has already been contacted at the given url, not doing it again");
-        return;
+      if (this.#payload["largest-contentful-paint"]) {
+        this.#payload["largest-contentful-paint"].forEach((event) => {
+          span.events.push({
+            name: event.name,
+            timestamp: this.#timeOrigin + event.startTime,
+            attributes: {
+              "element.tag": event.element?.tagName,
+              "element.class": event.element?.className
+            }
+          });
+        });
       }
-      this.#serverContacted = true;
-      const formatOptions = Intl.DateTimeFormat().resolvedOptions();
+      this.#sent[this.#url] = true;
+      headers.append("tracestate", `brut=${window.btoa(JSON.stringify(span))}`);
       const request = new Request(
-        this.#reportingURL,
+        this.#url,
         {
-          headers: {
-            "Content-Type": "application/json"
-          },
-          method: "POST",
-          body: JSON.stringify({
-            locale: formatOptions.locale,
-            timeZone: formatOptions.timeZone
-          })
+          headers,
+          method: "GET"
         }
       );
-      window.fetch(request).then((response) => {
-        if (response.ok) {
-          this.logger.info("Server gave us the OK");
-        } else {
-          console.warn(response);
+      fetch(request).then((response) => {
+        if (!response.ok) {
+          console.warn("Problem sending instrumentation: %s/%s", response.status, response.statusText);
         }
-      }).catch((e) => {
-        console.warn(e);
+      }).catch((error) => {
+        console.warn("Problem sending instrumentation: %o", error);
       });
     }
-  };
-  var LocaleDetection_default = LocaleDetection;
-
-  // src/Autosubmit.js
-  var Autosubmit = class extends BaseCustomElement_default {
-    static tagName = "brut-autosubmit";
-    static observedAttributes = [
-      "show-warnings"
-    ];
-    #submitForm = (event) => {
-      const form2 = this.closest("form");
-      if (!form2) {
-        this.logger.info("No longer a form containing this element");
+    #parseNavigation(navigation) {
+      const documentFetch = {
+        name: "browser.documentFetch",
+        start_timestamp: navigation.fetchStart + this.#timeOrigin,
+        end_timestamp: navigation.responseEnd + this.#timeOrigin,
+        attributes: {
+          "http.url": navigation.name
+        }
+      };
+      const events = [
+        "fetchStart",
+        "unloadEventStart",
+        "unloadEventEnd",
+        "domInteractive",
+        "domInteractive",
+        "domContentLoadedEventStart",
+        "domContentLoadedEventEnd",
+        "domComplete",
+        "loadEventStart",
+        "loadEventEnd"
+      ];
+      return {
+        name: "browser.documentLoad",
+        start_timestamp: navigation.fetchStart + this.#timeOrigin,
+        end_timestamp: navigation.loadEventEnd + this.#timeOrigin,
+        attributes: {
+          "http.url": navigation.name,
+          "http.user_agent": window.navigator.userAgent
+        },
+        events: events.map((eventName) => {
+          return {
+            name: eventName,
+            timestamp: this.#timeOrigin + navigation[eventName]
+          };
+        }),
+        spans: [
+          documentFetch
+        ]
+      };
+    }
+    #parseFirstContentfulPaint(paint) {
+      return {
+        name: "browser.first-contentful-paint",
+        startTime: paint.startTime
+      };
+    }
+    #parseLargestContentfulPaint(largestContentfulPaint) {
+      return largestContentfulPaint.map((entry) => {
+        return {
+          name: "browser.largest-contentful-paint",
+          startTime: entry.startTime,
+          element: entry.element
+        };
+      });
+    }
+    #initializerHeadersIfCanContinue() {
+      if (!this.#url) {
+        this.logger.info("No url set, no traces will be reported");
         return;
       }
-      if (event.target.form != form2) {
-        this.logger.info("Event target %o's form is not the form that contains this element", event.target);
+      const $traceparent = document.querySelector("meta[name='traceparent']");
+      if (!$traceparent) {
+        this.logger.info("No <meta name='traceparent' ...> in the document, no traces can be reported");
         return;
       }
-      form2.requestSubmit();
-    };
-    update() {
-      const form2 = this.closest("form");
-      if (!form2) {
-        this.logger.info("No form containing this element - nothing to autosubmit");
+      if (this.#sent[this.#url]) {
+        this.logger.info("Already sent to %s", this.#url);
         return;
       }
-      const inputs = Array.from(this.querySelectorAll("input, textarea, select")).filter((element) => {
-        return element.form == form2;
-      });
-      if (inputs.length == 0) {
-        this.logger.info("No input, textarea, or select inside this element belongs to the form containing this element");
+      const traceparent = $traceparent.getAttribute("content");
+      if (!traceparent) {
+        this.logger.info("%o had no value for the content attribute, no traces can be reported", $traceparent);
         return;
       }
-      inputs.forEach((input) => {
-        input.addEventListener("change", this.#submitForm);
-      });
+      return new Headers({ traceparent });
     }
   };
-  var Autosubmit_default = Autosubmit;
+  var Tracing_default = Tracing;
 
   // src/index.js
   var BrutCustomElements = class {
@@ -1360,7 +1529,8 @@
     ConstraintViolationMessage_default,
     Tabs_default,
     LocaleDetection_default,
-    Autosubmit_default
+    Autosubmit_default,
+    Tracing_default
   );
 
   // src/appForTestingOnly.js