brut-js 0.0.9 → 0.0.11

package/package.json

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

package/specs/Form.spec.js

@@ -19,7 +19,75 @@ describe("<brut-form>", () => {
           <button>Save Ajaxily</button>
         </brut-ajax-submit>
       </form>
-    </brut-form>`).test("Works with ajax submissions to keep errors consistent", ({window,document,assert}) => {
+    </brut-form>
+  `).test("sets submitted-invalid on submit with invalid form + updates messages", ({window,document,assert}) => {
+
+    const brutForm         = document.querySelector("brut-form")
+    const form             = brutForm.querySelector("form")
+    const button           = form.querySelector("input[type=submit]")
+    const textFieldLabel   = form.querySelector("label:has(input[type=text])")
+    const numberFieldLabel = form.querySelector("label:has(input[type=number])")
+
+    let submitted  = false
+    let gotInvalid = false
+    let gotValid   = false
+
+    form.addEventListener("submit", (event) => {
+      event.preventDefault()
+      submitted = true
+    })
+    brutForm.addEventListener("brut:valid", () => {
+      gotValid = true
+    })
+    brutForm.addEventListener("brut:invalid", () => {
+      gotInvalid = true
+    })
+    assert.equal(brutForm.getAttribute("submitted-invalid"),null)
+
+    button.click()
+
+    assert(!submitted)
+    assert(!gotValid)
+    assert(gotInvalid)
+    assert.equal(brutForm.getAttribute("submitted-invalid"),"")
+
+    let error = textFieldLabel.querySelector("brut-cv[key='general.cv.fe.valueMissing']")
+    assert(error)
+    error = numberFieldLabel.querySelector("brut-cv[key='general.cv.fe.valueMissing']")
+    assert(error)
+
+    const textField = textFieldLabel.querySelector("input")
+    textField.value = "Some Value"
+    textField.dispatchEvent(new window.Event("input"))
+
+    submitted       = false
+    gotInvalid      = false
+    gotValid        = false
+
+    button.click()
+
+    assert(!submitted)
+    assert(!gotValid)
+    assert(gotInvalid)
+    assert.equal(brutForm.getAttribute("submitted-invalid"),"")
+
+    error = textFieldLabel.querySelector("brut-cv[key='general.cv.fe.valueMissing']")
+    assert(!error)
+    error = numberFieldLabel.querySelector("brut-cv[key='general.cv.fe.valueMissing']")
+    assert(error)
+
+    const numberField = numberFieldLabel.querySelector("input")
+    numberField.value = "99"
+    numberField.dispatchEvent(new window.Event("input"))
+
+    submitted       = false
+    gotInvalid      = false
+    gotValid        = false
+
+    button.click()
+
+    assert(submitted)
+  }).test("Works with ajax submissions to keep errors consistent", ({window,document,assert}) => {
 
     const brutForm         = document.querySelector("brut-form")
     const form             = brutForm.querySelector("form")
@@ -104,6 +172,7 @@ describe("<brut-form>", () => {
     assert(!submitted)
     assert(!gotValid)
     assert(gotInvalid)
+    assert.equal(brutForm.getAttribute("submitted-invalid"),"")
 
     let error = brutForm.querySelector("brut-cv[input-name='text'][key='general.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.
@@ -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";
@@ -1022,8 +1060,12 @@
   var Form = class extends BaseCustomElement_default {
     static tagName = "brut-form";
     static observedAttributes = [
+      "submitted-invalid",
       "show-warnings"
     ];
+    #markFormSubmittedInvalid = (event) => {
+      this.setAttribute("submitted-invalid", "");
+    };
     #updateValidity = (event) => {
       this.#updateErrorMessages(event);
     };
@@ -1033,6 +1075,8 @@
     #sendInvalid = () => {
       this.dispatchEvent(new CustomEvent("brut:invalid"));
     };
+    submittedInvalidChangedCallback() {
+    }
     update() {
       const forms = this.querySelectorAll("form");
       if (forms.length == 0) {
@@ -1042,6 +1086,7 @@
       forms.forEach((form2) => {
         Array.from(form2.elements).forEach((formElement) => {
           formElement.addEventListener("invalid", this.#updateValidity);
+          formElement.addEventListener("invalid", this.#markFormSubmittedInvalid);
           formElement.addEventListener("input", this.#updateValidity);
         });
         form2.querySelectorAll(AjaxSubmit_default.tagName).forEach((ajaxSubmits) => {
@@ -1094,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";
@@ -1212,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 {
@@ -1353,7 +1529,8 @@
     ConstraintViolationMessage_default,
     Tabs_default,
     LocaleDetection_default,
-    Autosubmit_default
+    Autosubmit_default,
+    Tracing_default
   );
 
   // src/appForTestingOnly.js